実践編①JavaScriptで配列を作成する【JavaScriptの書き方入門】

格言ガチャを作るためには、格言のストックリストが必要です。
これは「配列（Array）」を使って作ります。

• JavaScriptの配列とは
• 配列の作成方法
• 配列を確認する
• 配列内要素の数とインデックス番号
• 配列内の要素数を確認する

JavaScriptの配列とは

配列も変数や定数と同様に、データに名前をつけて収納することが出来ます。
配列では複数の情報をまとめて収納できるので、今回のような場合に最適ですね

配列の作成方法

下記のように書くとJavaScriptで配列を作成できます。
配列の場合は、中身を[ ]で囲うのがポイントです。

社長から送られてきた格言リストを使って配列を作成してみましょう。

【格言リスト】

• 人生の問題を解決するには、まず針箱を整頓せよ（カーライル）
• 常識とは、18歳までに身に付けた偏見のコレクションである（アインシュタイン）
• 人はその制服どおりの人間になる（ナポレオン）
• 神は水だけを造った。しかし人はワインを作った（ユーゴー）
• 善にも強ければ、悪にも強いというのが、いちばん強力な性格である（ニーチェ）

gacha.js

const kakugen_items = [
  "人生の問題を解決するには、まず針箱を整頓せよ（カーライル）",
  "常識とは、18歳までに身に付けた偏見のコレクションである（アインシュタイン）",
  "人はその制服どおりの人間になる（ナポレオン）",
  "神は水だけを造った。しかし人はワインを作った（ユーゴー）",
  "善にも強ければ、悪にも強いというのが、いちばん強力な性格である（ニーチェ）"
];

これで格言のストックは出来ました。

配列を確認する

作成した配列に、5つの格言が収納されているのか見てみましょう。

alert(kakugen_items);

ブラウザで見ると、登録した文字が全て出力されています。

配列内要素の数とインデックス番号

配列に含まれている要素には、インデックス（配列の要素番号）が自動的につけられています。

alertで表示させる内容を、少し変えてみましょう。

alert(kakugen_items[1]);

表示されるのが、1つの格言だけになりました。
カンマで区切ったデータが、それぞれ別のアイテムとして認識されているらしい、とわかりますね。

kakugen_itemsの後に書いた[1]は、配列の番号です。
配列に収納されたデータには、自動的に番号が振られるようになっています。
このとき、最初に登録したデータはゼロと数えられます。

今回の場合は下記のようにナンバリングされています。
このため、[1]で２番目に書いたアインシュタインが表示されたわけですね。

配列内の要素数を確認する

配列に要素がいくつ含まれているかは、配列名.lengthで調べることができます。

const test = kakugen_items.length;
alert(test);

※チェックが終わったら、確認用のalertはコメントアウトしておきましょう。