JavaScriptを読み解いてみた話

こんにちは。今日はWebアプリにButtonの実装を行ったのですが、とあるサイトで見つけたJavaScriptコードを使用しました。

そこでJavaScriptってこんな構文だったっけ？と理解できなかったので、今回はそのコードを１行ずつ読み解いていこうと思います。

JavaScriptコード
1. 即時関数と関数リテラル
2. 各メソッド
おわりに

JavaScriptコード

こちらのサイトからコードサンプルをお借りしました。元はCoffeeScriptというもので書かれている様です（初耳です）。CoffeeScriptで書かれたものはJavaScriptに変換されて実行される様です。以下がそのコードの全容です。

<script type="text/javascript">
(function () {
  var form;
  form = {
    init: function () {
      $('label input[type="radio"]').on('change', function () {
        return form.toggleRadio($(this));
      });
    },
    toggleRadio: function ($this) {
      var siblings;
      siblings = $('[name="' + $this.attr('name') + '"]');
      return siblings.each(function (i, elm) {
        if ($(elm).is(':checked')) {
          return $(elm).prev().addClass('checked');
        } else {
          return $(elm).prev().removeClass('checked');
        }
      });
  　},
　　};
  form.init();
}).call(this);
    
</script>

html、cssの記述は省きますが、以下画像の様なボタンが表示され、違うラジオボタンを押すたびにフェードアウト・インの様なアニメーションとともにチェックの位置が変わります。

これを順に読み解いて理解していこうと思います。

即時関数と関数リテラル

(function () {
  var form;
  form = {
　init: function () {

　//省略

　},
//省略

};
//省略

}).call(this);

function()これは関数を定義する文で、関数名がないので無名関数ですね。これくらいはわかります…と思いましたが、ただの関数ではなく即時関数というもので、関数の定義と同時に実行するための構文だそうです。文末には}).call(this);とこの無名関数thisをcallで呼び出しているということですね。

var form;は変数formを定義したものですね。form = {}これは…関数リテラルという、無名関数を変数に代入しているものだそうです。

init: function(){}これは、普通に関数定義なのかと思いましたが、関数定義ならfunction init(){}ですよね…これは関数定義とは少し違う様です。

少し理解に苦しみましたが、私の解釈としては”initというメソッドを作成している”です。そもそもオブジェクトの定義はされていないためメソッドも存在しません。しかしJavaScriptでは存在しないメソッドをあたかも存在しているかの様に追加できる様です。

次にinit内のメソッドを見ていきます。

各メソッド

各メソッドを見ていきます。以下の文はjQueryを使っています。

$('label input[type="radio"]').on('change', function () {
    return form.toggleRadio($(this));
});

$(‘html タグ’).on(‘change’ function());となっています。これはhtmlタグに該当するものがon（クリック）されたときchangeつまり変更があればtoggleRadioという関数（というかメソッド）を戻り値とするということですね。toggleRadioはこの後に記述されています。

これはinitというメソッドを定義し、その中でtoggleRadioというメソッドを返り値としています。

ではtoggleRadioというメソッドを見ていきます。

toggleRadio: function ($this) {
   var siblings;
   siblings = $('[name="' + $this.attr('name') + '"]');
   return siblings.each(function (i, elm) {
     if ($(elm).is(':checked')) {
         return $(elm).prev().addClass('checked');
       } else {
         return $(elm).prev().removeClass('checked');
       }
    });
},

まずsiblingsという変数を定義しています。その中でhtmlタグのnameを取得し、そのnameをもとにeach()で繰り返し処理を行っています。

繰り返しの内容はエレメントにcheckedがある場合、つまりボタンが選択されている場合はclassにcheckedを追加し、そうでない場合はcheckedを外します。

おそらく、ボタンを押してchecked属性に”checked”が入った場合classにcheckedを追加してボタンの表示を行うということだと思います。これによって画像の様な赤い丸が移動している様に見えるわけですね。

最後にform.init()メソッドを呼び出して完了です。