新人SEの学習記録

14年度入社SEの学習記録用に始めたブログです。もう新人じゃないかも…

学習記録:JavaScriptの設計と指針

[学習記録] JavaScriptの設計と指針

内容:7章 JavaScriptの設計と指針

設計と指針
  • グローバル変数
    • JavaScriptのルートオブジェクト直下に配置される変数
    • ブラウザであればwindow、Node.jsであればglobalにあたる
    • 現行仕様のES5では
      • varによる変数宣言は関数以外ではスコープが形成されない=グローバル変数となる
      • ※ES6ではletで変数を宣言することでブロックスコープを利用可能
      • 汎用的な名前でグローバル変数を宣言することは極力さけるべき
  • モジュール化と名前空間
    • JavaScriptにはモジュール化するためのシンタックスなどが備わっていない
      • オブジェクトを使った名雨空間の定義や、無名関数によるスコープ分割などを使う必要
      • 下記はAjaxの機能を集約した名前空間を定義する例
// ns(name space)が定義されていない場合、名前空間を初期化
var ns = ns || {};

// Ajaxに関するモジュールを定義
ns.Ajax = function () {
  // ...
};
    • 単一責任原則
      • モジュール化を考えていく上で重要なのは、持たせる機能の責任の在処
      • この場合、AjaxのモジュールにAjax以外の機能を持たせるべきでない
    • お互いに依存関係がなければ、一方のみをHTMLにロードして利用することも可能
      • 不要になった場合も安心して整理できる
      • 特定のページのみで使う機能を集約したモジュールを定義(ns.SomePage)し、その中でns.Ajaxなどを使うべき
  • 依存関係の解決とファイルの結合
    • モジュール化の後はJavaScriptの依存関係を考える必要
      • JavaScriptは後方参照ができない=使いたいモジュールを先にロードしておく必要
      • ns.SomePage内でns.Ajaxを使っている場合、ajax -> somepageの順でロードする必要
    • Webページのパフォーマンスを考慮すると、発生するHTTPリクエスト数は少ない方が良い
      • JavaScriptファイルもできる限り結合しているのが望ましい
      • scriptタグでリソースのロードをしようとするとネットワークからのダウンロードが発生する
ライブラリ/ツールキット
  • シーンに応じたライブラリの取捨選択
    • 煩雑なDOM操作を簡単にしたり、複雑なAPIを抽象化したり、コードの統制をとるフレームワークとして機能したり…
    • ライブラリを導入するとそれに依存することになるため、導入は以下を考えて慎重に行うべき
      • どんな機能を有し、何を解決してくれるのか
      • どのような設計思想なのか
      • 更新・保守が頻繁に行われているか
// jQueryなし
// div要素を全て取得
var divList = document.getElementsByTagName('div');

// 取得したdiv要素を列挙
for (var i = 0, l = divList.length; i < l; i++) {
  var div = divList[i];
  // 文字色を変更し、文字を指定
  div.style.color = 'red';
  div.textContent = 'divの文字'
}

// jQueryあり
$('div').css('color', 'red').text('divの文字');
  • ユーティリティライブラリ(UnderscoreJS/Lo-DashJS)
    • UnderScoreJS:オブジェクトや配列操作など多数のユーティリティ関数を備えたライブラリ
    • Lo-DashJs:UndescoreJSをフォークし、カスタマイズ性や実行パフォーマンスなどを改善
    • APIはほぼ同一のもの
      • Underscoreは軽量かつ奇麗な実装なのでコードリーディングにも向いている
      • Lo-Dashはややトリッキーなコードで実行の最適化が行われている
// 配列の列挙の書き方その1
for (var i = 0, l = array.length; i < l; i++) {
   ...
}

// 配列の列挙の書き方その2
var i = 0;
var l = array.length;
while (i < l) {
  ...
  i++;
}

// Underscoreの_.each()を使った列挙
_.each(array, function (number) {
  ...
});
  • アーキテクチャライブラリ(BackboneJS/AngularJS)
    • Webのリッチ化
      • 非同期通信を利用したページ遷移を行わないWebの構築が進む
      • サーバサイドプログラムにあったMVCの考え方がクライアントサイドに導入
      • このようなライブラリとして有名な2つを紹介
    • BackboneJS
      • アーキテクチャを強要するものではなく、マナーを守るためのベースを提供
      • 中長期的な生産性・保守性の向上のためのライブラリ
      • データモデル層としてのModel、論理的なグルーピングを行うCollection、プレゼンテーション層のView
      • 上に加えてアプリケーションを構築する上で便利なイベントシステムやルータ機能
      • Backbone.js Deconstructedの一読をオススメ
    • AngularJS
      • Googleによって開発された双方向データバインディングや依存性注入などの機能を持つフレームワーク
      • html ng-appのように、HTMLタグにng-appを付与することでHTMLそのものをテンプレートとして扱う
      • ng-を接頭辞としたさまざまな属性を付与しながらロジックを当てていく