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

**Name_Not_Found** · 2018/07/31(火) 12:30:52.90

JavaScript を自ら学ぶ人のための質問スレッドです。
次スレは>>950が(本スレで改善案があれば考慮して)立ててください

■規則/推奨ルール
・メール欄を空欄にし、名前にレス番を入れることを強く推奨(なりすまし防止)
・質問内容は具体的に。言葉だけでなく、出来る限り再現性を確認したサンプルコードの掲示。
・質問テンプレートの利用推奨。
・質問への「答え」だけでなく「意見」を出しても良い。

■禁止行為
・丸投げ質問
・迷惑スクリプトの質問
・オレオレ用語の使用(一般的な用語を使用する事)
・煽り、批判等の他人を不快にさせる行為(批判の代わりに「AよりBが良い」のような代案を出す事)

■質問テンプレート
【環境】OS, ブラウザをバージョンと共に記入してください。
【条件】期待する回答の条件を書いてください。
【何をしたのか】何をしたら問題の現象が発生するのか。再現手順を具体的に書いてください。
【エラーメッセージ】エラーメッセージがあれば正確に書き写してください。
【期待する結果】最終的にどういう結果を望んでいるのか、を書いてください。
【サンプルコード】現象を再現可能な最小限のコードを書いてください。
　1レスに収まらないならコード投稿サイトを利用してください。
　http://jsdo.it/　http://jsbin.com/　http://jsfiddle.net/　http://ideone.com/

■回答者へ
・回答には多様性があります。他人の回答を尊重してください
・動作ブラウザや環境が限られる場合は、それを明記してください
・他人の回答を批判する代わりに、自分ならこう書くという例を示してください
・質問者がJavaScriptでなければ実現できないと勘違いしてるなら、その否定としてHTMLとCSSで実装しても良い
・他人の回答を見たくないのであれば、文句をつける代わりにNGにして見えないようにしてください。文句をつける＝荒らしです

**628** · 2018/10/21(日) 19:34:16.74

ありがとうございます！よくわかりました。これで先に進めそうです。またお願いします

**Name_Not_Found** · 2018/10/22(月) 16:24:37.89

適当に書くときはいいけど
慣れちゃうとちょっと怖いよね
args.lengthがundefinedでもnullでもfalseでも通っちゃうし

**Name_Not_Found** · 2018/10/23(火) 20:39:26.75

>>633
それが排列であることを確定させているなら、問題はないかと

**Name_Not_Found** · 2018/10/23(火) 21:09:50.10

排泄

**Name_Not_Found** · 2018/10/23(火) 21:20:03.47

NodeRedって流行ってるの？
知識ない自分の力量不足だけど使いにくい…

**Name_Not_Found** · 2018/10/23(火) 21:23:36.40

https://blechmusik.xii.jp/d/misc/hairetu/

**Name_Not_Found** · 2018/10/23(火) 22:49:46.08

>>636
ハイパーカードを思い出す
これでできる範囲のことであれば楽できるね
ってやーつだと思ってる

**Name_Not_Found** · 2018/10/23(火) 23:39:33.33

>>638
簡単なUI作ったりするのは便利なんだけどDBとのやりとりとかExcelに出力したりさせようとしたら訳わからなくなって詰まった
こういうのをNodeRedでやろうとするのが間違ってるのかなぁと思ったり

**Name_Not_Found** · 2018/10/25(木) 12:47:18.40

>>631
lengthはプロパティでもメソッドでもなくプロパティアクセス時にArrayの内部プロキシによって特別に扱われる名前
アクセサメソッドにも近い

**Name_Not_Found** · 2018/10/25(木) 14:43:57.61

Pythonを学習中です。
Webの事は全くの素人です。
スクレイピングや可視化する際、CSS XPath JavaScriptなどの事が分からなくて行き詰まってしまいました。

PythonとJavaScriptではじめるデータビジュアライゼーションという本で詰まりました。
知人にJavaScript第5版という古い本をもらいましたが、言語仕様が延々と書いてあるような感じで、自分には早過ぎました。
CSS、XPath、JavaScriptこの辺りを体系的に学べるおすすめの本あったら教えて欲しいです。

**Name_Not_Found** · 2018/10/25(木) 14:49:57.07

>>640
今でも読まれるたびに数えてんですかね？

