2ちゃんねる スマホ用 ■掲示板に戻る■ 全部 1- 最新50    

■ このスレッドは過去ログ倉庫に格納されています

JavaScript の質問用スレッド vol.123

1 :デフォルトの名無しさん(ワッチョイ 73c8-oPzN):2017/04/03(月) 00:31:25.68 ID:82yaJsi70.net
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

953 :デフォルトの名無しさん (ワッチョイ df6f-qBah):2017/07/14(金) 12:34:22.15 ID:i0uGqEt60.net
getElementとgetElementsの違いを理解しよう
中学校(最近は小学校?)で習ったはずだぞ

954 :デフォルトの名無しさん (ワッチョイ 8bf3-z+eH):2017/07/14(金) 12:54:26.06 ID:yf7LD5Sw0.net
idは一意で、同じidはないはずなので(あった場合それは正しいドキュメントではない)、
getElementByIdは指定idの要素オブジェクトを1つだけ返すのに対して、
classはそういう制限はなく、同じclassが何個も出てくるのを想定しているので、
getElementsByClassNameは指定classのイテレータブルなコレクションを返します。
すなわち、e[0]、もしくはe.item(0)のようにアクセスするのが正しいです。

955 :デフォルトの名無しさん (ワッチョイ 15a5-S4qQ):2017/07/14(金) 13:27:58.97 ID:14PnxSlX0.net
ID == identification

956 :951 (ワッチョイ 6ef3-9pdu):2017/07/14(金) 14:04:28.62 ID:+NhBdlJT0.net
>>954さん

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

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

957 :デフォルトの名無しさん (フリッテル MM5e-R3UR):2017/07/14(金) 14:05:49.80 ID:HpYhyMQyM.net
>>954
> 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

958 :デフォルトの名無しさん (ワッチョイ 6e0b-EdWd):2017/07/14(金) 17:21:23.89 ID:IlK8Z/pQ0.net
△イテレータブル ○イテラブル ということは置いといて
何をもってイテラブルと言ってるのかによるだろう

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

959 :デフォルトの名無しさん (JP 0H37-S4qQ):2017/07/14(金) 18:29:09.93 ID:vv2qH35gH.net
それなら普通に配列って言えばいいだけでは

960 :デフォルトの名無しさん (フリッテル MM5e-R3UR):2017/07/14(金) 18:44:26.77 ID:HpYhyMQyM.net
>>958
> 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

961 :デフォルトの名無しさん (ワッチョイ 6e0b-EdWd):2017/07/14(金) 19:27:51.05 ID:IlK8Z/pQ0.net
@@iteratorの間違いだよ それくらい察して
それにイテラブルだなんて汎用的な言葉とも取れるし、そんな突っつくことでもないと思うよ

962 :デフォルトの名無しさん (ワッチョイ 0aaa-32Qs):2017/07/15(土) 00:32:27.99 ID:5uf8kOgL0.net
// テストデータ
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 を含む文字列

963 :961 (ワッチョイ 0aaa-32Qs):2017/07/15(土) 01:02:35.33 ID:5uf8kOgL0.net
このテストデータで実行してみ

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

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

964 :デフォルトの名無しさん (ワッチョイ fca6-N0vF):2017/07/15(土) 12:44:42.91 ID:IP8gokNa0.net
JSの質問か際どいんだけど誰か良い案あればおしえてほしい
番組表のようなものを作りたくて、縦軸で時系列、横軸でチャンネル区切りを表したい
テーブルタグを用いるのが良いかと思っていて、複数の時間帯をまたぐものはrowcolを指定することでいい感じにできないかと考えてる
肝心の番組情報だが、常に何かの番組があるわけではないのでところどころに抜けのあるjson形式のデータが返ってきててそれを使う想定

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

965 :デフォルトの名無しさん (ワッチョイ beea-GxvA):2017/07/15(土) 13:01:10.25 ID:jjpJygJ80.net
そこを丸投げしてしまったら貴様のやる事は何も無いではないか

