+ JavaScript の質問用スレッド vol.132 +
■ このスレッドは過去ログ倉庫に格納されています
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にして見えないようにしてください。文句をつける＝荒らしです ■FAQ
http://fiddle.jshell.net/vSqKr/44/show/light/
◆開発者ツール(Developer Tools)の基本的な使い方 (全部はhttp://fiddle.jshell.net/vSqKr/44/show/light/#Browser-Developer-Tools )
▼諸注意
- 本説明では Google Chrome の開発者ツールの名称に従います。他ブラウザで使う場合は適宜読み替えて下さい。
- Edge- でコンソールを使うには予め開発者ツールを起動しておく必要があります(開発者ツールを起動しないと console.log() が機能しません)
- Safari はデフォルトで開発者ツールが無効な為、有効に設定する必要があります。
https://developer.apple.com/library/safari/documentation/AppleApplications/Conceptual/Safari_Developer_Guide/GettingStarted/GettingStarted.html
▼要素を検証
1. ページ上で右クリックして [要素を検証]
2. [Elements] パネルが開き、対象のDOMノードが選択される(選択対象が目的の要素でなければ [Elements] パネル上で選択し直す)
3. 右側のサイドバーから知りたいステータス名のタブを選択する
- [Styles] タブ … CSSプロパティの指定値を表示 (※カスケードによって上書きされたプロパティは取り消し線で表示される)
- [Computed] タブ … CSSプロパティの算出値を表示("font-size: 1em" を指定していても算出後の "*px" で表示される)
- [Properties] タブ … 選択したDOMノードのプロパティを表示
▼コンソール
1. JavaScript コード上で console.log('Hello, World!'); と入力
2. [Ctrl] + [Shift] + [I] キー(IE は [F12])で開発者ツールを開き、[Console] パネルを開く
3. [Console] パネルに "Hello, World!" と表示される
(※window.alert() は String 型に変換されますが、console.log() は Object 型の中身をそのまま表示してくれます。) ■FAQ(続き)
◆JavaScriptの実行速度
JavaScriptの速度は「ブラウザ名」「ブラウザのバージョン」「PCスペック」に依存します(ブラウザのバージョン毎に最適化具合が異なります)。
速度の疑問解消の為に http://jsperf.com/ にコードをUPしてブラウザ毎に速度計測する事を推奨します。
例外として、仕様における理論上の速度が明確になっている場合があります。
例えば、正規表現によるマッチング処理を考えた場合、「RegExp#test > RegExp#exec > String#match」は ES5 仕様で保証されています。
ES5 仕様において RegExp#test が最も処理数が少なく、String#match が最も処理数が多いことが明確だからです。
ブラウザによっては RegExp#test の最適化が十分でなく、String#match の最適化が RegExp#test より十分であれば逆転する可能性はありますが、各メソッドの最適化が一律であればこの前提が崩れる事はありません。
■各種仕様 ( http://fiddle.jshell.net/vSqKr/44/show/light/#Link も参照 )
◆ Standard ECMA-262
http://bclary.com/2004/11/07/ (ECMAScript 3 HTML版)
http://www2u.biglobe.ne.jp/~oz-07ams/2002/ecma262r3/ (ECMAScript 3 和訳)
http://www.ecma-international.org/ecma-262/5.1/ (ECMAScript 5.1 HTML版)
http://tsofthome.appspot.com/ecmascript.html (ECMAScript 5.1 和訳)
http://www.ecma-international.org/ecma-262/6.0/ (ECMAScript 6 / ECMAScript 2015)
http://kangax.github.io/compat-table/es5/ (ECMAScript 5 compatibility table)
http://kangax.github.io/compat-table/es6/ (ECMAScript 6 compatibility table)
◆ HTML Standard (HTML5)
http://www.whatwg.org/specs/web-apps/current-work/multipage/
http://momdo.s35.xrea.com/web-html-test/spec/WD-html51-20130528/Overview.html (HTML5.1 部分訳)
http://www.hcn.zaq.ne.jp/___/WEB/WebStorage-ja.html (Web Storage 和訳) >>1
有能。
以降lodashもunderscoreも禁止。 ただ単に禁止と書き連ねただけでは原理主義みたいで気持ちが悪い
もしくは喧嘩を売っているようにも見える
きちんとテンプレの体裁を成すくらいの文量で
これまでの経緯と、このスレではそう言った質問・回答を扱わない件、
そしてライブラリ用質問スレへのリンクくらいは無いとね
ただ単にどっかの誰かが一言禁止だ！と言ってるだけで
済んだ気になってるとそれはただ荒れる元になる ということでjQuery, lodash, underscore解禁 改竄前に戻ってるのか戻ってないのかよくわからんテンプレだが
取りあえずいつもの荒らしの立てたスレではないのか DOMの質問も禁止な
純粋なjavascriptのみのスレ 右クリックしても右クリックメニューがでないで広告サイトに飛ばされるサイトがあるんだけど
どうやったら解除して右クリックメニュー表示できますか? javascriptをoffにすればメニュー表示できる jqueryで、選択された要素の中に指定した要素が含まれているかを調べるのは
どうやればいいのでしょうか？
findかと思っていたのですが、findは子孫要素まで検索対象に含められると分かりました
子孫要素まで調べたくはありません よくわからないんだけど
jqueryで、ってjqueryを使えるということは普通のjsも使えるわけで
・普通のjs回答でもいいしjquery回答でもいい
・可能な限り最大限jqueryを使うべき
・jqueryで使えるようになるもの以外は使ってはならない
jqueryを認めるとどれなのか曖昧になって面倒ではないか >>17
意味不明です
jqueryでやる方法を聞いてるんですよ
アスペですか？ childrenって子要素を取得するメソッドですよね
そういう意味ではなくて、
たとえば
$('.hoge')
で選択された要素集合の中に、あるDOM要素が含まれているか調べたい、というような場合です 意味不明です
jqueryでやる方法を聞くならjqueryスレがあるんですよ。
アスペですか？ >>19
質問の仕方が悪い
何のDOM要素なんだよ >>20
jQueryは何で書かれているというのですか？
これ以上言う必要はありませんね？
>>21
任意のDOM要素です
isメソッドで確かめられると分かりました
要素集合の中に一つでも条件に合致しているものがあればtrueになるのがisメソッドだったのですね
要素が一つの時にだけ使えるものと勘違いしていました children からの list で for すればいいとおもうけど
javascript構文は禁止なのかw >1
hcn zaqなんてらってうrlのリンク全部きれてるじゃねぇか >>23
ですからchildrenは関係ありません
それにisメソッド一つで済むのに何故わざわざループ処理を書くのですか？
そういう処理をわざわざ書きたくないからjQueryを使っているのに。
分かりますね？ >>26
検索すれば分かる話をなぜ質問するんだ?
検索したくない。数行のコードも書きたくない。
らくしたいだけ乞食jQueryバカは死ね
わかりますね? 提案
jQureryは荒れることが判明したので分離しよう。 たかだか数行
減らすため
数千バイト
ロードする
これ七五調って言うんだっけ？？ 指定した子要素が含まれているかどうかといっても
className === 'fuga'な子要素とか、.dataset.hoge === 1 な子要素とか、複数の組み合わせとか、
あと含まれているかどうかをどう使いたいか、とかいろいろあるからなあ
「選択された要素」が t で、含まれているときに特定の変数をtrueとしたい、だけなら
var result = function(){
for( var ch=t.children, i=ch.length-1; 0<=i; --i) if( 条件式 ) return true;
})();
が正解な気がするんだけど 例えば、何かの本のようなレイアウトがしたいんです
という質問があった時、
ひょっとしたらjQueryやそのライブラリを使った霞程度のヒントを教えてくれるかもしれないのがjQueryスレ
そしてCSS HoudiniのLayout APIやPaint API勉強すれば自由にできるよ、というのがここ
まれに数百行のコードを貼っつける猛者が現れて荒れることがあるかもしれない
でも質問者にとって一番必要なのは、どっかの馬の骨達が作ったHoudiniフレームワークの海から
超特化超マイナーなライブラリを拾い上げて、それがきちんと使えるものであることを保証し
無に等しいドキュメントの代わりにコードを解析して使い方を手取り足取り解説してくれる存在
今のWebに不足しているところはそこ
最低でもHoudini系のパッケージマネージャが求められるが、
質問スレも、勉強の為のここと、有名ライブラリの為のあそこと、もう一つ居る
じゃないと質問者が無駄骨を折ってスレが荒れるだけになる $('div > p') 直下のみ
$('div p') 子孫も含める
jQueryで子要素を取得するいくつかの方法 children,find,contents
http://www.flatflag.nir87.com/children-996 cssもしっかり勉強して意味と挙動を把握しておかないと微調整必要になったとき詰むからな jQueryなんでこんなきらわれてるん?(´・ω・`) jQuery,lodash, SASS, Ruby など、ライブラリは禁止とか、言ってる奴は、荒らし。
こいつは、色んな板を荒らしてる
無視しろ SASS, Rubyがライブラリとかさすがキチガイお里が知れるｗ >>31
＞質問者が無駄骨を折って
質問者が無駄骨をおるって
そんなの当たり前やろ。
無駄骨折るのは回答者やろ? >>34
料理スレに電子レンジ調理の話しかしない集団がいたら荒れるのは避けられないだろう >>34
jQuery厨は不思議とカスが多いので
深層心理にjQuery自体がカスという意識が広まってる。 そんなところ行ったらみんな達人だからマウント取れない こいつは、色んな板を荒らしてる奴だから、無視しろ
ソースコードを書いていない奴は、基本、荒らしだから、無視でOK jqueryの質問するなら英語勉強してstackoverflowいけってバッチャが言ってた >>45
stackは質問しても結構なスピードで流れていくからね
5chのほうがかえってレスつく
stackは検索用だね
jQurey厨は英語力も検索力もないからこっちくるんだろうけど。 >>15
> jqueryで、選択された要素の中に指定した要素が含まれているかを調べるのは
> どうやればいいのでしょうか？
> findかと思っていたのですが、findは子孫要素まで検索対象に含められると分かりました
> 子孫要素まで調べたくはありません
まあいくつか有るが、こういうHTMLの時
<div id="top">
<div class="stranger"></div>
<div class="child">
<div class="descendant"></div>
<div class="descendant"></div>
</div>
<div class="child">
<div class="descendant"></div>
<div class="descendant"></div>
</div>
<div class="stranger"></div>
</div>
こんな所かな（attrは参考として書いただけで実際には必要ない）
$('#top').has('> .child').attr('id') // => top
$('#top').find('> .child').attr('class') // => child
$('#top > .child').attr('class') // => child
$('#top').children('.child').length // => 2
$('#top').children().is('.child') // => true jQueryの話やめてくれ
javascript勉強スレでライブラリの話するの気持ち悪い
ライブラリなんて自分で調べるのぜんていだろ
あまたあるライブラリの質問されても困るわ そういう面白おかしい反応するから
余計からかわれるなんてこともあるかも からかってるつもりなら
どうでもいいよ
jQuery厨はけっきょく嵐ってこと自白してるだけだしwww いいかたが悪かったかな
ストレートにいうと
構うから居つく
ということを言いたかった 構わないでもキチは居着く
キチが居なくなるのは飽きるか完全に無人になるかどっちかだけ 結局最終的には英語で海外の情報を取得できないとプロにはなれないか・・・ >>13-14
F12 開発者ツールを起動して、1行ずつデバッグ実行するとか。
ソースコードは変更できないのか？
preventDefault()・stopPropagation() などで、
クリックイベントのバブリング (伝播)を止めているのかな？
ブラウザの自動操作なら、Selenium WebDriver で、
登録されたイベントリスナーを削除するとか、
onClick() の内容を上書きするとか >>55
無駄な方法だな
>>13
普通にブラウザのプラグインを使えばいい google spreadsheetってhtml css jsだけで作られてるのかな?
勉強としてスプレッドシートもどきをhtml css jsだけでつくってみたいけどなんかそういうサイトある? プログラミングを趣味でやるならjavascriptっていわれたんですが本当ですか?
プログラミングの知識はまったくないのですが
いまなんとなくjavascriptかpythonかphpでまよってます >>58
決定版は無い
webに興味あるならJS、そんなでも無いならpython 言語としては嫌いだけどユーザーベースの大きいアカデミックでもインダストリーでも普通に使われる質のよいライブラリが豊富に揃ってるので道具としてはよい。 とりあえず手を出してみたいだけならjsでもpyでもphpでもなんでもいい
perlじゃなけりゃ この2冊をこの順に読む
たのしいRuby 第5版、2016
みんなのPython 第4版、2017
たのしいから、先に読まないと、みんなので苦戦する
JS は、言語仕様がクソだから、その後で良い
(易しい) Ruby → Python → JS (クソ) >>65
どうクソなのですか?
こいつ糞だなぁ。こういうとこがまじクソだなぁ。
と思うところを簡単に教えて下さい
自分は趣味だけでやるなら、javascriptは身近だからいいよとススメられたのですが
拡張機能も気軽に自分で作れるし、既存のサイトもすきなように走査できるからと。 クソと言うのはソース表記上メソッド呼び出しとプロパティの違いが分からないようなことかな？
関数の取り回しがしづらいったりゃありゃしない。
proc、block、lambdaとか何の冗談仕様だありゃｗ 身近な面はあるけどバッチ書いて定期ファイル操作とかできないよね 無知識者にnode勧めるぐらいならphpやpythonの方がずっと健全では・・・
この場合一番健全なのはc++だと思うけど (易しい) Ruby > Python >> JS >>> PHP (クソ)
Ruby, Python は、バッテリー同梱(batteries included)。
最初から標準ライブラリに、かなり使いやすいものが入っているけど、
JSは、全く逆の思想。
ほとんど何も入っていないから、jQuery, Lodash などがいる
JSの機能だけで作ると、面倒くさくてたまらない。
バグが多くなる
Rubyは、可読性が高いから、ほとんどバグを作らない。
ビジネスロジックがそのまま、コードに表れる
とにかく、勉強時間が掛からないから、初心者はRubyから、やるべき。
他の言語から始めると、時間が掛かる >>71
そういう論点でいくとphpはクソじゃなくなりそうだが
というかruby推奨は rubyの可読性は高くない。
pythonの「書きにくく読みやすい」と比較して「書きやすく読みにくい」と言われる。
そうなってしまう理由はたくさんあるが、ひとつのことをするのにやり方がたくさんあるというperlとかいう糞言語の信条をそのままパクってしまってることがひとつ。
またよくも悪くも設計が完全なオブジェクト指向にこだわっており、
javascriptなら関数ひとつで実現できることがblock、proc、lambdaと酷い有り様になっている。defで簡単に定義できまーすとかまさに初心者騙しもいいとこ。
また、流行り機能の無節操な取り込みが酷い。記号が足りなくなり、例えばオプショナルチェーンは他言語が?.のところrubyでは&.である。phpで文字列結合が"foo"+"bar"ではなく"foo"."bar"であるようなキモさ。
あとpythonと比べ多分野の優れたライブラリがない。あってもメンテされてない。作ってるやつが実用主義ではなく趣味だから。rubyでもできる！って言いたいだけ。よくも悪くもweb分野、しかもrails使うというやつ以外にはおすすめしない。
事実上rails専用言語。railsのDSLとして以外に存在価値はない。
初心者に勧めるなんてとんでもない。 なんでperlはどこででもクソといわれてしまうん？ 他人のソース引き継いでなんじゃこれってなる構文にクソってなるのが多い
シェルでワンライナーで使うなら今でもpythonよりいいんだけどね >例えばオプショナルチェーンは他言語が?.のところrubyでは&.である。phpで文字列結合が"foo"+"bar"ではなく"foo"."bar"であるようなキモさ。
これ、お前が慣れてる手法以外はクソって言いたいだけだな JavaScript本格入門〜モダンスタイルによる基礎から現場での応用まで
http://gihyo.jp/book/2016/978-4-7741-8411-1
↑を読んだのですが次に
初めてのJavaScript
https://www.oreilly.co.jp/books/9784873117836/
と
JavaScriptパターン――優れたアプリケーションのための作法
https://www.oreilly.co.jp/books/9784873114880/
のどっちをようむか迷っています。
｢初めての｣は出版が最近なので最新の仕様に基づいて書かれているようだけど
一通り｢本格入門｣やったあとにやる必要があるのか、
｢パターン｣は古いけれどここでススメられた本だけど、アマゾンレビュー見ると上級者向けというレビューもあり
まよってます。
できれば３冊とも読んだことある人からのアドバイスあったらお願いします。
読んだことなければその旨示していただけると有り難いです。
ちなみにJavaScriptはじめて1,2ヶ月です。 >>78
75じゃないけど、オプショナルチェーンに関してはswiftも?.で、&.なんて使ってるのはrubyだけ
内容が空値でないか？のハテナと、メソッドチェーンのピリオドの組み合わせが一番可読性が高いのよ、この演算子だけはなんでこれなのか正直理解できないぐらい >の組み合わせが一番可読性が高いのよ
（俺にとっては）一番可読性が高い、ですね >>79
javascript書くのに書籍は要らない >>80
直接的には識別子に?や!が使えるという言語仕様のせいだね。
if文とかif foo.bar? buz endみたいな書き方実際よくされてる。
そういう事情があっても&.はねーわｗｗｗとか思っちゃうが。 >>79
全部読めばいいのと違うの
順番なんて気にしない 俺が慣れ親しんだ記法じゃないからクソ
以外にないの？ 【悲報】Rubyクソ言語とバレてしまうｗｗｗｗ
https://qiita.com/ryo-ma/items/24c46592b45775e8644d
https://www.sejuku.net/blog/21300
何でもなんかしらのクラスのインスタンスという設計だからか関数レベルの取り回しが異常にしづらい。
jsの関数に慣れちゃうとアホ臭すぎるｗ 俺が順応できなかったのは言語仕様がクソだからだ
追加入りました >>87
それ突き詰めちゃうとアセンブリ書け、になっちゃうぞ。
簡単なことが簡単に書ける言語が初心者向けの良い言語、という尺度があっていい。
Rubyはオタク向けの言語だよ(Railsで使わざるを得ない人は除く)
「は〜んこんなエレガントなコード書けたオレって天才〜」って言っていつもシコってるもの。
なおそのエレガント()なコードは初心者には読めないｗ
初心者にRuby薦めるバカは自分がその初心者使ってキモチ良くなりたいだけで初心者のことなんてなにも考えてない。 >>79
初めてのJavaScript 第3版、オライリー、2017
この本は、Ruby, Python とか、10年・数言語以上開発している人向け。
そのレベルの人が、この1冊で軽く、数十時間は掛かる。
初心者が読んでも無駄
JavaScript 第6版、2012、David Flanagan
Google などの開発者の机に必ず置いてある、この本と同じ。
東大とか、IQ 150 レベルの人が読んで、うんうん良い本だねって言う本
死にたいのなら、読みなさい！ まずはどちらも読まずに
とりあえずなにか作ってみてから
パターン読んで
またなにか作って
オライリー読むとか パターン云々を考えたり本がどうのこうのって
いろんなものを自分で作って引き出しができたあとにすべきだな
何を実現するのに何が必要かわからない状態で何を学べるというのか イベントハンドリングをデレゲートする場合、
documentで受けるのが一般的だと思います
documentよりwindowの方が上位にありますが
なぜwindowで受けずにdocumentで受けるのでしょうか？ >>96
別にdocumentじゃなくていいぞ？
実際に発生した要素の上位の要素であればなんでもいい というかなんでもdocumentにしてしまったらまずい局面もあるだろう
一般的と言ってはいけないのでは windowの下にはdocument以外にもいろいろぶら下がってるというのと
windowは普通省略されるからだと思う
http://www.webdesignleaves.com/wp/jquery/1631/ ■ このスレッドは過去ログ倉庫に格納されています
