質問をすることでしか得られない、回答やアドバイスがある。

15分調べてもわからないことは、質問しよう!

新規登録して質問してみよう
ただいま回答率
85.50%
ECMAScript

ECMAScriptとは、JavaScript類の標準を定めるために作られたスクリプト言語です。

foreach

foreachは、List・Collection・Arrayといったデータ構造の各要素に対して繰り返し処理を実行するために扱われる、制御構造の構文です。

JavaScript

JavaScriptは、プログラミング言語のひとつです。ネットスケープコミュニケーションズで開発されました。 開発当初はLiveScriptと呼ばれていましたが、業務提携していたサン・マイクロシステムズが開発したJavaが脚光を浴びていたことから、JavaScriptと改名されました。 動きのあるWebページを作ることを目的に開発されたもので、主要なWebブラウザのほとんどに搭載されています。

Q&A

解決済

4回答

593閲覧

JavaScript - forEach構文について

balls

総合スコア40

ECMAScript

ECMAScriptとは、JavaScript類の標準を定めるために作られたスクリプト言語です。

foreach

foreachは、List・Collection・Arrayといったデータ構造の各要素に対して繰り返し処理を実行するために扱われる、制御構造の構文です。

JavaScript

JavaScriptは、プログラミング言語のひとつです。ネットスケープコミュニケーションズで開発されました。 開発当初はLiveScriptと呼ばれていましたが、業務提携していたサン・マイクロシステムズが開発したJavaが脚光を浴びていたことから、JavaScriptと改名されました。 動きのあるWebページを作ることを目的に開発されたもので、主要なWebブラウザのほとんどに搭載されています。

0グッド

1クリップ

投稿2018/01/15 03:58

現在、JavaScriptを学習している者です。
下記コードですが、JavaScript部分のforEach構文ですが、何をやっているのかは大体分かるのですが、どうしてこういう書き方をするのかがよく分かりません。

JavaScript

1inputs.forEach(input => input.addEventListener('change', handleUpdate));

質問内容ですが、下記のとおりです。
1、そもそもjQueryでないノーマルなjavascriptで、nodeNameの「input」がどうしてそのまま書けるのだろうと疑問です。

2、あと、=> は確か無名関数の書き方と記憶しているのですが上記コードは具体的にどのようなことをやっているのでしょうか?

全体のコードは下記のとおりです。

HTML

1<!DOCTYPE html> 2<html lang="en"> 3<head> 4 <meta charset="UTF-8"> 5 <title>Scoped CSS Variables and JS</title> 6</head> 7<body> 8 <h2>Update CSS Variables with <span class='hl'>JS</span></h2> 9 10 <div class="controls"> 11 <label for="spacing">Spacing:</label> 12 <input id="spacing" type="range" name="spacing" min="10" max="200" value="10" data-sizing="px"> 13 14 <label for="blur">Blur:</label> 15 <input id="blur" type="range" name="blur" min="0" max="25" value="10" data-sizing="px"> 16 17 <label for="base">Base Color</label> 18 <input id="base" type="color" name="base" value="#ffc600"> 19 </div> 20 21 <img src="https://source.unsplash.com/7bwQXzbF6KE/800x500">

CSS

