https://www.sejuku.net/blog/wp-content/themes/voice_child/images/samurai_logo.png 侍エンジニア塾が運営するプログラミング入門者向け学習情報サイト

【JavaScript入門】配列の初期化(コンストラクタ/配列リテラル)

書いた人 ヨシダ ジュン


侍エンジニア塾ブログは、未経験からWebアプリ開発と仕事獲得をサポートする
侍エンジニア塾のオウンドメディアです。
プログラミング学習を覗き見

こんにちは!ライターのヨシダジュンです。

JavaScriptにて配列や変数を使う際に、その中身を最初にどうするかを決めるための初期化という処理があります。

この記事では、

・配列や変数の初期化方法

という基本的な内容から、

・配列を初期化する際に用いるコンストラクタと配列リテラルの違い
・多次元配列の初期化

などの応用編に関しても解説していきます。

今回はそんな「配列や変数の初期化」について、わかりやすく解説します!

配列や変数の初期化

本記事では配列の初期化を中心に解説していきます。

変数の初期化について詳しく知りたい方は以下の記事を参考にしてください。

次に、配列の初期化方法にはどのようなものがあるかをご紹介します。

コンストラクタで初期化する方法

コンストラクタとは、JavaScriptなどのオブジェクト指向型言語において、新たなオブジェクトを生成するときに用いるメソッドです。

配列を初期化するときのコンストラクタとしてはArray()メソッドを用います。

以下がサンプルコードです。

実行結果:

hogeという名前の配列をコンストラクタで初期化し、配列に代入しています。

引数付きコンストラクタで初期化する方法

コンストラクタには引数を指定することもできます

配列の要素をコンマ「,」で区切って羅列することで、その羅列した要素で初期化することができます。

また、引数に数値を1つだけ指定した場合、配列の長さを指定したとみなされます。配列の中身は未定義の状態で初期化されます。

以下がサンプルコードです。

引数に配列要素を指定する場合ですね。

こちらは、まず配列を長さ2で初期化した後、配列に「496」と「hoge」を代入しています。

実行結果:

配列リテラルで初期化する方法

中カッコ「[ ]」の中に、カンマ「,」で区切って配列要素を記述するのが配列リテラルです。

以下がサンプルコードです。

配列リテラルを利用して「数値(496)」と「文字列(hoge)」で初期化しています。

コンストラクタと配列リテラルとの違い

配列初期化の方法として、コンストラクタと配列リテラルの大きく分けて2つをご紹介しました。

用途としては同じ配列の初期化ですが、2つは具体的に何が違うのでしょうか?

シンプルに言うと、引数に数値を1つ渡したときの挙動が違います。

以下がサンプルコードです。

実行結果:

コンストラクタの場合は、要素が3つで中身が未定義の配列を生成している一方、配列リテラルは要素が1つの配列を生成しています。

多次元配列の初期化

これまでは配列の次元が1次元という前提で説明してきました。

しかし、配列は2次元配列や3次元配列など、多次元を扱うことができます

ここでは2次元配列の初期化を例にして説明します。

以下がサンプルコードです。

3行4列の2次元配列hogeを初期化しています。

あらかじめ要素数が決まっている2次元配列を初期化する場合は、「[ ]」の中に「列の数 – 1」記述します。

配列の使い方総まとめ

配列の様々な使い方についてはこちらの記事で詳しく解説しているので、ぜひ確認してください。

まとめ

今回は、JavaScriptにおける配列の初期化方法についてご紹介しました。

最後にもう一度ポイントをおさらいしておきましょう。

・配列の初期化方法としては大きく分けて、「コンストラクタ」と「配列リテラル」がある。
・コンストラクタには引数を指定しない使い方と指定する使い方がある。
・コンストラクタと配列リテラルでは、引数に数値を1つ渡したときの挙動が異なる。

今回ご紹介した、配列の初期化についての知識を踏まえながら、ご自分で行うプログラミングにもぜひ生かしてみてください!

JavaScriptカリキュラム無料公開中!

この記事はJavaScript入門完全攻略ガイド【基礎学習/アプリ開発/仕事獲得】の一部になります。このカリキュラムは、プログラミング入門者が、JavaScriptの基礎学習からアプリ開発、さらには仕事獲得まで体系的に学べる内容となっています。

JavaScript学習に必要な情報を一つにまとめていますので効率よくJavaScriptを学ぶことが出来ます。この機会に是非活用していただければと思います。


33歳、未経験だった僕がフリーエンジニアになれた理由
現在フリーでWEBエンジニアをやられている濱口直行さん。33歳で、プログラミングを学び始め、約半年という短い期間で独立までされた学習ログを余すことなくインタビューさせていただきました。

プログラミングを学習中の方はもちろん、独立をお考えの方まで幅広く活用できる記事になっています。この機会に是非活用していただければと思います。


無料体験レッスン実施中

今あなたはこんな悩みをお持ちではないでしょうか?

「つまづいてばかりで学習が進まない…」
「どこまで勉強すればいいのか、終わりが見えない…」
「習得できたとしてもどうやって仕事につなげればいいのかわからない…」

プログラミング学習やキャリアに関してお困りであれば、まずは『無料体験レッスン』にお申し込み下さい。

あなたにとって、最適の解決策をご提案させていただきます。

詳しくは下の画像をから詳しいサービス内容をご確認ください。

cta_js2

非常識な結果を出した卒業生

活躍する現役エンジニア

人気記事セレクション

LINEで送る
Pocket

この記事が気に入ったら
いいね!をしてフォローしよう

最新情報をお届けします

書いた人

ヨシダ ジュン

フリーランスエンジニア、ライター。

組込みソフト開発歴が6年ほどあります。
一部上場のソフト開発会社でソフトウェア開発(基本設計、詳細設計、コーディング、テスト)に従事。
その中でC言語を使ったドライバ、アプリ開発、Linuxやサーバなどのネットワーク関係のスキルを身につけました。

2015年4月にフリーランスとして独立し、スクレイピングやHP制作、ライティングなど幅広い仕事を手がけています。さらに、認識技術という次世代技術を活用して日常生活に応用活用したライフスタイルを送っています。