**Name_Not_Found** · 2018/10/26(金) 07:06:26.78

うろ覚えだが呼ばれるたびに数えてたことはなかっただろう
更新のたびに内部プロパティを更新してそれを読み出すような仕組みじゃなかった？

**Name_Not_Found** · 2018/10/26(金) 07:43:19.89

>>642
getterではなく、setter

**Name_Not_Found** · 2018/10/26(金) 12:56:08.60

getterでもsetterでもなくね

**Name_Not_Found** · 2018/10/26(金) 13:05:10.89

>>641
HTML, CSS, JavaScript は、初心者用の本を読む。
CSS セレクターは、jQuery で学ぶ

または、CSS セレクター・XPath は、入門用サイトを見る

CSSセレクターは、jQueryの本に書いてあるけど、
XPathは、どの本にも書いていないから、入門用ウェブサイトを見る

XPathは重要度が低いから、無視してもよい。
CSSセレクターを使う方が、読みやすい

**Name_Not_Found** · 2018/10/26(金) 20:12:27.73

プログラミングは体系的には学べない
分からなければ分かるようにならない
でもそこで諦めたらそこまで
「言語仕様が延々と書いてあるような感じ」と思ったのなら
分かったのが0ということではないはず
最悪書いてある日本語は読めるのだから、1万分の1は分かるだろう
なら5万回分読めばいい
そしたら1-(1-0.0001)**50000で0.9932637373893968で99％理解できる
分からなくてもほんの少しは分かるまで血を吐きながら無理やり頑張る
その繰り返しの修行で覚えるのがプログラミング

**Name_Not_Found** · 2018/10/26(金) 20:44:33.09

俺もXPathは後回しでいい…ってかやらなくてもいいと思う。
昔はCSSセレクタより表現力高いからとか言われてたがよくも悪くもXML全般に使われる汎用仕様だからな。
HTML/CSS仕様に寄り添い、技術要素疑似セレクタも使えて素のJavascriptやjQueryなどでも手厚くサポートされているCSSセレクタ覚えたらWeb系技術以外扱わないならXPathなんて正直いつ使うんだっていう。
Javaとかやるなら別だけど…
あれか、Pythonと一緒にやろうとしたからPythonライブラリの都合に引っ張られちゃったんだな！

**Name_Not_Found** · 2018/10/26(金) 21:02:05.71

>>647
書いてて恥ずかしくならない？
読んでて赤面したわｗ

**641** · 2018/10/26(金) 21:35:04.99

どうもありがとうございます
結果的にPythonスレとマルチポストになってしまっていたらごめんなさい。

>>646
PythonスレのRubyの方ですかね？
その節はありがとうございます。
初心者用というのはHTML5の初心者という事ですよね？
よく分かる〇〇とかいちばんやさしい〇〇だとか過去に読んだことあるんですが、その手の本ってパソコンそのものの初心者が対象なのか、
〇〇のコードを使ったらハンバーガーメニューが出せますとか、このコードを使ったらこういうレイアウトに出来ます。今流行りのスマホPC両対応のレスポシブなんちゃらのカッコいいホームページを作ろう、みたいな。
そういう本って理屈は置いておいて、カッコよさげなホームページが作れた。よかったね、っていう感じの本だから、
それぞれのコードの中身や用語の解説じゃないから結局提示されたcssのコピペだけで終わり訳もわからず応用が利かず結局何も身に付かなかったです。
オライリーからPythonの本が大量に出てるけどそんな感じの本があればいいんですが。

>>647
やっぱ甘えてますね、自分。
辛いけど、出来るようになりたいから読むしかないのかぁ。

**641** · 2018/10/26(金) 21:35:51.39

>>648
Webサイト作りそのものには全く感心は無いんですが、Pythonを学ぶうちに作ったデータの可視化をWebでやりたくなりました。
Pythonを学んだら今までは怖かったJavaScriptも基本的な文法はPythonで書いた場合を考えながらやればJavaScriptでもSwiftでもObjective-Cも何となく理解出来るようになりました。
JavaScriptもWeb用のナニカじゃなくて、これもPythonと同じプログラム言語だと分かったのでおもしろくなってきたました。

XMLを弄るにもXPathが分かれば簡単に弄れそうなんですが、XPathそのものが難しい。
Chromeの開発者ツールの使い方も分からないままだし。

>>649
けど、正論だと思いました。

