JavaScript の質問用スレッド vol.123 [無断転載禁止]©2ch.net

2017/04/03(月) 00:31:25.68

JavaScript を自ら学ぶ人のための質問スレッドです。
>>2-6のテンプレを読んだ上で質問してください。次スレは>>950が>>2のテンプレ案(本スレで改善案があれば考慮)を元に立ててください

■質問を書く上で
(1) 煽り、コード制作依頼等、人を不快にさせる投稿はご遠慮下さい。公序良俗を守った応対を心がけてください。
(2) 他の人に迷惑をかけるスクリプトの質問はご遠慮ください。
　　(ブラクラ、[戻る], [閉じる], [クリック] の妨害、画面占有など)
(3) 質問者及び議論を行う人はメール欄を空欄にし、名前にレス番を入れることを強く推奨します。回答者はなりすましを判断できませんので、なりすましが現れても自己責任となります。
(4) 常に自発的に調べる心構えを持ってください。
　　具体的には「自分で調べてから質問する」「回答をもらってわからない単語があればGoogle検索してみる」など。
　　わからない内容を代わりに調べてくれる回答者をお望みの方は余所で質問してください。
(5) 出来るだけ一般的な用語を使用してください。脳内オレオレ用語は混乱の元です。
(6) 出来るだけサンプルコードを掲示してください。言葉による説明は行き違いが生まれる場合があります。
　　※必ず「問題の事象が再現されること」を確認してください。
　　　必要な部分だけ切り出したつもりで現象が再現できていなかったケアレスミスがしばしば見られます。
(7) サンプルコードに HTML が含まれる場合は http://validator.w3.org/ で [Check] してみてください。
(8) 質問を具体的かつ詳細に書くと回答を得られやすいです。>>2の質問テンプレートを活用してみてください。
(9) ライブラリ関連の質問は禁止です。関連スレにあるライブラリ質問スレで質問して下さい。
(10) 時にはあなたが望む「答え」だけでなく、「意見」などが寄せられる場合もあります。
※前スレ
JavaScript の質問用スレッド vol.122
http://echo.2ch.net/test/read.cgi/tech/1472426483/

VIPQ2_EXTDAT: checked:vvvvv:1000:512:----: EXT was configured

**879** (ﾜｯﾁｮｲ d759-TyVU) · 2017/07/11(火) 01:56:20.34

>>882
ありがとうございます。

ところでなんでそんなに韓国人が嫌いなんですか？
イボミとか良い人もいるじゃないですか？

2017/07/11(火) 02:20:56.58

XMLHttpRequestとクロスドメイン参照と
JSONPとcallbackを
郵便屋さんで例えてください。

2017/07/11(火) 03:14:02.76

郵便屋でーす

2017/07/11(火) 04:47:03.01

>>879
この両者には僅かな違いがあります。
varを使って宣言する（var a = 10）とその変数はグローバル変数となり
varを使わずに宣言（a = 10）するとまずスコープチェーンを
辿ってaを検索し、aが存在すればaに代入を試みて、
aが存在しなければ、グローバルスコープにaプロパティを追加します。
（グローバルプロパティの生成）

開眼！Javascript
p81
https://jsfiddle.net/jseja/6Xyh3/

2017/07/11(火) 04:54:08.93

>>881
悪書は追放するから
タイトルと筆者を書いて欲しい。

あ (ｽﾌｯ Sdbf-/8Bo) · 2017/07/11(火) 08:43:35.93

>>876
yとzは制御文字として使いたいとか。

2017/07/11(火) 11:27:38.46

WebでのJSの実行環境は
with(window){}
で囲まれているようなものだからね

でも今からはModuleの時代だしそういう癖つけないほうが良いよ

**879** (ﾜｯﾁｮｲ d759-TyVU) · 2017/07/11(火) 23:25:29.24

>>886
ありがとうございます。基本的には付けた方がいいんですよね？。

>>887
筆者が気の毒なので一応伏せておきます。
悪書まではいってない気がするので。

2017/07/12(水) 01:07:25.34

>>890
情報共有するきがないなら参加するなよ
おまえと同様にその本を買ってしまって混乱する犠牲者ふやしたいのか？

**886 887** (ﾜｯﾁｮｲ 57d8-KuRC) · 2017/07/12(水) 03:02:30.48

>>890
そういう体質が悪い方向に向かわせているんだが
これが親切のつもりらしいから呆れる。

2017/07/12(水) 03:04:27.14

こっちは有料の本の中身の情報を
タイトル名、ページ番号
その中身の一部引用までして
書き込んでいるのに
こちらの要望は軽く無視された・・悲しいわぁ・・・

