JavaScript

【入門】JavaScriptで配列を作成する方法【定義・初期化】

どうも、つよぽんです!

今回は、JavaScriptで配列を作成する方法を解説します。

今回の記事は次のような方に向けて書きました。

想定読者
  • JavaScriptの配列の作成方法がわからない?
  • 配列作成時に値も一緒にセットしたい(初期化)
  • 配列に保存されている値を更新したい

配列の概念については前回記事で解説したので詳しく知りたい方は以下の記事を参考にすると良いでしょう。

あわせて読みたい
【入門】JavaScriptの配列(Array)の概念を理解するどうも、つよぽんです! 今回は、JavaScriptの「配列(Array)」の概念について解説します。 今回の記事は次のよう...

今回の記事は以下の学習コンテンツのスライドを詳しく解説した記事となります。以下の記事と合わせて読むことでより理解度を深めていただけるかと思います。

あわせて読みたい
JavaScriptでの配列の作り方今回はJavaScriptで配列を作る方法を学習します。JavaScriptでは2通りの配列の作り方がありますが、2通りのうち片方の書き方で配列を作るのが一般的です。また、配列の作り方だけでなく、配列内の特定の値の更新方法も解説します。...

それでは次の内容で話を進めていきます。

今回の内容
  1. JavaScriptで配列を作成する2種類の方法
  2. JavaScriptで配列内の特定の値を更新する方法

 

JavaScriptで配列を作成する2種類の方法

この章では、「JavaScriptで配列を作成する方法」について解説します。

この章のタイトルにも書いてあるとおり、JavaScriptで配列を作成する方法は2種類あり、具体的には次のとおりです。

2通りの配列を作成方法
  1. 「[]」を使う方法 (一般的な書き方)
  2. 「new Array()」を使う方法 (一般的ではない書き方)

上記にも書いたとおり、「①「[]」を使う方法」が一般的な書き方となるので、普段はこちらの書き方で配列を作成すれば良いです。

②「new Array()」を使う方法」に関してはあまり見かけた記憶が無いので、②のやり方は避けたほうが良いでしょう。

基本的には①の書き方さえ知っていれば良いですが、書き方の比較のために②の書き方もあわせて、JavaScriptでどうやって配列を作成するかを具体的に解説します。

①「[]」を使って配列を作成する(推奨)

この項目では「①「[]」を使う方法」での配列の作成方法を説明します。

以下の画像は①のやり方で配列を作成する方法をまとめたものです。

「[]」をつかった配列の作り方「[]」をつかった配列の作り方

上の画像にも書いてあるとおり、「[]」を変数に代入すれば、その変数は配列を保存することになります。

また、配列に作成するときに値も一緒にセットすることが出来ます。(配列の初期化)

上の画像の「const array2 = [‘値1’, ‘値2’, ‘値3’];」の部分では、変数array2に「[‘値1’, ‘値2’, ‘値3’]」と3つの値が格納された配列を代入しています。

また、配列を初期化するときに複数の値をセットしたいときは「カンマ区切り(,)」で値を分けることで複数の値をセットできます。

ここまで説明した内容を実際にJavaScriptのコードで実装したものが以下の画像になります。

「[]」を使って配列を作ったサンプルコード「[]」を使って配列を作ったサンプルコード

上の画像のサンプルコードの赤枠内を見ると「1, 2, 3」と複数の値をセットした配列が変数array1に代入されているのがわかります。

console.logで変数array1の中身を確認すると、「1, 2, 3」が格納されている配列が出力されているのがわかります。

上の画像のサンプルコードは以下のリンクから直接確認できます。

配列の書き方サンプル1

②「new Array()」を使って配列を作成する(非推奨)

この項目では「②「new Array()」を使う方法」での配列の作成方法を説明します。

基本的には「①「[]」を使う方法」とほとんど同じで、①の「[]」の代わりに②の「new Array()」を使うようになっただけです。

そして、配列を初期化では、①だと「[‘値1’, ‘値2’, ‘値3’]」としていたところを、②では「new Array(‘値1’, ‘値2’, ‘値3’);」になります。

それ以外では①と②の違いはありません。

以下の画像内にここまで説明したことをまとめているので、そちらも参考にして頂けたらと思います。

「new Array()」をつかった配列の作り方「new Array()」をつかった配列の作り方

以下の画像は「②new Array()」の書き方で配列を作ったサンプルコードとなります。

赤枠内のconsole.logの結果ををみると、「①「[]」」の書き方で作成した配列と同じ形式で値が出力されているのがわかります。

「new Array()」を使って配列を作ったサンプルコード「new Array()」を使って配列を作ったサンプルコード

上の画像のサンプルコードは以下のリンクから直接確認できます。

配列の書き方サンプル1

JavaScriptで配列内の特定の値を更新する方法

この章では、「配列内の特定の値を更新する方法」を解説します。

配列の特定の値を更新する方法は以下の画像にまとめている通り、

配列[インデックス番号] = 新しい値;」

で更新することが出来ます。

配列内の特定の値を更新する方法配列内の特定の値を更新する方法

「インデックス番号」が何かわからない方は以下の記事で解説しているのでそちらを参考にして頂けたらと思います。

あわせて読みたい
【入門】JavaScriptの配列(Array)の概念を理解するどうも、つよぽんです! 今回は、JavaScriptの「配列(Array)」の概念について解説します。 今回の記事は次のよう...

以下の画像は、配列の特定の値を更新するサンプルコードです。

配列内の特定の値を更新するサンプルコード配列内の特定の値を更新するサンプルコード

更新前(初期値)の配列の2番目の値は「101」です。

水色枠内で配列の2番目の値に「301」を代入した後、あらためてconsole.logで配列を確認すると2番目の値が「101」から「301」に変更されているのがわかります。

上の画像のサンプルコードは以下のリンクから直接確認できます。

配列の書き方サンプル2

まとめ

今回の話をまとめると次のとおりです。

今回のまとめ
  • JavaScriptで配列を作成する方法は2通りある
    • ①「[]」を使う : 推奨
    • ②「new Array()」を使う : 非推奨
  • 配列の作成と同時に値をセットすることも出来る
    • 複数の値をセットする場合はカンマ区切り(,)で値をわける
  • 配列内の特定の値を更新する場合は、「配列[インデックス番号] = 新しい値;」で更新する

今回の内容は以下の記事内のスライドの補足資料として作成しました。スライドの全部を確認したい方は以下の記事も参照して頂けたらと思います。

あわせて読みたい
JavaScriptでの配列の作り方今回はJavaScriptで配列を作る方法を学習します。JavaScriptでは2通りの配列の作り方がありますが、2通りのうち片方の書き方で配列を作るのが一般的です。また、配列の作り方だけでなく、配列内の特定の値の更新方法も解説します。...
【3つの特典付き】Webエンジニアに必要な基礎スキルを体系的に効率良く身につけたいですか?

LINE登録で無料特典を受け取る

次のような方向けに、学習をサポートするコンテンツを無料プレゼントしています。

  • Webエンジニアになりたいけど何から学習を始めれば良いかわからない
  • 今まで独学で頑張ってきたけど、独学に限界を感じてきた
  • プログラミングは出来るけど、大きめのコードが書けない

「プレゼント詳細が知りたい」「プレゼントを受け取りたい」といった方は、以下のボタンをクリックして詳細ページをご確認ください。

無料特典を受け取る

 

COMMENT

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