オライリーからHTML5という本が出てますけれど、7年以上前の本だからやめておいた方がいいでしょうか？

>>641 で読んでる本の最初のページにこんなイラストが載ってました。
https://i.imgur.com/H3vQCNy.jpg
まさに自分もこんな認識です。

**Name_Not_Found** · 2018/10/26(金) 22:05:29.26

>>651
セレクタを覚えるなら、jQueryよりCSSを覚えた方が良い
jQuery拡張記法を覚えても何にもならん
https://triple-underscore.github.io/selectors4-ja.html

XPathは今でもCSSセレクタ以上の事が出来るが、日本語の資料は多くないので、初心者向きではないだろうな

**Name_Not_Found** · 2018/10/26(金) 22:10:26.33

>>645
Array(10).length = 1; // これはsetterでは？

**Name_Not_Found** · 2018/10/26(金) 23:44:44.27

getter, setterという場合、
Array(10).getLength();
Array(10).setLength(5);
などのようにメソッドの形を取る。

Array(10).length = 1;
は上のsetLengthとやることは同じだが、(実装はどうあれ)プロパティ形式を取っているのでsetterとは呼ばない。

なお説明に使っただけでArrayにgetLength、setLengthとあったメソッドは無い。

**Name_Not_Found** · 2018/10/27(土) 06:58:31.07

TypedArrayのlengthはgetter,setterだが
Arrayのlengthは内部プロキシが特別に扱っている名前というだけ

**Name_Not_Found** · 2018/10/27(土) 08:54:32.87

>>654
https://developer.mozilla.org/ja/docs/JavaScript/Reference/Operators/set

**Name_Not_Found** · 2018/10/27(土) 10:10:23.05

>>656
Atrayのlengthはset/getが使えなかったときからある。だから>>655

**646** · 2018/10/27(土) 18:26:45.84

漏れが、XPath を使うのは、CSS セレクターでできない場合だけ。
例えば、5ch の書き込み内のa タグを抜き出すなら、

このCSSセレクターでできるけど、
div.thread > div.post > div.message > span > a

a を含む、post_node だけを抜き出す場合、
div.message の子孫で、aタグを含むものがある場合、
そのaタグの祖先のdiv.post を抜き出す。
(自分の処理では、div.postを主体に処理している場合)

CSSセレクターでは、div.message div.post a

descendant は子孫、ancestor は祖先。
post_nodes = doc.xpath "//div[@class='thread']/div[@class='post']/div[@class='message']/descendant::a/ancestor::div[@class='post']"

子孫に何々要素がある場合の、その祖先を求めるとか、
条件が複雑で、CSSセレクターでは表せない場合だけ、XPathを使う

jQueryのCSSセレクター一覧表を見て、それでできなければ、XPathを使う

**Name_Not_Found** · 2018/10/27(土) 19:38:24.03

:has擬似クラスが仕様に入ったからXPathの出番はますます無くなる

**Name_Not_Found** · 2018/10/27(土) 22:40:17.34

>>659
これマジうれしい

**Name_Not_Found** · 2018/10/27(土) 23:59:35.53

jQueryは:hasに独自で対応しているから、JavaScriptでは
もうXPathの出番はなくなってるね。

**Name_Not_Found** · 2018/10/28(日) 00:21:16.71

XPathってJavaScript以外で使えたっけ？
jQueryで:hasが使えるならもういらないような

**Name_Not_Found** · 2018/10/28(日) 00:36:19.99

>>662
なに言ってんだ各言語にライブラリ出てるよXPathくらい…

**Name_Not_Found** · 2018/10/28(日) 08:23:02.53

>>657
その理屈はおかしい
lengthはProxyがない時代からある

**Name_Not_Found** · 2018/10/28(日) 11:37:15.18

漏れは、Ruby のNokogiri で、XPath, CSS セレクターを使っている

**Name_Not_Found** · 2018/10/28(日) 13:38:53.56

>>655
文盲かな？

**Name_Not_Found** · 2018/10/28(日) 13:39:15.20

>>664だった。

**Name_Not_Found** · 2018/10/28(日) 14:38:20.99

Proxy APIの話ではなくプロパティが設定されるときに働く
[[DefineOwnProperty]]内部メソッドをオーバーロードしてlengthを書き換えてることを
分かりやすく内部プロキシと言い換えただけなのにね