2017/07/12(水) 06:38:54.28

>>886
var 無しだと、グローバルプロパティだから、
スコープチェーンをたどるから、ややこしい

チェーンをたどって見つからなければ、最終的にグローバルプロパティで、
グローバル変数とは別のもの

こんなややこしい仕様を作った、JSの作者は、頭おかしい

2017/07/12(水) 07:28:39.75

varはもう使うな。
constかlet使え

2017/07/12(水) 07:46:53.52

letが使えないブラウザ向けに作ってる人もいるんです！

2017/07/12(水) 08:57:04.34

>>894
グローバルプロパティとグローバル変数は同じものだよ
グローバルオブジェクトがグローバルスコープになってるわけだからね
with文を使ったときと同じ

2017/07/12(水) 09:46:28.42

>>897
残念ながら少し違います。
普通の人は違いを意識する必要はありませんが。
>>886

2017/07/12(水) 10:33:07.51

いや、var付きかどうかには違いがあるけど、
グローバルオブジェクトのプロパティとグローバル変数は同じものだよ
スコープにはオブジェクト型ってあって、with文のスコープとグローバルスコープはそうなってるから

2017/07/12(水) 11:12:26.90

>>899
>>886って書いたじゃん
微妙に違うんだよ。
https://jsfiddle.net/jseja/6Xyh3/
で違いを見てみ？

実際に使う時には意識する必要のない違いだけどさ。

2017/07/12(水) 12:40:32.42

だからそれはvarの効果であって、グローバルスコープは
グローバルオブジェクトのオブジェクト型スコープだから
そこに対する参照は全てグローバルオブジェクトへの参照へリダイレクトされるんだよ
つまりグローバル変数とグローバルオブジェクトのプロパティは同じもの
varで宣言すれば属性が変わるが存在するのは同じ場所

2017/07/12(水) 13:31:19.76

じゃあ他人のコードをレビューする時、
deleteは無視しても挙動は変わらないんだな？

2017/07/12(水) 13:52:48.55

やめたやめた、絡むだけ時間の損だわ。

2017/07/12(水) 14:42:40.12

なぜイライラしたかわかった
多少の挙動など気にしない>>879この本の作者と同じ考えのやつだからだ
質問者が細かい違いを気にしてたのに
>>901はそんな細かいことを気にせずテキトーでいいんだよと返してたんだからな。
こっちはきっちりしただけだっちゅーねん。

**デフォルトの名無しさん** (JP 0H4f-rvkC) · 2017/07/12(水) 15:11:57.05

お前の書き込みが俺をイライラさせる件についてはどう思うんだ

2017/07/12(水) 15:53:52.86

>>904
おれがいつそんな細かいことを気にせずテキトーでいいと言った？
俺はここの住人の中でもっとも細かいことが気になる人間だぞ？

だからむしろ、お前はスコープと変数の扱いの仕様レベルのことが分かっていないんだから、
言い回しに気をつけろと超細かいことを言ってるんだよ

いいか、グローバル変数とグローバルプロパティに差なんてない、両者は同じもの
ただvarで宣言するとconfigurableがfalseになるからdeleteできない、それだけなんだよ

2017/07/12(水) 16:13:36.51

グローバルオブジェクトは、唯一無二のシングルトン

グローバル変数は、グローバルな変数

グローバルプロパティは、グローバルなプロパティだから、delete で削除できる

これら、3つは別のもの

2017/07/12(水) 17:33:04.93

要するに、普通のオブジェクトでのルールをグローバルオブジェクトにも適用して例外をなくしたからぱっと見で意味が分からない仕様になってるんだろうなぁ
全てがグローバルオブジェクトの中の出来事と思えばさほどおかしい仕様ではないが他言語からは理解しがたい不思議な世界かもしれない

2017/07/12(水) 17:35:19.86

仮にグローバルオブジェクトの外からそれらを見ることがあるなら、グローバルプロパティと変数の差はもっとわかり安いだろう

2017/07/12(水) 18:06:03.89

とにかく開発時には、verもしくはthis（orなにかしらのオブジェクト）にドットで繋いで変数宣言しないとだめって事だな

それ以外の宣言だとぱっと見だと判断のつかない所属の変数になってしまう事がある
それはJSとしては正しい挙動だが、わざわざそんな事を狙ってやるやつは居ない
大抵はミスでそうなるケース

2017/07/12(水) 18:07:07.39

