【JavaScript】配列の扱い方【基本講座】
JavaScriptの勉強において、重要な項目である配列について解説いたします。実際のプロジェクトにおいて、配列は、条件分岐やループ処理、四則演算に並ぶくらいよく使う処理です。基礎を学び実践で役立ててください。
配列の基本
配列って何？
配列というのは、複数の値をまとめてひとつの変数として扱えるものを言います。配列は、［］角括弧の中に、値を入れていきます。配列内の値は、要素と呼ばれます。この要素にアクセスしたい場合、［］角括弧の中にインデックスと呼ばれる数字を入れる。つまり、配列の左から何番目にアクセスしたいかを数字で入れると良いのです。
ただし、インデックスは0番目から始まるのでアクセスしたい場所から-1する必要があります。
配列のアクセス方法
変数に[]角括弧で囲い値を入れて宣言します。
この値をリテラルと言いますので覚えておきましょう。
|
1 2 3 4 5 |
let a = [0, 1, 2, 3]; console.log(a[1]); >> 1 |
このような感じで配列の宣言とアクセスが可能になります。
それぞれをアクセスするとこのようになります。先ほども説明した通り配列にアクセスするときのインデックスは0から始めるように注意しましょう。
a[0] = 0
a[1] = 1
a[2] = 2
a[3] = 3
配列のアクセス方法 代入について
C言語をやっていた人は、配列と言えば、宣言時、配列の個数をあらかじめ用意しておかないといけないのではないか？と思うかもしれません。
C言語は、配列は固定長なため宣言時、使用する数を確保しておく必要がありました。
しかし、JavaScriptの配列は、可変長なため必要な個数を確保しておかなくても大丈夫です。そのため、代入においてこんな書き方もできます。
|
1 2 3 4 5 6 7 |
let s=[]; s[10]=4; for(let i=0;i<11;i++){ console.log(s[i]); } |
最初に空の配列を宣言した後、任意のインデックスに数値を代入する。
そして、for文で書く要素を出力しています。
実行していただくとわかるのですが、「undefined」が9個ならんで、10個目に「4」が表示されることを確認できます。
「undefined」って何？バグ？って思うかもしれませんが、これは、正常動作で配列内に要素がないときに出るものです。「undefined」は未定義という意味ですね。
lengthは配列の要素数を求めるのに便利
先ほどの例題でfor文の条件部分をリテラル表記しているところが少し気になった方はいらっしゃいますか？それは徐々にプログラム脳になってきているので、プログラミングが上達してきているといえます。この調子でいろいろ疑問に感じで学んでいってください。
そうですね。この条件部分は、可変長引数にしておく方が、いろいろ便利そうですね。
何が便利かというと、配列内の要素数が変わったとき、ここをリテラルにしておくと変更し忘れの可能性があるためです。そこで、lengthを使います。
lengthは、Array型のインスタンスであるオブジェクトのプロパティで、配列の要素数の設定や取得ができます。
|
1 2 3 4 5 6 |
let s=[]; s[10]=4; console.log("要素は " + s.length); >> 要素は 11 |
ちゃんと要素数を取得できましたね。
つまり、これをfor文に組み込めば良いわけです。
|
1 2 3 4 5 6 7 |
let s=[]; s[10]=4; for(let i=0;i<s.length;i++){ console.log(s[i]); } |
for…ofで列挙可能なオブジェクトを表示する
実プロジェクトでは、配列に格納した要素を取り出したい場面が多々あると思います。JavaScriptでは、for文のあとにofをつけると簡単にひとつずつ取り出すことができます。
|
1 2 3 4 5 |
let lists=['a','b','c']; for(let s of lists){ console.log(s); } |
いろいろな例題を解きつつ練習して、実践で即使えるようにしましょう。
for…inで連想配列の操作を行う
for文のあとにinをつけると連想配列の操作を行えます。連想配列というとPythonなんかで辞書の操作をやったことのある人や、C++などでやった人には分かりやすいでしょう。逆にC言語にはない概念ですので、この機会に理解を深めるのも良いのではないでしょうか？
連想配列というのは、要素とキーと呼ばれる値をペアにして、並べていきます。
その際、[]角括弧ではなく、｛｝波括弧を使用します。ただし、例外もあるのでそれは、後ほど例題中に触れます。
例題を見てみましょう。
|
1 2 3 4 5 6 7 8 9 |
let list={'a':1,'b':10,'c':100}; for(let s in list){ console.log(s+":"+list[s]); } >> a:1 b:10 c:100 |
要素とキーを取り出しました。この手法はいろいろな場面で有効ですので覚えておきましょう。
では、次の例はどうでしょうか？
|
1 2 3 4 5 6 7 8 9 |
let list=['a','b','c']; for(let s in list){ console.log(s+":"+list[s]); } >> 0:a 1:b 2:c |
連想配列は、たしか｛｝波括弧しかダメなのでは？と思いましたか？先ほど例外と言ったのは、こういうことです。[]角括弧でも使うことができますが、ペア配列ができません。なので、上記のような例題では、sはインデックス値が取り出されるということです。
JavaScriptおすすめ書籍
JavaScriptの入門書は、「これから学ぶ～」が分かりやすいです。その次に「Good Parts」をやることをおススメします。これは、JavaScriptのテクニック的な参考書で実践に使えます。他、有名なサイの本もありますが、これは、そこまで必須ではないかもしれません。「The Good Parts」で良いかなと思える感じです。主に初学者用にチョイスしました。良かったら読んで見てください。
|
|
|
||||||
|
|
|
Kindle版
独学に限界を感じていませんか？
プログラミング初学者がもっとも陥りやすいのは、挫折です。
なぜ？挫折するのでしょうか？
それは独学だけでは、限界があるからです。
でも、あきらめてはそこで終わりです。
プログラミング言語習得には、メンターと呼ばれる教えてくれる人間が必要です。メンターがいれば、挫折する確率がグンと低くなります。
困ったときに、いつでも教えてくれる先生がいれば心強いと思いませんか？
でも、先生って、学校行く時間もないし、、、そんなこと思っていませんか？
今は、Webでプログラミングが学べる時代なんですよ！
でも、お高いんでしょ？
うーん。これは考え方なのかもしれないんですが、例えば、こう考えてはどうでしょうか？
スクール代金が1コース20万円として、その後、ITエンジニアに就職したら、平均30万円以上は、稼げるのですぐに元が取れますよね？
この数値は、リクナビなど転職サイトを検索すればすぐ出てくる数値です。
今一時の出し渋りにより、一生の賃金を損することになるか、倍以上手に出来るかは、自明ですよね？
でも、どこが良いのかわからない。
そこで、厳選したプログラミングスクールと動画サイトをご紹介いたします。
- TechAcademy [テックアカデミー]※スクールの数が多い！返金制度あり！
- 【WebCampPRO】※ＷＥＢ系に特化したスクール！返金制度あり！
- 【CodeCamp】※無料体験レッスンを受講すると受講料が1万円OFF！
- Python 3 入門+アメリカのシリコンバレー流コードスタイル
- 【Web開発初心者向け！】Web開発入門完全攻略 充実の18時間コース※動画で学びたい人はこちら！格安もあり！
- フロントエンドエンジニアになりたい人の Webプログラミング入門