**Name_Not_Found** · 2018/10/28(日) 22:26:18.35

漏れ、って久しく見ないな
懐かしい

**Name_Not_Found** · 2018/10/29(月) 09:06:25.00

>>666-658
同じ言葉をそっくり>>657に返したいね

> Atrayのlengthはset/getが使えなかったときからある。だから>>655
setがなくても、setterとして機能があればsetterだろう
lengthプロパティ代入時に処理が働くのだから、setter以外にそれを実現する方法はない

ついでにいうと、>>654もおかしい
プロパティだからsetterじゃない、とかどの言語の話だ？

**Name_Not_Found** · 2018/10/29(月) 09:11:35.57

>>668
>>653からどうしてその話が出てくるんだ？
おまえのいってるのは、
Array(1)[3] = 1;
だろう

**Name_Not_Found** · 2018/10/29(月) 10:27:51.41

Proxyでのハンドリングもsetterと言うのならArray#lengthもsetterと呼んでいいと思うけど
普通JSでsetterって言ったらプロパティディスクリプタがアクセサタイプでsetにメソッドが入ってる状態を言うと思うけどな

**Name_Not_Found** · 2018/10/29(月) 10:29:06.09

>>671
いや、数値文字列と、lengthの２種類ともを特別に扱ってるんだよ

**Name_Not_Found** · 2018/10/29(月) 12:34:14.87

>>672
あなたのいう、setterとProxyの違いは何だ？
lengthは余所から書き換えられる場面は多々あるが、lengthそのものはProxyを使うほどの機能があるとは思えんのだが
http://www.ecma-international.org/ecma-262/9.0/#sec-properties-of-array-instances-length

**Name_Not_Found** · 2018/10/29(月) 19:36:10.52

でlengthはなんて呼んだら良いの？
https://developer.mozilla.org/ja/docs/Web/JavaScript/Reference/Global_Objects/Array/length
これも直した方が良いってこと？

**Name_Not_Found** · 2018/10/29(月) 19:41:22.88

MDNはprototype経由せずDateやらArray やらから直接生やされたメソッドを静的なメソッドと表現したりクラスベースの人に配慮した柔軟な記述見かけるよね。

**Name_Not_Found** · 2018/10/30(火) 06:56:22.75

>>674,675
その疑問は全てここまでに書かれてるよ
もう一度読み直してみて

**Name_Not_Found** · 2018/10/30(火) 08:34:44.71

>>677
> [[DefineOwnProperty]]内部メソッドをオーバーロードしてlengthを書き換えてることを
> 分かりやすく内部プロキシと言い換えただけなのにね

これがProxyの条件か？
ただの内部プロパティを書き換えるだけでProxy扱い
しかも、Array(19).length = 1; 時に [[DefineOwnProperty]] が書き換わらんし、到底理解できんな

**678** · 2018/10/30(火) 08:40:23.79

> しかも、Array(19).length = 1; 時に [[DefineOwnProperty]] が書き換わらんし、到底理解できんな

訂正する
Array(19)[1] 以降が削除されるので、[[DefineOwnProperty]] は確かに書き換わる
しかし、他所のプロパティ [[DefineOwnProperty]] が書き換わるだけで、lengthプロパティはProxyの動きをしていない

**Name_Not_Found** · 2018/10/30(火) 09:16:03.64

こういう事かな

const a = [];
a[0] = 1; // 668「a[0] はProxyなプロパティです」→OK
a.length = 0; // 668「a[0]を書き換えるa.lengthもProxyなプロパティです」→ん？

この場合、a.lengthを書き換えるa.fooを定義したら、a.fooもProxyになる
Proxyが感染していく

**Name_Not_Found** · 2018/10/30(火) 12:07:55.19

hey YO! チェケラッチョ！

**Name_Not_Found** · 2018/10/30(火) 12:55:41.57

>>679
大きな勘違いしてるね、Arrayのインスタンスオブジェクトはlengthと言う通常のプロパティを持っているが
それと同時に数値文字列と"length"という文字列のプロパティ設定に関して特別な振る舞いをするんだよ
つまりProxyのようなのはArrayのインスタンスの事であって、
そのプロキシは"length"プロパティアクセスがあると、間接的にlengthプロパティを設定して配列の要素を調整すると言う動作をするんだよ
ただし、setterとは違うという話

