JavaScriptで関数の引数にオブジェクト型データを指定する方法を現役エンジニアが解説【初心者向け】

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

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

 

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

 

 

目次

• オブジェクト型データとは
• 関数の引数にオブジェクト型データを指定する方法
• 実際に書いてみよう
• まとめ

 

オブジェクト型データとは

オブジェクト型データの定義方法

以下のような形式で定義されるデータをオブジェクト型データと呼びます。

let personTaro = { name : "Taro" , age : 20 };

キー値と値のセットをカンマで区切って、全体を中括弧 { } で囲めばオブジェクト型データのできあがりです。また、以下のように格納したデータを呼びだすことができます。

console.log( personTaro.name ) // Taro
console.log( personTaro.age ) // 20

変数名にドット演算子( . )を付与して、キー値を記述することで、格納したデータを呼び出すことができます。

オブジェクト型データの利点

一つの変数に複数のデータが格納できるため、API間のデータ受け渡しに非常に便利です。

実際にオブジェクト型データは、配列型データとの組み合わせで「JSON形式データ」としてAPI通信におけるインターフェースとして広く利用されています。

また、オブジェクト型データは、現実世界をモデル化して表現することができるので、意味のあるデータを扱いやすいという利点もあります。

例えば、先ほどの例では「人間」をモデル化したpersonTaroという変数に、その人に関する情報を複数持たせることができています。

[PR] フロントエンドで副業する学習方法を動画で公開中

関数の引数にオブジェクト型データを指定する方法

引数にオブジェクト型データを指定する

複数のデータを関数に渡したい場合に、オブジェクト型データはとても便利です。方法は、オブジェクト型データを格納した変数を、関数の引数に指定するだけです。

JavaScript

let personTaro = { name : "Taro" , age : 20 }; // Taroさんをモデル化して表現

function zikoSyoukai( person ){
 console.log( "こんにちは、" + person.name + "と申します" );
 console.log( "年齢は" + person.age + "歳です" );
}

zikoSyoukai( personTaro );

 

実行結果

こんにちは、Taroと申します
年齢は20歳です

 

引数にオブジェクト型を指定する場合の注意点

オブジェクト型データは、キー値となる文字列（プロパティ）を自由に決められるため、とても便利です。しかし、第三者がプログラムを見た場合には読解が難しくなるので注意しましょう。

また、person.nameのようにデータを読み込む場合、オブジェクトにnameというプロパティが存在しない場合、エラーが発生してプログラムが止まってしまいます。

プログラムには、以下のようにプロパティの存在チェックを指定すると、エラーが発生しにくくなります。

JavaScript

if( preson && person.name ) {
  // 処理を実行
} else {
  return; // 処理を中断
}

こちらは少し高度なif文の使い方となりますが、興味がある方は使いこなせるようになってみましょう。

実際に書いてみよう

WEBシステムのログインに必要なデータをオブジェクト型データにまとめて格納する例を見てみましょう。

JavaScript

// オブジェクト型データの定義
var userData = { loginId : "user01",
      password : "techAcademy1234" ,
      userName : "ICHIRO SUZUKI" };
// ユーザーデータがイチローさんか判定する関数
function authIchiro( obj ){
      if( (obj.loginId == "user01")
        && (obj.password == "techAcademy1234") ){
          console.log("ログイン可能です、" + obj.userName + "さん" ); }
      else { console.log("ユーザー名とパスワードがIchiroさんと一致しません") }
}
// 関数を実行
authIchiro( userData );

 

実行結果

ログイン可能です、ICHIRO SUZUKIさん

今回はプログラムを簡単にするために、関数を特定人物専用の仕様で作りました。

アプリ開発においてはもっと詳細にプログラムを作りこむことで、データベースにアクセスしてログインIDやパスワードを照合するといったことも可能になります。

その際、各データの数だけ変数を定義して格納するのはとても大変な処理となりますが、このようにオブジェクト型データにひとまとめにすることでデータも管理しやすくなりますし、各データの意味も分かりやすいですね。

まとめ

オブジェクト型データを使うことで、関数の引数に一つの変数を指定するだけで複数の大量データを渡すことができます。

少し複雑な業務処理を実行するためには必須の技術ですので、ぜひ使いこなせるようになりましょう。

筆者プロフィール

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

 

 

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

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