2015年1月28日

【翻訳】JavaScript ベストプラクティス パート1

Javascript

ベストプラクティス パート1

2つのパートに分けてお届けする「ベストプラクティス」のパート1では、MozillaのWebエバンジェリストであるChristian Heilmannが提供する人気のスライドショーから内容を抜粋しています。JavaScriptにはひどく扱いにくい特徴がいくつかありますが、それはこれまで以上にソフトウェア開発において重要になっています。この「ベストプラクティス」ではより読みやすく、効率の良いコードを書く手助けとなるサンプルコードやその使用例を紹介していきます。

もしWeb開発についてもっと学びたいと思うのであれば、私たちが提供しているフロントエンドWeb開発コース、もしくはAngularJSコースを覗いてみてください。

理解しやすい変数名にする

変数名や関数名は簡単で理解しやすく短いものにしましょう。

悪い変数名1：

x1 fe2 xbqne

悪い変数名2：

incrementerForMainLoopWhichSpansFromTenToTwenty
}
createNewMemberIfAgeOverTwentyOneAndMoonIsFull

変数名や関数名で値を説明しないようにしましょう。

国によっては理解されない変数名：

isOverEighteen()

どこの国でも理解される変数名：

isLegalAge()

コードは物語です。簡単についていける筋書きを書きましょう。

グローバル変数の使用を避ける

グローバル変数の使用はあまり好ましくありません。

理由： 自分が書いたページの後に別のJavaScriptが追加されることで、コードが上書きされる危険がある。

回避策： クロージャやモジュールパターンを使用する。

発生する問題： 全ての変数をグローバル変数とすることでどこからでもアクセス可能になる。そのためアクセスが抑制されず、ページ内に書いたあらゆるコードが上書き可能になる。

var current = null;
var labels = {
  'home':'home',
  'articles':'articles',
  'contact':'contact'​
};
function init(){
};
function show(){
  current = 1;
};
function hide(){
  show();
};

オブジェクトリテラル： 全てが抑制され、オブジェクト名を通してのみアクセスすることができる。

発生する問題： モジュール名が繰り返されるので、長くてうんざりするようなコードになる。

demo = {
  current:null,
  labels:{
     'home':'home',
     'articles':'articles',
     'contact':'contact'
  },
  init:function(){
  },
  show:function(){
     demo.current = 1;
  },
  hide:function(){
     demo.show();
  }
}

モジュールパターン： グローバル変数とそうでない変数を明確にする必要があり、それらの構文の切り替えを行う。

発生する問題： モジュール名が繰り返されるので、違う構文を内部の関数で使用することになる。

module = function(){
  var labels = {
     'home':'home',
     'articles':'articles',
     'contact':'contact'
  };
  return {
     current:null,
     init:function(){
     },
     show:function(){
        module.current = 1;
    }, 
     hide:function(){
        module.show();
     }
  }
}();

リビーリングモジュールパターン： 矛盾のない構文を保ち、グローバル変数とうまく組み合わせて使用する。

module = function(){
  var current = null;
  var labels = {
     'home':'home',
     'articles':'articles',
     'contact':'contact'
  };
  var init = function(){
  };
  var show = function(){
     current = 1;
  };
  var hide = function(){
     show();
  }
  return{init:init, show:show, current:current}
}();
module.init();

厳格なコーディングスタイルを貫く

ブラウザはJavaScriptパーサに対して、とても適応性が高いものになっています。しかし、あいまいなコーディングスタイルでは別の環境に変更したり、別の開発者に渡したりする際に痛い目を見ることでしょう。正確なコードは安全なコードです。

コードが正確であるか確認： http://www.jslint.com/

必要なコメントだけ書く

“良いコードはコードだけで理解できる”というのは思い上がった考えです。

必要だと思われるコメントだけを書き、経緯を全て伝える必要はありません。

コメントを入れる際に//は使わないようにしましょう。/**/を使用した方が、改行を削除した場合でもエラーが発生しないので、より安全です。

コメントを使ってデバッグをする際のちょっとした技を紹介します。

module = function(){
  var current = null;
/*
  var init = function(){
  };
  var show = function(){
     current = 1;
  };
  var hide = function(){
     show();
  }
// */
  return{init:init, show:show, current:current}
}();

コメントはHTMLであってもJavaScriptであっても、エンドユーザが見るものではありません。
開発に使用するコードは開発者のみが必要とするものと知りましょう。

他の技術との併用を避ける

