+ JavaScript の質問用スレッド vol.135 +
■ このスレッドは過去ログ倉庫に格納されています
JavaScript を自ら学ぶ人のための質問スレッドです。
次スレは>>950が(本スレで改善案があれば考慮して)立ててください
■規則/推奨ルール
・メール欄を空欄にし、名前にレス番を入れることを強く推奨(なりすまし防止)
・質問内容は具体的に。言葉だけでなく、出来る限り再現性を確認したサンプルコードの掲示。
・質問テンプレートの利用推奨。
・質問への「答え」だけでなく「意見」を出しても良い。
■禁止行為
・丸投げ質問
・迷惑スクリプトの質問
・オレオレ用語の使用(一般的な用語を使用する事)
・煽り、批判等の他人を不快にさせる行為(批判の代わりに「AよりBが良い」のような代案を出す事)
■質問テンプレート
【環境】OS, ブラウザをバージョンと共に記入してください。
【条件】期待する回答の条件を書いてください。
【何をしたのか】何をしたら問題の現象が発生するのか。再現手順を具体的に書いてください。
【エラーメッセージ】エラーメッセージがあれば正確に書き写してください。
【期待する結果】最終的にどういう結果を望んでいるのか、を書いてください。
【サンプルコード】現象を再現可能な最小限のコードを書いてください。
1レスに収まらないならコード投稿サイトを利用してください。
http://jsdo.it/ http://jsbin.com/ http://jsfiddle.net/ http://ideone.com/
■回答者へ
・回答には多様性があります。他人の回答を尊重してください
・動作ブラウザや環境が限られる場合は、それを明記してください
・他人の回答を批判する代わりに、自分ならこう書くという例を示してください
・質問者がJavaScriptでなければ実現できないと勘違いしてるなら、その否定としてHTMLとCSSで実装しても良い
・他人の回答を見たくないのであれば、文句をつける代わりにNGにして見えないようにしてください。文句をつける＝荒らしです >>618
> しかし、セキュリティ的な問題か何かしりませんが
> html側のサーバーにはjsを効かせる事はできません。
>>614で
> jsはcssと同じ外部サーバーに置けます。
ってかいたよな？
jsが使えないのに、わざわざ置けますって言ったのか？
そりゃ置くだけなら置けるだろうけど、動かないんじゃ
置いたって意味ないじゃん >>620
あんたのレスが「思い込み」と指摘されたからって
相手にも同じ言葉を無理やり使おうとしなくていいよｗ
日本語がおかしくなってる 意見も希望も主観には変わらないわけで、その定義に拘って議論するのは馬鹿馬鹿しい >>619
はいそうです
>>621
なるほど、phpファイルのheaderでcssファイルとして認識させるようにすればいいんですね
>>622
はいそうです。直接jsファイルは読み込めません。すみません。 >>625
もしくは.htaccessとかで-.cssが呼ばれた時-.phpを呼ぶようにcssを置くサーバーで偽装する >>621
こんだけ限定された条件だと
これに一票かなあ 初心者です。
if (!args.length) { 処理 } の条件を日本語訳してもらえませんか？
argsは変数なんですが、lengthは変数じゃないです。
変数argsの長さじゃなかったら？ でしょうか。。おねがいします >>628
否定 javascript
か
falsy javascript
あたりで検索してみるとか lengthは長さを数値で返す
数値をそのまま条件にすると
0は否、0以外は正。
それを!で逆転してるので
長さが0であれば、の意。
※argsが存在して配列や文字列などlengthメソッドが働く前提 ありがとうございます！よくわかりました。これで先に進めそうです。またお願いします 適当に書くときはいいけど
慣れちゃうとちょっと怖いよね
args.lengthがundefinedでもnullでもfalseでも通っちゃうし >>633
それが排列であることを確定させているなら、問題はないかと NodeRedって流行ってるの？
知識ない自分の力量不足だけど使いにくい… >>636
ハイパーカードを思い出す
これでできる範囲のことであれば楽できるね
ってやーつだと思ってる >>638
簡単なUI作ったりするのは便利なんだけどDBとのやりとりとかExcelに出力したりさせようとしたら訳わからなくなって詰まった
こういうのをNodeRedでやろうとするのが間違ってるのかなぁと思ったり >>631
lengthはプロパティでもメソッドでもなくプロパティアクセス時にArrayの内部プロキシによって特別に扱われる名前
アクセサメソッドにも近い Pythonを学習中です。
Webの事は全くの素人です。
スクレイピングや可視化する際、CSS XPath JavaScriptなどの事が分からなくて行き詰まってしまいました。
PythonとJavaScriptではじめるデータビジュアライゼーションという本で詰まりました。
知人にJavaScript第5版という古い本をもらいましたが、言語仕様が延々と書いてあるような感じで、自分には早過ぎました。
CSS、XPath、JavaScriptこの辺りを体系的に学べるおすすめの本あったら教えて欲しいです。 >>640
今でも読まれるたびに数えてんですかね？ うろ覚えだが呼ばれるたびに数えてたことはなかっただろう
更新のたびに内部プロパティを更新してそれを読み出すような仕組みじゃなかった？ >>641
HTML, CSS, JavaScript は、初心者用の本を読む。
CSS セレクターは、jQuery で学ぶ
または、CSS セレクター・XPath は、入門用サイトを見る
CSSセレクターは、jQueryの本に書いてあるけど、
XPathは、どの本にも書いていないから、入門用ウェブサイトを見る
XPathは重要度が低いから、無視してもよい。
CSSセレクターを使う方が、読みやすい プログラミングは体系的には学べない
分からなければ分かるようにならない
でもそこで諦めたらそこまで
「言語仕様が延々と書いてあるような感じ」と思ったのなら
分かったのが0ということではないはず
最悪書いてある日本語は読めるのだから、1万分の1は分かるだろう
なら5万回分読めばいい
そしたら1-(1-0.0001)**50000で0.9932637373893968で99％理解できる
分からなくてもほんの少しは分かるまで血を吐きながら無理やり頑張る
その繰り返しの修行で覚えるのがプログラミング 俺もXPathは後回しでいい…ってかやらなくてもいいと思う。
昔はCSSセレクタより表現力高いからとか言われてたがよくも悪くもXML全般に使われる汎用仕様だからな。
HTML/CSS仕様に寄り添い、技術要素疑似セレクタも使えて素のJavascriptやjQueryなどでも手厚くサポートされているCSSセレクタ覚えたらWeb系技術以外扱わないならXPathなんて正直いつ使うんだっていう。
Javaとかやるなら別だけど…
あれか、Pythonと一緒にやろうとしたからPythonライブラリの都合に引っ張られちゃったんだな！ >>647
書いてて恥ずかしくならない？
読んでて赤面したわｗ どうもありがとうございます
結果的にPythonスレとマルチポストになってしまっていたらごめんなさい。
>>646
PythonスレのRubyの方ですかね？
その節はありがとうございます。
初心者用というのはHTML5の初心者という事ですよね？
よく分かる〇〇とかいちばんやさしい〇〇だとか過去に読んだことあるんですが、その手の本ってパソコンそのものの初心者が対象なのか、
〇〇のコードを使ったらハンバーガーメニューが出せますとか、このコードを使ったらこういうレイアウトに出来ます。今流行りのスマホPC両対応のレスポシブなんちゃらのカッコいいホームページを作ろう、みたいな。
そういう本って理屈は置いておいて、カッコよさげなホームページが作れた。よかったね、っていう感じの本だから、
それぞれのコードの中身や用語の解説じゃないから結局提示されたcssのコピペだけで終わり訳もわからず応用が利かず結局何も身に付かなかったです。
オライリーからPythonの本が大量に出てるけどそんな感じの本があればいいんですが。
>>647
やっぱ甘えてますね、自分。
辛いけど、出来るようになりたいから読むしかないのかぁ。 >>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
まさに自分もこんな認識です。 >>651
セレクタを覚えるなら、jQueryよりCSSを覚えた方が良い
jQuery拡張記法を覚えても何にもならん
https://triple-underscore.github.io/selectors4-ja.html
XPathは今でもCSSセレクタ以上の事が出来るが、日本語の資料は多くないので、初心者向きではないだろうな >>645
Array(10).length = 1; // これはsetterでは？ getter, setterという場合、
Array(10).getLength();
Array(10).setLength(5);
などのようにメソッドの形を取る。
Array(10).length = 1;
は上のsetLengthとやることは同じだが、(実装はどうあれ)プロパティ形式を取っているのでsetterとは呼ばない。
なお説明に使っただけでArrayにgetLength、setLengthとあったメソッドは無い。 TypedArrayのlengthはgetter,setterだが
Arrayのlengthは内部プロキシが特別に扱っている名前というだけ >>656
Atrayのlengthはset/getが使えなかったときからある。だから>>655 漏れが、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を使う :has擬似クラスが仕様に入ったからXPathの出番はますます無くなる jQueryは:hasに独自で対応しているから、JavaScriptでは
もうXPathの出番はなくなってるね。 XPathってJavaScript以外で使えたっけ？
jQueryで:hasが使えるならもういらないような >>662
なに言ってんだ各言語にライブラリ出てるよXPathくらい… >>657
その理屈はおかしい
lengthはProxyがない時代からある 漏れは、Ruby のNokogiri で、XPath, CSS セレクターを使っている Proxy APIの話ではなくプロパティが設定されるときに働く
[[DefineOwnProperty]]内部メソッドをオーバーロードしてlengthを書き換えてることを
分かりやすく内部プロキシと言い換えただけなのにね >>666-658
同じ言葉をそっくり>>657に返したいね
> Atrayのlengthはset/getが使えなかったときからある。だから>>655
setがなくても、setterとして機能があればsetterだろう
lengthプロパティ代入時に処理が働くのだから、setter以外にそれを実現する方法はない
ついでにいうと、>>654もおかしい
プロパティだからsetterじゃない、とかどの言語の話だ？ >>668
>>653からどうしてその話が出てくるんだ？
おまえのいってるのは、
Array(1)[3] = 1;
だろう Proxyでのハンドリングもsetterと言うのならArray#lengthもsetterと呼んでいいと思うけど
普通JSでsetterって言ったらプロパティディスクリプタがアクセサタイプでsetにメソッドが入ってる状態を言うと思うけどな >>671
いや、数値文字列と、lengthの２種類ともを特別に扱ってるんだよ MDNはprototype経由せずDateやらArray やらから直接生やされたメソッドを静的なメソッドと表現したりクラスベースの人に配慮した柔軟な記述見かけるよね。 >>674,675
その疑問は全てここまでに書かれてるよ
もう一度読み直してみて >>677
> [[DefineOwnProperty]]内部メソッドをオーバーロードしてlengthを書き換えてることを
> 分かりやすく内部プロキシと言い換えただけなのにね
これがProxyの条件か？
ただの内部 プロパティを書き換えるだけでProxy扱い
しかも、Array(19).length = 1; 時に [[DefineOwnProperty]] が書き換わらんし、到底理解できんな > しかも、Array(19).length = 1; 時に [[DefineOwnProperty]] が書き換わらんし、到底理解できんな
訂正する
Array(19)[1] 以降が削除されるので、[[DefineOwnProperty]] は確かに書き換わる
しかし、他所のプロパティ [[DefineOwnProperty]] が書き換わるだけで、lengthプロパティはProxyの動きをしていない こういう事かな
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が感染していく >>679
大きな勘違いしてるね、Arrayのインスタンスオブジェクトはlengthと言う通常のプロパティを持っているが
それと同時に数値文字列と"length"という文字列のプロパティ設定に関して特別な振る舞いをするんだよ
つまりProxyのようなのはArrayのインスタンスの事であって、
そのプロキシは"length"プロパティアクセスがあると、間接的にlengthプロパティを設定して配列の要素を調整すると言う動作をするんだよ
ただし、setterとは違うという話 ようそこまで内部動作把握してるな
こういう人はそんなの当然って言うんだけど大半の人はそんなの無理 アニメスレに沸く小説板から来た設定厨を思い出しました。 >>682
勘違いなどしていない
setterのトラップで内部プロパティが書き換わるだけ
setter以外のトラップが必要なら、それを示してくれ >>681
やっとわかった
ラッパーって言いたいのかw >>686
誰もわかってくれないからって自己レスするな >>668は確かにwrapperって感じだが、wrapperとsetterは両立出来るんだよなあ ぶっちゃけ、>>653がsetterで実装できなくて、Proxyでなければ実装できない機能って何なの？ >>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たらしめてる理屈 >>679のこの行がそもそもだいぶトンチンカン
>>Array(19)[1] 以降が削除されるので、[[DefineOwnProperty]] は確かに書き換わる
[[DefineOwnProperty]]は内部「関数」なのだから、書き換わったりしない、呼ばれる対象
そしてlength要素に設定時に適宜配列のプロパティが消されるから呼ばれるのではなくて、
length要素設定時にこれが呼ばれたときに間接的にプロパティを消してる、因果が逆
因みにプロパティが消されるときに呼ばれるのは[[Delete]]
[[DefineOwnProperty]] はこの場合関わらない そもそも、length に設定するのが、おかしい。
意味不明のソースコード
普通は参照しかしない new Int8Array([1,2,3]).__lookupGetter__('length')
//=> f length() { [native code] }
[1,2,3].__lookupGetter__('length')
//=> undefined
ほんまやTypedArrayのlengthにはGetter設定されてるけどArrayは無い だからtypeof new Arrayは'object'なんだよな
そこしか違いがないから 大雑把にはわかっていたつもりだったけど
詳しい説明ありがたいわ jQueryの.nextUntil() をJavaScriptで書くのは難しいでしょうか？ >>700
難しいかどうかはその人のスキルによるとしか。。。 困難かという意味ではそうでもないかも
parentNodeのChildNodesを、その要素以降順に見ていくだけだから
ていうか、jQueryだってJSで書かれているわけだしね 質問を変えて、jQueryの.nextUntil()をDOM API以外のライブラリを使わずに
10行以内（セミコロン不使用、横80文字まで、普段やらない書き方を使うのなし）で
作れるでしょうか？だったらどう？ まず親要素のquerySelectorAllで
セレクタにマッチする小要素を全部取り出しておく
目的の要素のnextSiblingが、上のマッチした要素群に含まれれば当たり
なければ次のnextSiblingを見る
なんとか80字でいけるか？ 全部取り出しておいてfilterしてもいいし、
ただ単に次の要素を見ていくだけのイテレータでもいい
５行くらいの関数で書けるんじゃない? 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 はー
matchesなんてあったんだな
勉強になる function * nextUntil ( el, sel ) {
while ( el = el.nextElementSibling && ! el.matches( sel) )yield el
} >>707
上手く行きました。
凄いですね、こんなのを書けるなんて。
>>710
私にはレベルが高すぎて付いて行けません。
結果の取り出し方を教えて下さい。 >>710は単なる技術マウントだから無視してよい。 技術マウントだからと言って無視するか、
技術を勉強するか
どちらを取るかね？ >>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のほうがいいな。 >>715
=>
...
yield
など知らない文法ですが、テストしたら動きました。
大変参考になりました。このコードが理解出来るように勉強します。
ところで707 nextUntilを応用してnextAllを作ってみたのですが、これで良いでしょうか？
function nextAll(el, selector) {
const result = [];
while (el = el.nextElementSibling) {
result.push(el);
}
return result;
}
一つ質問ですが、const指定しているresult変数に値を代入しても良いのですか？
定数なら変更してはいけないような印象を受けるのですが。 >>719
良く分からないのですが、
C言語などならconst指定があると値を代入出来ませんよね。
JavaScriptのconstはそうでは無いのですか？ >>720
result = 1;
で正しくエラーになる ■ このスレッドは過去ログ倉庫に格納されています
