4.Javascript-4

配列

配列を活用すると、複数の値を1つのデータのように取り扱うことができます。

例えば、前パートでやった変数の定義の方法では、1つの値しか格納できません。

const test1 = 100;
let test2 = 'ジョジョの奇妙な冒険';

もし値を20個や100個使いたいと思ったとき、変数をその分定義するのは流石に大変ですよね。
そんな時、配列データを作成することで大量の値をまとめて1つのデータのように扱えるわけです。

それでは変数に配列を入れる方法を説明します。
入れたいデータを [ ] の中に入れて、それぞれを,(カンマ)で区切って入れていきます。

const array = ["らせん階段","かぶと虫","廃墟の街","イチジクのタルト","ドロローサヘの道",2,3,5,7];
 
console.log(array );
//(9) ['らせん階段', 'かぶと虫', '廃墟の街', 'イチジクのタルト', 'ドロローサヘの道', 2, 3, 5, 7]このように表示されると思います。

次に要素(値)の取り出し方についてやっていきます。

const array = ["らせん階段","かぶと虫","廃墟の街","イチジクのタルト","ドロローサヘの道",2,3,5,7];
 
console.log(array[1]);
// かぶと虫と表示されると思います。

宣言した配列の変数名の後に[1]を入れることによって、配列の「1」番目に入っている値(要素)を取得することができます。

いやいや、かぶと虫は左から数えて、「2」番目ですやん!と思ったと思います。

配列の数え方にはルールがあって、そのルールとは「0から数える」というものです。

今回の例でお伝えすると
「らせん階段」が0番目
「かぶと虫」が1番目
「 廃墟の街 」が2番目
「イチジクのタルト」が3番目
「ドロローサヘの道」が4番目
「2」が5番目(以下略)
となります。

先ほどの配列と以下をjsファイルにコピーペーストしてください。

console.log(array[0]);
console.log(array[1]);
console.log(array[2]);
console.log(array[3]);
console.log(array[4]);
console.log(array[5]);
console.log(array[6]);
console.log(array[7]);
console.log(array[8]);
console.log(array[9]);

このように表示されたと思います。
配列には10個目がないのでconsole.log(array[9]);は「undefind」と表示されます。

課題

変数に要素(値)を5つ入れて左から3番目の要素(値)をログ出ししてください。

コラム

エラーの検索の仕方、以前エラー文が出たらコピーしてGoogleに貼り付ければ異本的には解決法が見つかるとお話ししました。今回はその補足です。
エラー文の中にはこちらで好きに設定した変数の名前が含まれている場合などがあります(プログラムが複雑になるとそういったケースが増えていきます)
簡単に例えを出したいと思います、以下をjsファイルに追加で記入してください。

const array = 88;

ブラウザでログを確認すると
Uncaught SyntaxError: Identifier ‘array’ has already been declared (at index.js:30:7)
このようにエラー文が表示されたと思います。

このエラー文の’array’この部分はこちらがつけた変数の名前です。
変数名をarrayからjojoに変えたらエラー文のarrayもjojoに変わります。

このように独自の変数名などが含まれているエラー文をGoogleで調べると検索結果がない場合があります、こう言う時にどう調べたら良いかというと

Uncaught SyntaxError: Identifier ‘hoge’ has already been declared

このように独自の名前のところを’hoge’と言う文字に置き換えたり

Uncaught SyntaxError: Identifier ” has already been declared

文字を消して検索をかけると検索結果が出てくるようになるのでこの先検索しても見つからないと言うことがあったらこの方法を思い出してください。

今回はここで終了です、お疲れ様でした!

PAGE TOP