+ JavaScript の質問用スレッド vol.131 +
■ このスレッドは過去ログ倉庫に格納されています
JavaScript を自ら学ぶ人のための質問スレッドです。
次スレは>>950が(本スレで改善案があれば考慮して)立ててください
■規則/推奨ルール
・メール欄を空欄にし、名前にレス番を入れることを強く推奨(なりすまし防止)
・質問内容は具体的に。言葉だけでなく、出来る限り再現性を確認したサンプルコードの掲示。
・質問テンプレートの利用推奨。
・質問への「答え」だけでなく「意見」を出しても良い。
■禁止行為
・丸投げ質問
・迷惑スクリプトの質問
・オレオレ用語の使用(一般的な用語を使用する事)
・煽り、批判等の他人を不快にさせる行為(批判の代わりに「AよりBが良い」のような代案を出す事)
■質問テンプレート
【環境】OS, ブラウザをバージョンと共に記入してください。(ex: IE8, Firefox4)
【条件】期待する回答の条件を書いてください。(ex: jQuery不可, フレームワーク不可)
【何をしたのか】何をしたら問題の現象が発生するのか。再現手順を具体的に書いてください。
【エラーメッセージ】エラーメッセージがあれば正確に書き写してください。(Windows なら「コピット」を活用)
【期待する結果】最終的にどういう結果を望んでいるのか、を書いてください。
【サンプルコード】現象を再現可能な最小限のコードを書いてください。
1レスに収まらないならコード投稿サイトを利用してください。
http://jsdo.it/ http://jsbin.com/ http://jsfiddle.net/ http://ideone.com/
■回答者へ
・回答には多様性があります。他人の回答を尊重してください
・動作ブラウザや環境が限られる場合は、それを明記してください
・他人の回答を批判する代わりに、自分ならこう書くという例を示してください
・質問者がJavaScriptでなければ実現できないと勘違いしてるなら、その否定としてHTMLとCSSで実装しても良い
・他人の回答を見たくないのであれば、文句をつける代わりにNGにして見えないようにしてください。文句をつける＝荒らしです >>526
mousedown と touchstart 併記したら
safariのやつが２つとも反応しちゃうんですよ
this.id の件了解！きっとこの方が速いんですよね >>527
$('.slotBtn').on(clickEventType, socket.emit(this.id));
ってことですね
習慣でいたるところに… 例えばbuttonの中に生の文字と<img>があってbuttonにイベントリスナつけたとき >>530
それ動くの？
>>527で言ってるのは例えばこんな感じの記述
(function(){
document.getElementsByClassName('slotBtn')[0].addEventListener('mousedown', function(){
call.some.function();
}, false);
})(); >>534
関数そのものを渡さなきゃいけない
function(){}を渡すのはいいが、
socket.emit(this.id)ではsocket.emit(this.id)を実行した結果が渡される
って感じか？ >>533
やってないんで、やらんで良かった
コードさんきゅです、理解できた >>534
それだとその行にきた段階でリスナー登録じゃなく socket.emit() が実行される
もとのやつでいい そのうえ
画面のスクロールとかスクロールバー付き要素のスクロールとか
2本以上の指のタッチとか
アホかってほどいっぱい面倒なもんが出てくるからな ただ単にタッチを検出したいだけなら
touchstartとかでいいが
タッチを利用したカルーセルのような
インターフェースを作りたいのなら
自作するより使ったほうが楽
理由は>>539が書いているとおり >>515
自分も作るけど使い分けなくて便利だからPointer Events使ってる
来年にはFxとSafariでも使えそうな雰囲気だし
今はChromeとEdgeだけでもいいでしょ >>541
カルーセル作りたいなら、の意味がわからん touch, mouse を透過的に扱うのは、
Electron, Cordova, React などのフレームワーク
>>533
ECMA5 では、ブロックスコープが無かったから、
関数でスコープを作る >>544
内部でvarしない関数定義もしない場合、スコープ作る必要ある？ 前提知識として学ばないといけないことが多すぎ複雑すぎなのが嫌なのに
ライブラリの構造とか使い方とか
さらにさらにバージョンごとの差異とか
そんなん使ってられませんわ JSの仕組み自体はシンプル・イズ・ザ・ベストなのに >>543
> カルーセル作りたいなら、の意味がわからん
考えることがたくさんあるからだよ
要件次第だが
カルーセルで横スクロールする時、
縦スクロールしたらページはスクロールするか？とか
ピンチ、ピンチアウト機能と両立できるか？とか
スクロールはスムーズか？とか
（スムーズにするためのCSSの機能があるが使えない機種がある） カルーセルの基礎構造って
・操作に応じて横方向に画像が切り替わりループするスライド
・スライドを操作する「＜」「＞」ボタンや「□■□□」のようなナビゲーションを兼ねたボタン
これだけじゃないのか
touchendが使えればtouch*、でなきゃclickやmousedown、だけで普通にpure jsで書けね 初心者が失礼します
http://fast-uploader.com/transfer/7073696781713.jpg
このコードで28行目の関数の引数eventはクリックしたときに引き渡されると思うんですが何が引数として引き渡されているのでしょうか？
event.clientXとevent.clientYでそれぞれ左上から縦横の位置を示してるのはわかるんですが、
じゃぁ.clientXと.clientYをとったときのeventってなんなんだろうって疑問になります。
この引数はいったい何でいつどんな変数が入ってるのでしょうか？ イベントオブジェクトの一種、マウスイベントオブジェクト
clickされたときにブラウザがイベントオブジェクト作って引数eventとして引き渡してくれる
.clientXや.clientYはマウスイベントオブジェクトが持っているプロパティ
だからevent.clientXでマウスX座標が取れる
https://developer.mozilla.org/ja/docs/Web/API/MouseEvent/clientY >>542
pointer events って便利そうだけど
今、動作するのは chrome と edge だけってことですか？
作ってるサービスの対応ブラウザとしては、できるだけ多くを相手にしたいです。
自分が作ってる中で
押したらすぐ反応して欲しい部分は、プレイ画面中のボタンだけなんです
ある機械の状態をWebRTCでリアルタイムに流してて、ボタンはその機械を操作するものです
これスレと関係なかった >>554
なるほど、リスナーに引数を持つ関数を登録するとブラウザが自動で引数にイベントオブジェクトを入れてくれるんですね。
ありがとうございます。 スレ違だろうなぁ、でも他に
知見のある人のいるスレが見つけられない m_m
もう諦めてるんですが
画面サイズから video を90度回して縦方向いっぱいに計算して表示してるのですが
スマホ画面の上とか下に出てくるじゃまなやつのせいで動画が
ちっちゃくなってしまうのは、どうにもならないですか >>558 ありがとう！
これも、なんぞそれ！？
ってことで調べながらやってみてます
が、90度回してる影響かうまくいってないです 下で｢START｣ボタン押してもなにもおこらないんですがなぜでしょう?
エラーは出ません。
chromeです。
<div class="container operate">
<ul>
<li><button class="button" id="start" onclick="click()" >START</button></li>
</ul>
</div>
<script type="text/javascript" charset="utf-8" >
function click() {
window.alert("2");
}
</script> click()の関数名がまずいっぽいね
click1()に変えたら動いたよ そういうのもあるし、onclick属性とは
HTMLのonなんたらで処理呼び出すのやめなよ >>561
ありがとうございます!
>>562
最初は別ファイルからインポートしてたんですけど
はじめてスクリプト埋め込んだのでなんで動かないのかわからなかったので
とりあえず動かなくなる地点を探そうとして
順番に埋め込むところを移動させていました。 >>562
reactさんをバカにするのはやめるんだ >>565
細かい話をするとreactとJSXも関係ない。別にJSX使わなくても全部関数で書ける。
で、JSXで書いて、reactが生成する生DOM確認してみた？onclick属性使われてるよ。 >>566
reactとJSXは関係ない。
だからreactは持ち出してくるなって話なんだが？ >>567
根拠なくon*属性にハンドラ書くの否定するなという話なんだが？ reactがHTMLのon*使ってるかどうかはon*が良いか悪いかの指標にはならん |ヽ∧＿
ゝ ＿＿＼ やめなよ
||´・ω・`| ＞
/ ￣￣ ､ヽ __＿＿＿＿＿
└二⊃ |∪=| |─── ／
ヽ⊃ー/ノ ￣￣￣￣
￣｀´￣ こう言う文字列を作成して
var str ='文字列';
var func = '＜button onclick="func(￥'' + str + '￥')"＞実行＜/button＞';
funcをhtmlのページに埋め込みました。
そのhtmlを表示すると、文字列strが英数字なら問題ないのですが、文字列中にシングルクォーテーションとかダブルクォーテーション
が混じっているとエラーが出ます。
正しい解決方法を教えてください。 埋め込みました、て・・・document.writeしたりelement.innerHTMLに入れたりしてんだろ
なんでcreateElementしてaddEventListenerしてappendChildしないんですか >>577
もろもろエスパーするとこれはサーバーサイドテンプレート…
expressかなにかでやってる？ やっぱたぶんサーバーサイドテンプレートなんだろうな。
質問するのになんで隠すのか分からんが。
ほらよ>>573
出力確認のためのconsole.logもつけたから良く確認するように。
var str = 'こんにちは\'赤"ちゃん'; // 念のため言っとくがこの場合ここシングルクォートにエスケープ必要
console.log(str); // こんにちは'赤"ちゃん
str = str.replace(/'/g, "\\'"); // ブラウザJSのコンテキストでシングルクォートエスケープ処理
console.log(str); // こんにちは\'赤"ちゃん
str = str.replace(/"/g, '"'); // HTMLのコンテキストでダブルクォートエスケープ処理(文字参照に変換)
console.log(str); // こんにちは\'赤"ちゃん
var func = '<button onclick="alert(\'' + str + '\')">実行</button>';
console.log(func); // <button onclick="alert('こんにちは\'赤"ちゃん')">実行</button> あ、すまん確認のためfuncをalertに変えてたんだった。alertはfuncに置換してくれ babelって今は末尾再帰最適化をサポートしてくれないんですか？
せっかく気軽に再帰で開発できると思ったのに…… >>582
プラグインになっただけじゃねーの？
https://www.npmjs.com/package/babel-preset-optimized
This is a list of plugins this uses. Do note that by default, not all of these may run:
babel-plugin-minify-constant-folding
babel-plugin-loop-optimizer
babel-plugin-closure-elimination
babel-plugin-tailcall-optimization https://w3techs.com/technologies/overview/javascript_library/all
w3techsによると2017年1月の時点で71.9%のサイトが
JavaScriptのライブラリとしてjQueryを使用していることが判明したが
それから1年たった2018年1月現在、73.2%に1.4%も増えていることが判明した。
またAngularは0.5%、だがReactが伸びてきており0.5%
とAngularを逆転したことがわかる
だがjQueryには大幅なさをつけられており取って代わるのは
いつになるのか動向が注目される 軽く使えるDOM操作ライブラリってほとんどないから jqueryに大幅な差というよりangularやreactが木っ端なだけだろ 自前でwebサービス立ち上げてる会社以外reactもangularも出番ないんですもの。 自社でがっつりやるなら自社で組む手があるからなぁ
他所のポリシーに合わせる必要なくなる >>573
jQuery を使え
<button id="btn1">押して</button>
$('#btn1').click (function() {
// ここに処理を書く
console.log("クリックされた");
}); >>585
取って代わるてｗ
使われ方が全く違うだろ > 使われ方が全く違うだろ
ちゃんとした考え方できる人はそうわかるんだけどね。
今のところjQueryがなくなることはない。
jQueryの代替技術はない
だけど一部のjserどもが、jQueryはオワコン
これからはAngular、Reactやで！
jQuery使わなくて頑張ればコストがかかるだけでできる！
などと言い始めたからね。 jQueryがまだ下り坂になってないのは
この一年でシェアが更に増えたことからも明らかだよな >>592
addEventListenerとattachEventの違いの吸収のように
UA間で異なる仕様が少なくなっていくにつれて
jquery自体が不要になっていくんじゃないの
例えばアニメーションだって5年前とは比較にならんほどcss対応進んだし どっちかっていうとこれからはピュアなjavascript >>594
addEventListenerとonの違いを考えれば
jQuery優位になるんだよ。
今はaddEventListenerが優位な点も残っているが解決できる
でも逆にaddEventListenerはonの優位な点を解決することができない
onが優位な点
・onの方が文字数が少ない
・複数のイベントに対して一度にイベントを設定できる
・後から追加される要素に対しても働くイベントハンドラが簡単に書ける
addEventListenerが優位な点
・イベントハンドラの設定が速い（だが体感できるものではない）
・キャプチャフェーズにも対応できる（そもそもIE8非対応の機能。jQuery 4.0で対応予定）
https://github.com/jquery/jquery/wiki/jQuery-4.0-Event-Design
結局jQueryオブジェクト＝DOM要素のコレクションという仕組みが最強なんだわ
jQueryオブジェクトはjQuery独自のものだから標準にとらわれず自由にメソッドを追加できる >>595
> どっちかっていうとこれからはピュアなjavascript
ピュアなjavascriptがループとか条件分岐なしに
書けるようになればね・・・
結局、言語の設計方針レベルの問題だから
ループなしにセレクタに一致する要素群に対して
一括でイベントハンドラを設定できるようにはならんと思うよ >後から追加される要素に対しても
よくわからないんだが
適切にHTML構造作ってバブリング考えてリスナ組み立てればいいだけでないの >>598
jQueryだと
$('.class').on('click', function() { this はクリックされた要素 } );
これを
$(document).on('click', '.class', function() { this はクリックされた要素 } );
こう書き換えるだけでいい。
イベントハンドラの中身も書き換えなくて済む
これとまったく同じことをjQueryを使わずに書こうとしたら
ほんとうに大変だよ class名でイベントリスナ貼り付けるの好きだよねjquery使い >>600
IDでイベントハンドラを付ける意味が無いからね。 jQueryは動的ページと相性が良くて動的ページっていうのはある要素が条件によって
存在したりしなかったりするわけだけど、jQueryを使うといちいち要素が
存在しているかしていないかをチェックする必要がない
その動きはCSSと一緒。
CSSでも特定の要素が存在しなくてもエラーにならない
そして要素が1つであっても複数であっても、それを気にする必要がない。
まったく同じコードで処理できる。
同じことをDOM APIだけでやろうとするとループが必要になってしまう。
そのループを避けるため、ID指定で一つの要素だけ取得しようとするが
そもそもループが存在しないjQueryではID指定に拘る必要がない。 >これとまったく同じことをjQueryを使わずに書こうとしたら
>ほんとうに大変だよ
後から追加した要素のイベントを検出するのは、
JavaScriptで同じ事をやろうと思えば出来るんですか？
jQueryではどんな手法でやっているんですか？ そもそもそんなハッキーな状況に軽やかに対応しないといけないって言うのが理想的ではないんじゃないか
やっぱり中に何があるかわからんけど、取り敢えず外から操る、それを楽にしたいでは無くて
コンポーネント化に努める方向で気にしなくていい事を増やした方が良いだろう
グローバル変数は楽し小さなケースでは良いけど、やっぱり色々考えると推奨されないのと同じ >>603
まずイベントバブルを利用してdocumentにイベントハンドラを設定する
その後、発生したイベントの発生元が、指定したセレクタに一致するか比較する
そうすればできる。
最近のブラウザなら、指定したセレクタに一致するか比較するのは簡単に
できるようになっているらしいが、jQueryはそれができない時代から
独自で実装していた >>604
> そもそもそんなハッキーな状況に軽やかに対応しないといけないって言うのが理想的ではないんじゃないか
JavaScriptを使ったページで、要素が動的に増えたり減ったりするのは
よくあると思うけど？ >>604
> コンポーネント化に努める方向で気にしなくていい事を増やした方が良いだろう
そうそれ！ jQueryが得意な所
IDを使ってしまうとコンポーネント化とは逆の方向になってしまう。
コンポーネントというのは使いまわしできるもので、
同じコンポーネントが一つのページに複数存在したりするものだからね。
それがjQueryと相性がいい。
同じコンポーネントというのは同じクラスであるということ
クラスに対してイベントハンドラを設定することで
コンポーネントに対しての処理が書きやすくなる。
> グローバル変数は楽し小さなケースでは良いけど、やっぱり色々考えると推奨されないのと同じ
即時関数を使ってグローバル変数を無くすってのはよくあるけど、
jQueryを使うと即時関数を使わなくてもグローバル変数はなくなってしまう。
実際に書いてみればわかるがこんな感じになるから
$(".class").on('click', function() {
// ここはローカル変数
}); 結局、ここ数年のWeb界隈を見るに、既存のDOM構造の地位を脅かすようなモデルが現れてないからね
それらと相性がいいjQueryは、好みはともかく、現実的にはまだしばらくは覇権でしょう jQueryは設計センスが良すぎてとても真似できない
これとlodashであと10年戦う 懐かしいな。もう一年前になるのか。
jQueryはオワコン、下降傾向にあるって言ってたやつ
一年経って減るどころか1.4%も増えたで？
その増えた量はReactよりも多い
どんな気分？ｗ angularやreactとかは大規模複数人開発案件でないとメリットがデメリットを上回らないからjQueryはなくならないと思う。
jQueryにマウント取ってるreactファンボーイが頭おかしいだけ。
しかも攻撃理由がreact等のvirtualDOMとjQueryの生DOM操作は相性悪い→jQueryはオワコン だからな。最高に頭悪い。
飛行機ができたから電車オワコンと言ってるようなもの。
原爆できたから軍隊にナイフ要らないと言ってるようなもの。 >>607
直近の親要素にaddEventListenerすれば済むことでは
classをjsの判断に使ったらcssで他の箇所に容易に再利用できなくなる >イベントバブルを利用してdocumentに
とりあえずグローバル変数、とりあえずsingletonみたいな感じで気持ち悪い
最低限にまとめろよ jQueryの是非は置いておいても
angularもreactもJSXもダメすぎる、あんなものが覇権取れるわけない >>612
直近の親要素にaddEventListenerするだけだと、クリックされた要素をうまく取得できない
下記のHTMLで動的に増えるものがliだとして、そのliの中に更にspanなどが入っている場合
[click here]の部分をクリックすると期待するliが取得できない
<ul id="ul">
<li>list1 <span>[click here]</span></li>
<li>list2 <span>[click here]</span></li>
<li>list3 <span>[click here]</span></li>
</ul>
document.getElementById('ul').addEventListener('click', function(event) {
console.log(this); // ul
console.log(event.srcElement); // span
console.log(event.target); // span
console.log(event.currentTarget); // ul
})
jQueryだと大丈夫。実際にイベントハンドラを付けたulも
イベントハンドラで取得したいliも
実際にクリックされたspanも簡単に取得できる
$('#ul').on('click', 'li', function(event) {
console.log(this); // li
console.log(event.target); // span
console.log(event.currentTarget); // li
console.log(event.delegateTarget); // ul
}) >>612
> classをjsの判断に使ったらcssで他の箇所に容易に再利用できなくなる
なんで？ 再利用させたいならばjQueryプラグインになるだろうけど
jQueryプラグインは特定のクラスに結びつくものじゃない >>615
>spanなどが入っている場合
HTML構造がそうなってるならspanだったらparentNode拾ってくればいいだけでは
classを使う必要性がない spanじゃなくて、divの中にspanだったら
こんどはparentNodeのparentNodeを取ってくればいいだけ。
またその他の要素が入っていたら、頑張ってJavaScriptを
メンテナンスすればやれないことはない
気合と金と時間さえあれば歩いて九州から北海道だって行ける！ >>618
今はどれだけ簡単にできるかって話をしてるんだから
そこでparentNodeを取ってくればーと言った時点で、
簡単にはできないってことになるんだよ やっぱりjQueryのdelegate相当のことをやろうとしたら
素のDOM APIでは大変そうですね やっぱりjQuery良く出来てるわー
一年経って減るどころか増えてるからぐうの音もでないだろうね html構造 javascriptも使うしCSSも使う
class名 一般的にはCSSが使う
html構造変わったらjavascriptコードも変わるのが当たり前
class変わってもjavascriptコードが変わることはあまりない
javascriptでclassをトグル切り替えするとかその程度 >>620
1個ifが追加で入れば「簡単じゃない」「難しい」になるのかい？
逆に、デザイナがCSSいじるとき
javascriptが利用しているclass名に拘束される面倒さは「簡単じゃない」に繋がらないのかい
そういう話をしているんだけど再利用ならjQueryプラグインが云々で何を言いたいのかさっぱり > html構造変わったらjavascriptコードも変わるのが当たり前
そう、それがDOM APIの常識だった。
だけど、jQueryはそれを打ち破った。
なにせCSSと同じくセレクタを使って要素を絞り込むわけだから、
CSSと同じ効果が得られた
そして同じセレクタに同じデザインを適用するCSSと
同じセレクタに同じ振る舞いを持たせるjQueryという関係が出来上がった
考えてみれば、セレクタ＝コンポーネント、
同じコンポーネントが同じデザインとう振る舞いを持つのは当然ではないか
そして混沌としてHTMLとJavaScriptの世界に
汎用性がもたらされた 生DOMはいい加減自分を操作するために親を経由するとかそういうのやめてほしい
やるとしても適当に関数作って内部でやっとけばいいのに >>624
> 1個ifが追加で入れば「簡単じゃない」「難しい」になるのかい？
そうだよ。知らなかった？
複雑度っていうのは条件分岐一つで大きく膨れ上がる。
ifが1つ増えれば2倍、2つ組み合わさればなれば、2倍の2倍で4倍。
3つだと8倍。一つ増えるだけででテストしなければいけない場合は
指数関数的に増加する
if一つだから簡単だと思っているやつは
考えが浅いというわけさ ■ このスレッドは過去ログ倉庫に格納されています