**Name_Not_Found** · 2018/10/30(火) 13:09:50.35

ようそこまで内部動作把握してるな
こういう人はそんなの当然って言うんだけど大半の人はそんなの無理

**Name_Not_Found** · 2018/10/30(火) 14:08:55.83

アニメスレに沸く小説板から来た設定厨を思い出しました。

**Name_Not_Found** · 2018/10/30(火) 19:02:56.34

>>682
勘違いなどしていない
setterのトラップで内部プロパティが書き換わるだけ
setter以外のトラップが必要なら、それを示してくれ

**Name_Not_Found** · 2018/10/30(火) 19:11:18.70

>>681
やっとわかった
ラッパーって言いたいのかw

**Name_Not_Found** · 2018/10/30(火) 19:19:02.36

>>686
誰もわかってくれないからって自己レスするな

**Name_Not_Found** · 2018/10/30(火) 19:23:08.67

>>668は確かにwrapperって感じだが、wrapperとsetterは両立出来るんだよなあ

**Name_Not_Found** · 2018/10/30(火) 20:13:36.59

わかっててスルーしてるにきまっとるじゃろ

**Name_Not_Found** · 2018/10/30(火) 21:00:05.07

ぶっちゃけ、>>653がsetterで実装できなくて、Proxyでなければ実装できない機能って何なの？

**Name_Not_Found** · 2018/10/30(火) 21:50:37.00

>>685
勘違いというか、全く分かっていなかったんだね
実際Arrayオブジェクトのlengthはsetterではないということが話の肝

Arrayのlengthは普通のオブジェクト固有のプロパティだ
Object.getOwnPropertyDescriptor( Array(1), 'length' )
// {value: 1, writable: true, enumerable: false, configurable: false}

参考までにTypedArrayのlengthは共通親クラスから継承したgetterだ
Object.getOwnPropertyDescriptor( Uint8Array.__proto__.prototype, 'length' )
// {get: ƒ, set: undefined, enumerable: false, configurable: true}

ならArrayのlengthへ値を代入したときの振る舞いなどはどう説明するのかといえば、
Arrayオブジェクトのプロパティ設定のトラップでlengthを特別扱いしてるということだ
そしてそれはもちろんsetterとは違う

言い換えればArrayオブジェクトはそのただ１点を除いて普通のオブジェクトと何にも変わらない
[ 'a', 'b', 'c' ]は{ '0':'a', '1': 'b', '2': 'c', 'length': 3 } と全く違いはない
ただたった一つ、[[DefineOwnProperty]]内部メソッドの振る舞いが違う、
プロパティアクセス時に'length'と数字プロパティへの設定を特別に監視するということだけが
ArrayをArrayたらしめてる理屈

**Name_Not_Found** · 2018/10/30(火) 22:04:42.06

>>679のこの行がそもそもだいぶトンチンカン
>>Array(19)[1] 以降が削除されるので、[[DefineOwnProperty]] は確かに書き換わる
[[DefineOwnProperty]]は内部「関数」なのだから、書き換わったりしない、呼ばれる対象
そしてlength要素に設定時に適宜配列のプロパティが消されるから呼ばれるのではなくて、
length要素設定時にこれが呼ばれたときに間接的にプロパティを消してる、因果が逆
因みにプロパティが消されるときに呼ばれるのは[[Delete]]
[[DefineOwnProperty]] はこの場合関わらない

**Name_Not_Found** · 2018/10/30(火) 23:07:23.33

>>691
へー知らなかった

**Name_Not_Found** · 2018/10/30(火) 23:28:54.54

そもそも、length に設定するのが、おかしい。
意味不明のソースコード

普通は参照しかしない

**Name_Not_Found** · 2018/10/31(水) 01:25:47.55

>>694
ザコは黙ってろ

**Name_Not_Found** · 2018/10/31(水) 11:52:21.98

>>691
勉強になったわ

**Name_Not_Found** · 2018/10/31(水) 15:55:58.36

new Int8Array([1,2,3]).__lookupGetter__('length')
//=> f length() { [native code] }
[1,2,3].__lookupGetter__('length')
//=> undefined

ほんまやTypedArrayのlengthにはGetter設定されてるけどArrayは無い

**Name_Not_Found** · 2018/10/31(水) 15:56:05.22

だからtypeof new Arrayは'object'なんだよな
そこしか違いがないから

