JavaScriptで関数の引数に配列を指定する方法を現役エンジニアが解説【初心者向け】
初心者向けにJavaScriptで関数の引数に配列を指定する方法について現役エンジニアが解説しています。配列とは、一つの変数に複数の値を格納することができるデータ構造のことです。JavaScriptでの配列の書き方や使い方、関数の引数に配列を指定する方法を解説します。
テックアカデミーマガジンは受講者数No.1のプログラミングスクール「テックアカデミー」が運営。初心者向けにプロが解説した記事を公開中。現役エンジニアの方はこちらをご覧ください。 ※ アンケートモニター提供元:GMOリサーチ株式会社 調査期間:2021年8月12日~8月16日 調査対象:2020年8月以降にプログラミングスクールを受講した18~80歳の男女1,000名 調査手法:インターネット調査
JavaScriptで関数の引数に配列を指定する方法について、TechAcademyのメンター(現役エンジニア)が実際のコードを使って初心者向けに解説します。
そもそもJavaScriptについてよく分からないという方は、JavaScriptとは何なのかについて解説した記事を読むとさらに理解が深まります。
なお本記事は、TechAcademyのオンラインブートキャンプJavaScript/jQuery講座の内容をもとにしています。

今回は、JavaScriptに関する内容だね!

どういう内容でしょうか?

JavaScriptで関数の引数に配列を指定する方法について詳しく説明していくね!

お願いします!
目次
配列とは
配列型データの定義方法
以下のような形式で定義されるデータを配列型データと呼びます。
let fruits = ["apple", "melon", "orange"];
複数の値をカンマで区切って、全体をブラケット [ ] で囲めば配列型データのできあがりです。配列は、一つの変数に複数の値を格納することができます。また、各データは連番で管理されており、以下のように格納されたデータを呼び出すことができます。
console.log( fruits[0] ); // apple console.log( fruits[1] ); // melon
変数名の後にブラケットを付与し、中に数値を指定することで、格納したデータを呼び出すことができます。
配列型データの利点
一つの変数に複数のデータが格納でき、それが連番で自動管理されるのが配列の利点です。JavaScriptでは、グラフ描画ソフトのように大量の数値データを扱う場合によく配列を使います。
一方で、複数の意味のあるデータを管理して格納したい場合は、オブジェクト型データを使ったほうが適切な場合も多くあります。
また、配列はJSON形式でデータを構成する場合にも必須のデータ型です。
JavaScriptのJSONデータは基本的にオブジェクト型と配列型を組み合わせたデータ形式で、大量データの扱いによく配列も利用されます。
関数の引数に配列を指定する方法
引数に配列型データを指定する
複数の連続したデータを関数に渡したい場合に、配列型データはとても便利です。方法は、以下のように配列型データを格納した変数を、関数の引数に指定するだけです。
サンプルプログラムを見てみましょう。
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度でした。
実は私も!?独学で損する人の特徴
「スクールは高いから独学で成功する」という気持ちの方は多いと思います。
もちろんその方が金額は低く抑えられるでしょう。
ただ
独学には向き不向きがあり、実はスクールが向いている人も大勢います。
そんな方のために参考として、
テックアカデミー卒業生がスクールを選んだ理由
をご紹介します。
- ・困って挫折しそうなときに、質問や相談できる相手がいる環境で学んでいきたいなと思った
- ・わかった気になっているだけだったので、自分を追い込む環境に置いた方がいいと感じた
- ・スクールのカリキュラムで市場に求められるスキルを学ぶべきと思った

少しでも当てはまる部分があれば、
スクールが向いているかもしれません。
お試しのつもりで、まずは一度
無料相談
に参加してみませんか?
現役エンジニア・デザイナーに何でも気軽に相談できる30分
を
すべて無料で
できます。
無理な勧誘は一切ない
ので、お気軽にご参加ください。
まとめ
大量の数値データを関数の引数に指定したい場合、配列を使うと処理がスムーズです。引数に配列やオブジェクト型のデータを指定したプログラミングにも慣れておきましょう。
筆者プロフィール
寺谷文宏 ( Teratani Fumihiro )
Webアプリケーションエンジニアとして数多くのプロジェクトを経験し、フロントエンドからサーバーサイドまで総合的な開発を得意としています。 TechAcademyではフロントエンド、Javaコースを担当。 |

内容分かりやすくて良かったです!

ゆかりちゃんも分からないことがあったら質問してね!

分かりました。ありがとうございます!
TechAcademyでは、初心者でもJavaScript・jQueryを使ったWebサービス公開を習得できるオンラインブートキャンプJavaScript/jQuery講座を開催しています。
挫折しない学習方法を知れる説明動画や、現役エンジニアとのビデオ通話とチャットサポート、学習用カリキュラムを体験できる無料体験も実施しているので、ぜひ参加してみてください。

プログラミングを独学していて、このように感じた経験はないでしょうか?
- ・調べてもほしい情報が見つからない
- ・独学のスキルが実際の業務で通用するのか不安
- ・目標への学習プランがわからず、迷子になりそう
テックアカデミーでは、このような
学習に不安を抱えている方へ、現役エンジニア講師とマンツーマンで相談できる機会を無料で提供
しています。
30分間、オンラインでどんなことでも質問し放題です。
「受けてよかった」と感じていただけるよう
厳しい試験を通過した講師
があなたの相談に真摯に向き合います。
「ただ気になることを相談したい」
「漠然としているがプロの話を聞いてみたい」
こんな気持ちでも大丈夫です。
無理な勧誘は一切ありません
ので、まずはお気軽にご参加ください。
※体験用のカリキュラムも無料で配布いたします。(1週間限定)