JavaScriptベストプラクティス Part 2

「ベストプラクティス」パート2でも、引き続きMozillaのWebエバンジェリストであるChristian Heilmannが提供するスライドショーから内容を抜粋します。パート1同様、ご紹介するのはメンテナンス性が高く効率の良いコードを書く手助けとなるJavaScriptのベストプラクティス例です。JavaScriptがソフトウェア開発で大きな割合を占めているような場合、不要なものがなく読みやすいコーディングがより重要になってきます。

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

早速始めましょう

過度の入れ子は避ける

入れ子があるレベルを超えると、コードを読むのが困難になります。

お勧めできないのがループ文にループ文を入れ子することです。こうなると複数のイテレータ変数が扱われることになってしまいます(i、j、k、l、m…)。

function renderProfiles(o){
   var out = document.getElementById('profiles');
   for(var i=0;i<o.members.length;i++){
      var ul = document.createElement('ul');
      var li = document.createElement('li');
      li.appendChild(document.createTextNode(o.members[i].name));
      var nestedul = document.createElement('ul');
      for(var j=0;j<o.members[i].data.length;j++){
         var datali = document.createElement('li');
         datali.appendChild(
            document.createTextNode(
               o.members[i].data[j].label + ' ' + 
               o.members[i].data[j].value
            )
         );
         nestedul.appendChild(detali);
      }
      li.appendChild(nestedul);
   }
   out.appendChild(ul);
}

過度な入れ子やループ文同士の入れ子は、専門ツールのメソッドで避けることが可能です。

function renderProfiles(o){
   var out = document.getElementById('profiles');
   for(var i=0;i<o.members.length;i++){
      var ul = document.createElement('ul');
      var li = document.createElement('li');
      li.appendChild(document.createTextNode(data.members[i].name));
      li.appendChild(addMemberData(o.members[i]));
   }
   out.appendChild(ul);
}
function addMemberData(member){
   var ul = document.createElement('ul');
   for(var i=0;i<member.data.length;i++){
      var li = document.createElement('li');
      li.appendChild(
         document.createTextNode(
            member.data[i].label + ' ' +
            member.data[i].value
         )
      );
   }
   ul.appendChild(li);
   return ul;
}

ひどいエディタと狭い画面を考えてみるといいでしょう。

ループを最適化する

JavaScriptで、ループの実行速度が極端に遅くなることがあります。

ほとんどの場合、ループに何らかの不具合があることがその原因です。

forループが繰り返されるごとに配列の長さがチェックされるようなコーディングはいただけません。長さの値は別の変数に格納するようにしましょう。

var names = ['George', 
'Ringo', 
'Paul', 
'John'];
for(var i=0;i<names.length;i++){
   doSomethingWith(names[i]);
}
var names = ['George', 
'Ringo', 
'Paul', 
'John'];
for(var i=0,j=names.length;i<j;i++){
   doSomethingWith(names[i]);
}

計算などの負荷がかかるコードはループの外に置くことをお勧めします。これは、正規表現はもちろんのこと、何よりもDOM操作において重要です。

ループ内でDOMノードを作成することはできますが、ドキュメントに追加することは避けましょう。

DOMへのアクセスを最小限にする

可能ならDOMへのアクセスは避けてください。

理由: 動作が遅くなる。またDOMへの常時アクセスや変更に関連したブラウザの問題が多数起こる。

回避策: データセットをHTMLに一括変換するヘルパーメソッドを使う。

メソッドを呼び出して1回ですべてがレンダリングできるように、できるだけデータセットをシードしておきましょう。

ブラウザの気まぐれに屈しない

当てにならないブラウザの挙動に頼って、うまく動作するよう期待する代わりに…

コードをいじり回すのではなく、問題を詳細に分析しましょう。

インターフェイスのプランニングがまずかった場合などは、必要のない関数が見つかることが多々あります。

どんなデータも信用しない

良いコードは、取り込まれるどんなデータも信用しません。

  • HTML文書を信用しない

Firebugなどがあれば、誰でも文書に手を加えることができます。

  • 関数が使えるからといってデータの型が正しいとは限らない

typeofでテストした後、必要な処理を行います。

  • DOMの要素が使えることを期待しない

DOMの要素に変更を加える前に、想定した内容であるかどうかをテストして確認します。

  • 何かを保護するためにJavaScriptを使用しない

JavaScriptのクラッキングはコーディングと同じくらい簡単です。

コンテンツではなくJavaScriptで機能を追加する

あなたがJavaScriptで大量のHTMLを作成しているなら、それは正しいやり方ではないかもしれません。

DOMを使った作成は不便だし、innerHTML(IEの処理中断エラー)を使うにも試行錯誤が必要です。また、作成したHTMLの品質を管理するのも大変です。

JavaScriptが有効な時にだけ使えるようにする大きなインターフェイスがある場合は、インターフェイスをAjaxで静的なHTML文書としてロードしましょう。

これでHTMLを継続してメンテナンスし、カスタマイズもできるようになります。

蓄積された情報を活用する

JavaScriptは楽しいですが、ブラウザのためにJavaScriptを書くのはそれほど楽しくありません。最初は優れたライブラリを活用しましょう。

JavaScriptのライブラリはブラウザを動かし、ブラウザの欠点を補ってコードを予測しやすくするために構築されています。

優れたライブラリを使えば、メンテナンスコストをかけずに将来的にも安定した動作を期待できるコードを書くことができます。

開発コードと本番のコードは違う

本番のコードは機械のために書かれ、開発コードは人間のために書かれています。

  • コードはビルド処理で整列し、最小化し、最適化します。
  • あんまり早く最適化しないこと(他の開発者や後工程の担当者が被害を受けます)。
  • コーディングに費やす時間を削るほど、機械語への変換が完了するまでの時間も長くなります。

Web開発についてもっと学びたいようであれば、フロントエンドWeb開発コースAngularJSコースのオンラインコースを受講されることをお勧めします。

パート1はこちらから