**Name_Not_Found** · 2018/11/01(木) 02:16:21.76

大雑把にはわかっていたつもりだったけど
詳しい説明ありがたいわ

**Name_Not_Found** · 2018/11/02(金) 09:27:19.04

jQueryの.nextUntil() をJavaScriptで書くのは難しいでしょうか？

**Name_Not_Found** · 2018/11/02(金) 11:56:52.88

>>700
難しいかどうかはその人のスキルによるとしか。。。

**Name_Not_Found** · 2018/11/02(金) 13:12:13.08

困難かという意味ではそうでもないかも
parentNodeのChildNodesを、その要素以降順に見ていくだけだから
ていうか、jQueryだってJSで書かれているわけだしね

**Name_Not_Found** · 2018/11/02(金) 14:27:31.10

nextSibling

**Name_Not_Found** · 2018/11/02(金) 14:57:52.92

質問を変えて、jQueryの.nextUntil()をDOM API以外のライブラリを使わずに
10行以内（セミコロン不使用、横80文字まで、普段やらない書き方を使うのなし）で
作れるでしょうか？だったらどう？

**Name_Not_Found** · 2018/11/02(金) 15:08:06.56

まず親要素のquerySelectorAllで
セレクタにマッチする小要素を全部取り出しておく

目的の要素のnextSiblingが、上のマッチした要素群に含まれれば当たり
なければ次のnextSiblingを見る

なんとか80字でいけるか？

**Name_Not_Found** · 2018/11/02(金) 15:22:12.61

全部取り出しておいてfilterしてもいいし、
ただ単に次の要素を見ていくだけのイテレータでもいい
５行くらいの関数で書けるんじゃない?

**Name_Not_Found** · 2018/11/02(金) 16:49:57.19

function nextUntil(el, selector){
const result = [];
while(el = el.nextElementSibling){
if(selector && el.matches(selector)){
break;
}
result.push(el);
}
return result;
}

こんな感じか。matchesはIEで動かんからポリフィルを追加して
https://developer.mozilla.org/ja/docs/Web/API/Element/matches

**Name_Not_Found** · 2018/11/02(金) 18:30:13.65

はー
matchesなんてあったんだな
勉強になる

**Name_Not_Found** · 2018/11/02(金) 20:12:43.52

及川光秀

**Name_Not_Found** · 2018/11/03(土) 07:10:10.07

function * nextUntil ( el, sel ) {
while ( el = el.nextElementSibling && ! el.matches( sel) )yield el
}

**Name_Not_Found** · 2018/11/03(土) 22:22:33.52

>>707
上手く行きました。
凄いですね、こんなのを書けるなんて。
>>710
私にはレベルが高すぎて付いて行けません。
結果の取り出し方を教えて下さい。

**Name_Not_Found** · 2018/11/03(土) 22:44:24.52

>>710は単なる技術マウントだから無視してよい。

**Name_Not_Found** · 2018/11/04(日) 02:57:07.43

沖侑果　CMに抜擢！

萩原工業CM (ハミダセ、アミダセ篇 )
http://www.youtube.com/watch?v=LDSJwe6i1kU

萩原工業CM (グローバル・ハミダセ篇)
http://www.youtube.com/watch?v=RiJhTSMp_MI

萩原工業CM (開発・アミダセ篇)
http://www.youtube.com/watch?v=1xxgGGPQmQk

萩原工業CMメイキング映像 (萩原工業×STU48)
http://www.youtube.com/watch?v=EG591Nw3ErA

**Name_Not_Found** · 2018/11/04(日) 03:23:50.49

技術マウントだからと言って無視するか、
技術を勉強するか

どちらを取るかね？

**Name_Not_Found** · 2018/11/04(日) 04:32:09.76

>>711
>>710は代入演算子と論理積演算子の優先順位を間違えているから結果がバグっている。
修正してオプションのfilter足してjqueryのnextUntilの
http://js.studio-kingdom.com/jquery/traversing/next_until
のデモと同じことする使い方を
https://codepen.io/anon/pen/VVwdQB
に上げた。
しかし結果を配列でまとめて取り出す使い方しかしないなら
https://codepen.io/anon/pen/YRzvWa
みたいになりわざわざジェネレータ使う意味ないしこんなことするなら>>707のほうがいいな。