966 :(スフッ Sd94-HJuN):2017/07/15(土) 15:28:58.61 ID:l4jBJff8d.net
>>964
いい感じにテーブルも何も、最初から3分毎くらいにテーブル切っといて、やってる時間分rowspanかけるか、
それか透明テーブルにoverflow:visibleで放送時間分の高さ持ったdivタグおいといたら楽では?

967 :デフォルトの名無しさん (スププ Sd94-wcQn):2017/07/15(土) 16:08:23.39 ID:DMIdUVsAd.net
CSSレイアウトの方がいいかもな

968 :デフォルトの名無しさん (ワッチョイ 706f-qBah):2017/07/15(土) 16:46:23.11 ID:mnMcO+Xt0.net
radikoの番組表の動作パクって自作した

969 :デフォルトの名無しさん (ワッチョイ fca6-N0vF):2017/07/15(土) 16:56:01.66 ID:IP8gokNa0.net
>>966
後者のほうが楽そうな印象はあるけどどうも構造的には前者のほうがきれいに感じる
前者のテーブルって最初に数分ごとに区切られた空のテーブルを作っておいて、JSONを取得したタイミングでテーブルに書き込む関数を呼ぶみたいなアプローチでいいんだろうか

970 :デフォルトの名無しさん (ワッチョイ d430-S4qQ):2017/07/15(土) 17:13:37.66 ID:N0flRzpM0.net
もう一分ごとに区切れば?
所詮1440×チャンネル数分のテーブルでしょ?
エクセルに比べれば楽勝w

971 :デフォルトの名無しさん (ワッチョイ fca6-N0vF):2017/07/15(土) 17:21:12.42 ID:IP8gokNa0.net
>>970
すまん、区切りをどうするかってのは特に問題じゃないんだ

972 :デフォルトの名無しさん (ワッチョイ d430-S4qQ):2017/07/15(土) 17:25:50.69 ID:N0flRzpM0.net
>>971
1分ごとに区切れば簡単になるってことに
まだ気づかない?

973 :デフォルトの名無しさん (ワッチョイ fca6-N0vF):2017/07/15(土) 17:48:01.92 ID:IP8gokNa0.net
>>972
得られる番組の開始終了時刻が5分区切りなんだけどそれでも1分区切りのが簡単になるの?

974 :(スフッ Sd94-HJuN):2017/07/15(土) 18:28:36.04 ID:l4jBJff8d.net
>>969
前者でch×3分なり、5分毎のテーブル作って、
そのセルにoverflowを表示するdivタグで1セル(5分)の高さのワク作って、
そこに放送時間分の高さの番組情報のdiv入れれば良いのでは?

975 :デフォルトの名無しさん (ワッチョイ fca6-N0vF):2017/07/15(土) 18:31:08.80 ID:IP8gokNa0.net
>>974
色々見たらその方式で実装してるところが多いんだけどなんか個人的に気持ち悪いというか…好みの問題かもしれない
でも最終手段として残しておくことにするよありがとう

976 :デフォルトの名無しさん (フリッテル MM5e-R3UR):2017/07/15(土) 18:41:00.51 ID:t2Xo9ohCM.net
>>961
「汎用的な言葉」とは?
俺の感覚では「列挙可能」はdefinePropertyで指定する {enumerable: true} の方で iterableとは別概念だが。
https://developer.mozilla.org/ja/docs/Web/JavaScript/Reference/Global_Objects/Object/defineProperty
>>958の後半3行も根拠があなたの中にしかなくて意味不明だった。

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

977 :デフォルトの名無しさん (フリッテル MM5e-R3UR):2017/07/15(土) 18:51:47.13 ID:t2Xo9ohCM.net
>>964
感覚的にはタイムテーブルのような長さを計るものはtable要素向きではないと思うが、横にHH:00のヘッダを付けるなら二次元構造といえなくもないか。
とはいえ、レンダリングコストが高くつきそうなので、俺なら適当なブロックボックスを時間の長さ分作って放り込むと思うが。

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

