はじめに
JavaScriptから外部サービスのAPIへリクエストを投げる時、公式SDKを使うことはよくありますよね。
直接SDKを使ってリクエストを投げてもいいのですが、同じようなリクエストを複数の箇所で書いていると、コードが重複して無駄です。
そこで共通で利用できるように、ラッパー用の関数を自前で実装することは多いと思います。
そんな時に、リクエストで渡すパラメータのキーに対して変数の値を使う方法がわからなかったので、まとめました。
ドット演算子とブラケット演算子
JavaScriptのオブジェクトのプロパティにアクセスする方法には、ドット演算子とブラケット演算子の2つがあります。
var user = { 'name':'Jonh', 'age':24, 'gender':'male'};
var userName = user.name;
console.log(userName);
これがドット演算子で出力結果はJonhになります。
対して、ブラケット演算子の場合は以下の記述になります。
var user = { 'name':'Jonh', 'age':24, 'gender':'male'};
var userName = user['name']
console.log(userName);
出力結果は変わらず、Jonhです。
ドット演算子のメリット、デメリット
メリット
- 記述が簡潔なので、コードを書きやすい。
デメリット
- 汎用性が低い(ブラケット演算子で出来ることがドット演算子には出来なかったりする)
ブラケット演算子のメリット、デメリット
メリット
- 汎用性が高い(ドット演算子で出来ることは全てブラケット演算子で置き換えが可能)
デメリット
- ドット演算子よりも、コードが書きにくい(いちいち['']で囲む手間が発生する)
キーに変数の値を使うなら、ブラケット演算子
今回の目的である、キーに変数の値を使うにはブラケット演算子を使えば可能です。逆にドット演算子では出来ません。
var keyName = 'name';
var user = { 'name':'Jonh', 'age':24, 'gender':'male'};
var userName = user[keyName];
console.log(userName);
例えば先程のコードは上記のように書き換えることが出来ます。
ドット演算子を使って以下のようには書けません。
結果はundefinedになります。
var keyName = 'name';
var user = { 'name':'Jonh', 'age':24, 'gender':'male'};
var userName = user.keyName
console.log(userName);
APIリクエストのパラメータのキーに変数の値を利用する
var conditionDetail = {};
var keyName = 'user';
conditionDetail[keyName] = 'Jonh';
var params = {
KeyConditions:conditionDetail
};
fb.getProfile(url, params);
今まで学んだ内容を活用すると、上記のようにキーに自分の指定したい変数の値を使ってパラメータを設定するといったことが出来ます。
このパラメータは以下のように展開されます。
{ KeyConditions: { user: 'Jonh' } }
何度も使うようであれば、この処理を関数化してしまうと良いと思います。
他の言語を使い慣れている方は、地味に詰まる箇所だと思うので参考にしていただければと思います。