+ JavaScript の質問用スレッド vol.130 + [無断転載禁止]©2ch.net
■ このスレッドは過去ログ倉庫に格納されています
JavaScript を自ら学ぶ人のための質問スレッドです。
>>2-6のテンプレを読んだ上で質問してください。次スレは>>950が>>2のテンプレ案(本スレで改善案があれば考慮)を元に立ててください
■規則/推奨ルール
・メール欄を空欄にし、名前にレス番を入れることを強く推奨(なりすまし防止)
・質問内容は具体的に。言葉だけでなく、出来る限り再現性を確認したサンプルコードの掲示。
・質問テンプレートの利用推奨。
・質問への「答え」だけでなく「意見」を出しても良い。
■禁止行為
・丸投げ質問
・迷惑スクリプトの質問
・オレオレ用語の使用(一般的な用語を使用する事)
・煽り、批判等の他人を不快にさせる行為(批判の代わりに「AよりBが良い」のような代案を出す事)
・回答者同士のレスは原則禁止(>>6を参照)
・ライブラリの話題の投稿(>>6を参照)
■質問テンプレート
【環境】OS, ブラウザをバージョンと共に記入してください。(ex: IE8, Firefox4)
【何をしたのか】何をしたら問題の現象が発生するのか。再現手順を具体的に書いてください。
【エラーメッセージ】エラーメッセージがあれば正確に書き写してください。(Windows なら「コピット」を活用)
【期待する結果】最終的にどういう結果を望んでいるのか、を書いてください。
【サンプルコード】現象を再現可能な最小限のコードを書いてください。
1レスに収まらないならコード投稿サイトを利用してください。
http://jsdo.it/ http://jsbin.com/ http://jsfiddle.net/ http://ideone.com/ select要素の選択アイテムをjqueryで変更し、
設定しておいたonchangeイベントを発火させるにはどうすればいいのでしょうか? Reactの内部の仕様はともかく自作のタグが作れる感覚は楽しい。
どっちかというとreduxの理解のほうが学習コスト高め。 自作のタグなんてstylesheet書くだけでいいんやで google保守大変そうだな
元ソースも相当汚いだろあれ Workletも揃い始めてきたし、メニーコアの時代はまだ遠いけど
ゆくゆくは要素毎にレイアウトとペイントを数十のコアで分担するようになるだろうな
だから今の仮想DOMフレームワークにしても、そこのところ混み合っていないものを選んで慣れておいたほうが良い vueとかreactってShadow DOMを使ってるわけじゃないんですね Shadow DOMは例えば配布するようなコンポーネントを作る際
使われる環境のCSSなど変に影響されることを防ごうという趣旨のものだからね
HTMLを部品として扱う際のカプセル化の方法だから >>334
> ゆくゆくは要素毎にレイアウトとペイントを数十のコアで分担するようになるだろうな
要素毎に何の処理をしてるっていうんだい?
要素なんて殆どは動きが何もないただの絵だろう? let a = 100;
let a = 200;
だとエラーになるのに
let a = 100;
if (1){
let a = 200;
}
だとエラーにならないのは何故ですか? letはブロックスコープになるものだったのですね
ありがとうございました mdnみるとfirefoxはshadow domに対応してないって書いてあるけど
何で対応してないの? >>341
何でといわれてもね
それを知って、あなたがFirefoxの開発に関わって実装してくれるとか、前向きな方向に発展するの?
https://caniuse.com/#search=Shadow%20DOM >>342
理由次第では、発展するかもしれないですね。
だから理由を聞いてるのよ? >>343
あなたが発展にどう貢献するのか、見えてこないんだけどな
「FirefoxがShadow DOMを実装することは当分なさそうなので覚えるのは止めます」とかでないことを祈るよ
理由は中の人以外に知りようがないので、下記URLで問い合わせるか、フォーラムの情報を探してみるといいと思うよ
https://www.mozilla.org/en-US/contact/ 単にそこまで手が回らないから
やろうとはしてる
https://bugzilla.mozilla.org/show_bug.cgi?id=1205323
今のMozillaをかつてのWebの発展させてきた存在と同一視しちゃだめ
Firefox OS始めたり、ブラウザのバージョニング間隔を変更したりしてた頃は絶好調だったし、asm.jsの頃まではまだ良かった。
その頃はまだ新機能試そうと思えば、ChとFx両方使う必要があって、しかも少しFxの方が比率が高かった
でも今のMozillaやFxは新標準についていくのが精一杯で完全に後手後手に回ってる状態
Web APIじゃなくてESだけでみてもそうなんだから、落ちぶれようが分かる Web Components v1は一応主要ブラウザーベンダーの合意が取れてるので、実装速度に違いはあるけど全部対応されるはず。待つしかない >>344
「知りません。中の人に聞いてください」って
言うだけなのに、なんでそんなにお前えらそうなんだ? 対してスキルがないやつほど中身が薄っぺらで偉そうの法則 Codecademyの読み方はコーデカデミーで合っていますか? javascriptで動的に追加したliを「クリックしたら削除」したく検索したら下のコードが引用できそうだと思ったのですが
これをネイティブjavascriptでどう書いたらいいかわからないので教えてほしいです
$('body').on('click', '#list li', function(e){
処理;
}); >>353
document.querySelectorAll('#list li').addEventListener('click', function { 処理 }, false); attachEventのことも思い出してあげて下さい >>354
メモしておきます!ありがとうございます addEventListenerやxhrの第三引数指定する人ってどう言う考えしてるんだろう?
特にaddのは関数定義の後に記述する事にもなりがちだし不格好なだけと思うけど。 useCapture Optional
捕捉フェーズを使用する場合は、 useCapture に true を指定します。
捕捉フェーズの開始後、指定されたタイプのイベントの全てが、まず、登録された listener に発送され、
その後、DOM ツリーにおいてその下に位置する任意の EventTarget に発送 されます。
ツリーをたどって上方へ浮上するイベントは、捕捉フェーズを用いるように指定されたリスナーを誘発することはありません。
詳細については、DOM Level 3 Events を参照してください。
この引数は、全てのブラウザで省略可能ではないことに注意してください。省略した場合、 useCapture は false となります。
~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~ >特にaddのは関数定義の後に記述する事にもなりがちだし不格好なだけと思うけど。
そもそもコールバック自体が不恰好であってこの感性は理解できない fancybox3のパーツを実走することなく本家のリンクのみで動かしてる場合に、
全画面中の透明なし、背景色の指定、はできないでしょうか?どなた教えてください。
<script type="text/javascript">
$("[data-fancybox]").fancybox({
オプション
}); {a:1, b: 2} のようなリテラルで
prototype のない object( Object.create(null) )を作る方法はないですか? 空を作った後にコピーすれば良いじゃん
var object = o => Object.assign(Object.create(null), o);
object({a:1, b: 2}); >>364
>Object.assign
知らなかった! ありがとう リテラルなら__proto__:null,を含めれば良いだけだけどな __proto__も知らない奴がassignも知らない奴に教えるスレ
もはや世紀末 ボタン1を押すとボタン2が出てきてボタン2を押すとボタン3が出てくる
という処理をinnerHTMLとaddEventListnerでやろうとしているのですが
ボタン2を押してもボタン3が出てきてくれなくて困っています
innerHTMLで出力したものがイベントターゲットになっていないからだと思うのですが、どうすれば解決できるでしょうか?
プログラムを書くのが初めてなので初歩的な質問だと思いますが、よろしくお願いします innerHTMLしたあとにaddEventListenerすればいいかと
むしろまだ存在していない(innerHTML前)要素にどうやってaddEventListenerしようとしたのか >>369
ボタンの一つ上の要素にaddEventListenerしevent.targetでクリックされた要素を取得し判別する clickイベントはwindowに対して1つだけでいい
あとはevent.targetで振り分け
というかボタン2とボタン3は元々ある状態にしておいて
スタイルのdisplay:noneをdisplay:blockなりに変更するだけでいいのでは >>369
要素が存在しない時にイベントを与えているからだろうなw
その辺りをチェック >>369
プログラムだけではないが、
HTML + CSS + JavaScriptの世界では
見た目はCSSで制御する
最初にボタンを3つ書く
<input class="btn" type="button" value="button1" >
<input class="btn" type="button" value="button2">
<input class="btn" type="button" value="button3">
見た目をCSSで制御(最初のボタン以外は非表示)にする
.btn + .btn {
display: none;
}
.btn.clicked + .btn {
display: inline;
}
ボタンが押されたら押されたいう情報(クラス)を自分自身に設定する
(JavaScriptはjQueryを使えば簡単に書ける)
$(document).on('click', '.btn', function() {
$(this).addClass('clicked');
});
実行サンプル https://jsfiddle.net/qz5fLy9y/
ちなみに押したら押されたという状態になって、その後変わらないものは
ラジオボタンを単独で用いれば表現できる。あとは見た目をCSSでボタン風にするだけ
つまりJavaScriptなしでもできるぞ
https://jsfiddle.net/qz5fLy9y/1/ addEventListenerではなくaddEventListnerしてるというオチに期待
エラーも見てないな 皆さんありがとうございます!
cssで隠しておくのと親要素から取得するの2つともで希望の動きができました
皆さんめっちゃ心強いです(*´ω`*) サンプルまで作ってもらって本当に感謝です
HTMLとCSSだけでもここまで動かせるなんて知りませんでした(;´Д`)
ちゅーかjsfiddleってサイト便利ですね
私が作ってる程度のものならatomよりこっちのが使い勝手いいかも(??????)?? jsdo.it で、HTML, CSS だけで、
ワニワニパニックを作った人を知らんのか?w HTML5ムーブメントを語る上で避けては通れない
CSSプログラミングを知らないとか教養がないと言われてもしようがないな
昔っからこのスレは知ったかが多かったが
今では知ったかもできないほんまもんの無知ばかりやな んなもん知っとるわ
あのお粗末なワニワニパニックを話に出したレベルの低さに対しての反応だろ
もっと教養を身につけた方がいいぞ 何が「知らんのか?w」だよ。
聞いてもねーのに糞しょうもない知識を自慢したいだけの馬鹿は黙ってろよ。 こいつ通勤中の赤信号にもいちいちキレてそうな奴だな windows版のchrome(バージョンは最新)で
SpeechSynthesisUtteranceの
rateを上げたら、再生出来ないばかりか、
ブラウザを再起動しないとその後再生できなくなる現象が出ています
自分だけでしょうか?
仕様によるとrateの最大値は10なので値は仕様の範囲内のはずなのですが
3にするとおかしくなります
(再生可能)
https://jsbin.com/wuteqewavo/edit?js,console
(rate=3、その後再生不可能)
https://jsbin.com/viriritali/edit?js,console >>387
自分もちょこちょこ試してるけど1年前からそんな感じだよ
そのAPIはセンシティブで上手くいくかはタイミングなんかにも影響する
OSやデバイスのシステムを借りててブラウザだけで完結してる範囲が少ないから
仕方がないのかもしれない
それでも最近は随分マシになった方
最初の頃はまともに動く確率のほうが低かった [ [1, 'c'], [2, 'a'], [3, 'b'], [4, 'a'], [5, 'c'] ]から重複を除いた abc だけを取り出すにはどうすればいいでしょうか? 1,2,3,4,5の数字のほうはどうでもいいのか? lodash便利だよ
https://jsfiddle.net/2etnxe05/
a = _.uniq(_.map(list, i => i[1]))
もしくは
https://jsfiddle.net/2etnxe05/1/
a = _.uniq(list.map(i => i[1]))
jQuery使ってるならこっちでも良いね
https://jsfiddle.net/2etnxe05/2/
$.unique(list.map(i => i[1])) nativeでも良いじゃん
list.map(a => a[1]).filter((v, i, arr) => arr.indexOf(v)==i)
Array.from(new Set(list.map(a => a[1]))) ぶっちゃけこれだけのためにlodash丸ごと使うことは絶対にありえない
その内部実装の関数1つだけ借りてくることはあっても そういう時に使いたいのが、これ、custom build
お客さんの要望に応じて必要な分だけをチョイスできる
オトクなパッケージ
https://lodash.com/custom-builds >>392
それ遅い。
https://jsfiddle.net/2etnxe05/4/
> list.map(a => a[1]).filter((v, i, arr) => arr.indexOf(v)==i)
lodashの3倍
> Array.from(new Set(list.map(a => a[1])))
lodashの6倍 配列の中のオブジェクトの中のプロパティ値の最大値をMath.max.applyで呼び出す書き方をご教授くださいm(_ _)m
配列はこんな感じです
var scoring=[
{'male':[1,0,0,0],'female':[10,5,3,0]},
{'male':[2,5,3,0],'female':[10,5,3,0]},
{'male':[0,0,0,0],'female':[10,5,3,0]}
]; >>396
> Math.max.applyで呼び出す
ってのが意味わからん。
スコアの配列を最大値に置き換えれば良いんか?
つまりこういうことか?
https://jsfiddle.net/a1p11fLt/
var scoring=[
{'male':[1,0,0,0],'female':[10,5,3,0]},
{'male':[2,5,3,0],'female':[10,5,3,0]},
{'male':[0,0,0,0],'female':[10,5,3,0]}
];
var s = _.map(scoring, row => _.mapValues(row, (v,k) => _.max(v)))
console.table(s) あー、すまん Math.max.apply を使うんだったな。
https://jsfiddle.net/a1p11fLt/1/
var s = _.map(scoring, row => _.mapValues(row, (v,k) => Math.max.apply(null, v))) 余計なコード(変数)があったわ。訂正
https://jsfiddle.net/a1p11fLt/2/
var s = _.map(scoring, row => _.mapValues(row, v => _.max(v))) >>398
大変申し訳無いです、質問の内容に不足がありました(;´Д`)
上記の配列から変数を使って特定の値を呼び出し、それが所属する配列の中の最大値かどうかの判定をしたいのです。
変数を使って値を呼び出すところまではできています。
例えば2列目maleの3を呼び出した時、それは[2,5,3,0]の中で最大かどうか?を判定するために、最大値である5を取得したいです。
よろしくおねがいします。
それから初心者すぎて_.mapとかその他もろもろの表現が初見で頭が沸騰してしまってます。
せっかく書いていただいたのに申し訳ないですm(_ _)m >>400
ary = scoring[num][sex] と置けば
num = 1, sex = 'male' のとき
ary が [2,5,3,0] になる
その内最大を得るには
max = Math.max.apply(Math,ary) もしくは
max = Math.max(...ary) >>401
できました!
ありがとうございます(*´ω`*) >>394
そういう問題じゃ無いんだよね
3種類10箇所とかなら分かるけど、ただ一つ_を使うのは変だし
それだけのためにライブラリ管理コストかけるのもね
キリも無くなるし
既に利用してる可能性が結構あるjQueryは分かるけど、
_は単発の質問にはそぐわないね >>395
コードが短いのはいいことだけども速さ求めるなら
おとなしくforと連想配列でやったらはやいんちゃう >>388
まだ不安定なんですね
ありがとうございました JSONのデータ構造を変えてから
$.getJSONで取ったデータがおかしくなるという問題に悩まされていましたが
原因はキャッシュでした
GETは通常、パラメータが同じ場合に同じものが返ってくるものですが
データ構造を変えるなどの仕様的な変更が反映されないと困ります
解決方法として、パラメータにタイムスタンプを付加するという方法がありますが
これで毎回別のGETにすることで、
キャッシュが異様に増殖してしまうのではないか、という危惧があります
どうなのでしょうか? >>406
ブラウザのキャッシュ管理のことまで気にしなくていいとは思うが
やるなら.htaccess等でヘッダーいじれば色々出来る
キャッシュさせないよう設定するとか逆にキャッシュさせた上で毎回確認だけはして更新時のみデータ受信する等 クリックすると広告ページが新しいウィンドウで開くのを開かないようにjavascriptで制御したいんですが、
何かいい方法ないですかね?
window.openが実行された時に、すぐページを閉じるようなやつでもいいんですが、リファラは空だしどうしようかなと。
Google extensionで作ってます。 >>408
uBlock origin 使えばだいたい防げるだろ?
それで足りなければTampermonkeyを使えば良い >>409
こんなのあったんですね
ありがとうございます。
>>410
ありがとうございます
調べてみます。 Underscore は、ライブラリ全体をロードする必要があるけど、
Lodash は、使う関数だけを、include できる
ただ最近は、ES5/6 に実装している、関数も多い
ライブラリにある関数を自作するのは、
ホワイトボックステストも必要だし、品質も悪い >>407
そこまでコントロールできたのですか
ありがとうございます promiseは非同期処理を同期的に書く方法ですが
非同期処理を実際に同期的にするにはどういう方法がありますか? >>414
取り敢えず全ての非同期関数がpromiseを返すように設計しとけばasync awaitで同期的に書ける
あと問題があるのがobservableやasync iteratorに当たるものだが
これはトランスパイラを使うか、while(await)テクニックで乗り切る
ちょっと悩ましい所 >>415
ありがとうございます
順次調べていきます ぶっちゃけpromise理解できないから騙し騙しやってるわ ローカル変数って
内部的には関数のプロパティとして実現されているのでしょうか? >>416
概観しましたが、すごくすっきり書けていいですね
generatorで同期的に処理する方法も調べたのですが、
これは本来そのために作られた訳ではない機能をハック的に使ってる感じで
美しくないと感じましたが
それに比べるとasync/awaitはキレイだと思いました プロパティは、プロトタイプチェーンをさかのぼって探索されるけど、
ローカル変数は、さかのぼらない >>418
関数実行時やブロック文に入る度にそのコンテキストに紐付いたオブジェクトのようなもの
globalやwith文中では本当のオブジェクトが使われる 分割代入と変数宣言を同時に行うことは出来ませんか? let [ a, b ] = ary
みたいにできるよ firefoxがshadowdomに対応してないんで似たようなことがしたいんですが
いいアイディアありませんか?
勉強のためにやるのでフレームーワークなどは使いません それって死んでもFxで動かないと駄目なの?
Fxも1年以内に実装されるだろうから、そのときには動きますで良いじゃん ES2015ではundefinedの上書きが出来なくなったようですが
属性の有無を調べるメソッドなり関数なりが追加されないのは何故ですか? ■ このスレッドは過去ログ倉庫に格納されています