トップに戻る
【JavaScript】関数の引数をオブジェクト(JSON / Class)で渡す方法・メリットは？
 > 
JavaScript > 
プログラミング > 
HOME > 
2023/08/06
2023/08/11

【JavaScript】関数の引数をオブジェクト(JSON / Class)で渡す方法・メリットは？

JavaScriptでは、関数内で使用できるデータを引数として渡すことができます。

こんな感じですね。

function calc(a, b){
    // 引数aとbを足し、結果を出力;
    console.log( a + b );
}

calc(2, 3)

// 出力結果
// > 5

JavaScriptに限らず、引数は関数を扱う上で基本となるものです。

ただ、JavaScriptの場合はより関数を扱いやすくするためのコツがあります。

それがオブジェクト形式で引数を渡すという方法です。

今回は、オブジェクトのデータを渡す方法と、そのメリットを詳しくご紹介していきます。

引数にオブジェクトを渡す方法

引数として渡すオブジェクトですが、JavaScriptの場合は、主に以下の2つに分けられます。

  • JSON
  • class

※関数型もありますが、ほとんど使わないので省きます。

ここで説明すると長くなるので、オブジェクトについて知りたいという方は、MDNの解説を読むのが手っ取り早いでしょう。

JavaScriptオブジェクトの基本/MDN

それぞれのオブジェクトで引数の渡し方が若干異なるため、どういったオブジェクトなのかの解説も踏まえ、やり方を詳しく見ていきましょう。

JSONで渡す場合

JSONは、JavaScript Object Notationを略した呼び方で、JavaScriptのオブジェクトの記法を活用したデータ形式を指します。

以前までのJavaScriptにはclassが無く、連想配列によく似た記法でオブジェクトを管理していた過去があり、その可読性が応用されたわけです。

JavaScriptのオブジェクトから派生したものなので、オブジェクトそのものをJSONとは呼ばないのですが、ここでは面倒なのでJSONと呼んでいます。

それでは本題へ。

JSON形式のオブジェクトを引数として渡す場合は、以下のようにオブジェクトをそのまま引数にぶち込めばOKです。

// 出力用の関数を定義
function print(datas){
    let printText = datas.text + String(datas.num);
    console.log(printText);
}

// JSONのデータを定義
const object = {
    num: 10,
    text: "数字は、"
}


// 出力
print(object);

// 出力結果
// > 数字は、10

これといって難しいことはないですね。

classで渡す場合

classは関数型やJSON等のオブジェクトに続いて登場した記法ですが、オブジェクトの取り扱い方として大きな差はありません。

実際にコードに起こすと、以下のように書きます。

// オブジェクトの元になるclass
class Datas{
    constructor(){
        // オブジェクトの値を定義
        this.num = 10;
        this.text = "数字は、";
    }
}

// classのオブジェクト化
const object = new Datas();

// 出力用の関数を定義
function print(datas){
    let printText = datas.text + String(datas.num);
    console.log(printText);
}

// 出力
print(object);


// 出力結果
// > 数字は、10

注意として、classはオブジェクトではなくオブジェクトの元となるデータなので、そのまま渡しても動きません。

上記のコードでは、以下のように一度オブジェクトにした上で引数に渡しています。

// classのオブジェクト化
const object = new Datas();

引数をオブジェクトで渡すメリット

これまで引数にオブジェクトを渡す方法を解説してきましたが、わざわざオブジェクトで渡さずとも、普通にデータを渡せば…と考えている方がいるかもしれません。

実は、引数にオブジェクトを渡すことは、明確なメリットがあるのです。

どういったメリットがあるのか、詳しく見ていきましょう。

1．引数の順番を気にしなくていい

個人的に最も大きなメリットだと感じるのが、引数の順番を気にする必要がなくなるという点です。

例えば、冒頭で以下のようなコードをお見せしましたよね。

function calc(a, b){
    // 引数aとbを足し、結果を出力;
    console.log( a + b );
}

calc(2, 3)

// 出力結果
// > 5

ここでは引数aとbに、それぞれ2と3という数字を渡しています。

したがって、a + b は 2 + 3になるわけです。

ただ、順番が逆になった場合、3 + 2になってしまいます。

これは足し算だから良いですが、引き算の場合は大きく結果が変わってしまいますよね。

function calc(a, b){
    // 引数aからbを引き、結果を出力;
    console.log( a - b );
}

calc(2, 3)
// 出力結果
// > -1

calc(3, 2)
// 出力結果
// > 1

小規模な個人開発程度なら意識すれば問題ないものの、中規模以上の開発で複数人が同じコードを触る場合、誰かが引数の順番を間違えるだけで致命的な不具合が発生することにも繋がる、危険な状態です。

こういった問題は、オブジェクトを有効活用することで解決できます。

こんな感じですね。

function calc(numbers){
    // 引数aとbを足し、結果を出力;
    console.log( numbers.a - numbers.b );
}

// 引数にaとbの値があるオブジェクトを与える
calc({
    a: 2,
    b: 3
});

// 出力結果
// > -1

このやり方であれば、引数の順番をわざわざ気にせずとも、必要なキーに対して値を設定するだけで良くなるため、トラブルの発生率が大幅に下がります。

2．同じオブジェクトを使いまわせる

オブジェクトを引数で渡す場合は、必要なデータだけを参照して取得する形で、オブジェクトを使役します。

これはすなわち、一つのオブジェクトを複数の関数で使いまわせるということです。

下記のようなオブジェクトがあるとしましょう。

// ユーザーデータ
const user = {
    "firstName": "太郎",
    "lastName": "サンプル",
    "sex": "男性",
    "dob": "2000/01/01",
}

名前や性別、生年月日などの情報が入っています。

このオブジェクトのデータはユーザーに関連する情報を有しているため、上手く活用すればいくつもの関数で共有できそうですよね。

こんな感じで・・・

// ユーザーデータ
const user = {
    "firstName": "太郎",
    "lastName": "サンプル",
    "sex": "男性",
    "dob": "2000/01/01",
}

// ユーザがログインした際に表示するメッセージ
function popUpMsg(data){
    console.alert(`ようこそ　${data.lastName}${data.firstName}　さん`);
}

// ユーザ情報を出力する関数
function exportUserData(data){
    console.log(`
        ユーザ名：${data.lastName + data.firstName}\r\n
        性別：${data.sex}\r\n
        生年月日：${data.dob}
    `);
}

コードに関して詳しくは言いませんが、関数popUpMsg()とexportUserData()の2つでは、同じオブジェクトuserを使うことが出来ます。

popUpMsg()ではオブジェクト内の名前のデータだけを取得しているため、無理に引数の設計にこだわらず、気軽にデータを使いまわせているのがポイントです。

まとめ

JavaSciprtのオブジェクトは、他のプログラミング言語に比べ、非常に扱いやすいのが特長です。

その中でも有効的な使い方の一つが、引数に渡す値としての運用でしょう。

関数をよく利用していて、引数の記述が冗長になったり、順序をよく間違えてしまったりする方は、この記事を参考にキレイな引数の渡し方を実践してみるのがおすすめです。

SHARE