JavaScriptの基本（？）　－Objectを活用しよう－

はじめに

JavaScriptのObjectは便利です。
最初は使わないかもしれませんが、書き方や管理を便利にするためにも使っていきましょう。
ソースコードを書く上での基礎的な活用法を紹介します。

引数を渡すときはObjectで

様々なプログラミング言語でよく使われる手法です。
JavaScriptなどから入った方にはあまり馴染みがないかもしれませんが、jQueryなどの引数ではObjectを引数に渡すことが多いです。

次からは引数にObjectを利用するメリットの説明をします。
1.引数の数を減らせる
2.階層化されたデータを引数で渡すことができる
3.主な呼び出し方を変えずに追加のデータを渡せる

引数の数を減らせる

引数の多い関数は、下記のように呼び出します。

Hogehoge

// 関数宣言
function Hogehoge(arg1, arg2, arg3, arg4, arg5, arg6){
// 処理
}

// 変数宣言と初期化
var a = 1, b = 2, c = 3, d = 4, e = 5, f = 6;

// 実行
Hogehoge(a, b, c, d, e, f);

引数が多いと呼び出す手間がかかってしまいます。
今回はHogehogeを一回しか使っていませんが、実際には百回使うかもしれません。百回も引数を六個書くのは大変でしょう。
それに引数をばらばらで宣言しているのは管理が煩雑でとても大変です。

簡単な解決策は、引数のためのObjectを作ることです。
そして引数のためのObjectをそのまま引数として渡すことです。
ソースは下記のようになります。

Hogehoge2

// 関数宣言
function Hogehoge2(args){
    // 処理
}

// オブジェクト宣言
var obj = {
    a : 1,
    b : 2,
    c : 3,
    d : 4,
    e : 5,
    f : 6
};

// 実行
Hogehoge2(obj);

渡す引数が一つになりました。これで繰り返し使う場合でも楽になるはずです。
またjQueryなどはオプションの関係で引数の数が可変であることが多いため、今回のようにObjectで渡せば使うたびに引数の数が違うこともなく安心して使えます。
jQueryでの使われ方の説明は次の次にします。

Objectの中にObjectを

Objectの中にはObjectを入れることができます。

Objectの中にObjectを

var obj = {
    obj2: {
        a : 1,
        b : 2
    },
    obj3: {
        a : 1,
        b : 2
    }
};

Objectの中にObjectを入れると、階層化されたデータを作ることができます。
これはとても大事な考え方です。
JavaScriptにおいてはDOMにおける考え方の基礎にもなっています。
またJavaScript以外のプログラミング言語でも頻出する考え方ですのでぜひ覚えておきましょう。
階層化されたデータの使い方の一例を次に説明します。

階層化されたデータを引数で渡すことができる

階層化されたデータとは、ここではJSON形式などのデータのことです。
これらの階層化されたデータの特徴は、ツリー構造で色々とデータがある点です。

階層化されたデータの例

// オブジェクト宣言
var obj = {
    abc: {
        a: 'a',
        b: 'b',
        c: 'c'
    },
    def: {
        de: {
            d: 'd',
            e: 'e'
        },
        f: 'f'
    }
};

複雑ですね。
しかしこのような複雑なデータを引数として渡すことにより様々な処理が行えます。
引数に階層化されたデータを渡すということは、そのモジュールで複雑な処理を行うことができるということになります。

主な呼び出し方を変えずに追加のデータを渡せる

プログラムには仕様変更がつきものです。
ですが仕様変更するたびにソースコード全体における関数の引数を書きなおすのは、大掛かりなプロジェクトでは大変な工数がかかります。
ですが、引数にオブジェクトを利用している場合はそれらの修正が必要ありません。
ではソースコードで見てみましょう。

CallSample

// 関数定義
function CallSample1(obj){
    // オブジェクトで受け取っているため
    // オブジェクトの中身に変更があっても受け取り引数は変わらない
}

// オブジェクト宣言
var obj = {
    a: 1,
    b: 2,
    c: 3,
    d: 4,    // 必要であればこのようなプロパティを増やせる
};

// 関数呼び出し
CallSample1(obj);    // 引数として渡すデータの数は変わらない

関数の呼び出しや引数については変更が必要ないことが分かります。
もちろん関数内での処理については修正が必要になりますが、それは処理の話なのでまた別の話です。

以上が今回紹介する「引数にObjectを利用するメリット」です。
この他にも多くのメリットがあるので、そのあたりは専門書や他の言語での使われ方を見本にすると良いかと思います。

逆にデメリットは、冗長になりやすく管理が煩雑になりやすい点です。
例えば、足し算をするだけの関数にObjectを使うと可読性が低下します。

Tashizan

// 関数定義
function Tashizan(obj){
    return obj.x + obj.y;
}

// 処理
var x = 10, y = 20, z;  //変数宣言と初期化

z = Tashizan({x:10, y:20});

// 出力
console.log('Tashizan({x:10, y:20}) の結果は ' + z);  // zは30である

特殊な計算をするためならObjectも有用ですが、引数が二つだけならば、

Tashizan2

// 関数定義
function Tashizan2(x, y){
    return x + y;
}

// 処理
var x = 10, y = 20, z;  //変数宣言と初期化

z = Tashizan2(x, y);

// 出力
console.log('Tashizan2(x, y) の結果は ' + z);  // zは30である

Tashizan2のように書くほうが分かりやすいと思います。

おわりに

読んでいただいた方、読んでいただきありがとうございました。
稚拙な解説ですが、プログラミング初学者の助けになればと思います。
また、
*間違いがある
*考え方がおかしい
*もっと詳しく説明して欲しい
*次はあれを説明して欲しい
などの意見があればコメントでお願いします。

JavaScriptの基本（？） －Objectを活用しよう－

はじめに

引数を渡すときはObjectで

引数の数を減らせる

Objectの中にObjectを

階層化されたデータを引数で渡すことができる

主な呼び出し方を変えずに追加のデータを渡せる

おわりに

JavaScriptの基本（？）　－Objectを活用しよう－