JSが難しい理由は、var, new の有無で、意味が変わってくる所。
ちょっとした書き間違いで、動作が異なる

しかも、コンパイルエラーにならないで、
しばらくしてから違う箇所で、実行時エラーになる

実装者向けの機能が、むき出しで、一般のプログラマーまで、
それを習得しないといけなくなってる

すごく、インタープリター内部の話まで、しなければならない。
それで、Ruby よりも、かなり難しい

2017/07/12(水) 18:24:56.67

JSはフリーダムすぎるんだよね
誰も使わないような自由があちらこちらにあって、それがケアレスミス時の落とし穴になるという
いろいろ作ってて理解不能なエラー挙動に直面して、ウォッチで追って行って「そんな仕様だったのかよ。。。」とあとから気づくことも多かった

2017/07/12(水) 19:23:00.20

まあnew演算子の挙動は理解しとかないといけないだろうな
旧クラスシステムは、関数にデフォでprototypeメソッドが生えることを除くと
完全にnew演算子の力だけで成り立ってることを一旦理解すれば
newの有無で～とか言う発言はなくなる

だってそもそもnewは演算子なんだから、そりゃどんな演算子でも飛ばせば動作が変わって来るのは当然だし

2017/07/12(水) 19:32:20.46

ここにいる人たちってeslintとか使ってないんか

2017/07/12(水) 19:49:51.64

勉強にはなったと思う

しかしグローバルプロパティを
deleteしようとすることは
俺の仕事内容的にはまずないだろうな……

2017/07/12(水) 20:12:49.78

new Number()
Number()

new を付けると、オブジェクトで、
無しだと、プリミティブになるとか、

ちょっとした変化を付けているから、困る。
ちょっとした書き方の変化で、色々と出来るようにしているから、ややこしい

2017/07/12(水) 20:39:54.78

取り敢えずクラスはクラス構文で書けばいい
そうすればnew無しでは呼べない

2017/07/13(木) 03:17:56.06

>>907
違う違う、いい加減仕様読みなって
グローバルに変数作ろうとするとグローバルオブジェクトのプロパティを作成することになるの
その時var宣言付きだとconfigurableがfalseになるからdeleteできない
ただそれだけでグローバル変数とグローバルプロパティに区別はない

2017/07/13(木) 06:48:46.09

>>918
自分で言ってて矛盾してると思わないの？

2017/07/13(木) 07:01:17.86

何も矛盾していない
矛盾してると思うのは君の前提知識が誤ってるから
そしてそろそろ仕様を読め、この順で
わからないところがあったら説明してやるから
https://tc39.github.io/ecma262/#sec-globaldeclarationinstantiation
https://tc39.github.io/ecma262/#sec-createglobalvarbinding
https://tc39.github.io/ecma262/#sec-global-environment-records
https://tc39.github.io/ecma262/#sec-object-environment-records

2017/07/13(木) 08:33:49.98

>>920
なぜ変数とプロパティの違いすら分からないの？
両者は全然ちがうだろ
グローバルだけはスコープチェーンの最終地点だから使用する際の挙動に違いがほとんど無いだけ
これはたまたまそうなってるだけであり、「区別がない」なんて無知にもほどがあるだろ

2017/07/13(木) 13:51:12.12

>>907
つまり、こういう事か？

- delete演算子で削除できるものが「グローバルプロパティ」
- var 宣言したものは「グローバル変数」

オレオレ定義にしか思えんのだが、該当する仕様のURLを教えてくれ。

2017/07/13(木) 14:05:18.85

>>921
var宣言してもグローバルオブジェクトのプロパティになるからでは？

<script>
var a = 1; // グローバル変数
console.log(this.a); // グローバルオブジェクトのプロパティ
</script>

だから、これは「グローバル変数でもグローバルオブジェクトのプロパティでもある」という認識が正しい。
彼が指摘しているように、仕様を読んだ方がいい。

2017/07/13(木) 20:28:17.30

トップレベルでObject.getOwmPropertyDescriptor(this, 'v')
すりゃ>>918が正しい事が確認できる

2017/07/13(木) 21:06:35.19

スレ違いだったらすみません。

JSの勉強として既存のスクリプトを読んだりしているのですが、どうしても理解できない点がありまして、
よろしければご教示お願いできないかと思い書き込ませていただきました。

読んでいるのは以下のプロジェクトの /lib/marked.js となります。
JSの勉強に加えて、似たような処理をするスクリプトを組む参考にもなると思い選びました。
https://github.com/chjj/marked

