JavaScript

記述ファイル

• JavaScriptの記述はjsファイルまたはrhtmlファイルに記述する
  • JS先読み対応を参考に可能な限り先読み化を行う
  • Erbにより動的に値を当て込む必要がない場合はjsファイルにまとめる方が好ましい

scriptタグ

• scriptタグにはtype属性を必ず記述する。また、スクリプトをコメントで囲う等しない
  • 良い例

    <script type="text/javascript">
      ...
    </script>
    

  • 悪い例

    <script>
      <!--
        ...
      -->
    </script>
    

• 動的に生成される文字列はhlではなくjlで囲むこと（特殊記号のエスケープの処理が異なるため）
  • 良い例

    <script type="text/javascript">
      var str = "<%= jl(@sample) %>";
    </script>
    

  • 悪い例

    <script type="text/javascript">
      var str = "<%= hl(@sample) %>";
    </script>
    

  • 二重エスケープの問題が出る場合は escapeHTML/unescapeHTML を利用する

    <script type="text/javascript">
      var str = "<%= jl(@sample) %>";
      $('sample_dom').innerHTML = str.unescapeHTML();
    </script>
    

体裁

インデント

• 原則的にインデントを入れる
• インデントは半角スペース２文字とする
• タブの使用は禁止する

空行

• 可読性を上げるために空行を適宜入れる

一行の文字数

• 一行の文字数は特に制限しない

行末

• 行末には必ずセミコロンを記述する

括弧

• 開き括弧は文と同じ行に記述する。
• 閉じ括弧はその開始行と等しいインデントレベルで記述する
  • 良い例

    Object.extend(rubricks.xxx, {
      goodFunction: function() {
        alert('goood');
      }
    });
    
    rubricks.xxx.goodArray = [
      'aaaaaaaaaaaaaaaaaaaa',
      'bbbbbbbbbbbbbbbbbbbb',
      'cccccccccccccccccccc'
    ];
    

  • 悪い例

    Object.extend(rubricks.xxx, {
      badFunction1: function()
      {
        alert('bad');
      },
      badFunction2: function() {
        alert('bad');}
    });
    
    rubricks.xxx.goodArray = ['aaaaaaaaaaaaaaaaa',
                              'bbbbbbbbbbbbbbbbb',
                              'ccccccccccccccccc'];
    

命名規約

変数/関数

• パッケージ名のルールから外れるグローバルスコープの変数・関数は作成しない
• 変数名、関数名の頭文字は小文字とする
• 単語の区切りはキャメルケース、アンダースコアのいずれでもよい
• 原則的に意味の通じる単語にし、意味を伴わないコードやアルファベット一文字などにはしない
  • 良い例

    rubricks.xxx.goodMethodSample
    rubricks.xxx.good_method_sample
    

  • 悪い例

    rubricks.xxx.BadMethodSample
    rubricks.xxx.bms
    badMethodSample
    

クラス

• クラス名の頭文字は大文字とする
• 単語の区切りはキャメルケースのみとする
• 原則的に意味の通じる単語にし、意味を伴わないコードやアルファベット一文字などにはしない
  • 良い例

    rubricks.xxx.GoodClassSample
    

  • 悪い例

    rubricks.xxx.bad_class_sample
    rubricks.xxx.badClassSample
    

各種構文

変数の宣言

• ローカル変数はvarを記述する
• グローバル領域に変数を宣言したい場合はパッケージのルールに従う

三項演算子

• 三項演算子を利用する際、複数行に及ぶ場合には特に可読性に注意する

オブジェクト指向

• クラスを作成する場合、prototype.jsを用いたPrototype-OOライクな記法にする
  • 良い例

    var Dog = Class.create();
    Dog.prototype = {
      initialize: function (name) {
        this.name = name;
      },
      bark: function () {
        alert(this.name + ': わんわん');	
      }
    }
    
    dog = new Dog('しなもん');
    dog.bark();
    

  • 悪い例

    /* コンストラクタ */
    function Dog (name) {
      this.name = name;
    }
    
    /* Dog のメソッド */
    Dog.prototype.bark = function () {
      alert(this.name + ': わんわん');
    }
    
    dog = new Dog('しなもん');
    dog.bark();
    

• クラスを継承させる場合、prototype.jsを用いる
  • 例

    var Dog = Class.create();
    Object.extend(Dog.prototype, {
      ...
    })
    

• コンストラクタ内で何も処理を行わない場合、コンストラクタを記述しない
  • 良い例

    var Main = Class.create();
    Main.prototype = {
      ...
    }
    

  • 悪い例

    var Main = Class.create();
    Main.prototype = {
      initialize: function () {},
      ...
    }
    

• メソッドのオーバーライド
  • 原則的にブラウザから提供されるオブジェクトはオーバーライドしない
  • 原則的にライブラリ(Spinelz/rubricks.common)のプロトタイプで定義されているメソッドはオーバーライドしない
  • 新たなメソッドの追加は必要に応じて実施してもよい

• privateメソッド的に扱ってほしいことを明示したい場合にはメソッド名の頭に「_」を付ける。

ライブラリの利用

• prototype.js及びscript.aculo.usの機能は積極的に活用する
• たとえば、DOM-Treeからのエレメントの取得にはprototype.jsの機能を用いる