kei615ykhm’s programming learning blog

プログラミングを0から学んでいる学生の備忘録

【学びの記録】JavaScriptの仕組みを言語化する⑥ - 配列編

Keiです。

 

JavaScriptの配列について言語化していきます。

 

 

配列とは

複数の値を一つの変数の中で順番に並べて保管するためのもの。

 

▽変数とは?

kei615ykhm.hatenablog.com

 

箱に例えると、たくさんの小さな仕切りがあり、それぞれに異なる要素のアイテムを入れることが出来るイメージ。

この配列の中の各アイテムを「要素」という。

 

配列の作り方

配列を作るには角括弧 ’ [ ] ’ を使用し、この中入れる情報をコンマ’ , ’で区切って要素を並べる。

例えば、いくつかの数字を配列に入れる場合は以下の通りになる。

 

let numbers = [1, 2, 3, 4, 5];

 

配列の要素を変更する

要素のインデックスをを使って新しい値を代入する。

 

numbers[3] = 10; // 配列の第3要素を10に変更
console.log(numbers); // [1, 2, 10, 4, 5] が表示される

 

配列に要素を追加/削除する

「push()」メソッドを使うことで配列の最後に新しい要素を追加でき、

「pop()」メソッドを使うと配列の最後の要素を削除できる。

 

numbers.push(6);
console.log(numbers); // [1, 2, 10, 4, 5, 6] が表示される

 

numbers.pop();
console.log(numbers); // [1, 2, 10, 4, 5] が表示される(6が削除された)

 

配列の長さを知る

ここでいう長さは要素の数のことをいい、「length」プロパティを用いる。

 

console.log(numbers.length); // 5が表示される

 

Webサイトのなにを動かす?

・ユーザー情報の管理

ユーザーのリストやグループごとの情報を配列に格納して管理する。例えば登録されたユーザーの名前やメールアドレスの一覧を配列で保持する等。

 

・商品リストの表示

ショッピングサイトで商品を一覧表示する際、商品データを配列に格納しておき、それをループ処理でひとつずつ画面に表示する。これにより、新しい商品が追加された場合でも簡単に一覧に追加することが出来る。

 

・フォームの動的な入力欄

例えばアンケートや申し込みフォームなどで、ユーザーの操作に応じて入力欄を増減させる場合は配列を使って入力データを管理する(さらに読み込む…のアレ)

 

・ギャラリーの加増データを管理

ギャラリーやスライダー機能において、表示する画像のURLを配列に格納することで、ユーザーが次の画像へ進むたびに配列から次の画像データを取り出して表示させることが出来る。

 

・データの一時保持と処理

クライアント側でのデータ処理において、サーバーから受け取ったデータ(APIレスポンス)を一時的に配列に保存・加工などを行い特定の条件でフィルタリングする。

(よくある配信日順/おすすめ順/価格順みたいなアレ)

 

・予約システムやカレンダー機能

予約可能な日付や日程を配列に格納し、それをカレンダーに表示させることで視覚的に予約やイベント情報を確認できるようになる。(Googleカレンダーみたいな)

 

まとめ

配列を使うことでデータを柔軟に扱うことが出来るため、動的なWebサイトの機能を作ることが出来るようになる。

 

(でも実際にコードを書いてみないとこれ以上のことは何とも言えないため、終わり!)