当該スクリプトの下部で定義されている replace という関数に含まれている以下の文が、何を目的として存在しているのかが分かりません。
val = val.replace(/(^|[^\[])\^/g, '$1');

もしお時間ありましたら、どなたか解説お願いしても構わないでしょうか？

2017/07/13(木) 21:15:07.43

性器表現

2017/07/13(木) 21:42:50.08

他人のソースコードを読んでも、作者にしか分からないから、
時間が掛かるだけで、何にもならない。
自分で作った事だけが、自分を成長させる

それに、どうせ読むなら、John Resig 作の jQuery、
Jeremy Ashkenas 作の Underscore.js など、すごいライブラリを読みなよ

正規表現 - MDN
https://developer.mozilla.org/ja/docs/Web/JavaScript/Guide/Regular_Expressions

2017/07/13(木) 22:41:06.52

var str3 = str.replace(/(^|[^\[])\^/g, '$1');

g フラグは、一致するだけ、複数にマッチする

$n は、( )で囲んだ部分に、一致した部分。
$1 は、1つ目の( )、$2 なら、2つ目の( )

^ は、文字列の先頭に一致する。^A なら、先頭がA。
ただし、[ ]の先頭にあると、否定の意味になる

[abc][a-c]は、a, b, c のどれかの1文字に一致するが、
[^abc]は、a, b, c のどれかの1文字に一致しない文字を表す

\ は、特殊文字をエスケープする。
特殊文字の意味をなくして、通常の文字として扱う。
\^ なら、^ の特殊な意味をなくして、単に、^ 文字を表す

\[ なら、[ 。
[ ] の中で、[ を使えないから、\[ と書いている。
つまり、[^\[] は外側の、[ ] を外すと、^\[ となり、[ 以外の文字

| は、どちらかの文字を表す。A|B なら、A か、B

(^|[^\[])\^ は、1文字目が、^ または、[ 以外の文字で、
2文字目が、^ にマッチする。
$1 で、( )内は、1文字目だけを取り出す

2017/07/13(木) 22:41:29.60

var str = "a^^b";
var str2 = str.match(/(^|[^\[])\^/g);
var str3 = str.replace(/(^|[^\[])\^/g, '$1');
console.log(str2, '\n', str3);

str2は、a^ で、$1 は、( )内だから、a だけを表す。
replaceでは、a^ を、a で置換するから、str3は、a^b となる

2017/07/13(木) 22:53:39.59

>>921
順を追って書いていくからどこで引っかかるか教えてくれ

変数はEnvironment Recordという構造体に保存される
Environment RecordにはObject型があって、そこでは変数はオブジェクトのプロパティとして保存される
グローバルスコープのEnvironment RecordはグローバルオブジェクトをベースとしたObject型だ
グローバル変数はグローバルオブジェクトのプロパティとして保存される

2017/07/13(木) 23:24:43.34

>>925が超初心者と想定した説明を。

例えば入力された電話番号をチェックしたい場合、有効な電話番号を10桁の数字とすると、
if (phoneNumber == "0000000000" || phoneNumber == "0000000001" || ......)
と書いていては現実的に不可能です。
正規表現は文字列の法則を示したもので、replace関数の親戚のmatch関数で、
if (phoneNumber.match(/[0123456789]{10}/))
と書けば、"0000000000"～"9999999999"までをカバー出来ます。
[0123456789]はより単純に[0-9]と書くこともでき、この部分は0～9の数字1文字を示しています。
その後に続く{10}はそれを10回繰り返したものという意味です。
実はこれでは不完全で、この正規表現では10桁の数字さえあればよく、
例えば11桁以上の数字や、"0123456789A"や"A01234567890"みたいな文字も通ってしまいます。
そこで先頭に^をつけることによって、数字から始まることを示し、
最後に$をつけることによって、10桁で終了することを示せば、期待通りになります。
if (phoneNumber.match(/^[0-9]{10}$/))

さて本題ですが、上のmatch関数もそうですが、replace関数の1番目の引数は""で囲っていなく//で囲っています。
これは文字列ではなく、正規表現オブジェクトを渡していて、matchやreplace関数ではそうするもんだと思って下さい。
文字列変数valにある、(^|[^\[])\^という正規表現で示される部分を、（2番目の引数の）$1に置き換えるという意味です。
$1というのは、正規表現の後方参照と呼ばれるもので、正規表現の1番目の丸括弧()の中を指しています。
(^|[^\[])\^という正規表現なので、(^|[^\[])の部分が$1になります。
(^|[^\[])\^を(^|[^\[])に置き換える。つまり、丸括弧の外にある\^の部分を削りたいわけです。
/(^|[^\[])\^/gと書いてますが、このgというのは、正規表現のフラグの1つで、一致したもの全てを置き換えるという意味です。
もしgがない場合、一致した最初の1つしか置き換えられません。
大文字小文字を区別しないフラグなど、フラグは他にもいくつかあります。

初心者に正規表現は難しいので、(^|[^\[])\^がどういう意味なのかは時間をかけて勉強してみて下さい。

2017/07/13(木) 23:38:29.43

>>928
というかその正規表現はおかしいだろ。
JavaScriptではエラーにならないし、
よくあるサイト上でのチェックでも実際のJavaScriptで動作させているから動いてしまうが。
チェッカーを探したがいいのが無いね。

> (^|[^\[])\^ は、1文字目が、^ または、[ 以外の文字で、
意味的におかしいだろ。^ は [ 以外の文字なんですがそれは？

君が勘違いしているのは下記か？
/(\^|[^\[])\^/
が、まあ、これが意味ないのは上記の通り。意味があるようにするとしたら以下か？
/(^\^|[^\[])\^/

韓国人死ね

あ (ｽﾌｯ Sd94-HJuN) · 2017/07/13(木) 23:54:34.87

>>932
『「行頭」か「[以外の文字」』に続く^じゃないの？
^
[^
にマッチさせたいのでは？

2017/07/14(金) 00:09:24.28

そもそも、この正規表現は正しいのか？

2017/07/14(金) 00:24:01.50

>>933
え？それってありなん？
まあ俺は正規表現のプロではないが。
そして試してみた結果、確かにそのようだが、ものすごく気持ち悪い。

'^'.replace(/(^|[^\[])\^/g,'$1'); // ''

これってマジでありなん？しかもカッコ内じゃないのに置換されてるし。

韓国人死ね

2017/07/14(金) 00:36:41.22

^が行頭を表すなんて朝鮮人以外はみんな知ってる

2017/07/14(金) 01:07:53.54

さわんじゃね

2017/07/14(金) 01:18:47.21

var str = "xabc";
var str2 = str.match(/(^|a)b/g);
console.log(str2);

ab と一致する。
^ これどういう意味？

行頭または？
はあ？

間違いか？

2017/07/14(金) 01:26:37.87

var str = "xabc";
var str2 = str.match(/(^|a)b/g);
console.log(str2); // ab

str = "bc";
str2 = str.match(/(^|a)b/g);
console.log(str2); // b

行頭が、b または、
ab

2017/07/14(金) 01:41:53.20

すまん、935のカッコ内云々は俺の勘違いだった。
ただ、行頭をキャプチャして置換に使うってのがなあ。これって合法なん？

韓国人死ね

2017/07/14(金) 02:14:57.74

>>938-939
バカには正規表現は無理

>>940
朝鮮人以外は合法だって知ってる

2017/07/14(金) 02:51:48.36

>>941
確かに以下を見る限り合法のようだ。
https://abicky.net/2010/05/30/135112/

やりたかったことは replace(/(?<!\[)\^/g,'') なんだろうけど、
JavaScriptでは否定後読みは使えないからああなったという感じか。
Perl使いがキモイ正規表現を使うとは聞いていたが、遭遇したことは無かったのだが、これか。
あくまでマッチ＋バッファであり、型の感覚が無いから、プログラマからするとキモイわけだ。
とはいえこれに関してはPerl使いのほうが正しいのだろう。

韓国人死ね

2017/07/14(金) 03:09:55.88

後読みはES2018で入るだろう

2017/07/14(金) 05:11:48.47

925に対して回答ありがとうございます。
わざわざ詳細な説明いただき助かりました。
申し訳ありませんが、その上で何点か再確認よろしいでしょうか？

まず $1 だとマッチした内容に置換されるが、当該のコードは '$1' なので単なる文字列と見なしてよろしいでしょうか？
ならびに [^\[] は行頭文字ともマッチするので記述が冗長だと思うのですが、いかがでしょうか？

当該の一文が出てくるのは小さな関数なのですが、何のためにこのような処理をされているのかが全文を読んでもさっぱり見えてきません。
何を目的としてこのように書かれているのか、どなたか分かりますでしょうか？

2017/07/14(金) 08:34:30.97

>>944
$1は一つ目のキャプチャ文字列。
[^\[] は行頭にマッチしない。
リファレンスを読めば解決する問題なので熟読しろ。
もしくは、テストコードを作って検証しろ。
https://developer.mozilla.org/ja/docs/Web/JavaScript/Reference/Global_Objects/String/replace

目的「"^" を削除する。ただし、"[^" は削除しない。」
これ以上はコード全体を読まないと解釈しようがない。
(中途半端な文法規則を作っている感はあるが)

あ (ｽﾌｯ Sd94-HJuN) · 2017/07/14(金) 08:36:08.67

>>944
行頭か、[以外で始まる^でしょ？
^abcde　//マッチする
[^abcde　//マッチしない
abc^defg //マッチする
abc[^defg　//マッチしない
行頭とマッチするかは/m次第だろうけどマッチするのは、改行文字かと。

2017/07/14(金) 08:43:14.00

>>942
>>928を読んでもわからない奴にはこれ以上の説明は無駄わかるまで読め

2017/07/14(金) 09:07:40.64

>>945
前者に関しては確認したところテストコードに誤りがありました、申し訳ありません。
後者に関しては記憶違いだったみたいです。改めて正確な挙動を調べなおします。

>>946
ああ、オプションの m で挙動が変わるのですね！
完璧に失念してました！

2017/07/14(金) 09:21:57.72

>>927

の「正規表現 - MDN」を熟読すべき

2017/07/14(金) 09:41:11.04

文字へのマッチとは別に、位置へのマッチがあることが分かれば難しいものではない

2017/07/14(金) 12:04:36.19

質問お願いします。
要素にクラスを追加する場合、id指定だと下記のようにするとできるのですが、

var e = document.getElementById("abc");
e.classList.add("xyz");

クラスにクラスを追加する場合、どのようにすればいいのでしょうか？

var e = document.getElementsByClassName("abc");
e.classList.add("xyz");

これだとエラーになってしまします。
よろしくお願いします。

2017/07/14(金) 12:34:22.15

getElementとgetElementsの違いを理解しよう
中学校(最近は小学校?)で習ったはずだぞ

2017/07/14(金) 12:54:26.06

idは一意で、同じidはないはずなので（あった場合それは正しいドキュメントではない）、
getElementByIdは指定idの要素オブジェクトを1つだけ返すのに対して、
classはそういう制限はなく、同じclassが何個も出てくるのを想定しているので、
getElementsByClassNameは指定classのイテレータブルなコレクションを返します。
すなわち、e[0]、もしくはe.item(0)のようにアクセスするのが正しいです。

2017/07/14(金) 13:27:58.97

ID == identification

**951** (ﾜｯﾁｮｲ 6ef3-9pdu) · 2017/07/14(金) 14:04:28.62

>>953さん

お教え頂いた通り、以下のように設定すれば希望通りにできました。
本当にありがとうございます。

e[x].classList.add("xyz");

2017/07/14(金) 14:05:49.80

>>953
> getElementsByClassNameは指定classのイテレータブルなコレクションを返します。
getElementsByClassName の返り値は HTMLCollection だが、HTMLCollection は iterable ではない。
https://triple-underscore.github.io/DOM4-ja.html#interface-document
https://triple-underscore.github.io/DOM4-ja.html#interface-htmlcollection

2017/07/14(金) 17:21:23.89

△イテレータブル　○イテラブル　ということは置いといて
何をもってイテラブルと言ってるのかによるだろう

HTMLCollectionは
ESで言うイテラブルは通常@@iterableを持つということなのでそれとは違う
DOMで言うイテラブルは通常NodeIteratorなどのことなのでそれとも違う
ただ「列挙可能」という意味で言ってるなら問題はない

**デフォルトの名無しさん** (JP 0H37-S4qQ) · 2017/07/14(金) 18:29:09.93

それなら普通に配列って言えばいいだけでは

2017/07/14(金) 18:44:26.77

>>957
> ESで言うイテラブルは通常@@iterableを持つということなのでそれとは違う
ES7 には @@iterable が存在しないが、ソースは？

ES7では @@iterator を持つオブジェクトが for-of で「列挙可能」
iterable な NodeList は for-of で列挙可能だが、iterable ではない HTMLCollection は不可能。
http://www.ecma-international.org/ecma-262/7.0/#sec-well-known-symbols

2017/07/14(金) 19:27:51.05

@@iteratorの間違いだよ　それくらい察して
それにイテラブルだなんて汎用的な言葉とも取れるし、そんな突っつくことでもないと思うよ

2017/07/15(土) 00:32:27.99

// テストデータ
var dataAry = ["xabc", "bc", "ac"];
var re = /(^|a)b/g;

function testFunc(elem, index, array) {
var myArray = elem.match(re);
console.log(elem, '\n', myArray, '\n');
}

dataAry.forEach(testFunc);

結果は、ab, b, null

つまり、
1. 行頭がb
2. ab を含む文字列

**961** (ﾜｯﾁｮｲ 0aaa-32Qs) · 2017/07/15(土) 01:02:35.33

このテストデータで実行してみ

var dataAry = ["xabc", "bc", "ac", "cb", "^b"];

結果は、ab, b, null, null, null

2017/07/15(土) 12:44:42.91

JSの質問か際どいんだけど誰か良い案あればおしえてほしい
番組表のようなものを作りたくて、縦軸で時系列、横軸でチャンネル区切りを表したい
テーブルタグを用いるのが良いかと思っていて、複数の時間帯をまたぐものはrowcolを指定することでいい感じにできないかと考えてる
肝心の番組情報だが、常に何かの番組があるわけではないのでところどころに抜けのあるjson形式のデータが返ってきててそれを使う想定

こういう感じなんだけど各番組が複数のセルをまたいだり空白の時間があったりでいい感じにテーブルを動的に構築するのが面倒くさいなと思うんだけど良い案ないだろうか
フレームワークとかはなんでもいいけどVueを使おうかなと思ってる

2017/07/15(土) 13:01:10.25

そこを丸投げしてしまったら貴様のやる事は何も無いではないか

あ (ｽﾌｯ Sd94-HJuN) · 2017/07/15(土) 15:28:58.61

>>963
いい感じにテーブルも何も、最初から3分毎くらいにテーブル切っといて、やってる時間分rowspanかけるか、
それか透明テーブルにoverflow:visibleで放送時間分の高さ持ったdivタグおいといたら楽では？

2017/07/15(土) 16:08:23.39

CSSレイアウトの方がいいかもな

2017/07/15(土) 16:46:23.11

radikoの番組表の動作パクって自作した

2017/07/15(土) 16:56:01.66

>>965
後者のほうが楽そうな印象はあるけどどうも構造的には前者のほうがきれいに感じる
前者のテーブルって最初に数分ごとに区切られた空のテーブルを作っておいて、JSONを取得したタイミングでテーブルに書き込む関数を呼ぶみたいなアプローチでいいんだろうか

2017/07/15(土) 17:13:37.66

もう一分ごとに区切れば？
所詮1440×チャンネル数分のテーブルでしょ？
エクセルに比べれば楽勝ｗ

2017/07/15(土) 17:21:12.42

>>969
すまん、区切りをどうするかってのは特に問題じゃないんだ

2017/07/15(土) 17:25:50.69

>>970
1分ごとに区切れば簡単になるってことに
まだ気づかない？

2017/07/15(土) 17:48:01.92

>>971
得られる番組の開始終了時刻が5分区切りなんだけどそれでも1分区切りのが簡単になるの？

あ (ｽﾌｯ Sd94-HJuN) · 2017/07/15(土) 18:28:36.04

>>968
前者でch×3分なり、5分毎のテーブル作って、
そのセルにoverflowを表示するdivタグで1セル（5分）の高さのワク作って、
そこに放送時間分の高さの番組情報のdiv入れれば良いのでは？

2017/07/15(土) 18:31:08.80

>>973
色々見たらその方式で実装してるところが多いんだけどなんか個人的に気持ち悪いというか…好みの問題かもしれない
でも最終手段として残しておくことにするよありがとう

2017/07/15(土) 18:41:00.51

>>960
「汎用的な言葉」とは？
俺の感覚では「列挙可能」はdefinePropertyで指定する {enumerable: true} の方で iterableとは別概念だが。
https://developer.mozilla.org/ja/docs/Web/JavaScript/Reference/Global_Objects/Object/defineProperty
>>957の後半3行も根拠があなたの中にしかなくて意味不明だった。

状況的には「iterable === @@iteratorを持つ」で通じる事は>>959で示した通りだが、別の解釈があるなら教えて欲しい。

2017/07/15(土) 18:51:47.13

>>963
感覚的にはタイムテーブルのような長さを計るものはtable要素向きではないと思うが、横にHH:00のヘッダを付けるなら二次元構造といえなくもないか。
とはいえ、レンダリングコストが高くつきそうなので、俺なら適当なブロックボックスを時間の長さ分作って放り込むと思うが。

>>968
JSONデータの事なら {"番組名":"XXX","開始時刻":"2017/07/15 19:00+09:00","終了時刻":"2017/07/15 20:00+09:00"} でいいんじゃないかね。
ISO 8601拡張形式で時刻を表せば、時間を計る方法はいくらでもある。

あ (ｱｳｱｳｴｰ Sa66-HJuN) · 2017/07/15(土) 19:10:25.30

>>974
まあ、表では無いからな。
divをabsoluteで配置して、インラインスタイルでtopを放送開始時間、bottomを放送終了時間にして、チャンネルのクラスつけて、
チャンネルのクラスはleftとwidth持ってりゃわりと綺麗かな。

2017/07/15(土) 21:04:26.61

>>976
>>977
参考になったわ
ありがとう

2017/07/15(土) 21:37:06.43

>>975
列挙可能とは、反復処理にかけて次の要素、次の要素、次の要素、と取り出していける事を言う
enumerableは「要素が列挙される」ことが可能かどうか
ここで言ってるのは「要素を列挙する」ことが可能かどうか、つまり@@iteratorを持つのと同分類
HTMLCollectionはlengthとitem()を備えるので要素を列挙していくことが可能
よって広義にイテラブルと呼ぶことは可能

原文でもコレクションがイテラブルだと言っている
つまりitemなどを備えるコレクションだということを強調するために使われているので問題はない

2017/07/16(日) 10:43:52.50

>>979
> enumerableは「要素が列挙される」ことが可能かどうか
「列挙されることが可能」と「列挙可能」は同義ではないのか？
MDNでは列挙可能/列挙不可能と説明されているようだが。
https://developer.mozilla.org/ja/docs/Web/JavaScript/Reference/Statements/for...in
https://developer.mozilla.org/ja/docs/Web/JavaScript/Reference/Global_Objects/Object/keys
ちなみに、必ずしも列挙不可能なわけではない。
Object.getOwnPropertyNames() によって {enumerable: false} なプロパティも列挙できる。
{enumerable: false} は一部の機能(for-in, Object.keys)で列挙を禁止するフラグに過ぎない。
https://developer.mozilla.org/ja/docs/Web/JavaScript/Reference/Global_Objects/Object/getOwnPropertyNames

> ここで言ってるのは「要素を列挙する」ことが可能かどうか、つまり@@iteratorを持つのと同分類
> HTMLCollectionはlengthとitem()を備えるので要素を列挙していくことが可能
1文目と2文目は等価ではない。

1文目は俺が主張している内容と同義で「for-ofで列挙できるか」
MDN では「iterableになるために、オブジェクトは@@iteratorメソッドを実装する必要があります」と説明されている。
https://developer.mozilla.org/ja/docs/Web/JavaScript/Reference/Iteration_protocols#iterable

2文目は「for-ofに限らず要素を列挙する手段があるかどうか」
2文目になるとほとんどのオブジェクトが列挙可能となる。
Object.values, Object.keys 等があるから、{a:1,b:2}でさえ、「列挙可能」だ。
列挙不可能なのは WeakMap ぐらいか。

2017/07/16(日) 11:06:23.15

汎用的な言語定義を説くなら、英和辞典を引くべき。
https://www.google.co.jp/search?num=30&;q=%E8%8B%B1%E5%92%8C+iterable

日本語訳するなら、反復可能(iterable)と列挙可能(enumerable)が一般的。
https://www.google.co.jp/search?q=%E5%8F%8D%E5%BE%A9%E5%8F%AF%E8%83%BD+iterable
https://www.google.co.jp/search?q=%E5%88%97%E6%8C%99%E5%8F%AF%E8%83%BD+enumerable

「列挙されることが可能(emurable)」と「列挙可能(iterable)」では違いが分からない。
そもそも、日本語では「受動態」と「能動態」の差異しかないのに、英語では単語が変わっている。あり得ない。
https://www.google.co.jp/search?num=30&;q=%E5%88%97%E6%8C%99%E3%81%95%E3%82%8C%E3%82%8B%E3%81%93%E3%81%A8%E3%81%8C%E5%8F%AF%E8%83%BD+emurable

本題に戻るが、JavaScriptでiterableが持ち込まれたのはES6からだから、MDNの解釈が正しいと思う。

2017/07/16(日) 11:27:22.43

>>957
> DOMで言うイテラブルは通常NodeIteratorなどのことなのでそれとも違う
どういう意味だろう？
NodeIterator は createNodeIterator() で生成するオブジェクトの Interface だが、指定可能なノードはルートノードだけ。
iterable な NodeList に出来て、iterable ではない HTMLCollection に出来ない事があるとは思えない。
そもそも、NodeList を対象に取る機能ではないような。
https://dom.spec.whatwg.org/#interface-nodelist
https://dom.spec.whatwg.org/#interface-htmlcollection