Skip to content

[JavaScript]配列にデータを記憶し、処理を行う

ma-san
ma-san(鈴木正行)

「連続したデータ」を扱う配列を覚えることで繰り返し文と組み合わせをしやすくなる。

配列に複数のデータを記憶する#

決まった数値ではなく、曜日などのテキストなども処理したい場合にも配列を使う必要がある。

配列は複数の値を入れることが可能な「型」になります。

let weekly = ['月', '火', '水', '木', '金'];
console.log(weekly[1]);

配列の1つ目、月を表示したい場合はweekly[0]と1ではなく0を指定します。違和感を覚えるかもしれませんが最初、1つ目を示す数値は0から数え始めます。

let weekly = ['月', '火', '水', '木', '金'];
weekly[1] = '火曜日';
console.log(weekly);

配列を書き換える、という処理も覚えておく必要があります。この場合は配列1の火を書き換えるということになります。様々な操作を行うメソッドもあるので覚えておく必要があります。

配列.length // 要素数を表示
配列.push() // 末尾に要素を追加
配列.pop() // 最後の要素を削除
配列.splice(インデックス,削除する要素の数) // 配列から指定した位置の要素を削除
配列.sort() // 配列の要素を並べ替える
配列.shift() // 先頭要素を削除

配列の内容を繰り返し文を使って表示#

配列とfor文を組み合わせることで更に様々な処理を実行することが可能。

配列とfor文を組み合わせる「for ~ of文」は配列から一つずつ順番に取り出して繰り返しができる文となります。

let weekly = ['月', '火', '水', '木', '金'];
for (let day of weekly) {
  console.log(day + '曜日');
}

for文でも同様の処理が可能です。

let weekly = ['月', '火', '水', '木', '金'];
for (let count = 0; count < weekly.length; count++) {
  console.log(weekly[count] + '曜日');
}

文の中に見慣れない「count++」はcountの値を1増やすという意味となります。1ずつカウントアップする処理はよく使うため、覚えておくと便利です。もちろん、意味合いとしては「count += 1」と同じになります。

for(let count = 0; count < 10; count++) {
  console.log(count +'回目の繰り返し文');
}

カウントアップしていくたびに数値は更新されていきます。その「たび」を表示することで現在の数値を表示し、最終的に10回目の繰り返しで終了します。
慣れていない方にとっては違和感を感じるかもしれませんが、一回目のカウントアップ時点では数値は0をいれているため0回目、と表示されることになります。あくまで入っている数値を表示するだけとなります。

お仕事・当サイトへ興味を持っていただいた方

お問い合わせはこちらから

お問い合わせを頂く際はご確認ください

プライバシーポリシー

ma-san(鈴木正行)
テクニカルディレクター / Webデザイナー

「ma-san web design」の管理者。東京都・千葉県・宮城県仙台市を中心に企業のWebデザイン/マーケティング/IT戦略のプランニングからWebサイト構築・運用をしています。
Webアクセシビリティ」を中心に、「変わりゆくWebと共にサービス・サイトを改善していくこと」を重視します。
当サイトではお仕事のご相談からナレッジシェアを中心に活動していきます。

るり
未来へ繋がるWebの可能性。
お客様のサービスを、Webサイト制作を通じてサポートいたします。
Accessible Web Design.

Recommendation

るり

Webアクセシビリティの重要性について 当サイトが最も注力したい「Webアクセシビリティ」について、ぜひ多様な方々と共に学びながら充実化させ、普及活動に勤しみたいと考えています。

るり

初めて依頼を検討している方 初めてWebサイト制作を依頼する方へ。Webサイトを作りたいと思ったときに参考にしていただけると幸いです。

るり

Webサイトの基本 サーバーの準備からドメイン契約。Webサイトに必要なデータや情報を一通り纏めることで初めてWebサイト制作に携わる方々の学習の一助になれば幸いです。