JavaScript の質問用スレッド vol.126
!extend:checked:vvvvvv:1000:512
JavaScript を自ら学ぶ人のための質問スレッドです。
>>2-5のテンプレを読んだ上で質問してください。次スレは>>950が>>2の「次スレの立て方」を元に立ててください
■質問を書く上で
(1) 煽り、コード制作依頼等、人を不快にさせる投稿はご遠慮下さい。公序良俗を守った応対を心がけてください。
(2) 他の人に迷惑をかけるスクリプトの質問はご遠慮ください。
(ブラクラ、[戻る], [閉じる], [クリック] の妨害、画面占有など)
(3) 質問者及び議論を行う人はメール欄を空欄にし、名前にレス番を入れることを強く推奨します。回答者はなりすましを判断できませんので、なりすましが現れても自己責任となります。
(4) 常に自発的に調べる心構えを持ってください。
具体的には「自分で調べてから質問する」「回答をもらってわからない単語があればGoogle検索してみる」など。
わからない内容を代わりに調べてくれる回答者をお望みの方は余所で質問してください。
(5) 出来るだけ一般的な用語を使用してください。脳内オレオレ用語は混乱の元です。
(6) 出来るだけサンプルコードを掲示してください。言葉による説明は行き違いが生まれる場合があります。
※必ず「問題の事象が再現されること」を確認してください。
必要な部分だけ切り出したつもりで現象が再現できていなかったケアレスミスがしばしば見られます。
(7) サンプルコードに HTML が含まれる場合は http://validator.w3.org/ で [Check] してみてください。
(8) 質問を具体的かつ詳細に書くと回答を得られやすいです。>>2の質問テンプレートを活用してみてください。
(9) ライブラリ関連の質問は禁止です。関連スレにあるライブラリ質問スレで質問して下さい。
(10) 時にはあなたが望む「答え」だけでなく、「意見」などが寄せられる場合もあります。
■前スレ
JavaScript の質問用スレッド vol.125
https://mevius.5ch.net/test/read.cgi/tech/1659855460/
VIPQ2_EXTDAT: checked:vvvvvv:1000:512:: EXT was configured LISP→Scheme→Javascriptという歴史的経緯があるのでそこから理解すると判りやすいかも
コードはLISPにとってはただのリストというデータ表現でしかなかったのでコードを変数に代入するというのはとても自然な事だった
Schemeでレキシカルスコープが定義され一般的なクロージャの形になった
括弧だらけの構文は一般受けしないのでCっぽい構文のJavascriptが生まれた
ざっくり書けばこういうわけです 挙がってる各言語を知ってる人はなるほどと思うかもしれないけど
そうでないならただの遠回りな気が >>39-41は代入できますって以上の説明はできてないし
ショックを受けた38が知りたいのはそういう事じゃないんだろう
Coders at WorkによればJavaacript設計者のブレンダン・アイクはSICPとSchemeの崇拝者で、
最初のアイデアはNetscapeブラウザにSchemeを持ち込むことだったとの事だよ
まずはSICPでも読むといいんじゃないの 別に関数を変数に代入できるのはJavaScriptが初とか唯一ってわけじゃないからそこを掘り下げてもね >>47-48
起源というかね、こういうのは歴史的経緯を辿って理解した方が判りやすいという話よ
君らのつまらんレスを読むよりはずっとね
Javascriptでやってる事は関数のポインタとはわけが違うんだから 歴史を追いかけられるくらい論理的に文章組み立ててくれないか？ >Javascriptでやってる事は関数のポインタとはわけが違うんだから
LISPが違うのはわかるけどJavaScriptは関数ポインタとそんなに違うんだっけ？ >>49
賛同されなかったからつまらんレスとか言い出すのは大人げないよ >>52
だいぶ違うぞ
クロージャって言葉知ってる？
定義された場所のローカル変数を参照できるの
そしてローカル変数がクロージャによってキャプチャされたら
その変数はクロージャが死なない限りずっと保持される
これは関数ポインタとは訳が違う
そしてそれこそがscheme信者のアイクが取り入れたかったもの
クロージャじゃないなら関数ポインタと大して変わらんっちゃ変わらん >>54
関数がクロージャを形成するかどうかと
関数を受け渡すときに関数へのポインタを使ってるかどうかは直交した別の問題
実際どのJavaScriptエンジンも関数へのポインタを使って変数への代入や関数の受け渡しを実現している
C言語はクロージャをサポートしないのでC言語の関数ポインタを使ってもクロージャにはならないのは当たり前
もう少し言えば関数を受け渡し可能にするためのスコープ解決の仕組み/ルールと受け渡す際に関数へのポインタを使ってるかどうかは別の問題 別スレで見かけたトンデモ記事書いてる人だと思うけどレキシカルスコープの話と第一級関数の話とレキシカルスコープを使ったクロージャによって第一級関数を実現する話を混同してるんじゃないか
Schemeはレキシカルスコープを使ったクロージャという考え方を広く普及させた言語ではあるがレキシカルスコープや第一級関数はScheme以前の昔から実現されてたものだし
レキシカルスコープを使ったクロージャもScheme以前の昔からあった考え方
Schemeが初めてレキシカルスコープを定義したかのように書くのはやめよう >>56
ちょっと指摘させてもらうと
誰も起源の話なんてしてないよ >>56
いや別に起源とかはどうでも良くて関数ポインタとは違うよって話をしてるだけなんだけど >>57
>>43がしてるでしょ
この人同じように間違ったことをあちこちで書いてるから指摘しただけ 彼は命題論理が理解できなくて、120年前の古文書まで読み返して、それでも分からなくて200年前の哲学書まで遡った結果、今でも命題論理が分かってないって人間だから、彼の歴史的経緯を遡れば理解しやすくなるって主張は実は彼自身によって反証されてたりする >>38 が分かりやすかったかどうか答えてくれれば解決だな おっIP同じやし38本人やん
まあそうだよな。あの説明でわかりやすく人間なんておらんやろ クロージャは第一級市民関数。
関数外のローカル変数などの文脈を取り込む。
つまり、スコープがゆるい
一方、Ruby の関数はスコープがきつくて、
関数外のローカル変数を通さないので、第一級関数ではない。
ただし、ブロックはブロック外のローカル変数を通すから、クロージャ
他に、レシーバーとメソッドを持ち運ぶ、メソッドオブジェクトもある >>38,62
何がどうわからないのか、を詳しく説明してくれ。
具体的なところがさっぱり分からん。 そりゃそもそもLISPやSchemeを全く知らない人だったんでしょ
分かりやすくなる要素なんて1ミリもないわな struct Closure {
struct Env env;
struct Function func;
};
Closureの最もシンプルな実装
Envはキャプチャしたローカル変数を保持する環境
Functionは関数ポインタやらを保持してるオブジェクトだと思ってくれ
たったこれだけのことに過ぎない
関数ポインタにenvが追加されただけのものだ クロージャやレキシカルスコープがどうやって実現されてるかという質問なら[[Environment]]のことを教えてあげるのはいいと思うけど
そういう話は誰もしてないからねぇ 結局のところ>>38の問題って関数は変数に代入できないものだっていう固定観念を他の言語に持ち込んでるところだと思う
プログラミング言語なんて所詮ヒトがそれぞれの都合で作ったものであって言語が違えば考え方や常識も違う
そこを理解して他の言語の固定観念を持ち込まないようにしないとこの先もしっくりこないこと、受け入れられないことだらけだろう 関数を変数に直接代入できないCの系譜の言語が最も広く普及してるから
そういう言語をやってきた人が関数を変数に直接代入できる言語に初めて接したら>>38のように驚くのは極々自然のこと
何が固定観念なのかなんてそれが覆るまで分からないんだから固定観念を持ち込むなとか言っても何の役にも立たないよ 今回のことで固定観念だったと気づければそれでいいと思うよ
そうすれば次からは疑ってかかることができるわけだし 糞長い式が真値のときだけ変数に代入したくて
if (糞長い式) {
X = 糞長い式
}
と書いてるんですが糞長い式を一度で済ますにはどうしたらいいですか Y = 糞長い式
if (Y) {
X = Y
} X = 糞長い式 || X;
わかりやすい>>75でいいと思うわ カルノー図やクワイン・マクラスキー法で書けないほど複雑だと
どうにもならない
if else if else にうまく展開するか
switch 文をうまく使うとかかなあ 質問させていただきます。
タグの属性onclick等で設定したイベント処理では
処理側の関数ではeventオブジェクトを参照出来ないのでしょうか？
色々探してるのですが見つけられなくて・・・よろしくお願い致します。 >>79
onclick属性のイコールの右側にある値は無名関数をそのままラップしたもので、eventオブジェクトはその関数の第一引数に渡される
つまり<タグ onclick="func(arguments[0]);">とすれば取得できる >>79
引数で渡されてくるけど？
HTMLのタグの中に書く事例では意味も解らずその引数を省略しているのが多い
それより、今どきはHTMLと分離した、こっちの書き方がおすすめ
https://developer.mozilla.org/ja/docs/Web/API/Element/click_event >>79
onclick属性値の中でもeventは使える。
<p onclick="console.log(event);">
ところで、「処理側の関数」とは？ ブラウザの開発者ツールにあるデバッガをつかえば気づける
止めたところの環境が丸見えになるから 例えば、jQuery なら、これで5つのキーのkeydown をキャッチできる
$( function ( ) {
$( 'body' ).keydown ( function( e ) {
switch( e.key ) {
// 32:空白、37:←、38:↑、39:→、40:↓
case " " :
case "ArrowLeft" :
case "ArrowRight" :
case "ArrowUp" :
case "ArrowDown" : console.log( e.key );
}
} )
} ); <button onclick="hoge(this)">ってやると意図しない動きすることあるからルールで禁止してるところもあるよね 子要素は含まないようにelementを取得するにはどうすればいいですか？
これだとテーブルの中のフォームをスライドさせてもalertが表示されてしまいます。
子要素は含まないテーブルのみのelementを取得することはできますか？
<table style="width:500px;height:300px;background:#ffff00" id="aaa">
<tr><td><input type="range" style="width:inherit"></td></tr>
</table>
<スクリプト>
const elm = document.getElementById("aaa");
elm.addEventListener(
"mousedown",
function(e){alert("www");}
);
</スクリプト> 何をやりたいのかがわからない説明
とりあえずプログラムを意識せずに
やりたいことの要件を日本語でよろしく
function(e){
// input要素以外をクリックした場合の処理
if (e.target.tagName !== 'INPUT') {
alert("www");
}
} >>87
子要素を除外したelementを取得したいってことっす
>>88
ありがとうございます試してみます 先ほどは手元にソースコードがなかったので即席で質問してしまいました。
やりたいことはテーブル部分でタッチムーブしたときブラウザのスクロールを禁止にしたいのですが、
テーブルにあるスライダーまでロックされて動かせないようになってしまうので、
スライダーを除外したテーブル部分のelementだけ取得できれば上手くできるのでは？と思ったから先ほどのような質問をしてしまいました。
ようするにブラウザのスクロール禁止にするけどスライダーは動かせるようにしたいんです。
<table style="width:500px;height:300px;background:#ffff00" id="aaa">
<tr><td><input type="range" step="1" min="0" max="10" value="1"></td></tr>
</table>
<スクリプト>
const elm = document.getElementById("aaa");
elm.addEventListener(
"touchmove",
function(e){
e.preventDefault(); //ブラウザのスクロールを禁止にする
}
);
</スクリプト> >>91
preventDefault()をstopPropagation()に変えるだけでいいかもしれない
この場合は多分preventDefault()はいらない clickやmousedownに仕込む話したど思ったのでバブリングを指摘したけれど
スマホの場合にスライダー操作でスクロールしちゃうのを止めたい場合の話なら別問題
スクロールはブラウザ側の仕組みでDOMのイベントバブリングを止めてもダメ
それとターブルじゃなくて、スライダーをtouchmoveしたときにスクロールを止めたいのじゃないですか
要件としては
スライダーのtouchstartでブラウザのスクロール機能を無効にして
スライダーのtouchendでブラウザのスクロール機能を有効に戻す
スクロールの有効・無効は、スクロール要素のcssのスタイルで制御できるので、JavaScriptでstyle要素のoverflowYまたはoverflowXを'hidden'または'auto'と値を切り替える >>93
ありがとうございます。
スライダーのelementにe.stopPropagation()をしたらスライダーを動かせるようになりました
>>94
ありがとうございます。試してみます。 WebフロントエンドでのJavaScriptを勉強中です
「jQueryでできることは素のJSでもできるのがほとんどになったから、jQuery不要」という話しが出てきますが、
エレメントの操作などで、素のJSだと記述する文字が長く、jQueryだとすごく短く書けるので、それだけでも十分便利と感じています。
document.querySelector('selector')
⇒ $('selector')
jQuery不要の場合、効率良く書くために代わりに何を使っているのか気になります。
大型のフレームワークとかでしょうか？フレームワーク使うと、ここのエレメントの参照・操作などはもはや不要になるのでしょうか？ jQueryの技術覚えてもjQueryにしか使えない。素のJS技術はどんなフレームワーク使っても役に立つ >>99
コード補完機能（任意のスニペット呼び出しを含む）のある現代のエディタではその全てをキータイプする必要は無いし、どうしても短く書きたいならショートハンドを定義すればいい
たとえば、5ch互換掲示板ビューアであるブラウザ拡張機能「read.crx 2」では、同拡張機能の共同メンテナの方が作成したjQueryライク（互換ではない）なショートハンドライブラリ「shortQuery.js」が使われてる（だいぶ前にいわゆる「脱jQuery」のお供として導入されたハズ）
なんにせよ、初心者が今からjQueryを学ぶのは悪手 >>99
その通り
ReactやVueに代表されるような昨今のフレームワークは開発者がDOMを直接操作しない そう思ってるとこんなん当然知ってますよねみたいなノリでevent処理とかrefとか出て詰むゾ >>99
jQueryの現在はHPフロントエンジニアさんが
抱負なライブラリでHPに花をそえるために使っているだけ
ウェブアプリ屋さんはjQueryが邪魔くさい時があるので使わない
どの分野を目指すのかが決まっているなら
その分野で何が主流なのかを見極めたほうがいい 動的に作られる特定の要素にだけイベント追加するのがラク
jQueryがバニラJSに勝ってる唯一の点だけど、そういう処理を入れるくらいDOMの操作使ったアプリ作るなら他のフレームワークのほうが良いだろう ゆうて古から続くjqueryの資産はいたる所にあるから、読めることくらいは出来ないとな
難しいもんではないんだし >>106
バニラでも祖先ノードでmatches(selectors)を使えば対応可能なので、それほどjQueryに優位性はない気がする。
それから、jQueryはバブリングフェースのみ対応という弱点がある。
バブリングしないイベントタイプに関してはaddEventListener()に優位性がある。 他から持ってきたコードが指すjQueryが最近のじゃなくて
だれが互換性担保するのってのが一番困る
jQueryを直接つかう分には検証できるけど
依存しているライブラリは採用せんでほしい jQuery使いの人は行き当たりばったりな人が多い
jQueryライブラリファイルの読み込みが沢山あってなんじゃこりゃみたいな jQueryが出た頃はSelectors APIもなかったからな
行き当たりばったりというより昔の標準APIが貧弱でライブラリに頼るしかなかった jQuery は短く書けるので、ちょっとしたデモには良い。
でも、React, Vue.js では使わない
Bootstrap も、5 からは使わない。
popper.js に変わった >>110
しかもバージョンがところどころ違ったり読込先や仕方が違ったりする >>99
■jQueryの良さは健在だが……
機能のある程度はES2015で代替出来るが
jQueryの良さは健在、そこはお前さんの言ってる通り
それとは全く別の話
手続き型的な手法でDOMを触ってるのが前時代的
■DOMを触るのが不味い理由
DOM作り直しは要素の改ざんな訳だ
DOMを更新するためには、探索して選択、それを作り変えるの2ステップがあるけど
別の機能がDOMを消したり書き換えたら
見つけられなくてエラー出るかも知れないよね？
選択できても改ざんされてて加工出来ずにエラー吐くかも知れないよね？
担保するのは全て貴方の目視テスト
10機能作ったら10x9の90通りのマトリックステスト作ってね
このように機能を作る度にnの2乗みたいなテストを目視でさせられる
全部で100機能作りましょうとかなるとありえん無理
■代替はJSフレームワーク
HTML作るテンプレートエンジンでsmartyやBlade、pugとか色々あるけど
あんな感じでDOMを生成する何かを用意しておいて
JS内で変数が変更されたのを検知して、勝手に新しいDOMツリーを作り直して嵌め込んでくれよって思わん？
その思想で作られてるのがReactやVue、Angular等のJSフレームワーク
JSフレームワークが用意した「変数の変更通知を行う」お作法を覚えて動かすとDOMが常に最新のあるべき姿になる
これによりDOM操作回りはJSフレームワークという外部の業者が全て責任持ってやってくれる
俺達はDOMの元であるテンプレートを読み込ませたら
ただ変数がちゃんと正しい値になってるか？を保証すれば完璧に動作するよね
変数書き換えたら常にあるべき姿のDOMに書き換わるシステムに、jQueryで改ざんし始めると衝突して邪魔になる
次のDOM更新でjQueryが書き換えた内容そっくり消えるしな
だからこれからのWeb開発にjQueryは不要なんだよ
決してES2015が優れてて代替出来るから不要になったという話では無い 変数更新してるだけに見えて、別処理が勝手に動くというのも実はアレだけどな
今はリアクティブが流行してるからそこにケチつける風潮ないけれど >>99 (ﾜｯﾁｮｲ 4d7c-MQtI [122.212.16.94])
これだけ回答をもらって無反応か
最近の質問者はこういう人が多いな JavaScriptで作れるプログラムって、webブラウザ以外になにかありますか？
全然ユーザーがいないのはダメだけど
ある程度需要がありそうな用途 >>118
WebブラウザとWebページを区別できるようになろう でもまあwebブラウザが全てではあるよね
他に出番無いし そうだね
node.jsでJavaScriptはサーバサイドだけじゃくてデスクトップアプリでも使われている
代表格はVScode(node.js+Electron)がある
Webpackもnode.jsだし
身近なところでは汎用掲示板ビューアSikiがnode.js+ElectronでJavaScriptだね
CSSもHTMLも生で書くのは平成だしな
普通SASSやらPugやら使うだろ
JSだってWebpackやらBrowserify越しに使うやろ
まぁNode.jsじゃトランスパイル遅いから
GOやRustのツールに置き換える流れにはなってるが
じゃあ最初からCやGO、Rustでやれば良かったよねとはならないフットワークの軽さがNode.jsにはあるからな Rustで書いたJSトランスパイラは速いけどRust自体のコンパイルは遅い あることをローカルマシンでやりたくて、Python入ってっから、それでやろうとしたらできなくて（いや正確にはすごく遅い）Node.jsになってしまった。何かは言わない。 node.jsの良さはJavaScriptでプログラミングできる事
Electron使えばUIもHTMLで書けるので便利
なれたらJavaScriptでデスクトップアプリを書くのが楽しくなった >>126
Electronはファイルがデカいから
俺が何か作る時はCLI一択だわ
対話的な物作る時は
Tauriで作ってみたいなぁと思う >>118
Visual Studio Codeがjavascriptで作られている ElectronとAngularで作られてるシステム見させてもらったんだけど、reactに書き換えるって言ってたな
ならnativeでよくね？ reactとreact nativeって書き換えが必要なの？
ゴミかな？ >>0127
TauriはWebViewなので
Electronの様にWebRequestを簡単に操れない
Rustに拘らないのなら
使い慣れた開発言語でWebViewを組み込んだ方が手っ取り早い YouTube 動画で見たけど、
北米では、Flutter よりも、React Native が多いらしい JavaScriptで書ける環境の話から
かなり脱線気味 業務がWebアプリなのは危険だと言い出した管理職がいて
Electronでチャチャとデスクトップソフト風にしたら
仕事が早いとお褒めいただいたw
何も変わっちゃいなんだけれどそれはナイショ 危険だという懸念が素人の無理解から来てるだけなのか妥当な懸念なのか分からないから何とも言えんな
前者なら悪くない回避策 まあ一般的に考えて危険やな
その認識は正しいさすが管理職 管理職が正しい
どんなに堅牢なシステムでも狙われたら終わり
だから今はクラウドじゃなくてオンプレ回帰してる VBAとC#でちょくちょくアプリ作ってる程度のもんなんですけど
最近VS Code使ってjavascriptの勉強始めたわけですよ
デフォルトの環境で扱ってる限り、typoの指摘が甘くて気づくのに時間かかってしまってつらいです
Visual StudioでC#つかってるとかなり丁寧に指摘してくれるんで助かるんですが
Codeはその辺厳しいですね
Code Spell Checkerを入れてみたんですけど、よさそうな対策は他にありますか？ JSはデフォだとどんなパラメータも持ちうるのでtypoを機械的に見つけにくい言語。
なのでjsdocゴリゴリ書く（もっとやるなら@ts-checkも）かTypeScript使うと良いよ 
