+ JavaScript の質問用スレッド vol.132 +

**Name_Not_Found** · 2018/03/06(火) 18:46:23.71

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にして見えないようにしてください。文句をつける＝荒らしです

**Name_Not_Found** · 2018/03/06(火) 18:47:11.62

■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 型の中身をそのまま表示してくれます。)

**Name_Not_Found** · 2018/03/06(火) 18:47:37.17

■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 和訳)

**Name_Not_Found** · 2018/03/06(火) 18:47:59.30

■各種仕様 (続き)
◆ Document Object Model (DOM) / CSS Object Model (CSSOM)
http://www.hcn.zaq.ne.jp/___/WEB/DOM4-ja.html (DOM Standard (DOM4) 和訳)
http://www.w3.org/TR/DOM-Level-3-Events/ (DOM3 Events)
http://www.w3.org/TR/uievents/ (UI Events)
http://www.hcn.zaq.ne.jp/___/WEB/cssom-ja.html (CSSOM 和訳)
http://www.hcn.zaq.ne.jp/___/WEB/cssom-view-ja.html (CSSOM View Module 和訳)
◆ その他のWeb関連仕様
http://domparsing.spec.whatwg.org/ (DOM Parsing and Serialization - innerHTML等)
http://www.hcn.zaq.ne.jp/___/WEB/XHR-ja.html (XMLHttpRequest 和訳)
http://www.hcn.zaq.ne.jp/___/WEB/File_API-ja.html (File API 和訳)
http://www.whatwg.org/specs/ (WHATWGの仕様一覧)
◆ MDN (Netscape/Mozilla)
https://developer.mozilla.org/ja/docs
◆ MSDN Library
https://msdn.microsoft.com/en-us/library/ie/hh828809 (Internet Explorer API)
http://msdn.microsoft.com/ja-jp/library/yek4tbz0.aspx (JavaScript)
http://msdn.microsoft.com/ja-jp/library/cc427807.aspx (JScript)
http://msdn.microsoft.com/ja-jp/library/cc409712.aspx (DHTML)
◆ JavaScript Garden (ja)
http://bonsaiden.github.com/JavaScript-Garden/ja/
◆ JSON (JavaScript Object Notation)
http://www.json.org/json-ja.html

**Name_Not_Found** · 2018/03/06(火) 19:00:52.16

おつ
以後jQuery禁止

**Name_Not_Found** · 2018/03/06(火) 19:43:02.59

>>1
有能。
以降lodashもunderscoreも禁止。

**Name_Not_Found** · 2018/03/06(火) 20:56:07.11

ただ単に禁止と書き連ねただけでは原理主義みたいで気持ちが悪い
もしくは喧嘩を売っているようにも見える
きちんとテンプレの体裁を成すくらいの文量で
これまでの経緯と、このスレではそう言った質問・回答を扱わない件、
そしてライブラリ用質問スレへのリンクくらいは無いとね

ただ単にどっかの誰かが一言禁止だ！と言ってるだけで
済んだ気になってるとそれはただ荒れる元になる

**Name_Not_Found** · 2018/03/06(火) 21:01:30.74

ということでjQuery, lodash, underscore解禁

**Name_Not_Found** · 2018/03/06(火) 22:09:12.66

jQuery＼(^o^)／

**Name_Not_Found** · 2018/03/06(火) 23:34:45.85

禁止だ！

**Name_Not_Found** · 2018/03/07(水) 03:27:34.37

改竄前に戻ってるのか戻ってないのかよくわからんテンプレだが
取りあえずいつもの荒らしの立てたスレではないのか

**Name_Not_Found** · 2018/03/07(水) 08:34:04.49

DOMの質問も禁止な
純粋なjavascriptのみのスレ

**Name_Not_Found** · 2018/03/07(水) 10:29:55.27

右クリックしても右クリックメニューがでないで広告サイトに飛ばされるサイトがあるんだけど
どうやったら解除して右クリックメニュー表示できますか?

**Name_Not_Found** · 2018/03/07(水) 10:31:08.36

javascriptをoffにすればメニュー表示できる

**Name_Not_Found** · 2018/03/07(水) 14:07:29.71

jqueryで、選択された要素の中に指定した要素が含まれているかを調べるのは
どうやればいいのでしょうか？
findかと思っていたのですが、findは子孫要素まで検索対象に含められると分かりました
子孫要素まで調べたくはありません

**Name_Not_Found** · 2018/03/07(水) 14:24:45.76

.childrenを探せばいいじゃん

**Name_Not_Found** · 2018/03/07(水) 14:49:46.61

よくわからないんだけど
jqueryで、ってjqueryを使えるということは普通のjsも使えるわけで

・普通のjs回答でもいいしjquery回答でもいい
・可能な限り最大限jqueryを使うべき
・jqueryで使えるようになるもの以外は使ってはならない

jqueryを認めるとどれなのか曖昧になって面倒ではないか

**Name_Not_Found** · 2018/03/07(水) 15:00:41.84

>>17
意味不明です
jqueryでやる方法を聞いてるんですよ
アスペですか？

**Name_Not_Found** · 2018/03/07(水) 15:05:31.33

childrenって子要素を取得するメソッドですよね
そういう意味ではなくて、
たとえば
$('.hoge')
で選択された要素集合の中に、あるDOM要素が含まれているか調べたい、というような場合です

**Name_Not_Found** · 2018/03/07(水) 15:29:36.35

意味不明です
jqueryでやる方法を聞くならjqueryスレがあるんですよ。
アスペですか？

**Name_Not_Found** · 2018/03/07(水) 15:30:53.22

>>19
質問の仕方が悪い
何のDOM要素なんだよ

**Name_Not_Found** · 2018/03/07(水) 16:45:18.98

>>20
jQueryは何で書かれているというのですか？
これ以上言う必要はありませんね？

>>21
任意のDOM要素です
isメソッドで確かめられると分かりました
要素集合の中に一つでも条件に合致しているものがあればtrueになるのがisメソッドだったのですね
要素が一つの時にだけ使えるものと勘違いしていました

**Name_Not_Found** · 2018/03/07(水) 16:48:32.48

children からの list で for すればいいとおもうけど
javascript構文は禁止なのかw

**Name_Not_Found** · 2018/03/07(水) 16:50:18.44

戦争じゃー

**Name_Not_Found** · 2018/03/07(水) 16:52:59.78

>1
hcn zaqなんてらってうrlのリンク全部きれてるじゃねぇか

**Name_Not_Found** · 2018/03/07(水) 16:57:44.27

