JavaScriptで関数の引数に配列を指定する方法を現役エンジニアが解説【初心者向け】

JavaScriptで関数の引数に配列を指定する方法について、TechAcademyのメンター（現役エンジニア）が実際のコードを使って初心者向けに解説します。

そもそもJavaScriptについてよく分からないという方は、JavaScriptとは何なのかについて解説した記事を読むとさらに理解が深まります。

 

なお本記事は、TechAcademyのオンラインブートキャンプJavaScript/jQuery講座の内容をもとにしています。

 

 

目次

• 配列とは
• 関数の引数に配列を指定する方法
• 実際に書いてみよう
• まとめ

 

配列とは

配列型データの定義方法

以下のような形式で定義されるデータを配列型データと呼びます。

let fruits = ["apple", "melon", "orange"];

複数の値をカンマで区切って、全体をブラケット [ ] で囲めば配列型データのできあがりです。配列は、一つの変数に複数の値を格納することができます。また、各データは連番で管理されており、以下のように格納されたデータを呼び出すことができます。

console.log( fruits[0] ); // apple
console.log( fruits[1] ); // melon

変数名の後にブラケットを付与し、中に数値を指定することで、格納したデータを呼び出すことができます。

配列型データの利点

一つの変数に複数のデータが格納でき、それが連番で自動管理されるのが配列の利点です。JavaScriptでは、グラフ描画ソフトのように大量の数値データを扱う場合によく配列を使います。

一方で、複数の意味のあるデータを管理して格納したい場合は、オブジェクト型データを使ったほうが適切な場合も多くあります。

また、配列はJSON形式でデータを構成する場合にも必須のデータ型です。

JavaScriptのJSONデータは基本的にオブジェクト型と配列型を組み合わせたデータ形式で、大量データの扱いによく配列も利用されます。

[PR] コーディングで副業する方法とは

関数の引数に配列を指定する方法

引数に配列型データを指定する

複数の連続したデータを関数に渡したい場合に、配列型データはとても便利です。方法は、以下のように配列型データを格納した変数を、関数の引数に指定するだけです。

サンプルプログラムを見てみましょう。

JavaScript

// 配列型データ定義
let fruits = ["apple", "melon", "orange"];
// 引数に配列型をセットすることを前提とした関数定義
function testFn( arrayData ){
  console.log("本日のフルーツ一覧");
  arrayData.forEach( item => console.log( item ) );
}
// 関数の実行
testFn( fruits );

 

実行結果

本日のフルーツ一覧
apple
melon
orange

予め引数に配列型が指定されることを前提にfunctionを定義し、forEachメソッドも使っています。この際、arrayDataに「1」などのNumber形やString型データを指定するとエラーが発生することに注意しましょう。

引数に配列型を指定する場合の注意点

JavaScriptは、関数の引数にどんなデータ型がセットされているのか、一目ではわかりません。プログラムした本人でさえ、翌日になると忘れてしまうことも多いです。

引数に配列型のデータを使うことを前提とした関数において、ほかのデータ型をセットしてしまわないように気を付けましょう。

そうは言っても、配列はfruits[0]やfruits.forEach()などの配列特有の記述が多く、中級者以上であればすぐにわかります。

Java言語のように引数に毎回データ型を指定する言語と違い、JavaScriptはデータ型が一目でわからないことに注意しておきましょう。

実際に書いてみよう

配列型データを使ったサンプルプログラム

配列型データは、毎日の気温データなどの連続データの格納・保持に適しています。ここでは、数日分の気温を出力するサンプルプログラムをご紹介します。

JavaScript

// 8月の気温データを格納する配列型データ
let augustTemp = [32, 34, 34, 30, 35];

/**
 * 気温情報をコンソール出力するための関数
 * @param month Number 何月かのデータを数値で指定
 * @param tempData Array 1日からの気温情報を数値で配列に格納済みのデータを指定
 */
function outputWeatherInfo( month, tempData ){
  tempData.forEach( (item, index) => {
    var day = index + 1;
    console.log( `${month}月${day}日の気温は${item}度でした。`);
  });
}

// 関数の実行
outputWeatherInfo( 8, augustTemp );

 

実行結果

8月1日の気温は32度でした。
8月2日の気温は34度でした。
8月3日の気温は34度でした。
8月4日の気温は30度でした。
8月5日の気温は35度でした。

 

まとめ

大量の数値データを関数の引数に指定したい場合、配列を使うと処理がスムーズです。引数に配列やオブジェクト型のデータを指定したプログラミングにも慣れておきましょう。

筆者プロフィール

寺谷文宏 ( Teratani Fumihiro ) Webアプリケーションエンジニアとして数多くのプロジェクトを経験し、フロントエンドからサーバーサイドまで総合的な開発を得意としています。 TechAcademyではフロントエンド、Javaコースを担当。

 

 

TechAcademyでは、初心者でもJavaScript・jQueryを使ったWebサービス公開を習得できるオンラインブートキャンプJavaScript/jQuery講座を開催しています。

挫折しない学習方法を知れる説明動画や、現役エンジニアとのビデオ通話とチャットサポート、学習用カリキュラムを体験できる無料体験も実施しているので、ぜひ参加してみてください。