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

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

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

話を戻すけど、俺は最も自然に感じる意味がそうだと言うことに異論は唱えていないよ
ただ@@iteratorを持つものしか「イテラブル」と呼べないというのには異論がある

俺は彼の用語の使い方が超えちゃいけないラインを逸脱しているとまでは思わないし、
そのニュアンスを捉えないで字面だけ見て揚げ足を取ろうとする行為の方が問題だと感じる
それは言語仕様として「class」が無かった頃、形態としての「クラス」という表現まで弄ってたおかしな人と同じだよ

2017/07/16(日) 12:19:12.13

>>983
まず、あなたの投稿はどれだ？
俺がレスした相手に (ｽﾌﾟﾌﾟ Sd70-wcQn) は存在しないのだが。

> 953 デフォルトの名無しさん (ﾜｯﾁｮｲ 8bf3-z+eH) sage 2017/07/14(金) 12:54:26.06 ID:yf7LD5Sw0
> 957 デフォルトの名無しさん (ﾜｯﾁｮｲ 6e0b-EdWd) sage 2017/07/14(金) 17:21:23.89 ID:IlK8Z/pQ0

2017/07/16(日) 13:41:18.87

国語の話とか収集つかないので静観してたけど、なんか荒らしちゃったようで申し訳ない。
反復することが出来る（ループ文を使う）という意味で言ったので、そんな深い意味はありません。
反復という言葉がとっさに思いつかなかったので英語で言ったのですが、イテレータブルも日本語でしたね。

2017/07/16(日) 14:28:11.42

>>984
957とかが俺だ
俺もあっちこっちから書き込んでるからね

2017/07/16(日) 17:15:26.87

>>953,985
あなたがそういうスタンスならそれはそれで良いと思う。
俺が危惧したのは「仕様にある用語(iterable)」と解釈されかねない書き方になっていたこと。
それが仕様上のiterableとは別意の「便宜上の言葉」である事が明確になっていたなら問題はなかった。

2017/07/16(日) 17:48:27.95

>>957,983,986
あなたは初め、仕様に言及した書き方をしていた。
>>957,979がそれだが、主張している内容が矛盾だらけだった。
>>980-982に対してもレスは未だない。

> 原文でもコレクションがイテラブルだと言っている
原文でiterableと書いてあるのは4回だけ。
NodeList と DOMTokenList しか iterable なものはなく、HTMLCollection は該当しない。
https://dom.spec.whatwg.org/#interface-htmlcollection

> それは言語仕様として「class」が無かった頃、形態としての「クラス」という表現まで弄ってたおかしな人と同じだよ
ES5時代のクラスは説明の道具として有用だった。
ただし、iterableは仕様に存在する単語であり、それが「仕様としてのiterable」と解釈されてしまうと誤解が生じる。

簡単に書けば、「誤解が生じかねないオレオレ用語は使うな」
>953の後に>>985が出てきたのなら、文意が誰にでも分かるので良いと思う。
が、あなたはiterableで問題ないと何度も主張しているので、そのままでは誤解が広まってしまう。

2017/07/17(月) 03:58:47.70

一般用語のコンテナ・入れ物で良い。
複数のオブジェクト・要素を入れる、複合物

コンテナは、反復可能

2017/07/17(月) 04:17:35.87

その反復可能を英語でいったらどうなるのさ？
日本人だから英語は技術用語とできるかもしれんが
英語圏の人にとっては英語で説明するんだぞ

2017/07/17(月) 05:39:00.74

>>988
よく読め、俺は最初から仕様としての言葉としてはふさわしくないが、
汎用的な言葉としては有りというスタンスしか取っていない
現にカタカナの「イテラブル」としか言っていない
そして原文とは『彼のレス』のこと

あとそんな誤解をわざわざするのは君くらいだ
別に大した意味で使われていないことくらい分かる
君はね、俺のレスも、彼のレスも、全然きちんと読んでなさすぎじゃないか？
それで誤解だ何だ言われてもね
ただいちゃもん付けるためにあら捜ししたいだけじゃん

2017/07/17(月) 12:16:00.13

この手の基地外は相手しないほうがいいよ

2017/07/17(月) 12:37:43.01

> 現にカタカナの「イテラブル」としか言っていない

それ何の違いがあるの？

2017/07/17(月) 13:04:25.24

あぁ無情

2017/07/17(月) 22:00:34.56

prototypeとプロトタイプは違いがあるわな

**996** (ﾜｯﾁｮｲ e285-X5vM) · 2017/07/18(火) 22:58:23.00

すみません。質問です。if文どちらの結果もでません。
どなたか教えてください。
<form action="" id="weightform" name="weightform">
<input type="text" id="weightvalue" name="weightvalue">
<input type="button" value="Here we go">
</form>
<script type="text/javascript">
function onButtonClick(){
document.write(weightform.weightvalue);
var num1=parseInt(document.weightform.weightvalue.value);
if(num1>99){
document.write("<h2>あなたはヘビー級です</h2>");
}
else{
document.write("<h2>あなたはジュニアヘビー級です</h2>");
}

2017/07/18(火) 23:20:09.08

ブラウザのF12開発者ツールを起動して、デバッグすれば？

onButtonClick という関数が呼ばれないだろ

それに、document.write は使うな。
HTML全部を書き換えてしまうから

こういう質問は、web制作管理板の方に書き込んで。
向こうの方が、答える人が多いから

2017/07/20(木) 12:08:49.02

次スレないのか？

2017/07/20(木) 12:38:37.99

ヘイトスピーチの発信源と化してるしもう落ちていいよ

2017/07/20(木) 14:33:12.10

ありがとうございました

**1001** · Over 1000

このスレッドは１０００を超えました。
もう書けないので、新しいスレッドを立ててくださいです。。。
life time: 108日 14時間 1分 47秒