>>23
ですからchildrenは関係ありません
それにisメソッド一つで済むのに何故わざわざループ処理を書くのですか？
そういう処理をわざわざ書きたくないからjQueryを使っているのに。
分かりますね？

**Name_Not_Found** · 2018/03/07(水) 17:12:32.63

>>26
検索すれば分かる話をなぜ質問するんだ?
検索したくない。数行のコードも書きたくない。
らくしたいだけ乞食jQueryバカは死ね
わかりますね?

**Name_Not_Found** · 2018/03/07(水) 17:14:13.20

提案
jQureryは荒れることが判明したので分離しよう。

**Name_Not_Found** · 2018/03/07(水) 17:31:57.77

たかだか数行
減らすため
数千バイト
ロードする

これ七五調って言うんだっけ？？

**Name_Not_Found** · 2018/03/07(水) 18:35:46.88

指定した子要素が含まれているかどうかといっても
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;
})();
が正解な気がするんだけど

**Name_Not_Found** · 2018/03/07(水) 18:41:38.22

例えば、何かの本のようなレイアウトがしたいんです
という質問があった時、
ひょっとしたらjQueryやそのライブラリを使った霞程度のヒントを教えてくれるかもしれないのがjQueryスレ
そしてCSS HoudiniのLayout APIやPaint API勉強すれば自由にできるよ、というのがここ
まれに数百行のコードを貼っつける猛者が現れて荒れることがあるかもしれない

でも質問者にとって一番必要なのは、どっかの馬の骨達が作ったHoudiniフレームワークの海から
超特化超マイナーなライブラリを拾い上げて、それがきちんと使えるものであることを保証し
無に等しいドキュメントの代わりにコードを解析して使い方を手取り足取り解説してくれる存在

今のWebに不足しているところはそこ
最低でもHoudini系のパッケージマネージャが求められるが、
質問スレも、勉強の為のここと、有名ライブラリの為のあそこと、もう一つ居る
じゃないと質問者が無駄骨を折ってスレが荒れるだけになる

**Name_Not_Found** · 2018/03/07(水) 18:43:33.51

$('div > p') 直下のみ
$('div p') 子孫も含める

jQueryで子要素を取得するいくつかの方法 children,find,contents
http://www.flatflag.nir87.com/children-996

**Name_Not_Found** · 2018/03/07(水) 18:47:57.87

cssもしっかり勉強して意味と挙動を把握しておかないと微調整必要になったとき詰むからな

**Name_Not_Found** · 2018/03/07(水) 18:55:50.20

