それぞれ説明【配列実践スキル】2022年9月15日こんにちは。今回はJavaScript(以下JS)の基本である配列について書きたいと思います。配列の中でも特に下記にフォーカスを当てていきます。SEOガン無視の短い内容となってますので、サクッと見れます。個人的によく使います。forEach()基本概念は"繰り返し"コールバックに記載している動作を、配列内の要素数の分だけ繰り返し行う。map()のように新たな配列を作るわけではない。計算をするforEach内に書かれているfunctionは3つの引数を持つ。第2引数:インデックス数(今回の例なら0〜9)第3引数:配列そのものただし全て使う必要はない。個人的には、第3引数はあまり使わない。返値returnはいつも"undefined"になる。ここがmap(),filter(),reduce()と大きく異なるところです。//結果は"undefined"自分がよく使う時はdocument.querySelectorAllで複数のクラスを選択しクリックイベント等で同じクラスを一度に付与させる実装です。map()基本概念は"繰り返して新しい配列を作る"コールバックの動作を、配列内の要素数の分だけ繰り返し行い新たに配列を作ることができる。90]forEachと同様、map内に書かれているfunctionは3つの引数を持つことができるが、全て設定する必要はない。第2引数:インデックス数(今回の例なら0〜9)第3引数:配列そのもの返値returnを設定できるので、変数を用意する(今回の例では"baseMap")。filter()基本概念は"配列の中で条件を満たす要素だけで新しい配列を作る"これに関しては実際の例を見た方がわかりやすいです。//[6,7,8,9,10]filterも同様functionは3つの引数を持つことができるが、全て設定する必要はない。第2引数:インデックス数(今回の例なら0〜9)第3引数:配列そのもの返値returnを設定できるので、変数を用意する(今回の例では"baseFilter")mapのように計算をさせるのではなく条件で縛りをつけて条件を満たすものの配列を作るreduce()基本概念は"集約!"reduceはこれまで紹介してきたメソッドのとは少しテイストが異なっています。新しい配列を返すわけではないです。引数は4つ持ち、第1引数はアキュムレータと言って日本語では蓄圧器と訳すようです。平たくいうと配列の要素が第1引数に吸い込まれて蓄積されていく感じです。そのことをイメージして下記の例を見てください。55まずは引数の紹介です。第3引数:インデックス数(今回の例なら0〜9)第4引数:配列そのもの返値returnを設定できるので、変数を用意する(今回の例では"baseMap")mapやfilterのように最後に配列を作るわけではない。この部分を自分のローカルで見てもらえるとどんなことが起こっているかピンと来ると思います。注意すべきは5行目の"0"はアキュムレータの初期値です。10と入れればスタートは10から始まり1が足され、2が足され、3が足され,,,10が足されるとなるのです。まとめでは今日紹介した内容をまとめていきましょう。forEach・map・filterの3つは引数を3つ持つ。第3引数:配列そのものreduceだけが第1引数が特殊。第3引数:インデックス数(今回の例なら0〜9)第4引数:配列そのものmap・filterは新しく配列を作ることができる。forEachとreduceは配列を作らない。今回は以上となります。皆さんの理解の手助けとなっていれば幸いです。borderとの違いも徹底解説outlineとborderの違いについて書きました。今まではborderしか使っていなかったのですが、outlineの特徴を知れば、コーディングでできることの幅が広がります。スキルアップ【CSS】テキストにマスク掛け。画像をテキストの形にクリッピング。(background-clip)CSS小技集。勉強しててイイなと思ったテクを共有します。スキルアップnewとインスタンスの関係newとインスタンスについて自分なりに理解した流れを書きます。スキルアップ【HTML】9つの重要タグの理解でSEO対策(セマンティック要素)セマンティックコーディングを理解することで、コード自体の可読性を上げ、SEOにも効果的なHTMLの記述が可能になります。2/4】基本的なアニメーションと連続した動きの実装ー初めてのTween作成編GSAPの基本的なメソッドやプロパティを中心に学び、シンプルな動きを自分で作れるようになります。【JS】連続するsetTimeoutをスッキリさせる【コピペで解消】フロントエンドエンジニアYamato(やまと)7年目のフロントエンドです。サンフランシスコ留学の際にITの素晴らしさに触れエンジニアになると決心。独学で未経験からアルバイトで採用され入社。経験し2022年8月に独立しました。HTML/CSS・JS・WordPress・Shopifyを触っています。YAMATOdevlog。