どうも、つよぽんです！
今回は、JavaScriptの多次元配列を解説します。
多次元配列とは配列のもう1つ先に進んだ概念で、「配列の中に配列がセットされているデータ構造」のことです。
言葉だけではイメージが掴みづらいと思うので、この記事では多次元配列の中でも使われることが多い「2次元配列」を図とサンプルコードを交えて解説しています。
今回の記事は次のような方に向けて書きました。
- 多次元配列って何？
- 多次元配列の作成方法を知りたい
- 多次元配列内の特定の値を取得・更新する方法を知りたい
今回の記事は以下の学習コンテンツのスライドを詳しく解説した記事となります。以下の記事と合わせて読むことでより理解度を深めていただけるかと思います。
それでは次の内容で話を進めていきます。
- JavaScriptの多次元配列とは
- JavaScriptの多次元配列の作成方法
- JavaScriptの多次元配列内の特定の値を取得・更新する方法
目次
JavaScriptの多次元配列とは
この章では、「JavaScriptの多次元配列とは何か？」について解説します。
多次元配列とは、「配列の中に配列がセットされているデータ構造」のことです。
以下の画像は多次元配列の内部構造をイメージとして描き出したものです。
多次元配列のイメージ上の画像を見てわかるとおり、「変数array」は配列です。
そして、配列である「変数array」の中に次のような3つの配列がセットされています。
- 1つ目の配列には「1, 2, 3」という値がセットされている
- 2つ目の配列には「4, 5, 6」という値がセットされている
- 3つ目の配列には「7, 8, 9」という値がセットされている
このような「配列の中に配列」があるデータ構造が「多次元配列」といいます。
上の図は2次元配列の例になります。
その他にも「3次元配列」、「4次元配列」とずっと続いていきますが、違いは配列がどれだけ入れ子に入っているかだけです。
- 2次元配列 : 「①配列」の中に「②配列」がある
- 3次元配列 : 「①配列」の中に「②配列」があって、「②配列」の中にも「③配列」がある
- 4次元配列 : 「①配列」の中に「②配列」があって、「②配列」の中にも「③配列」がある。そして、「③配列」の中にも「④配列」がある。
2次元配列、3次元配列、4次元配列などを１つの言葉でまとめたものが「多次元配列」となります。
JavaScriptの多次元配列の作成方法
この章では、「JavaScriptの多次元配列の作成方法」について解説します。
多次元配列を作る書き方は以下の画像にまとめたとおりです。
多次元配列の作り方前回の記事でも解説したとおり、通常の配列を作るときは「[]」を使います。
多次元配列は、この「[]」の中に別の配列(「[]」)を作れば良いだけなので、「[ [] ]」の形となります。
以下の画像の赤枠内ではこの「[ [] ]」を使って多次元配列を作成したサンプルコードとなります。
多次元配列を作成したサンプルコード上の画像で使っているサンプルコードは以下のリンクから直接確認できます。
JavaScriptの多次元配列内の特定の値を取得・更新する方法
この章では、「多次元配列内の特定の値の取得・更新する方法」を解説します。
基本的な考え方は通常の配列のときと同じで、以下の記事でも解説している「インデックス番号」を使って特定の値を取得・更新できます。
取得方法
多次元配列内の特定の値を取得する方法を説明する前に、通常の配列の特定の値を取得する方法をふりかえります。
例えば通常の配列で、1番最初に保存されている値を取得したい場合は「配列[0]」のような形式で値を取得できることを前回記事で解説しました。
このときの「0」はインデックス番号と呼び、先頭から「0番目」、「1番目」、「2番目」と「0」から始まります。
ここで多次元配列に話を戻します。
まず「[ [‘値1’, ‘値2’], [‘値3’, ‘値4’], [‘値5’, ‘値6’] ]」という2次元配列があるとします。
この時1つ目の値である「 [‘値1’, ‘値2’]」を取得したい場合は、通常の配列と同じように「配列[0]」とすることで取得できます。
そして、「配列[0]」は「 [‘値1’, ‘値2’]」という配列ですので、ここで「‘値1’」を取得した場合は、「配列[0][0]」とすれば取得できます。
以下の画像は、ここまで説明してきた「多次元配列内の特定の値の取得方法」をまとめたものになります。
特定の値を取得するサンプルコード上の画像で使っているサンプルコードは以下のリンクから直接確認できます。
更新方法
多次元配列内の特定の値の更新の方法は、前の項目で説明した「取得方法」を理解していればすぐに理解できます。
値の取得では「配列[0][0]」とすることで、2次元配列の1つ目の配列内の1つ目の値を取得できることを説明しました。
更新の場合は、この「配列[0][0]」に対して代入を行えば良いだけです。
つまり「配列[0][0] = ‘新しい値’」とするだけです。
さきほど例に使った2次元配列のデータを使って、「配列[0][0] = ‘新しい値‘」を実行すると次のようになります。
- 更新前
- 「[ [‘値1‘, ‘値2’], [‘値3’, ‘値4’], [‘値5’, ‘値6’] ]」
- 更新後
- 「[ [‘新しい値‘, ‘値2’], [‘値3’, ‘値4’], [‘値5’, ‘値6’] ]」
以下の画像は、ここまで説明してきた「多次元配列内の特定の値の更新方法」をまとめたものになります。
特定の値を更新するサンプルコード上の画像で使っているサンプルコードは以下のリンクから直接確認できます。
まとめ
今回の話をまとめると次のとおりです。
- 多次元配列とは、入れ子になった配列のことである(配列の中に配列がある構造)
- JavaScriptで多次元配列を作るときは「[ [‘値1’, ‘値2’], [‘値3’, ‘値4’], [‘値5’, ‘値6’] ]」のような形式で作る
- 多次元配列内の特定の値を取得する方法は「配列[0][0]」で取得できる
- 多次元配列内の特定の値を更新する方法は「配列[0][0] = ‘新しい値’」で更新できる
今回の内容は以下の記事内のスライドの補足資料として作成しました。スライドの全部を確認したい方は以下の記事も参照して頂けたらと思います。
Webエンジニアになりたい人向けに、MENTA 
にて『【やる気満々な方向け】未経験からのWebエンジニア育成コース』というプランを用意しております。
このプランでは、主に「【学習コンテンツ】Web開発」を使って学習を進めていただきます。
誰向けのプラン？
こちらのプランは次のような方に向けて作られています。
- Progateやドットインストールで一通り学習したけど、次に何をすればよいかわからない
- Webエンジニアになるまでの学習プランがあると助かる
- 学習していてわからないところが出てきたときに質問したい
- コードレビューして欲しい
- オンライン講義に参加したい
- 学習した内容をアウトプットした際に、フィードバックがもらえたら嬉しい
- おすすめの学習教材を知りたい
- Webフロントエンド・バックエンドを学習したい
- フルスタックエンジニアになりたい
- 文系出身で今までプログラミングをしてこなかったけど、将来Webエンジニアになりたい
- 将来フリーランスになることを目指している
プラン内容は？
『【やる気満々な方向け】未経験からのWebエンジニア育成コース』では次のことを行っております。
- Web白熱教室の学習コンテンツをメインに、指定した教材を使って学習する (学習プランに沿って学習を進めていただきます。)
- 学習コンテンツの課題をこなしたあとは、僕にコードレビュー依頼を投げていただくことで、コードを添削する(課題クリア後は、引き続き学習プランの内容を続けていただきます。)
- プラン契約者が参加するSlackグループにて質問し放題
- Slack内にある「アウトプットの場」チャンネルにて、学習したことをアウトプットをしていただくことで、それに対しフィードバックをする (学習内容のアウトプットは復習にもなるため、アウトプットすることを強く推奨します。)
- 画面共有を使ったオンライン講義 (オンライン講義は録画して、いつでもふり返れるようにしています。(オンライン講義動画(ウェビナー動画)))
- 学習プラン以外の内容に対しての質疑応答 (内容によっては回答できないものもありますが、まずは気軽に質問していただけたらと思います。)
- 不定期で行うオフラインでの勉強会に参加(僕自身が東京住みのため、東京・もしくは東京近郊で開催します)
プラン受講者のレビュー
ありがたいことに、このプランを受講していただいているメンティーさんから高評価と嬉しいレビューをいただけております。
以下のコメントは、これまで頂いたレビューコメントになります。(以下のレビューは一部で、全てのレビューはこちらのページからご確認いただけます。)
学習サイトがわかりやすく、実際にコードを書いて学べるのでスキルアップに繋がりました！
IT未経験ですが、ITサポート事務の仕事が決まり、簡単なプログラミングは任せて貰えるようになりました！
ありがとうございました^^*
お世話になって1ヶ月ほど経ちますが、コードレビューや質問対応などがとても丁寧で、とても助かっています。
また独自コンテンツやエクササイズなどもわかりやすく、勉強を進めやすいです。
初心者の私にでもとても丁寧に粘り強く
教えて頂けました。テキストや動画など見ながら
進めれましたし、質問にもすぐに回答いただけました。
ありがとうございました！
レスポンが早く、適切でとても助かりました。オリジナルコンテンツも充実しており、自分で調べてどうしても分からないところはメンターさんが教えてくださるので、プログラミング初心者の方には特におすすめです。
まだ始めたばかりですが、レビューや質問対応がとても早く丁寧でありがたいです。
ロードマップも用意されているので独学ではわからなかった学習手順がはっきりし、どのように勉強すればいいかが理解できました。
学習方法について、親身に相談に乗っていただき感謝しております。
現役エンジニアの立場から的確なアドバイスをいただき大変参考になりました。
まだメンターになって頂いてまだ間もないですが、とても感謝してます。この値段で申し訳なくなるレベルです。
・対応が丁寧。
→コードレビューでは細かい所まで指摘してくれる
→質問に対しては詳細な説明やレファレンスをつけて返信してくれる
・レスポンスが早い。
→遅くなるとしても前もって連絡してくれる
・学習の進め方や教材などもサポートしてくれる
・質問でなくても、学習状況などを報告するとフィードバックを返してくれる
その他、ペアプロや週一のオンライン会議での講義などもあり、かなりサポートも手厚いです。
特に、勉強したいけど何から始めればいいか分からないという方にオススメです。
未経験からWebエンジニアに内定・案件獲得した受講者のアウトプット
このプランで提供している学習コンテンツの最終課題をクリアしたメンティーさんに対して、ReactやVueの学習をオススメしており、React・Vueのコードレビューも行っております。
以下のコメントは、最終課題をクリアしたあとにVueを学習して、「未経験からWebのフロントエンジニアの内定獲得」「未経験から案件獲得」を達成したメンティーさんのアウトプットです。
【進捗報告】
つよぽんさんにメンターになっていただき、この度Webエンジニア(フロント)として未経験から内定をいただく事ができました！
つよぽんさんから聞かれた事を中心に情報を共有したいと思います。
フロントエンド、バックエンドのスキルセット
-フロントエンド
HTML/CSS、JavaScript、Vue.js、Vuex、axios、Jest
-バックエンド
Node.js、express、MySQL、Sequelize、Mocha
面接時に見せたポートフォリオ
Vue.jsを使った簡単な自己紹介ページ、Web白熱教室のバックエンド最終課題にVue.jsを使って実装したフロントを連携し作成したTodoアプリ、この2つをポートフォリオとして転職活動をしました。Todoアプリは上のスキルセットにある技術を使用して作成しました。
面接時に良い印象を持っていただいた内容
・フロントとバックエンドの両方を学習している事
これは技術的な質問でWebの仕組みについての質問が結構あったので、両方学習してお
いて良かったなと感じました。
・技術に興味があると感じてもらえた事
最後の質問でなるべく自分の興味がある技術や自分がやってみたい事を伝えてアドバイ
スをもらったり、質問すると良い印象を持ってもらえました。
転職活動で感じた事
今回の転職活動で、ポートフォリオがいかに大事かというのを身を持って実感しました。ポートフォリオがないとそもそも面接しないという所が多かった印象です。ポートフォリオのレベルは高い方が良いとは思うのですが、しっかりアウトプットできている事が大事だと感じました。自分のポートフォリオもレベルは低かったので。
簡単にですが、まとめさせていただきました！
面接での質問内容など気になった事があれば、共有できればと思っているので、なんでも気軽にお聞きください。
進捗報告というか、現在どんなことやっているか報告しておきます!!
①
Vue＋Laravelの案件を獲得することができました!!
元々副業ができるようになるを目標にしていたので、とりあえず目標達成です。
Laravelは完全独学で、ここでjsの基礎を学習した後にPHPの基礎から学習しました。
ですので、未経験から学習を初めて2～3ヵ月くらいで案件獲得までこぎつけることができたので、皆様の励みになればと思います。
②
会社で簡単なWebアプリを作って提案しました。自社装置のレイアウトを提案してくれるアプリです。expressとVueを使ってます。
もちろんVueを選択するメンティーさんだけなく、Reactを選択するメンティーさんもいらっしゃいます。
Reactを選択したメンティーさんの現在の状況としては以下のとおりです。
- 新卒でWebエンジニアとして働き、1年目から希望する部署で働けている
- プログラミングの基礎力、自己解決力・自走力を身につけ、FlutterやTypeScriptの学習も独学で進められている
1日1回カフェでコーヒー1杯頼むくらいの金額で参加できます
「1日1回、カフェでコーヒー1杯分くらいの値段(約330円)」で以下の環境が手に入るとイメージして頂けたらと思います。
- コードを添削してもらえる
- 学習したことのアウトプットに対してフィードバックしてもらえる
- いつでも質問出来る
- 週1のオンライン講義に参加できる
- 過去のオンライン講義動画を好きな時間に復習できる(いつでも閲覧可能)
- 不定期で行うオフラインでの勉強会に参加できる(僕自身が東京住みのため、東京・もしくは東京近郊で開催します)
- 自分の住まいの近場のメンティーさん同士で集まって、オフラインで勉強会を開くのも可能(初めて開催する場合は事前に僕に連絡をいただけたらと思います)
学習教材には、このサイトで用意している「【学習コンテンツ】Web開発」を使います。
「【学習コンテンツ】Web開発」を使って学習を進めることで、Webのフロントエンドとバックエンドのスキルを身につけていくことができます。
プログラミングスクールとの比較
プログラミングスクールに通う場合は1ヶ月で10万円以上するところも多いですし、3ヶ月で50万円、更には100万円するところもあります。
プログラミングスクールの値段が高い理由は、「プログラミングスクールで働いている人の人件費」「就職のサポート」なども含まれているからです。
「10万円・50万円・100万円」のいずれの場合も、自己投資とはいえ、支払うのにはだいぶ勇気がいる金額かと思います。
オススメの学習方法
個人的にオススメするのは、プログラミングのできるメンター(師匠)を見つけて、まずは1ヶ月プログラミング学習をしてみて、自分にプログラミングが向いているかどうか確かめてみることです。
「10万円・50万円・100万円」を払って、学習していく中で「やっぱり自分にはプログラミングは向いてない」と判断した場合、その金額はかなりの痛手となります。
そのため、まずは「これくらいの金額なら最悪失っても痛くないな」の値段で教えてくれるメンターを見つけて、そのメンターに色々と質問をしてみましょう。
それで、「良さそうだな」と思ったら教えてもらうといった流れで学習を始めると、金額もだいぶ節約できます。
注意点
ただし、参加者が増えてきたら、1人1人へのサポートの質を維持するのが難しくなるので、値上げする可能性もあります。
値上げする理由は次の以下の理由となります。
- 値段を上げて参加ハードルをあげることで、自己解決スキルも身につけたいと考えている学習意欲の高い人だけが参加するようになる
- 調べたらすぐにわかることを、自分で調べずに何でもかんでも質問すると、自己解決スキルも身につかない
- 更に、他のメンティーさんの対応する時間が取れなくなりサポートの質の低下にも繋がる
詳しく話を聞いてみたい方は
以下のいずれかでメッセージをいただけたらと思います^^
プラン内容については以下のリンク先からも確認することが出来ます^^
