+ 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/ "use strict"; undefined = 1; // error!
はい >>291
違う
代入はできていないけど、
式の返り値は当然右辺の物を返す
例えばobj.setというセッターが合ったとして、
a = obj.set = 1 というのがあったら
obj.setの状態と関係なくaは1になるのが自然でしょ、
つまりx = yの式は例外が起きない限り必ずyを返す >>294
使い方が間違っている
Node.prototype.hasOwnProperty('cloneNode') >>296
列挙不可に設定されているから
Object.getOwnPropertyDescriptor(window,'SVGAnimatedAngle').enumerable //false >>300
なるほどそうことでしたか
列挙可と列挙不可の両方取得する方法ってないですかね？ Object.getOwnPropertyNames(target)
↓
Object.getOwnPropertyNames(target.__proto__)
↓
Object.getOwnPropertyNames(target.__proto__.__proto__) >>278
>new String('a');
まぎらわしいから、なるべく、文字列リテラルを使う jqueryで
複数の対象に同じイベントリスナーを付けるにはどうすればいいですか？ $関数の引き数に、複数の対象にマッチするセレクタを書けばいいだけ
jQueryはそもそも複数の対象に同じイベントリスナーをつけるもの。
対象が1個しかないとか、まったくない（0個）の場合もあるけれど、
それはたまたまそうなっただけで、コード的には複数の対象に
マッチしたと仮定して書くのが良い。 ありがとうございます
クラスを設定してonしました フレームワークとか使うとwindowオブジェクトが汚されてしまうんですが
汚された後から汚されてないwindowオブジェクトを取得する方法を教えてください 何のためにかによって方法は変わってくるが
iframeのcontentWindowを取ればいい virtual domっていうのは
const a = [
1,
2,
];
const e = [
document.createElement('div'),
document.createElement('div'),
];
e.textContent = a[0];
e.textContent = a[1];
document.body.appendChild(e);
というコードを用意して
何らかの形でa[1]を更新したらe[1]のtextContentを書き換えるって理解でいいですか？
reactが重いのはデータ毎にDOMをメモリに記録してるからですかね？ 同じディレクトリにあるjsonファイルを
JavaScriptから読み込むにはどうすればいいのでしょうか？ >>310
そんな単純ではない
多くの場合DOMと１：１で対応する様な独自ツリーを持っていて
その変更がある程度たまった時点で
必要最低限の変更をDOMに反映させることで
抽象化と同時にパフォーマンスを確保している
それが重いというのは使い方が間違っているか、
使い所が間違っているだけ (() => {
'use strict';
let i = 1;
const f = () => {
let i = 2; // Error - 'i' is already declared in the upper scope. (no-shadow)
i = 22;
console.log(i);
};
i = 11;
f();
console.log(i);
})();
eslintでチェックすると6行目でError - 'i' is already declared in the upper scope. (no-shadow)
が出るんですがこれはダメな書き方なんでしょうか？ jQuery みたいに、一々、DOM にアクセスしないから速い。
一々、DOM から、CSS クラスの状態を取得して、コーディングしなくてもよい
ただし、速いと言うことは、メモリを大量に使う。
ブラウザの状態を、自分のメモリ内に持つため
常に、速さ・メモリ使用量は、反比例する >>315
それは、そういうルールなんだろ
eslint のルール一覧表でも見れば？
自分で、好きなルールも設定できるだろうし
君や会社・使うツール、次第 メモリ1GBの環境でreact使われているサイト開くと重い
特にqiitaのトップページ >>315
文法的に問題はないが、例えばlet i = 2; を記述し忘れたとしても動いてしまって二回22が出力されてしまうだろ？
そういった事を防ぐために同じ変数を使わないようにしようって事
オプションで文法的に間違いではないならエラー出ないようにも出来るし全部許可してしまうことも出来る 指定した要素の文字列を選択状態にするにはどうしたらいいですか？
フォーム部品はjqueryでselect()すればいいですが
普通のdivの中の文字列を選択したいです >>320
createRange()でレンジを作って
selectNodeContents()にdivを放り込んでレンジの範囲を決めて
getSelection()でセレクションオブジェクト作って
addRange()でさっき作ったレンジをどーん！ >>316
DOM操作をしないから速いと言ったほうが正確だろ
DOM操作をするのはjQueryだけではない
通常のブラウザのDOM APIを使ってもDOM操作になる。
>>310
一般的にブラウザのDOM APIというのは遅い。（jQuery関係なく）
もちろんReactでも最終的にはブラウザのDOM APIを呼び出すのだが、
ブラウザのDOM APIは遅いので必要最小限の呼び出し回数になるようになっている。
というのは内部の仕組み
ブラウザのDOM APIは知っての通り機能貧弱でデータバインディングなどの機能がない。
また仕様が決まってるから、拡張することもできない。
Virtual DOMを使うことで、ブラウザのDOMの制限に縛られない
独自機能のDOMを作ることができる。イベントハンドラの拡張や
データバインディングなどの機能も組み混むことができる。
データ的にはJavaScriptのデータだからブラウザ無くてもVirtual DOMを使うことができるし
ブラウザいらないのでテストも容易になる。
だけどVirtual DOMの段階ではただのデータなのでそれをブラウザのDOMに反映する必要がある。
その時、ブラウザの表示内容を全部クリアして遅いDOM APIを使ってレンダリングするのは遅くなるから
差分だけを反映させましょう。というのが内部の仕組み
だけどDOM APIは遅いが、そんなにDOM APIの呼び出し回数が多くないようなサイトの場合は
速いというより遅くならない仕組みと言っても言いすぎじゃないと思う（ただしメモリは食うから重くなる）
Virtual DOMを使うということはブラウザのDOM APIを使わないということだから学習コストは高い。
これからは、そもそもDOM APIを呼び出す必要がないサイトはjQuery
学習コストを払ってもReact（や他フレームワーク）を使う理由があればフレームワークの
二極化になると思う。どちらにしろDOM APIを直接呼びだす時代は終わったかな。 Virtual DOMでもDOM API使っているのでは？
Virtual DOMというのはライブラリであってそういう仕様があるわけじゃないでしょ > Virtual DOMを使うということはブラウザのDOM APIを使わないということだから学習コストは高い。
この部分はプログラマがという意味
プログラマがReactなどを使ってVirtual DOMを使うということは
ブラウザのDOM APIを使ったプログラミングをしないということである。
要はReactなどを使えば document.getElementById とか
使わなくなるってことよ。 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も知らない奴に教えるスレ
もはや世紀末 ボタン１を押すとボタン２が出てきてボタン２を押すとボタン３が出てくる
という処理をinnerHTMLとaddEventListnerでやろうとしているのですが
ボタン２を押してもボタン３が出てきてくれなくて困っています
innerHTMLで出力したものがイベントターゲットになっていないからだと思うのですが、どうすれば解決できるでしょうか？
プログラムを書くのが初めてなので初歩的な質問だと思いますが、よろしくお願いします innerHTMLしたあとにaddEventListenerすればいいかと
むしろまだ存在していない(innerHTML前)要素にどうやってaddEventListenerしようとしたのか >>369
ボタンの一つ上の要素にaddEventListenerしevent.targetでクリックされた要素を取得し判別する clickイベントはwindowに対して1つだけでいい
あとはevent.targetで振り分け
というかボタン2とボタン3は元々ある状態にしておいて
スタイルのdisplay:noneをdisplay:blockなりに変更するだけでいいのでは >>369
要素が存在しない時にイベントを与えているからだろうなｗ
その辺りをチェック >>369
プログラムだけではないが、
HTML + CSS + JavaScriptの世界では
見た目はCSSで制御する
最初にボタンを３つ書く
<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で隠しておくのと親要素から取得するの２つともで希望の動きができました
皆さんめっちゃ心強いです(*´ω｀*) サンプルまで作ってもらって本当に感謝です
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
自分もちょこちょこ試してるけど１年前からそんな感じだよ
その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丸ごと使うことは絶対にありえない
その内部実装の関数１つだけ借りてくることはあっても そういう時に使いたいのが、これ、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]}
]; ■ このスレッドは過去ログ倉庫に格納されています