JavaScriptは、計算、変換、外部ソース（Ajax）へのアクセス、そしてインターフェイス（イベントハンドラ）の振る舞いを定義するのに効率の良いスクリプト言語です。これら以外の機能を使用する場合は、それに特化した技術を使用するべきです。

例：

フィールドが空欄の場合はクラスを“mandatory”と定義し、そのフィールド全体を赤枠で囲う。

var f = document.getElementById('mainform');
var inputs = f.getElementsByTagName('input');
for(var i=0,j=inputs.length;i<j;i++){
  if(inputs[i].className === 'mandatory' && inputs.value === ''){
     inputs[i].style.borderColor = '#f00';
     inputs[i].style.borderStyle = 'solid';
     inputs[i].style.borderWidth = '1px';
  }
}

2か月もすると、すべてのスタイルは、会社の新しいスタイルガイドに沿わなければならなくなります。例えば、ボーダーは使用しない、エラーは要素の横にアイコンとしてアラートを表示するなどです。

見た目の感じでJavaScriptのコードを変更すべきではありません。

var f = document.getElementById('mainform');
var inputs = f.getElementsByTagName('input');
for(var i=0,j=inputs.length;i<j;i++){
  if(inputs[i].className === 'mandatory' && inputs.value === ''){
     inputs[i].className+=' error';
  }
}

CSSのインヘリタンスを使うことで、たくさんの要素を繰り返さなくてもよくなります。

ショートカット記号を使う

ショートカット記号を使うことに慣れてしまえば、コードはすっきりとし、読みやすくなります。

ショートカット記号を使わない場合

var lunch = new Array();
lunch[0]='Dosa';
lunch[1]='Roti';
lunch[2]='Rice';
lunch[3]='what the heck is this?';

ショートカット記号を使った場合

var lunch = [
  'Dosa',
  'Roti',
  'Rice',
  'what the heck is this?'
];

ショートカット記号を使わない場合

if(v){
  var x = v;
} else {
  var x =10;
}

ショートカット記号を使った場合

var x = v || 10;

ショートカット記号を使わない場合

var direction;
if(x > 100){
  direction = 1;
} else {
  direction = -1;
}

ショートカット記号を使った場合

var direction = (x > 100) ? 1 : -1;

モジュール化

コードをモジュール化し、特定の条件に対して適用させる。

1つの関数であらゆることができれば、こんなに簡単なことはないですし、魅力的でもあります。しかし、機能を拡張しようとした場合、いくつかの関数に同じ作業をしなくてはならないことに気付くことでしょう。

これを防ぐには、あらゆる状況に対応できる関数を書くのではなく、特定のタスクを実行するヘルパー関数を小分けにして書く事です。

そうすることで、後から主要機能を拡張するAPIを作成するためにリビーリングモジュールパターンを使う際、これらの関数を提示することもできるのです。

良いコードというのは、主要部分を書き換えることなく簡単に構築できるコードです。

段階的な向上

JavaScriptに依存した大量のコード作成を避ける。

DOMの生成は遅いうえに高額でもあります。

JavaScriptには依存しているが、JavaScriptが無効の時に得ることができる要素は、ユーザにとって役に立ちません。

コンフィギュレーションとトランスレーションの考慮

変更される可能性の高い全てのコードは、コード全体に散在すべきではありません。

このコードには、ラベルやCSSクラス、ID、プリセットが含まれます。

これらをコンフィギュレーションオブジェクトに置いたり、パブリックしたりすることによって、管理がたやすくなり、カスタマイズが可能となります。

例：

carousel = function(){
  var config = {
     CSS:{
        classes:{
           current:'current',
           scrollContainer:'scroll'
        },
        IDs:{
           maincontainer:'carousel'
        }
     },
     labels:{
        previous:'back',
        next:'next',
        auto:'play'
     },
     settings:{
        amount:5,
        skin:'blue',
        autoplay:false
     },
  };
  function init(){
  };
  function scroll(){
  };
  function highlight(){
  };
  return {config:config,init:init}
}();

まとめ

このセクションでは、最良な変数名の付け方やコメントの仕方、そしてコード管理に関するヒントを紹介してきました。パート2では、ループやネスティングなどの有効的な使い方を紹介していきます。

JavaScript ベストプラクティス パート2

このガイドを気に入っていただけたようであれば、jQuery入門ガイドもご覧になってみてください。また、Web開発についてもっと学びたいようであれば、フロントエンドWeb開発コースやAngularJS コースのオンラインコースを受講されることをお勧めします。

Previous Post