978 :(アウアウエー Sa66-HJuN):2017/07/15(土) 19:10:25.30 ID:OBAajcvKa.net
>>975
まあ、表では無いからな。
divをabsoluteで配置して、インラインスタイルでtopを放送開始時間、bottomを放送終了時間にして、チャンネルのクラスつけて、
チャンネルのクラスはleftとwidth持ってりゃわりと綺麗かな。

979 :デフォルトの名無しさん (ワッチョイ fca6-N0vF):2017/07/15(土) 21:04:26.61 ID:IP8gokNa0.net
>>977
>>978
参考になったわ
ありがとう

980 :デフォルトの名無しさん (ワッチョイ 6e0b-qs1f):2017/07/15(土) 21:37:06.43 ID:r3inW3v40.net
>>976
列挙可能とは、反復処理にかけて次の要素、次の要素、次の要素、と取り出していける事を言う
enumerableは「要素が列挙される」ことが可能かどうか
ここで言ってるのは「要素を列挙する」ことが可能かどうか、つまり@@iteratorを持つのと同分類
HTMLCollectionはlengthとitem()を備えるので要素を列挙していくことが可能
よって広義にイテラブルと呼ぶことは可能

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

981 :デフォルトの名無しさん (フリッテル MM5e-Xm5V):2017/07/16(日) 10:43:52.50 ID:OnshtUopM.net
>>980
> 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 ぐらいか。

982 :デフォルトの名無しさん (アウアウウー Sa08-Xm5V):2017/07/16(日) 11:06:23.15 ID:QZhQxoRLa.net
汎用的な言語定義を説くなら、英和辞典を引くべき。
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の解釈が正しいと思う。

983 :デフォルトの名無しさん (アウアウウー Sa08-Xm5V):2017/07/16(日) 11:27:22.43 ID:QZhQxoRLa.net
>>958
> DOMで言うイテラブルは通常NodeIteratorなどのことなのでそれとも違う
どういう意味だろう?
NodeIterator は createNodeIterator() で生成するオブジェクトの Interface だが、指定可能なノードはルートノードだけ。
iterable な NodeList に出来て、iterable ではない HTMLCollection に出来ない事があるとは思えない。
そもそも、NodeList を対象に取る機能ではないような。
https://dom.spec.whatwg.org/#interface-nodelist
https://dom.spec.whatwg.org/#interface-htmlcollection

984 :デフォルトの名無しさん (スププ Sd70-wcQn):2017/07/16(日) 11:27:34.90 ID:jDkpuj83d.net
話を戻すけど、俺は最も自然に感じる意味がそうだと言うことに異論は唱えていないよ
ただ@@iteratorを持つものしか「イテラブル」と呼べないというのには異論がある

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

