JavaScriptで配列を作成する【JavaScriptの書き方入門】 | SkillhubAI(スキルハブエーアイ)

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

格言ガチャを作るためには、格言のストックが必要です。
今回はJavaScriptの配列(Array)を使って、この格言リストを作っていきます。

JavaScriptの配列とは

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

配列の作成方法

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

file

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

【格言リスト】

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

gacha.js

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

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

配列を確認する

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

alert(kakugen_items);

file

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

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

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

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

alert(kakugen_items[1]);

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

file

kakugen_itemsの後に書いた[1]は、配列の番号です。
配列に収納された要素には、自動的に番号が振られるようになっています。
このとき、最初の要素は0と数えられる点にだけ注意してください。
file

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

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

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

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

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