【初心者向け】Javascriptの配列まとめ【スプレッド構文】

  • Javascriptがとにかく苦手な方
  • Javascriptの配列の使い方を知りたい方
  • スプレッド構文やmapについて理解したい方
ケイ
ケイ

こんにちは!
Ruby on Rails学習者のケイ(@new_design)です。

突然ですがJavascriptに苦手意識を持っている方多いと思います。

クライアントサイドだけでなくサーバーサイドでの利用が増えたり、ReactVueなどのJavascript系ライブラリやフレームワークの需要が増していることから、多くの人がJavascrptを理解する必要に迫られています。

そこで今回はJavascriptでよく使う配列にフォーカスして、配列の使い方特有のメソッドについて解説していきます。

Javascriptの実行環境を準備しよう

まずはJavascriptの実行環境を準備していきます。と言ってもRubyやPythonなどのように環境構築を行う必要はありません。

なぜならJavascriptはブラウザ上で動くからです。

今回はCodesandboxを使ってコードを書いていきます。別のエディタを使っている方はそちらで問題ありません。

①ブラウザでCodesandboxを開く

②右上のcreate sandboxボタンをクリックする

③Vanillaを選択

純粋なJavascriptをVanillaって呼びます。

④下のような画面になっているか確認

このようにコードとブラウザ画面を両方表示してくれるので、変化が分かりやすいですね。

Javascriptで配列の結合 スプレッド構文

ではJavascriptの配列について簡単に解説していきます。RubyやPythonなど既に学んでいる方は理解しやすいと思います。

まずは2つの配列を作ります。定数はconstを使います。

const number1 = [100,200,300]
const number2 = [400,500,600]

この2つの配列を連結して、下のような配列にしたいとします。

const number3 = [100,200,300,400,500,600]

そこでスプレッド構文(…)を使って配列を結合していきます。

const number1 = [100, 200, 300];
const number2 = [400, 500, 600];
const number3 = [...number1, ...number2];
console.log(number3);

//実行結果
//[100, 200, 300, 400, 500, 600]

スプレッド構文は配列の中から要素を取り出すことができます。例えば下記のコードだと、配列の中身の100,200,300全てが取り出されています。

const number1 = [100, 200, 300];
console.log(...number1);

//実行結果
100,200,300

このようにスプレッド構文を使うと配列の結合も簡単です。

Javascriptで配列から取り出す map

次に配列から要素を取り出して処理を行う方法を解説していきます。

numListという配列の要素を2倍して、numNewListという配列で返す処理をコードで書いてみます。

const numList = [100, 200, 300];
const numNewList = numList.map((num) => {
  return num * 2;
});
console.log(numNewList);

//実行結果
[200, 400, 600]

次は配列の要素とインデックスを取り出す方法を見てみましょう。

const numList = [100, 200, 300];
numList.map((num, index) => {
  console.log(`${index + 1}番目は${num}です`);
});

mapの引数にindexという第2引数を持たせることも可能です。

ちなみにアロー関数の中身が1行の場合、下記のようにコードを省略することができます。

const numList = [100, 200, 300];
numList.map((num, index) => console.log(`${index+1}番目は${num}です`));

コメントを残す

メールアドレスが公開されることはありません。 * が付いている欄は必須項目です