**Name_Not_Found** · 2018/11/04(日) 06:28:04.76

一番いいのはjQueryを使うこと

**Name_Not_Found** · 2018/11/04(日) 10:01:07.40

>>715

=>
...
yield
など知らない文法ですが、テストしたら動きました。
大変参考になりました。このコードが理解出来るように勉強します。

ところで707 nextUntilを応用してnextAllを作ってみたのですが、これで良いでしょうか？

function nextAll(el, selector) {
const result = [];
while (el = el.nextElementSibling) {
result.push(el);
}
return result;
}

一つ質問ですが、const指定しているresult変数に値を代入しても良いのですか？
定数なら変更してはいけないような印象を受けるのですが。

**Name_Not_Found** · 2018/11/04(日) 10:14:41.54

いいよ

**Name_Not_Found** · 2018/11/04(日) 10:52:13.08

>>717
再代入はされてない

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

>>719
良く分からないのですが、
C言語などならconst指定があると値を代入出来ませんよね。
JavaScriptのconstはそうでは無いのですか？

**Name_Not_Found** · 2018/11/04(日) 11:20:32.34

>>720
result = 1;
で正しくエラーになる

**Name_Not_Found** · 2018/11/04(日) 12:15:16.17

>>721
ではJavaScriptにはCやC++のconstに相当するものはありますか？
つまり一切変更出来ない定数。

**Name_Not_Found** · 2018/11/04(日) 13:15:33.79

CやC+に一切変更ができないconstなんかありません

**Name_Not_Found** · 2018/11/04(日) 13:18:38.69

chromeだけど、dataスキームで新しいタグ開いてhtmlを表示させたいんだけど
data:text/html;云々をwindow.openするとabout:blankになってしまうたすけて
（data:text/html;云々を直接urlボックスにいれて移動、は表示される）

**Name_Not_Found** · 2018/11/04(日) 14:00:44.03

>>724
再現コードをjsfiddleへUP

**Name_Not_Found** · 2018/11/04(日) 14:11:19.81

>>722
一切変更出来ないとは？
変更不可対象を明確にしろ

**Name_Not_Found** · 2018/11/04(日) 14:36:36.33

constは名前に対して働くもので値に対して働くものではない

**Name_Not_Found** · 2018/11/04(日) 15:24:02.74

>>722
そもそもがcのconst勘違いしてないか。
プリミディブ値ならjsのconstでも同じように使えるし、
cではjsのconst OBJ = {a: 1, b: {c: 2}};みたいにオブジェクト直接入れるみたいなことはそもそも出来ない。
ポインタ使うにしたってOBJ.aやOBJ.b.cなどメンバーを書き換えられてしまうことは同じ。

まあやりたいことは分かる…気がする…
以下にdeepFreezeの実装例出てるから参考にしてみたら？
https://developer.mozilla.org/ja/docs/Web/JavaScript/Reference/Global_Objects/Object/freeze

こういうことでしょ？違う？
https://codepen.io/anon/pen/EQxJKB

**Name_Not_Found** · 2018/11/04(日) 15:24:32.56

>>725
いろんなサイトでconsole開いて実行したので、jsfiddleのコードに書いて実行してしまうと若干挙動が違う気がするので
具体的には
window.open('data:text/html;charset=utf-8,'+encodeURIComponent('<!DOCTYPE html><html lang="en"><body>hoge</body></html>'));
を適当なサイトでコンソール開いて実行
一応jsfiddleでもやってみたけどポップアップ禁止みたいなのが出てきた
https://jsfiddle.net/pLdojb9w/
ポップアップ許可するとabout:blank

**Name_Not_Found** · 2018/11/04(日) 15:29:06.49

>>728
× https://codepen.io/anon/pen/EQxJKB
○ https://codepen.io/anon/pen/EOxJKB

**729** · 2018/11/04(日) 15:31:07.23

ちなみに用途としては
とあるサイトの画像urlだけをスクレイピングして
htmlで新しいタブに<img src=>みたいに単純表示したいだけ
今までconsoleで<img src="">を出力してコピペ→テキストエディタでhtmlで新規保存
ブラウザで開いてウェブ丸ごと保存ってやってたのでめんどくさくなった
（別のスクリプトやアプリで画像urlだけ抽出してダウンロードしたらいいのではと思うし
都合が良いところはそれでやってるけど）