jQueryなんでこんなきらわれてるん?(´・ω・`)

**Name_Not_Found** · 2018/03/07(水) 19:30:06.90

jQuery,lodash, SASS, Ruby など、ライブラリは禁止とか、言ってる奴は、荒らし。
こいつは、色んな板を荒らしてる

無視しろ

**Name_Not_Found** · 2018/03/07(水) 19:34:05.06

SASS, Rubyがライブラリとかさすがキチガイお里が知れるｗ

**Name_Not_Found** · 2018/03/07(水) 19:45:02.79

>>31
＞質問者が無駄骨を折って
質問者が無駄骨をおるって
そんなの当たり前やろ。
無駄骨折るのは回答者やろ?

**Name_Not_Found** · 2018/03/07(水) 19:51:31.84

>>34
料理スレに電子レンジ調理の話しかしない集団がいたら荒れるのは避けられないだろう

**Name_Not_Found** · 2018/03/07(水) 19:52:18.85

>>34
jQuery厨は不思議とカスが多いので
深層心理にjQuery自体がカスという意識が広まってる。

**Name_Not_Found** · 2018/03/07(水) 20:05:21.31

SASSだけにさすが

**Name_Not_Found** · 2018/03/07(水) 20:49:37.21

共存スレあるやん
https://mevius.5ch.net/test/read.cgi/hp/1510321470/

専用スレあるやん
https://mevius.5ch.net/test/read.cgi/hp/1508707878/

**Name_Not_Found** · 2018/03/07(水) 20:54:21.70

そんなところ行ったらみんな達人だからマウント取れない

**Name_Not_Found** · 2018/03/07(水) 21:09:02.62

>>41
まじか
じゃあjq禁止ね

**Name_Not_Found** · 2018/03/07(水) 21:28:46.71

こいつは、色んな板を荒らしてる奴だから、無視しろ

ソースコードを書いていない奴は、基本、荒らしだから、無視でOK

**Name_Not_Found** · 2018/03/07(水) 21:42:47.86

jqueryの質問するなら英語勉強してstackoverflowいけってバッチャが言ってた

**Name_Not_Found** · 2018/03/07(水) 22:34:24.17

>>45
stackは質問しても結構なスピードで流れていくからね
5chのほうがかえってレスつく
stackは検索用だね
jQurey厨は英語力も検索力もないからこっちくるんだろうけど。

**Name_Not_Found** · 2018/03/07(水) 23:14:55.13

>>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

**Name_Not_Found** · 2018/03/07(水) 23:35:22.19

jQueryの話やめてくれ
javascript勉強スレでライブラリの話するの気持ち悪い
ライブラリなんて自分で調べるのぜんていだろ
あまたあるライブラリの質問されても困るわ

**Name_Not_Found** · 2018/03/07(水) 23:45:55.08

そういう面白おかしい反応するから
余計からかわれるなんてこともあるかも

**Name_Not_Found** · 2018/03/07(水) 23:57:28.11

からかってるつもりなら
どうでもいいよ
jQuery厨はけっきょく嵐ってこと自白してるだけだしwww

**Name_Not_Found** · 2018/03/08(木) 00:10:10.88

いいかたが悪かったかな
ストレートにいうと
構うから居つく
ということを言いたかった

**Name_Not_Found** · 2018/03/08(木) 00:13:58.48

構わないでもキチは居着く
キチが居なくなるのは飽きるか完全に無人になるかどっちかだけ

**Name_Not_Found** · 2018/03/08(木) 00:24:58.41

結局最終的には英語で海外の情報を取得できないとプロにはなれないか・・・

**Name_Not_Found** · 2018/03/08(木) 02:02:55.21

>>18
JSスレでそんなことよく言えるな

**Name_Not_Found** · 2018/03/08(木) 03:24:28.57

>>13-14
F12 開発者ツールを起動して、1行ずつデバッグ実行するとか。
ソースコードは変更できないのか？

preventDefault()・stopPropagation() などで、
クリックイベントのバブリング (伝播)を止めているのかな？

ブラウザの自動操作なら、Selenium WebDriver で、
登録されたイベントリスナーを削除するとか、
onClick() の内容を上書きするとか

**Name_Not_Found** · 2018/03/08(木) 03:40:19.68

>>55
無駄な方法だな

>>13
普通にブラウザのプラグインを使えばいい

**Name_Not_Found** · 2018/03/08(木) 03:49:34.95

google spreadsheetってhtml css jsだけで作られてるのかな?
勉強としてスプレッドシートもどきをhtml css jsだけでつくってみたいけどなんかそういうサイトある?

**Name_Not_Found** · 2018/03/08(木) 11:03:22.28

プログラミングを趣味でやるならjavascriptっていわれたんですが本当ですか?
プログラミングの知識はまったくないのですが
いまなんとなくjavascriptかpythonかphpでまよってます

**Name_Not_Found** · 2018/03/08(木) 11:56:18.22

趣味で何をやるのかによる

**Name_Not_Found** · 2018/03/08(木) 12:48:43.88

>>58
pythonにしとけ

**Name_Not_Found** · 2018/03/08(木) 13:31:52.54

>>58
決定版は無い
webに興味あるならJS、そんなでも無いならpython

**Name_Not_Found** · 2018/03/08(木) 14:12:43.11

pyってそんないい？

**Name_Not_Found** · 2018/03/08(木) 14:42:46.85

言語としては嫌いだけどユーザーベースの大きいアカデミックでもインダストリーでも普通に使われる質のよいライブラリが豊富に揃ってるので道具としてはよい。

**Name_Not_Found** · 2018/03/08(木) 16:23:50.89

とりあえず手を出してみたいだけならjsでもpyでもphpでもなんでもいい
perlじゃなけりゃ

**Name_Not_Found** · 2018/03/08(木) 22:00:48.25

この2冊をこの順に読む
たのしいRuby 第5版、2016
みんなのPython 第4版、2017

たのしいから、先に読まないと、みんなので苦戦する

JS は、言語仕様がクソだから、その後で良い

(易しい) Ruby → Python → JS (クソ)

**Name_Not_Found** · 2018/03/08(木) 22:11:04.93

>>65
どうクソなのですか?
こいつ糞だなぁ。こういうとこがまじクソだなぁ。
と思うところを簡単に教えて下さい

自分は趣味だけでやるなら、javascriptは身近だからいいよとススメられたのですが
拡張機能も気軽に自分で作れるし、既存のサイトもすきなように走査できるからと。

**Name_Not_Found** · 2018/03/08(木) 22:44:31.73

クソと言うのはソース表記上メソッド呼び出しとプロパティの違いが分からないようなことかな？
関数の取り回しがしづらいったりゃありゃしない。
proc、block、lambdaとか何の冗談仕様だありゃｗ

**Name_Not_Found** · 2018/03/08(木) 23:03:06.59

身近な面はあるけどバッチ書いて定期ファイル操作とかできないよね

**Name_Not_Found** · 2018/03/08(木) 23:55:51.18

っnode.js

**Name_Not_Found** · 2018/03/09(金) 01:03:23.45

無知識者にnode勧めるぐらいならphpやpythonの方がずっと健全では・・・
この場合一番健全なのはc++だと思うけど

65 · 2018/03/09(金) 01:34:52.15

(易しい) Ruby > Python >> JS >>> PHP (クソ)

Ruby, Python は、バッテリー同梱(batteries included)。
最初から標準ライブラリに、かなり使いやすいものが入っているけど、

JSは、全く逆の思想。
ほとんど何も入っていないから、jQuery, Lodash などがいる

JSの機能だけで作ると、面倒くさくてたまらない。
バグが多くなる

Rubyは、可読性が高いから、ほとんどバグを作らない。
ビジネスロジックがそのまま、コードに表れる

とにかく、勉強時間が掛からないから、初心者はRubyから、やるべき。
他の言語から始めると、時間が掛かる

**Name_Not_Found** · 2018/03/09(金) 01:41:25.14

>>71
そういう論点でいくとphpはクソじゃなくなりそうだが
というかruby推奨は

**Name_Not_Found** · 2018/03/09(金) 01:46:46.85

じゃ、PHP勉強してる俺と糞まみれになろうや

**Name_Not_Found** · 2018/03/09(金) 01:46:51.04

お前がバグ量産してるのは言語のせいじゃねーべ

**Name_Not_Found** · 2018/03/09(金) 11:33:41.90

rubyの可読性は高くない。
pythonの「書きにくく読みやすい」と比較して「書きやすく読みにくい」と言われる。
そうなってしまう理由はたくさんあるが、ひとつのことをするのにやり方がたくさんあるというperlとかいう糞言語の信条をそのままパクってしまってることがひとつ。

またよくも悪くも設計が完全なオブジェクト指向にこだわっており、
javascriptなら関数ひとつで実現できることがblock、proc、lambdaと酷い有り様になっている。defで簡単に定義できまーすとかまさに初心者騙しもいいとこ。

また、流行り機能の無節操な取り込みが酷い。記号が足りなくなり、例えばオプショナルチェーンは他言語が?.のところrubyでは&.である。phpで文字列結合が"foo"+"bar"ではなく"foo"."bar"であるようなキモさ。

あとpythonと比べ多分野の優れたライブラリがない。あってもメンテされてない。作ってるやつが実用主義ではなく趣味だから。rubyでもできる！って言いたいだけ。よくも悪くもweb分野、しかもrails使うというやつ以外にはおすすめしない。
事実上rails専用言語。railsのDSLとして以外に存在価値はない。
初心者に勧めるなんてとんでもない。

**Name_Not_Found** · 2018/03/09(金) 11:52:22.49

なんでperlはどこででもクソといわれてしまうん？

**Name_Not_Found** · 2018/03/09(金) 12:29:32.77

他人のソース引き継いでなんじゃこれってなる構文にクソってなるのが多い
シェルでワンライナーで使うなら今でもpythonよりいいんだけどね

**Name_Not_Found** · 2018/03/09(金) 14:44:59.34

>例えばオプショナルチェーンは他言語が?.のところrubyでは&.である。phpで文字列結合が"foo"+"bar"ではなく"foo"."bar"であるようなキモさ。

これ、お前が慣れてる手法以外はクソって言いたいだけだな

**Name_Not_Found** · 2018/03/09(金) 15:09:40.45

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ヶ月です。

**Name_Not_Found** · 2018/03/09(金) 15:13:04.82

>>78
75じゃないけど、オプショナルチェーンに関してはswiftも?.で、&.なんて使ってるのはrubyだけ
内容が空値でないか？のハテナと、メソッドチェーンのピリオドの組み合わせが一番可読性が高いのよ、この演算子だけはなんでこれなのか正直理解できないぐらい

**Name_Not_Found** · 2018/03/09(金) 15:37:20.10

>の組み合わせが一番可読性が高いのよ

（俺にとっては）一番可読性が高い、ですね

**Name_Not_Found** · 2018/03/09(金) 16:05:08.48

>>79
javascript書くのに書籍は要らない

**Name_Not_Found** · 2018/03/09(金) 16:15:54.14

>>80
直接的には識別子に?や!が使えるという言語仕様のせいだね。
if文とかif foo.bar? buz endみたいな書き方実際よくされてる。
そういう事情があっても&.はねーわｗｗｗとか思っちゃうが。

**Name_Not_Found** · 2018/03/09(金) 16:22:18.90

>>79
全部読めばいいのと違うの
順番なんて気にしない

**Name_Not_Found** · 2018/03/09(金) 16:22:29.44

俺が慣れ親しんだ記法じゃないからクソ
以外にないの？

**Name_Not_Found** · 2018/03/09(金) 17:38:17.82

【悲報】Rubyクソ言語とバレてしまうｗｗｗｗ
https://qiita.com/ryo-ma/items/24c46592b45775e8644d
https://www.sejuku.net/blog/21300

何でもなんかしらのクラスのインスタンスという設計だからか関数レベルの取り回しが異常にしづらい。
jsの関数に慣れちゃうとアホ臭すぎるｗ

**Name_Not_Found** · 2018/03/09(金) 18:31:28.45

俺が順応できなかったのは言語仕様がクソだからだ
追加入りました

**Name_Not_Found** · 2018/03/09(金) 19:34:44.80

流石に他所でやれ

**Name_Not_Found** · 2018/03/09(金) 19:44:08.39

>>87
それ突き詰めちゃうとアセンブリ書け、になっちゃうぞ。
簡単なことが簡単に書ける言語が初心者向けの良い言語、という尺度があっていい。
Rubyはオタク向けの言語だよ(Railsで使わざるを得ない人は除く)
「は～んこんなエレガントなコード書けたオレって天才～」って言っていつもシコってるもの。
なおそのエレガント()なコードは初心者には読めないｗ
初心者にRuby薦めるバカは自分がその初心者使ってキモチ良くなりたいだけで初心者のことなんてなにも考えてない。

**Name_Not_Found** · 2018/03/09(金) 19:47:57.24

>>89
いつものjq厨かお前

**Name_Not_Found** · 2018/03/09(金) 19:49:00.72

無目的初心者にはC++勧めればいい
それで解決

**Name_Not_Found** · 2018/03/09(金) 21:04:17.33

>>79
初めてのJavaScript 第3版、オライリー、2017

この本は、Ruby, Python とか、10年・数言語以上開発している人向け。
そのレベルの人が、この1冊で軽く、数十時間は掛かる。
初心者が読んでも無駄

JavaScript 第6版、2012、David Flanagan

Google などの開発者の机に必ず置いてある、この本と同じ。
東大とか、IQ 150 レベルの人が読んで、うんうん良い本だねって言う本

死にたいのなら、読みなさい！

**Name_Not_Found** · 2018/03/10(土) 00:21:36.85

>>92
何読めば良いのでしょう?

**Name_Not_Found** · 2018/03/10(土) 00:25:05.30

まずはどちらも読まずに
とりあえずなにか作ってみてから
パターン読んで
またなにか作って
オライリー読むとか

**Name_Not_Found** · 2018/03/10(土) 00:43:57.62

パターン云々を考えたり本がどうのこうのって
いろんなものを自分で作って引き出しができたあとにすべきだな

何を実現するのに何が必要かわからない状態で何を学べるというのか

**Name_Not_Found** · 2018/03/10(土) 15:37:18.99

イベントハンドリングをデレゲートする場合、
documentで受けるのが一般的だと思います
documentよりwindowの方が上位にありますが
なぜwindowで受けずにdocumentで受けるのでしょうか？

**Name_Not_Found** · 2018/03/10(土) 15:43:54.71

窓で受けたらガラスが割れちゃうだろ

**Name_Not_Found** · 2018/03/10(土) 16:08:59.03

>>96
別にdocumentじゃなくていいぞ？
実際に発生した要素の上位の要素であればなんでもいい

**Name_Not_Found** · 2018/03/10(土) 16:26:07.08

というかなんでもdocumentにしてしまったらまずい局面もあるだろう
一般的と言ってはいけないのでは

**Name_Not_Found** · 2018/03/10(土) 16:28:26.35

windowの下にはdocument以外にもいろいろぶら下がってるというのと
windowは普通省略されるからだと思う

http://www.webdesignleaves.com/wp/jquery/1631/

**Name_Not_Found** · 2018/03/10(土) 16:41:20.38

コンソールで
document
window
ってそれぞれうって中身を見てみればいい。

**Name_Not_Found** · 2018/03/10(土) 16:52:01.77

イベントハンドリングをデレゲートする、ってどういうこと?

**Name_Not_Found** · 2018/03/10(土) 17:06:15.62

>>102
たとえば<button>で起きるイベントをdocumentで管理する

**Name_Not_Found** · 2018/03/10(土) 17:08:40.35

>>102
ある要素のイベントをその親のイベントハンドラで受け取って処理すること
子が増減するたびに新しくイベントハンドラを作らなくて良くなる

その反面documentみたいに、いろんな要素からのイベントを受け取ってしまう場合は
どの要素から発生したイベントなのかをチェックする必要があり面倒くさい
なのでdocumentで受け取るなんて普通するか？

**Name_Not_Found** · 2018/03/10(土) 17:09:19.57

>>103
それだと<button>以外の要素からのクリックとかも
受け取ってしまいますよね？

**Name_Not_Found** · 2018/03/10(土) 17:11:56.30

<input typer="button" id="name">

--
document.getElementById("name").addEventListener("click", function)

こゆこと?
これを
イベントハンドリングをdocumentでうけてデレゲートする
って表現するの?

**Name_Not_Found** · 2018/03/10(土) 17:13:09.02

タイプタイパータイペストｗｗｗｗｗ

**Name_Not_Found** · 2018/03/10(土) 17:13:47.22

>>106
違う

**Name_Not_Found** · 2018/03/10(土) 17:16:51.86

>>104
>>108

コードで書くとどうなるの?

**Name_Not_Found** · 2018/03/10(土) 17:18:22.18

document.addEventListener("click", function)

**Name_Not_Found** · 2018/03/10(土) 17:19:23.93

>>104-105
発火した要素やparentNode再帰で、idやclassNameを見て切り分けたりする
jqueryのclassNameでのハンドリングがdocumentじゃなかったっけか

当然、<button>の中に<span>が入ってたりすると複雑化したり処理が多くなるが
どっちかっていうと
バブリングを踏まえて処理組んでたり
時系列的に同時に走られるとまずかったり
バブリング停止が混ざると厄介だったり、というほうの影響が大きいと思う

>>109
<div id="p1"><button>b1</button><button>b2</button></div>

document.getElementById('p1').addEventListener( 'click', function(){
if(e.target.tagName==='button'){ /* proc */ }
}, false );

みたいな

**Name_Not_Found** · 2018/03/10(土) 17:19:33.16

>>107
添付天パテンペスト

**Name_Not_Found** · 2018/03/10(土) 17:21:17.13

また髪の話してる・・・

**Name_Not_Found** · 2018/03/10(土) 17:25:25.34

プログラミング業界ではdelegateは移譲を意味する
一般的な用語でおそらくインターネットが普及する以前から使われてきた用語だけど、
今の話の文脈のdelegateはjQueryが発端なのかな？

jQueryでは1.4.2からdelegateというこのイベントを親で受け取る機能が追加された
（他にも似たようなliveというメソッドがあったがこれらはイベント関連全てを扱うonに統合された）
果たしてこのjQueryのdelegate以前から使われていたのかどうか

ちなみにjQueryだと>>111のような面倒くさいことは必要なく

$('button').on('click', function() {・・・}) だと
$(document).on('click', 'button', function() {・・・}) と書き換えるだけでいい
多くの場合イベントハンドラの中身はそのまま使える、
またdocumentの代わりにbuttonの上位要素でも良い

**Name_Not_Found** · 2018/03/10(土) 17:26:13.85

>>111
なるほどー
勉強なりました。

**Name_Not_Found** · 2018/03/10(土) 17:26:43.62

平日家に届く荷物

通常：自分が家にいないと受け取れない
(再配達あるが例ということで)

デリゲート：平日家にいる家族に自分宛荷物を受け取っといてくれと頼んどく

現実だといちいち頼まなくても家族が勝手に取っといてくれるだろうがコンピューターは融通がきかないのだ。
余計なことしないとも言う。勝手に開けられてて死亡したことあるしなｗ

**111** · 2018/03/10(土) 17:28:54.32

>>111のfunctionの引数指定 (e) が抜けてた
まあ上位が取って、下位にイベントを当てる、みたいな雰囲気を理解してもらえればいい

プログラミング的にはできるだけ影響を少なく直上の要素などで受けるのが健全
個別にidをつけたり個別にaddEventListenerしたり、としなくてもいい等の利点がある
といっても高尚なパターンとかじゃなくて
誰でも思いついてやってることだと思う

**Name_Not_Found** · 2018/03/10(土) 17:32:12.24

なんでもdocumentで受けるのは
グローバル変数使い放題みたいな印象があるな

**Name_Not_Found** · 2018/03/10(土) 17:32:30.35

それよりliが動的に足し引きされるやつとかの対応だろ
動けばいいや派はここで積む

**Name_Not_Found** · 2018/03/10(土) 17:35:18.21

>>119
そりゃcreateElementするときに個別にaddEventListenerしてからappendChildすれば済む
問題が出るのは、innerHTML操作しかできないわからない層ぐらいじゃね

**114** · 2018/03/10(土) 17:38:01.52

書き忘れたが、今の話のdelegateがjQuery由来ではないのか？というのと
もう一つ、なんでもdocumentというのは、liveメソッドが原因じゃないのか？ということ

jQuery 1.4.2で追加されたdelegateは親要素を指定することができるのだが、
それよりも前に1.3から追加されたliveは親要素は指定できずにdocumentになっていた
（これがわかりづらいという意見があって最終的にonに統一されたのだけれども）

$( "button" ).live( "click", function() {・・・}) だと
buttonではなくdocumentで受け取るようになっていたわけだ

**Name_Not_Found** · 2018/03/10(土) 17:41:11.50

>>121
その辺考えるとjqueryは
documentへの委譲を理解せず使ってバグを生み出すコーダーを量産してたとも考えられるな

**Name_Not_Found** · 2018/03/10(土) 17:49:36.60

>>122
でも当時はdelegateなんて考えなかったからね
だからこそjQueryは内部の処理を隠蔽して
魔法のような機能をしてますみたいな感じだった

また移譲の認識を広めたのもjQuery 1.7から追加されたonメソッドなわけで
ウェブプログラマとDOM APIにかなりの影響を与えたライブラリだな

その数年後にDOM APIにようやくセレクタを使ったアクセスや
比較方法が追加されたわけだしね

**Name_Not_Found** · 2018/03/10(土) 17:56:16.76

>>120
動的に要素いじってる奴とイベント設定したい奴が同じならそうだが…
ライブラリがやってる場合とかなかなかそうもいかない

**Name_Not_Found** · 2018/03/10(土) 18:04:50.18

>>124
あー、言われてみれば確かに
ライブラリ側で受信と共に自動生成されますー、とかあるわ納得
そりゃ親に当てるやりかた思いつけなくて詰むな

**Name_Not_Found** · 2018/03/10(土) 18:05:22.30

>>96
イベントバブリングを少しでも減らすためと思ってる
document.bodyにしないのは、HTMLタグの<body>が省略されてたり、2つ以上書かれてたりすると、
Javascript側のdocument.bodyが不定になるっぽいから

>>111
jQueryのon()を見た感じでは、指定された要素そのものにaddEventListener()してるっぽい
さすがにdocumentだけで全部を処理していると、targetの管理・分岐が大きくなりすぎて処理が重くなると思う

<button><img></button>
という構造の場合、<img>でイベントが発生した場合にevent.targetは<img>になるから、parentNodeをたどって、<button>に内包されてるか確認しなきゃいけない

jQueryもparentNodeをたどってる
第三者のライブラリを使うと自分で書く必要がなくなるというだけの話

**Name_Not_Found** · 2018/03/10(土) 18:08:06.15

>>126
指定された要素そのものにaddEventListenerしているということは
その後に追加された同名classNameを持つ要素に対応できないということになるんだが
それとも、要素追加を監視して逐一リスナ貼り付けてるのか？

**Name_Not_Found** · 2018/03/10(土) 18:10:11.74

>>126
> jQueryのon()を見た感じでは、指定された要素そのものにaddEventListener()してるっぽい

そうだよ。こっそりdocumentになっていたのは古いliveメソッドの話

だからdocumentで受け取るなら
$(document).on('click', ～
とする。

そして本来の要素は第二引数に、このように書く
$(document).on('click', 'button', ～

親要素で受け取るという考え方が広まったので、普通に親イベントで受け取る
だけど、簡単に本来受け取りたかった要素 'button' を指定するのは引数一個と簡単で、
さらにthisは本来受け取りたかった要素になっている

**Name_Not_Found** · 2018/03/10(土) 18:11:00.64

>>127
classNameで指定されたらclassNameでチェックすればいいだけでしょ

**Name_Not_Found** · 2018/03/10(土) 18:12:10.77

>>127
> 指定された要素そのものにaddEventListenerしているということは
> その後に追加された同名classNameを持つ要素に対応できないということになるんだが

だから普通にdocumentにon（addEventListener）するんだってばｗ
そしてonメソッドの第二引数に「指定された要素」を指定することで
まるで「指定された要素」そのものにaddEventListenerしたかのように
違いを吸収してくれている

**Name_Not_Found** · 2018/03/10(土) 18:13:01.00

>>129
> classNameで指定されたらclassNameでチェックすればいいだけでしょ
単純なclassNameだけで判別できる場合ならね

**Name_Not_Found** · 2018/03/10(土) 18:14:33.97

>>131
その結果がjQueryの複雑なチェック方法なのでは

**Name_Not_Found** · 2018/03/10(土) 18:22:21.21

documentをリスナ追加対象にすれば重くなる
最小限の親要素をリスナ追加対象にすればその外に生じた要素に対応できない
対象を考えなきゃいけないのはjqueryなしと変わらない
どこにリスナが追加されるかを意識して使わないといけないのはjqueryなしと変わらない
なんでもかんでもdocumentに追加していては問題が生じる危険がある
いずれにしてもjqueryを使わず普通にできる

なるほど

**Name_Not_Found** · 2018/03/10(土) 18:26:59.86

Jqueryは結局のところ初心者向けじゃないのかな

JQ無しでjs仕様がわかっててJQ無しでコード書けててJQの挙動がしっかり把握できてる人
が一行一文字でも書く文字減らしたいために使う

**Name_Not_Found** · 2018/03/10(土) 18:44:05.61

DOMはJavaScript初心者には難しすぎる
jQueryはJavaScript初心者にちょうどいい

**Name_Not_Found** · 2018/03/10(土) 20:12:56.49

jQuery のソースコードには、IE9 なら、Android 4 ならとか、数十の分岐処理がある

JS で作る人は、これらの分岐処理でバグるから、正常に動作させるのに、10年以上掛かる

例えば、素のJSでは、要素の削除も、一旦その要素の親を取得してから、
親から見て、子供を削除する

var elem = document.getElementById('abc');
elem.parentNode.removeChild(elem);

こういうように書かないと、IE11 では動かない。
だから一々、どのブラウザでは動かないとか、頭を抱える

素のJSで作っている奴は、調べものばっかりして、頭を抱えているけど、
バグの多い製品しか作れないw

基本、調べものばかりしている奴は、コーディングの練習にもならないし、
時間を浪費して、上達しないから最悪

**Name_Not_Found** · 2018/03/10(土) 20:17:15.01

グローバル変数相当に名前空間とクロージャそれぞれどういう長所短所ある？
前者はその都度MyApp.つけなくてはならず

ここの皆はどっち使ってる？

**Name_Not_Found** · 2018/03/10(土) 20:24:02.46

どっちかしか使わないなんてない
名前空間といっても要するに1つのオブジェクトに押し込めるかどうかだけだし

**Name_Not_Found** · 2018/03/10(土) 20:47:24.77

>>136
今時趣味で作るならモダンブラウザオンリーで十分だと思うよ
仮に仕事でIE対応が必要だとしても、考え方が反対だと思う
やっぱり、対応方法はわかってるけど、自作するのは面倒くさい
そこで効果を理解してるライブラリを使うというのが正常だと思う

jQueryを何の為かどういう仕組みか分からず使ってる状態っていうのは
絶対に困る場面が出るし、jQueryの良さを引き出せないよ

**Name_Not_Found** · 2018/03/10(土) 20:51:51.34

今の時代は便利なものをどれだけ使いこなすかのほうが重要になっている

**Name_Not_Found** · 2018/03/10(土) 20:58:50.02

jQueryあにき今日も全開っすね( ´∀｀)bｸﾞｯ!

**Name_Not_Found** · 2018/03/10(土) 21:00:09.08

LSの機能使いたいけど、非対応ブラウザにも対応させたいけど、自分で書くのめんどい！人限定ライブラリ

**Name_Not_Found** · 2018/03/10(土) 21:01:09.03

>>140
なんか言うことが営業っぽい

**Name_Not_Found** · 2018/03/10(土) 21:47:48.46

>>132
> その結果がjQueryの複雑なチェック方法なのでは
何が複雑なの？

**Name_Not_Found** · 2018/03/10(土) 21:59:53.65

>>138
どう使い分けてる？

**Name_Not_Found** · 2018/03/10(土) 22:34:40.91

>>145
使い分けという時点でなんか違う気がしないでもないんだけど
・どう使いたいか・あとから変更したいかどう変更したいか
・状態を持たせたいか持たせるときどんな感じで使うのか
・1個だけあればいいか複数複製したいかnewしたいのかコンストラクタ次第で色々変えたいか
とか色々ある、んだけど

でも手法全体は変えないで後から変更調整を
したいときでもわりとどうにでもなるよね

**Name_Not_Found** · 2018/03/10(土) 23:29:09.80

>>142
それはただのポリフィル
jQueryはあくまでjQueryワールドを提供するだけ

**Name_Not_Found** · 2018/03/11(日) 11:21:14.91

グローバル変数を1つ宣言するのと
関数を1つ宣言するのとでは
グローバルの汚染度は変わらないですよね？

**Name_Not_Found** · 2018/03/11(日) 11:37:34.87

>>148
console.log(globalOsen?'汚染されてる！':'汚染されてない');
var globalOsen = 'キャラメル';
と
console.log(globalOsen?'汚染されてる！':'汚染されてない');
function globalOsen() {
return 'キャラメル';
}
比べてみなよ。
console.log(globalOsen?'汚染されてる！':'汚染されてない');
var globalOsen = function() {
return 'キャラメル';
};
なら変わらないけど。

**Name_Not_Found** · 2018/03/11(日) 12:03:35.32

なんで汚染だけローマ字なんだよ
グローバルもローマ字にしろや

**Name_Not_Found** · 2018/03/11(日) 12:04:51.10

http://mevius.5ch.net/test/read.cgi/hp/1511269113/475

過去スレの質問もってきて何がしたいの？

**Name_Not_Found** · 2018/03/11(日) 12:11:47.07

こんな式を見たのですが、これは何ですか？
var data = ('' == 0 ? '' : '');

**Name_Not_Found** · 2018/03/11(日) 12:19:37.29

いいえ、あなたはそんな式を見ていません

**Name_Not_Found** · 2018/03/11(日) 12:24:51.79

>>153
過去スレで見ましたよ？

**Name_Not_Found** · 2018/03/11(日) 12:25:35.10

>>150
そんなことしたらキャラメルが意味不明になるじゃん

**Name_Not_Found** · 2018/03/11(日) 12:27:22.76

かんちがいしてた。グローバルをローマ字にって話かｗ

**Name_Not_Found** · 2018/03/11(日) 12:29:38.91

>>149
順番が逆

var globalOsen = 'キャラメル';
console.log(globalOsen?'汚染されてる！':'汚染されてない');

function globalOsen() {
return 'キャラメル';
}
console.log(globalOsen?'汚染されてる！':'汚染されてない');

**Name_Not_Found** · 2018/03/11(日) 12:29:59.73

>>156
おじいちゃん？

**Name_Not_Found** · 2018/03/11(日) 12:33:33.61

>>157
お前質問読めよ。それじゃ検証にならないじゃん。
関数を宣言文で書くとホイストがあるから同じ位置に書いた変数と有効範囲=汚染範囲が異なることを示してるの。

**Name_Not_Found** · 2018/03/11(日) 12:42:32.18

汚染ならfilthyだろ
低学歴め

**Name_Not_Found** · 2018/03/11(日) 12:43:10.52

あんまりグローバルに関数宣言しない方がいいんでしょうか？

**Name_Not_Found** · 2018/03/11(日) 12:43:59.55

>>160
キャラメルとかけてるさっむいギャグがわからんのか

**Name_Not_Found** · 2018/03/11(日) 12:49:30.07

>>161
関数も変数もないよ。使うところ以上にスコープ広げるな

**157** · 2018/03/11(日) 12:55:13.86

>>159
そういうことか
スコープだけ見てたすまん

一応、var宣言でも、未定義の変数として存在はしてるけどな

**Name_Not_Found** · 2018/03/11(日) 13:18:09.70

var globalOsen = false;
console.log(globalOsen?'汚染されてる！':'汚染されてない');

**Name_Not_Found** · 2018/03/11(日) 13:27:22.01

>>157
初心者で申し訳ないのですがキャラメルとはなんでしょうか？
jsの作法か何かなのでしょうか？

**Name_Not_Found** · 2018/03/11(日) 13:59:08.64

空にDocumentFragmentに要素を追加していって、最後にそれをDOMツリーに追加する
という方法をjQueryでやるにはどうすればいいのでしょうか？

**Name_Not_Found** · 2018/03/11(日) 14:13:06.21

×空にDocumentFragment
○空のDocumentFragment

でした

**Name_Not_Found** · 2018/03/11(日) 14:25:05.03

>>167-168
スレ違いだからこっち↓に書いといたよ
+ JavaScript & jQuery 質問用スレッド vol.8 +
http://mevius.5ch.net/test/read.cgi/hp/1510321470/66

**Name_Not_Found** · 2018/03/11(日) 14:35:10.79

>>169
見ましたが書かれていませんでした

引数を指定しなければDocumentFragmentになるんじゃないかと思って
$()
にappendしてからbodyにappendToしてみたりしましたがうまくいきません
jqueryでDocumentFragmentを作成するにはどうすればいいのでしょうか？

**Name_Not_Found** · 2018/03/11(日) 14:39:16.31

ちゃんと書かれてるじゃんｗ
+ JavaScript & jQuery 質問用スレッド vol.8 +
http://mevius.5ch.net/test/read.cgi/hp/1510321470/66
66 Name_Not_Found sage 2018/03/11(日) 14:23:30.11 ID:???
こっちに書けマヌケ

**Name_Not_Found[黙祷]** · 2018/03/11(日) 14:46:11.07

>>171
自治厨はほっておきましょう
相手にするだけ無駄です

**Name_Not_Found** · 2018/03/11(日) 14:47:48.87

>>167
Using jQuery's $.map() Method To Convert Data Into Detached DOM Node Buffers
https://www.bennadel.com/blog/2280-using-jquery-s-map-method-to-convert-data-into-detached-dom-node-buffers.htm

jQuery Appends Multiple Elements Using Efficient Document Fragments
https://www.bennadel.com/blog/2281-jquery-appends-multiple-elements-using-efficient-document-fragments.htm

**Name_Not_Found** · 2018/03/11(日) 14:53:19.28

クズめ
67 Name_Not_Found sage 2018/03/11(日) 14:50:07.36 ID:???
マヌケじゃないのでこっちにはかかない

**Name_Not_Found** · 2018/03/11(日) 14:53:50.08

専用スレがある場合はそっちで聞いたほうが、より詳しい回答が得られることがある

**Name_Not_Found** · 2018/03/11(日) 14:59:26.95

普通にjQueryでDocumentFragmentをappendできるんだな。
http://jsfiddle.net/hc5ED/6/

>>173を読むと場合によっては内部でDocumentFragmentが
使われるようであまり意識しないで良いのかもしれないな

**Name_Not_Found** · 2018/03/11(日) 15:00:40.75

>>173
ありがとうございます
しかし英語ということもありよく分かりませんでした
jQueryオブジェクトを配列に入れてappendしたら
それはdocumentFragmentにされてからappendされる
ということでしょうか？

**Name_Not_Found** · 2018/03/11(日) 15:01:01.47

あるぞ専用スレ
jQuery 質問スレッド vol.8
http://mevius.5ch.net/test/read.cgi/hp/1508707878/714

**Name_Not_Found** · 2018/03/11(日) 15:07:37.82

>>176
$(document.createDocumentFragment())
という方法は自分もさっき思いついてやってみましたが
無理矢理jQueryを使ってるみたいな感じが若干引っかかります
ある程度抽象化した方法でdocumentFragmentを作る方法を
jQueryが提供していればいいのですが。
配列にして渡したら良きにはからうから気にするなということでしょうか
ありがとうございました

**Name_Not_Found** · 2018/03/11(日) 15:09:59.21

>>177
多分そういうことなんじゃないかなって思うけどよくわからないね
単に複数の要素をいっぺんに追加したいだけならjQueryのメソッドで普通にできるし
正直DocumentFragmentを使うほど速度が必要なことってない。
もし本当に速度が必要ならそこだけ局所的にDOM API使うだけだし、
jQueryで明示的にDocumentFragmentを使おうって思ったことがないな

**Name_Not_Found** · 2018/03/11(日) 15:12:59.05

>>179
> 無理矢理jQueryを使ってるみたいな感じが若干引っかかります

別にそんな事ないよ。

https://api.jquery.com/jQuery/#jQuery-element に書いてあるとおり、
jQuery関数（$関数）の引数にDOM要素を使うのはごく普通のことで
よく使われる $(document) だってDOM要素を使ってる。

createDocumentFragmentで作られるのもDOM要素の一種なんだから
それはごく普通の使い方

**Name_Not_Found** · 2018/03/11(日) 15:45:22.87

var variable = variable || 'char'; // 'char'以外でも123でもfunctionでも、あるいは2個でなく3個4個でも

この式は、どういう理屈で動いているんでしょうか？
variableの内容がundefinedだけでなくfalseになる値であっても内容が変わってしまう点はおいておくとしても

variableの内容に入りうるのがbooleanだけでないことや
||を&&に変えると右辺全体がtrueにならないと値が変更されないこと
||を&&に変えると右辺全体がtrueになるときでも&&で区切られた最後の値がvariableに入ることなど
どういう動作をするものなのか理解できません

**Name_Not_Found** · 2018/03/11(日) 15:54:26.47

右辺が云々は、単にvariableがfalsyなら新しい値を入れることを目的にしているから
入る値の方がbooｌeanだったりstringなのはそれで構わないコードなんだろう
要するにその変数に対してその段階に置けるデフォルト値を設定したい意図だと思う

**Name_Not_Found** · 2018/03/11(日) 15:56:51.99

論理演算子 - JavaScript | MDN
https://developer.mozilla.org/ja/docs/Web/JavaScript/Reference/Operators/Logical_Operators

**Name_Not_Found** · 2018/03/11(日) 15:58:08.42

https://chrome.google.com/webstore/detail/save-my-eyes/mbhpdkldehghoilbopkcpfijdhnincmh?utm_source=chrome-app-launcher-info-dialog
このクロム拡張が勝手にマイニングしてるみたいなので暇なひとソースよんで解析して
自分にはわからなかった。

グーグルには不正行為通報したので削除されるのかな? 👀
Rock54: Caution(BBR-MD5:1777ba470a0705a8ff6b3177e04ccfb6)

**Name_Not_Found** · 2018/03/11(日) 16:03:50.28

>>185
面倒くさいんで、ソースコードどこかにアップして

**Name_Not_Found** · 2018/03/11(日) 16:03:59.62

>>184
ああ、javascriptの論理演算子の仕様そのものがそういう仕様なんですか
論理演算の結果はboolか、それか0 or 1で返す
ものだとばかり考えていて、特殊な構文か何かかと思っていました

**Name_Not_Found** · 2018/03/11(日) 16:42:58.24

>>187
結構多いぞ。こういう仕様の言語

**Name_Not_Found** · 2018/03/11(日) 17:02:42.46

>>188
他にはpythonくらいしか知らんわ

**Name_Not_Found** · 2018/03/11(日) 17:44:13.35

cからして似たようなもんだった気が。
式1||式2の全体の評価結果は
式1の評価結果が0のとき式2の評価結果、
式1の評価結果が0以外のとき式1の評価結果(を直ちに返し式2は評価されない)
int a;
if (a = (3+2)||99) {
printf("%d", a);
}
結果は1ではなく5だったかと。

**Name_Not_Found** · 2018/03/11(日) 17:54:16.75

#include <stdio.h>
int main(){
int a;
a = ( 6 + 9 ) && ( 0 || 2 ) ;
printf("%d", a); // 1
}

**Name_Not_Found** · 2018/03/11(日) 17:56:09.10

>>191
そうだっけ？そうだったらゴメン

**Name_Not_Found** · 2018/03/11(日) 17:59:39.61

>>192
いいってことよ
C系は原則1/0(true/true)を返すはずでphpやjavaも同仕様だったかと
理由は型どうすんの問題か

**Name_Not_Found** · 2018/03/11(日) 18:04:01.32

true/trueってなんだよtrue/falseです

**Name_Not_Found** · 2018/03/11(日) 18:08:48.24

>>193
k&rに0か1返すて書いてあったわ
cで仕事してたことあるのにハズカシス

**Name_Not_Found** · 2018/03/11(日) 18:20:47.03

下のコードが構造的にどうやって動いてるかいまいちよくわからない
formElementに2つの要素いれてそれにそれぞれイベントリスナーをついかしてるんだけど
なんでそれぞれ別個に作動するの?
2つめのformElementでcanvasHeightChange()を追加するときは
formElementに2つの要素がはいってるから両方にcanvasHeightChanged()が追加されるような気がするし
関数内でも別個に認識してcanvas.heightとcanvas.width変数を変更できる仕組みがよくわからない

<from>
canvas width: <input type="range" id="canvasWidth"
min="0" max="1000" step="1" value="500"> <br>
canvas Height: <input type="range" id="canvasHeight"
min="0" max="1000" step="1" value="500"><br>
</from>

formElement = document.getElementById("canvasWidth")
formElement.addEventListener('change', canvasWidthChanged, false)

formElement = document.getElementById("canvasHeight")
formElement.addEventListener('change', canvasHeightChanged, false)

function canvasWidthChanged(e) {
var target = e.target
theCanvas.width = target.value
drawScreen()
}

function canvasHeightChanged(e) {
var target = e.target
theCanvas.height = target.value
drawScreen()
}

**Name_Not_Found** · 2018/03/11(日) 18:43:57.11

フロム

**Name_Not_Found** · 2018/03/11(日) 18:47:17.08

>>196
そういう（両方に…追加されるような気が）考えを持ってるなら
なんでformElementに対して = を使ってんの、というところが気になった

**196** · 2018/03/11(日) 18:48:19.25

formElement = document.getElementById("canvasWidth") // ここでformElementにcanvasWidthをいれる
formElement.addEventListener('change', canvasWidthChanged, false) //formeElement経由でcanvasWidthの要素にcanvasWidthChanged()を付け足す

formElement = document.getElementById("canvasHeight") //上で入れた要素をは破棄されて中身が入れ替えられる
formElement.addEventListener('change', canvasHeightChanged, false) //ここでイベントリスナをついかする

ってことかな?
formElementの変数内でイベントリスナを管理してるわけななくて
経由して各要素に追加されてるってことなのかな?

**198** · 2018/03/11(日) 18:49:12.10

>>198
本に書いてたコードです