自分が今関わってるプロジェクトですが、AngularJSでサイトを作っていた人が別のプロジェクトに移動することになってとりあえず自分が引き継ぐことになりました。
AngularJSはちょっとだけ触ったことがあるのですが、正直よく分かっていません。Backbone.jsやReactはなんとなく分かるのですが、AngularJSはほとんど全く分かりません。で、案の定、コードを見てどのような動きをしているのか調べようと思っても全く分からず。特に、ある関数(確か、controllerの引数に含めた無名関数)の引数の順番がどうなっているのか全く分かりません。複数のファイルで同じような記述があったのですが、全く順番が異なるように思えました。いくら調べても分からなかったので、仕方なく尋ねると、「Angularが引数名で判断してるんです」。
はぁ？ JavaScriptはある程度分かってるつもりの自分ですが、引数名を判断する方法があるなんて知らずに、驚きました。
調べてみると、すぐにその方法が見つかりました。単純に、関数自体のtoStringメソッドを呼んで、分解しているそうです。
参考：関数の引数名を取得する – Qiita
function getParams(func) {
var source = func.toString()
.replace(/\/\/.*$|\/\*[\s\S]*?\*\/|\s/gm, ''); // strip comments
var params = source.match(/\((.*?)\)/)[1].split(',');
if (params.length === 1 && params[0] === '')
return [];
return params;
}
上記のgetParams関数は、引数に関数を入れると、その関数の引数名の配列を返すようになっているようです。replaceの中身の正規表現をよくよく見てみると、一つ目の|の左側(\/\/.*$)が行コメント、二つ目の|の左側(\/\*[\s\S]*?\*\/)が複数行コメント、二つ目の|の右側(\s)がスペースやタブや改行文字などのホワイトスペース文字を表しており、フラグにはg(グローバルサーチ)とm(複数行検索)を指定しているそうです。その正規表現にヒットした文字をまず無くしているわけですね。
続いて、matchを使って、丸括弧内を検索して引数のみを取得しているようです(ちなみに、インデックスを0にするとカッコを含む文字列を取得できる)。
実際にAngularJS 1.5.8のソースコードを調べてみると少しだけ異なるようで、3923行目のextraArgs関数でtoStringの結果を分解しているようですが、replaceの中身の正規表現は『/((\/\/.*$)|(\/\*[\s\S]*?\*\/))/mg』となっています。カッコが多いのはともかく、この時点ではホワイトスペースを省いていません。さらに、matchも『/^([^\(]+?)=>/』と『/^[^\(]*\(\s*([^\)]*)\)/m』の二種類になっています(前者はES2015の対応っぽいですね)。変数名に)は使えないのだから、『[^\)]*』なんてしなくていいような気はするんですが、念のためそうしているのかもしれません。
なお、実際にextraArgs関数を呼んでいる箇所は3955行目のannotate関数の中のようです。この下のforEach関数(※：念のため言っておくと、この関数はAngularJSで定義している関数です)内のreplaceでホワイトスペースを削除しているようです。replaceの第一引数の正規表現は『/^\s*(_?)(\S+?)\1\s*$/』となっています。どうやら、引数の前後にアンダースコア(_)がついてもいいようですね(ただし、実際に試しとぁけではないので本当にそうなのかは分かりません)。
とりあえず、引数名を取得する方法はわかったので、自分でも実際に試してみることにしました。そこで書いてみたのが以下のようなコード。
// 引数名で判断して、引数を決定する
function assignParams( obj, func ){
var paramArr = getParams(func); // 引数名を列挙した配列
var callArr = []; // 関数の引数に入れる値を入れる配列
paramArr.forEach(function(val){
callArr.push( obj[val] );
});
// 関数呼び出し
func.apply(this, callArr);
}
第二引数に指定した関数の引数名を取得して、その引数名に対応する第一引数のオブジェクトの値を引数に含めて実行するという関数です。この関数を書くのにあたってこまったのが、どうすれば関数の引数の数を動的に変更できるのかということ。調べてみたら、Functionオブジェクトのapplyメソッドを使えば、配列内の値が引数になって実行されるということが分かって、なんとかできました(参考：Function.prototype.apply() – JavaScript | MDN)。applyの第一引数のthisには特に意味がありません。意味がないのでむしろ、nullとかでもしておくべきだったかもしれません。
というわけでさらにこの関数を実行するサンプルを作成してみました。
サンプル：関数から引数名を取得するサンプル
コードは下記のようになっています。
// 第一引数に入れるオブジェクト
var subjectObj1 = {
"kokugo" : 55,
"suugaku" : 80,
"eigo" : 75
}
var subjectObj2 = {
"kokugo" : 50,
"suugaku" : 85,
"eigo" : 65
}
// 利用サンプル
assignParams( subjectObj1, function(kokugo, suugaku, rika){
document.getElementById("kokugo").value = kokugo;
document.getElementById("suugaku").value = suugaku;
document.getElementById("rika").value =rika;
} );
assignParams( subjectObj2, function(suugaku, kokugo, eigo){
document.getElementById("suugaku").value += ',' + suugaku;
document.getElementById("kokugo").value += ',' + kokugo;
document.getElementById("eigo").value += ',' + eigo;
} );
もう少し実用的なサンプルを作成できればよかったのですが、思いつきませんでした。
それにしても、あらためてJavaScriptは自由度の高いプログラミング言語だと思いしらされました。自由度が高すぎて、AngularJSみたいに、パット見わけがわからないライブラリまでできてしまうという。まあ、AngularJSのせいにするのもなんなので、もう少しAngularJSを勉強しようと思います。
コメント