985 :デフォルトの名無しさん (フリッテル MM5e-R3UR):2017/07/16(日) 12:19:12.13 ID:OnshtUopM.net
>>984
まず、あなたの投稿はどれだ?
俺がレスした相手に (スププ 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

986 :デフォルトの名無しさん (ワッチョイ 8bf3-z+eH):2017/07/16(日) 13:41:18.87 ID:r696m46c0.net
国語の話とか収集つかないので静観してたけど、なんか荒らしちゃったようで申し訳ない。
反復することが出来る(ループ文を使う)という意味で言ったので、そんな深い意味はありません。
反復という言葉がとっさに思いつかなかったので英語で言ったのですが、イテレータブルも日本語でしたね。

987 :デフォルトの名無しさん (スププ Sd70-wcQn):2017/07/16(日) 14:28:11.42 ID:jDkpuj83d.net
>>985
957とかが俺だ
俺もあっちこっちから書き込んでるからね

988 :デフォルトの名無しさん (フリッテル MM5e-R3UR):2017/07/16(日) 17:15:26.87 ID:OnshtUopM.net
>>954,986
あなたがそういうスタンスならそれはそれで良いと思う。
俺が危惧したのは「仕様にある用語(iterable)」と解釈されかねない書き方になっていたこと。
それが仕様上のiterableとは別意の「便宜上の言葉」である事が明確になっていたなら問題はなかった。

989 :デフォルトの名無しさん (フリッテル MM5e-R3UR):2017/07/16(日) 17:48:27.95 ID:OnshtUopM.net
>>958,984,987
あなたは初め、仕様に言及した書き方をしていた。
>>958,980がそれだが、主張している内容が矛盾だらけだった。
>>981-983に対してもレスは未だない。

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

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

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

990 :デフォルトの名無しさん (ワッチョイ 0aaa-32Qs):2017/07/17(月) 03:58:47.70 ID:Uy8niamL0.net
一般用語のコンテナ・入れ物で良い。
複数のオブジェクト・要素を入れる、複合物

コンテナは、反復可能

991 :デフォルトの名無しさん (ワッチョイ d430-S4qQ):2017/07/17(月) 04:17:35.87 ID:H+ZLTTJY0.net
その反復可能を英語でいったらどうなるのさ?
日本人だから英語は技術用語とできるかもしれんが
英語圏の人にとっては英語で説明するんだぞ

992 :デフォルトの名無しさん (ワッチョイ 6e0b-qs1f):2017/07/17(月) 05:39:00.74 ID:FkU7igMp0.net
>>989
よく読め、俺は最初から仕様としての言葉としてはふさわしくないが、
汎用的な言葉としては有りというスタンスしか取っていない
現にカタカナの「イテラブル」としか言っていない
そして原文とは『彼のレス』のこと

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

993 :デフォルトの名無しさん (ワントンキン MM1a-cSUh):2017/07/17(月) 12:16:00.13 ID:wQITi39ZM.net
この手の基地外は相手しないほうがいいよ

994 :デフォルトの名無しさん (ワッチョイ d430-S4qQ):2017/07/17(月) 12:37:43.01 ID:H+ZLTTJY0.net
> 現にカタカナの「イテラブル」としか言っていない

それ何の違いがあるの?

995 :デフォルトの名無しさん (ブーイモ MMfd-U/oA):2017/07/17(月) 13:04:25.24 ID:gEy1UlAAM.net
あぁ無情

996 :デフォルトの名無しさん (ワッチョイ 6e0b-qs1f):2017/07/17(月) 22:00:34.56 ID:FkU7igMp0.net
prototypeとプロトタイプは違いがあるわな

997 :996 (ワッチョイ e285-X5vM):2017/07/18(火) 22:58:23.00 ID:ojkSKdtb0.net
すみません。質問です。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>");
}

998 :デフォルトの名無しさん (ワッチョイ 0aaa-32Qs):2017/07/18(火) 23:20:09.08 ID:6DbTRi2A0.net
ブラウザのF12開発者ツールを起動して、デバッグすれば?

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

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

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

999 :デフォルトの名無しさん (アウアウカー Safb-1ERD):2017/07/20(木) 12:08:49.02 ID:Cyp9mT6Pa.net
次スレないのか?

1000 :デフォルトの名無しさん (ワッチョイ bf20-E/h9):2017/07/20(木) 12:38:37.99 ID:b22a38Le0.net
ヘイトスピーチの発信源と化してるしもう落ちていいよ

1001 :デフォルトの名無しさん (ワッチョイ 870b-8Ndd):2017/07/20(木) 14:33:12.10 ID:N3Sxif2b0.net
ありがとうございました

1002 :2ch.net投稿限界:Over 1000 Thread
2ch.netからのレス数が1000に到達しました。

総レス数 1002
449 KB
掲示板に戻る 全部 前100 次100 最新50
read.cgi ver 2014.07.20.01.SC 2014/07/20 D ★