【初心者向け】配列を使う基本方法を紹介

2024.01.29
配列を使う基本方法を紹介

配列という機能を使ってみたいけどやり方が分からない

こう思う方は多いのではないでしょうか。本記事をお読みいただくと以下が分かります。

  • 配列の使い方が分かる(JavaScriptを使います)

少しプログラムに慣れてきた方で、次のステップに進む際に配列の考え方は非常に重要です。是非本記事をお読みいただき、理解を深めてください。

配列とは

配列が何かわからないという方は、「情報を記憶しておくための箱」というイメージを持って頂ければ大丈夫です。

この箱の中には1つしか物(値)を入れられないわけではなく、複数の物(値)を入れておくことができますし、箱の中身を追加したり削除したりすることもできます

配列を使わない場合

まだ少し分かりづらいと思うので、具体例で考えていきましょう。例えば5つの果物リストを書いていくときに、配列を使わない場合は以下のように書いてみるのが直感的でわかりやすいですね。

具体例
果物1 = "リンゴ"
果物2 = "バナナ"
果物3 = "ブドウ"
果物4 = "桃"
果物5 = "キウイ"

それでは、ここから果物リストの中身が変更されたときのことを考えてみましょう。

例えば果物リストが1つ増えた場合、このリストの下に「果物6 = “みかん”」と手打ちで追記する必要があります。

より面倒なのは、リストからバナナを削除するときです。果物2がリストから消えてしまうので、果物リストの連番が果物1、果物3、果物4・・・と続いてしまい、管理が非常に煩雑になります。

連番を合わせるには、果物3のブドウを果物2にしてあげて、果物の番号を1つ上に詰めることでしょうか。

今はリストの中身が5つしかないのでそこまで大変ではないと思いますが、プログラム上で何十個、何百個とリストの中身が存在する場合、この管理を手打ちでしていくことに限界があるのは想像いただけるのではないでしょうか

配列を使用する場合

ここまでで、配列を使わない場合のプログラムコード管理の煩雑さがお分かりいただけたと思います。

では、配列を使用する場合の考え方を紹介します。

具体例
果物 = ["リンゴ", "バナナ", "ブドウ", "桃", "キウイ"]

このように、「果物」という情報を記憶しておくための箱を作り、その中に果物に関する値をどんどん格納していきます。このように配列化しておくことで、6つ目の果物としてみかんが増えた場合でも1つ前の例のように「果物6 = 」とわざわざ書かなくても、果物配列の後ろにみかんを入れるだけで終了です。

具体例
果物 = ["リンゴ", "バナナ", "ブドウ", "桃", "キウイ", "みかん"]

また、果物のデータからバナナを消したい場合も、以下のように配列の中からバナナを削除するだけで十分です。

具体例
果物 = ["リンゴ", "ブドウ", "桃", "キウイ", "みかん"]

いかがでしょうか。配列を使用することでコードの管理が非常に楽にできますし、手作業での修正が少なくなるので結果的にミスも減らすことができます

次から、実際の配列の使い方を紹介します。

配列を使ってみよう

それでは実際に、配列を使ってみましょう。配列は「とにかく動かして直感的に理解する」ことが大事だと思いますので、多少難しいと感じるコードが出てくる可能性もありますが、初心者の段階では”こういうものか”と思ってどんどん先に進んでみてください。

先ほどの果物リストは配列の説明には非常にわかりやすいですが、今回は例を変えて「テストの点数を配列に格納して平均点を算出する」コードを書いてみましょう。

例えば3名のテスト結果が「80点、60点、70点」だったとします。この3人の平均点は70点(=(80 + 60 + 70) / 3)です。この平均点を算出するためのコードを紹介します。

JavaScript
//テストの点数を「score」という変数に格納する
let score = new Array(80, 60, 70);
//テストの合計点を「sum」という変数に設定し、初期値を0にしておく
let sum = 0;

//score変数に格納されたデータの数(score.length)だけfor文で繰り返す
for (let i = 0 ; i < score.length; i++){
console.log(score[i]);
//sumに1人ずつのテストの点数を追加していく
sum += score[i];
}
//3人のテストの合計点sumを3人(score.length)で割ることで、平均点を算出
console.log('平均点 = ' + sum / score.length);

いきなり少し難しく感じるかもしれないですが、各コードが何をしているのかコメントアウトで説明を書いています。

本記事で重要なのは、scoreという変数に3人のテストの点数を格納していることです。これがまさに配列の考え方を表しています

もし配列を使わないとすると、Aさんの点数が80点、Bさんの点数が60点、Cさんの点数が70点の場合、「A_score = 80 B_score = 60・・」というように果物リストの説明と同じ煩雑なコード管理が必要になります

まとめ

いかがでしたでしょうか。

今回の例はテストの人数も3人と非常に少なかったので、「for文や難しい概念を学ばないといけないなら配列は使わないでおこう」と思われる方も少なくないと思います。

ただし、よりレベルが上がってくるといずれ配列の概念は必ず必要になってくるので、是非本記事を利用して初めの一歩を踏み出していただけますと幸いです。

\プログラミングスクールを比較/

DMM WEBCAMP

COACHTECH

RUNTEQ

DMM WEBCAMP COACHTECH RUNTEQ
目指せる姿 WEBエンジニアへの転職
フリーランスエンジニア WEBエンジニアへの転職
分割払い
補助金 ×
転職保証 × ×
受講期間 12週間〜 3ヶ月〜 5ヶ月〜
特徴 【IT業界の転職を一番に考えたい方向け】
大手DMMが運営のプログラミングスクール
転職成功率98.8%
豊富なキャンペーンや補助金制度あり
【フリーランスを目指したい方向け】
フリーランスのエンジニアを最短で目指す
エンジニアと共に実際の案件開発を担当
【とことん勉強してから転職したい方向け】
1,000時間(約9カ月)のカリキュラムでしっかり勉強
企業の求める即戦力のWEBエンジニアを目指す
料金 329,350円〜
※給付金適用後
42万9,000円~ 55万円

公式HP

公式HP

公式HP

関連記事

資料請求

  • 短期集中で最速エンジニア転職を実現-転職成功者インタビュー一覧

    DMM WEBCAMPでは転職成功率98%を実現しています。本資料では、元警察官や元ラーメン屋など様々なバックグラウンドを持つ卒業生の声をお届けします。

    資料をダウンロードする
  • IT技術がもたらす3つの変化と身につけるべきスキル

    IT技術の発展により、今後10~20年程度で47%の仕事がなくなると言われています。どのような変化が訪れ、私達はどのようなスキルを身につけるべきかを解説します。

    資料をダウンロードする
  • 未経験がフリーランスエンジニアになる方法-年収アップで自由な働き方を手に入れる

    働き方改革やリモートワークの影響でフリーランスという働き方の人気は高まりつつあります。フリーランスエンジニアとして活躍するために必要な情報をお届けします。

    資料をダウンロードする

© 2024 WEBCAMP MEDIA Powered by AFFINGER5