1:root { 2 --base: #ffc600; 3 --spacing: 10px; 4 --blur: 10px; 5 } 6 7 img { 8 padding: var(--spacing); 9 background: var(--base); 10 filter: blur(var(--blur)); 11 } 12 13 h1 { 14 color: var(--base); 15 } 16 17 body { 18 text-align: center; 19 background: #193549; 20 color: white; 21 font-family: 'helvetica neue', sans-serif; 22 font-weight: 100; 23 font-size: 50px; 24 } 25 26 .controls { 27 margin-bottom: 50px; 28 } 29 30 input { 31 width:100px; 32 }

JavaScript

1const inputs = document.querySelectorAll('.controls input'); 2 3 function handleUpdate() { 4 const suffix = this.dataset.sizing || ''; 5 //console.log(this.name); 6 document.documentElement.style.setProperty(`--${this.name}`,this.value + suffix); 7 } 8 9 console.log(inputs); 10 inputs.forEach(input => input.addEventListener('change', handleUpdate)); 11 inputs.forEach(input => input.addEventListener('mousemove', handleUpdate));

気になる質問をクリップする

クリップした質問は、後からいつでもMYページで確認できます。

またクリップした質問に回答があった際、通知やメールを受け取ることができます。

バッドをするには、ログインかつ

こちらの条件を満たす必要があります。

guest

回答4

0

1、そもそもjQueryでないノーマルなjavascriptで、nodeNameの「input」がどうしてそのまま書けるのだろうと疑問です。

ここでのinput単なる引数です。特にnodeNameとしての意味があるわけではありません。

2、あと、=> は確か無名関数の書き方と記憶しているのですが上記コードは具体的にどのようなことをやっているのでしょうか?

単なる関数に書き直すと、以下のようになります。

JAVASCRIPT

1inputs.forEach(function(input){ 2 return input.addEventListener('change', handleUpdate) 3});

NodeList.prototype.forEachArray.prototype.forEachと同様の機能で、「各要素について引数の関数を呼び出す」という意味です。returnしていますが、forEachは返り値を見ないので特に意味はありません(アロー関数の都合です)。

なお、NodeList.prototype.forEachはIE 11、iOS 9、Firefox 49以下では未対応なので、ターゲットを絞れる環境以外では実用するには少々早い気もします。

投稿2018/01/15 04:16

maisumakun

総合スコア145123

バッドをするには、ログインかつ

こちらの条件を満たす必要があります。

0

JavaScript

1inputs.forEach(input => input.addEventListener('change', handleUpdate));

これはれっきとしたネイティブJavaScriptの構文です。

forEachはArray.prototype.forEachとして定義されているリスト操作のメソッドです。

本文の下部ではdocument.querySelectorAllの戻り値がNodeListなので、
実際にはNodeList.prototype.forEachとして定義されていますが、使い方や意味はほぼ同じです。

使い方はこんな感じで、for文のように配列を取り出して1個ずつ処理していきます。

JavaScript

1[1, 2, 3].forEach(function (it) { 2 console.log(it); 3}); 4// 1 5// 2 6// 3 7 8// ほぼ同様の動作をfor...ofで再現してみた。 9// for...ofに対応するのはiterableなもののみでNodeListは使えるかどうか知らないので試してみてね。 10for (let it of [1, 2, 3]) { 11 console.log(it); 12}

=>はアロー関数と呼ばれるES2015で実装された書き方です。
無名関数を簡素に書く事が出来ます。

JavaScript

1// この2つのコードはほぼ等価 2inputs.forEach(input => input.addEventListener('change', handleUpdate)); 3 4inputs.forEach(function(input){ 5 // forEachは戻り値を捨てるのでreturnする意味はないが、 6 // アロー関数の{}を省略した場合、式全体が戻り値になるので動作を揃える為に記述 7 return input.addEventListener('change', handleUpdate)); 8})

どっちの方が簡素で読みやすいでしょうか?
まぁ前者ですね、これが存在意義です。

アロー関数と無名関数をほぼ等価と表現したのにはわけがあって、
アロー関数では関数内で自動的に行われるthisやargumentsが生成されません。
めったにthisやargumentsに頼るべき場面がないので忘れがちですが、極稀にハマるので注意してください。

1、そもそもjQueryでないノーマルなjavascriptで、nodeNameの「input」がどうしてそのまま書けるのだろうと疑問です。

document.querySelectorとdocument.querySelectorAllの勘違いですかね?
document.querySelectorの戻り値はElementです。
document.querySelectorAllの戻り値はElementを束ねたNodeListという配列もどきのオブジェクトです。

NodeListはNodeList.prototype.forEachをプロトタイプメソッドとして所持しているのでforEachは正しく動作します。

jQueryはセレクタ文字列を渡してDOMの一覧を受け取る場合、
jQueryオブジェクトという大量のプロトタイプメソッドを持つ配列もどきが返ってきます。
なのでNodeListと一部似たような操作が出来るわけです。
まぁ、NodeListにはforEachくらいしか見るものがないですけど…

投稿2018/01/15 04:34

miyabi-sun

総合スコア21158

バッドをするには、ログインかつ

こちらの条件を満たす必要があります。

0

ベストアンサー

XXX => 処理という書き方はアロー関数と呼ばれるものです。
以下の2つは概ね同じことを指しています。

JavaScript

1inputs.forEach(function(input) {input.addEventListener('change', handleUpdate);}); 2 3inputs.foreach(input => input.addEventListener('change', handleUpdate));

アロー関数の左辺は無名関数でいうところの「引数」を表しています。右辺は無名関数内の「処理」を表しています。なので、この左辺の「input」は別にinputエレメントを直接意味しているわけではなく、ただ単に引数の名前が「input」なだけで、このinputという変数名を「hoge」に置き換えても動作します。

アロー関数というのは書き方がいくつもあって、この書き方は「何もかもを省略して、一番短く書く方法」です。以下のアロー関数は全部同じ動作をします。

JavaScript

1// 一番短い、「引数1個、処理1行」の場合の書き方 2input => input.addEventListener('change', handleUpdate) 3 4// 「処理が2行以上」の場合は、{}を使って処理を複数行書ける 5input => {input.addEventListener('change', handleUpdate);} 6 7// 「引数」はカッコで囲んでもよい、二個以上の引数、または1つも引数がない場合、かならずカッコが必要 8(input) => input.addEventListener('change', handleUpdate) 9 10// 一番省略しないで書いたアロー関数 11(input) => {input.addEventListener('change', handleUpdate);}

公式ドキュメントにも書いてあります。
https://developer.mozilla.org/ja/docs/Web/JavaScript/Reference/arrow_functions

投稿2018/01/15 04:14

masaya_ohashi

総合スコア9206

バッドをするには、ログインかつ

こちらの条件を満たす必要があります。

balls

2018/01/15 04:16

素早い回答ありがとうございます。すごいよく分かりました。
maisumakun

2018/01/15 04:24 編集

「=> 式」で書いたアロー関数は「その式の値を返す」という意味があるので、単に中括弧で囲うだけだと意味が変わってきます。 今回のforEachでは返り値を見ないかつ、addEventListenerの返り値そのものがundefinedなので特段の違いはありませんが、イベントハンドラなどでは「falseを返すと処理が止まる」など、返り値の有無で動作が変わる場合もあるので要注意です。
guest

0

.forEach()は構文ではなく関数と考えた方がいいと思いますよ。この関数の引数が無名関数です。

hoge => alert(hoge+"fug")みたいに書いた時、この関数の引数がhogeになります。

ですからinputhogeとかに変えても普通に動作するはずです。inputはnodeNameではありません。

では無名関数の引数には何が入るか、ですが、それは順に配列等に含まれる各要素現在のインデックス配列そのものです。渡す関数で省略されている場合は受け取りません。今回は配列に含まれる各要素のみ引数として受け取っています。

無名関数内ではその各要素ごとに無名関数内の処理を行っています。

それが質問者様が挙げられたコードの内容です。

投稿2018/01/15 04:16

編集2018/01/15 04:17
namnium1125

総合スコア2043

バッドをするには、ログインかつ

こちらの条件を満たす必要があります。

あなたの回答

tips

太字

斜体

打ち消し線

見出し

引用テキストの挿入

コードの挿入

リンクの挿入

リストの挿入

番号リストの挿入

表の挿入

水平線の挿入

プレビュー

15分調べてもわからないことは
teratailで質問しよう!

ただいまの回答率
85.50%

質問をまとめることで
思考を整理して素早く解決

テンプレート機能で
簡単に質問をまとめる

質問する

関連した質問