Angular.jsを使用する最良の方法

翻訳者から：

こんにちは、Habr！ 有用な開発および設計資料をコミュニティと共有し続けています。 今回、 TrackDuckチームは、Angularに関するJeff Dickeyの記事の翻訳を準備しました。 この記事は、日常業務の時間を節約し、Webアプリケーションを開発するための高品質なプロセスを構築したい開発者に役立ちます。 私たちは積極的にAngularを使用して、ウェブサイト上で視覚的にコメントするための独自の製品を開発しています。

私はかなり多数のアプリケーションでAngularを使用し、このフレームワークを使用してアプリケーションを構築する多くの方法を見ました。 現在、MEANスタックを使用したAngularアプリケーションの設計に関する本を執筆しており、この方向でほとんどの研究を行っています。 その結果、アプリケーションのかなり独創的な構造に決めました。 私のアプローチは、 バーク・ホランドが提案したものよりも簡単です。

始める前に、Angularでのモジュール性の実装に対する既存のアプローチについてお話したいと思います。

JavaScriptのモジュールとは

JavaScriptアプリケーションには、デフォルトでモジュールをロードする機能がありません。 まず、誰もが独自の方法でそれを理解できるため、「モジュール」とは何かを理解しましょう。

このモジュールにより、開発者はアプリケーションを論理的な部分に分割できます。 また、JavaScriptでは、アプリケーションをモジュールに分割することにより、グローバル変数の競合が回避されます。



JavaScriptの初心者は、モジュールに多くの注意が払われていることに驚くかもしれません。 すぐに注意したいのは、モジュールの主な目的は、アプリケーションコンポーネントの読み込みの遅延読み込みを整理することではないということです。 Require.jsではこれを実装できますが、これはモジュールの主要なものではありません。



そのため、すでに述べたように、JSはモジュールをサポートしていないため、時間の経過とともに、この問題を解決するいくつかの方法が登場しました。 JSのモジュール化の組織にすでに精通している場合は、次のセクションをスキップできます。

.noConflict（）

問題を説明したいと思います。プロジェクトにjQueryを含めたいとします。 jQueryはグローバル変数「$」を定義する必要があります。 その名前の変数がすでにコードで使用されている場合、自然に変数の競合が発生します。 この問題は通常、.noConflict（）関数を使用して解決されます。 簡単に言えば、.noConflict（）を使用すると、ライブラリに使用する変数の名前を変更できます。

<script> var $ = 'myobject that jquery will conflict with' </script> <script src='//ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js'></script> <script> // $ is jQuery since we added that script tag var jq = jQuery.noConflict(); // $ is back to 'myobject that jquery will conflict with' // jq is now jQuery </script>
      
      

        
        
        
      

    
        
        
        
      
      

        
        
        
      

    
     

これはかなり一般的なソリューションですが、ほとんどのJavaScriptライブラリにとって最も便利なソリューションではありません。 コードを適切に分離することはできません。使用する前にモジュールを宣言する必要があり、本質的にこのアプローチでは、.noConflict（）に似たメソッドを再度使用する必要があります。



.noConflict関数に関する質問がまだある場合は、リンクをたどってこの役立つ資料を読んでください。



この問題には別の解決策があります。主な4つの分野についてお話したいと思います。

• Require.js（AMDの実装）
• Browserify（CommonJSの実装）
• 角度依存性注入
• ES6モジュール

それぞれに独自の特性、プラスとマイナスがあります。 これらのソリューションのいくつかを同時に使用することもできます（たとえば、 Burke Hollandは2つ使用します）。 それぞれのソリューションを見てみましょう。

サンプルアプリ

Angularで小さなアプリケーションを作成し、実際の例を理解してみましょう。

既製のコードを含むGitHubリポジトリへのリンクを次に示します 。 便宜上、1つのapp.jsファイルでJavaScriptの操作を開始しましょう。

 var app = angular.module('app', []) app.factory('GithubSvc', function ($http) { return { fetchStories: function () { return $http.get('https://api.github.com/users') } } }) app.controller('GithubCtrl', function ($scope, GithubSvc) { GithubSvc.fetchStories().success(function (users) { $scope.users = users }) })
      
      

        
        
        
      

    
        
        
        
      
      

        
        
        
      

    
     

オブジェクト 'app'を定義します-これが私たちのモジュールです。 次に、GitHubユーザーを取得するのに役立つ単一の関数で「GithubSvc」サービスを定義します。

最後に、サービスを使用して、$ス​​コープにある配列にユーザーをロードするコントローラーを定義します。 リストを表示するテンプレートを次に示します。

個別のファイルへの分離

問題は、現在のコードが1つのファイル内にあり、実際のアプリケーションには完全に適用できないことです。 私がAngularと知り合った最初から、コード例を見るたびに、実際に使用されるより現実的なファイル共有コードを見たいと思っていました。



この例では、次の構造を提案します。

• src / module.js
• src / github / github.svc.js
• src / github / github.ctrl.js

アプリケーションが小さい場合は、別の方法でファイルを分割します。

• src / module.js
• src / services / github.svc.js
• src / controllers / github.ctrl.js

いずれにせよ、browserifyやrequire.jsなどのモジュールを使用せずに、scriptタグを使用してこれらの各ファイルを含める必要があります。 コードが数百のファイルに簡単に成長し、この方法で接続を管理するのは簡単ではないことを理解することが重要です。



接続されたファイルの数が多いと、パフォーマンスの問題も発生します。アプリケーションをロードするとき、ブラウザは同時にサーバーへの多くの接続を確立する必要があります。 インターネット接続が遅い場合、ユーザーは問題に直面し、ダウンロード時間が長くなります。



開発者が多数のjsファイルを接続できるようにする方法が必要ですが、同時に（scriptタグを介して接続せずに）ブラウザにダウンロードしないでください。



そのため、人々はrequire.jsまたはbrowserifyモジュールローダーを使用します。 Angularでは、コードを論理的に分割できますが、ファイルは分割できません。 もっと簡単な解決策を示したいのですが、最初に、モジュールのロードを制御するためのよく知られた方法を見てみましょう。

Require.js-非常に難しい

Require.jsは、JavaScriptでモジュールを使用する最初の試みでした。 このソリューションにより、jsファイル内で直接依存関係を判別し、ブラウザーで実行し、必要に応じてモジュールをロードできます。



したがって、このライブラリにより、jsからモジュールをロードし、ロード順を決定するという2つの目標を一度に達成できます。



残念ながら、このライブラリは接続と構成が非常に困難です。 特定の方法で記述されたコードが必要であり、プログラマーにとって非常に高い入力しきい値があります。 さらに、循環依存関係を十分に処理することはできません。 このライブラリを使用してAngularアプリケーションのモジュール式ソリューションを構築しようとすると、問題が発生する可能性があります。



このレビューで require.jsの詳細を読むことができます 。



require.jsがオンデマンドでモジュールをロードする機能は、Angularでは機能しません。 現実には、このようなニーズのあるプロジェクトで働いたことはありませんが。 さらに、この機能はAngular開発者にとって重要ではないことをもう一度強調したいと思います。 コードを論理的な部分に正しく分割できることがはるかに重要です。

Browserify —優れたモジュールローダー

ブラウザーを使用してモジュールをロードするrequire.jsとは異なり、browserifyはブラウザーで実行を開始する前にサーバー上のコードを処理します。 browserifyファイルを取得して、ブラウザーで実行することはできません。 まず、「パッケージ」を作成する必要があります。



パッケージは、node.jsモジュールに似た形式を使用します（さらに、ほぼ常に互換性があります）。 次のようになります。

 var moduleA = require('my-module') var moduleB = require('your-module') moduleA.doSomething(moduleB)
      
      

        
        
        
      

    
        
        
        
      
      

        
        
        
      

    
     

本当に便利で読みやすいように見えます。 変数を宣言し、それが参照するモジュールに「require（）」するだけです。 モジュールをエクスポートするコードを書くのはとても簡単です。



Nodeでは、すべてのプラグインがファイルシステム上にあり、ロードにほとんど時間がかからないため、これはうまく機能します。

したがって、browserifyを使用すると、コードを実行でき、すべてのファイルが1つのパッケージに収集され、ブラウザーで完全に使用できます。 この記事で browserifyの詳細を読んでください 。



これは、Angularを使用しないプロジェクトで使用できる優れたツールです。 Angularの場合、さらに簡単なソリューションを提供します。

角度依存性注入-ほとんどの問題を解決します

戻ってapp.jsを見てみましょう。 この点に注意したい：

サービスとコントローラーを作成する順序は関係ありません。 Angularは、内部メカニズムを使用してすべての依存関係を処理します。



このメソッドを使用する場合、「app」オブジェクトを操作するには、モジュールがプログラムの先頭で宣言されていることを確認する必要があります。 これは、すべてのJavaScriptファイルをマージするため、Angularでの宣言の順序が重要な唯一の場所です。

ガルプコンカット

JSファイルをマージするには、Gulpを使用します。 新しいツールを学ぶ必要性について心配する必要はありません。私はそれを非常に簡単な方法で使用し、Grunt、Make、またはあなたが慣れているユーティリティに簡単に移植できます。 ファイルのマージを自動化するのに役立つものが必要です。



私は間違いなく私のお気に入りのすべての最新のビルドシステムとGulpを試しました。 JSまたはCSSを使用する場合、非常に効果的です。



あるビルドツール（browserify）を別のビルドツール（Gulp）に置き換えたいと思うかもしれませんが、あなたは正しいでしょう。 しかし、Gulpはより広範なタスクを解決できます。 Gulpを構成および使用して、ミニファイ、CoffeeScriptプリコンパイル、ソースマップ生成、画像処理、scssまたはsassコンパイル、node.jsでのdevサーバーの実行などのタスクを実行できます。 これらはすべて、プロジェクトをさらに拡大するためのプラットフォームを提供します。



まず、GulpとGulp-concatをインストールします

 $ npm install --global gulp $ npm install --save-dev gulp gulp-concat
      
      

        
        
        
      

    
        
        
        
      
      

        
        
        
      

    
     

プロジェクトにpackage.jsonファイルを作成し、node.jsをインストールします。 以下に、新しいプロジェクトを初期化するのに役立つちょっとしたトリックを示します。

 $ echo '{}' > package.json
      
      

        
        
        
      

    
        
        
        
      
      

        
        
        
      

    
     

次に、gulpfile.jsファイルを作成します。

 var gulp = require('gulp') var concat = require('gulp-concat') gulp.task('js', function () { gulp.src(['src/**/module.js', 'src/**/*.js']) .pipe(concat('app.js')) .pipe(gulp.dest('.')) })
      
      

        
        
        
      

    
        
        
        
      
      

        
        
        
      

    
     

これは、/ srcディレクトリのJavaScriptファイルをapp.jsに結合する単純なタスクです。 JSファイルは、このような順序でリストされています。理由は、このようなレコードファイル*を使用しているためです。 module.jsが最初に含まれます。 これについては、ミニファイについて詳しく見ていきます。



Gulpで連結を試してみたい場合は、 これらのファイルをロードし 、「gulp js」コマンドを実行して実行してください。 私の記事を読むと、 Gulpの詳細を知ることができます。

ガルプウォッチ

それは非常にシンプルで、コードはそれ自体を物語っています：

 var gulp = require('gulp') var concat = require('gulp-concat') gulp.task('js', function () { gulp.src(['src/**/module.js', 'src/**/*.js']) .pipe(concat('app.js')) .pipe(gulp.dest('.')) }) gulp.task('watch', ['js'], function () { gulp.watch('src/**/*.js', ['js']) })
      
      

        
        
        
      

    
        
        
        
      
      

        
        
        
      

    
     

ここでは、 'src / ** / *。Js'のJavaScriptファイルが変更されるたびにタスク 'js'を実行する新しいタスク 'gulp watch'を追加します。 出来上がり、私たちはルーチンを取り除きました！

縮小

コードを縮小する時が来ました。 Gulpでは、複数のモジュール（最小化、連結など）を使用して処理する必要があるソースファイルのストリームを作成し、保存します。



gulp-uglifyから始めましょう。 まず、npmを使用してインストールする必要があります。

 npm install -D gulp-uglify
      
      

        
        
        
      

    
        
        
        
      
      

        
        
        
      

    
     

次に、gulpファイルを追加しましょう。

 var gulp = require('gulp') var concat = require('gulp-concat') var uglify = require('gulp-uglify') gulp.task('js', function () { gulp.src(['src/**/module.js', 'src/**/*.js']) .pipe(concat('app.js')) .pipe(uglify()) .pipe(gulp.dest('.')) })
      
      

        
        
        
      

    
        
        
        
      
      

        
        
        
      

    
     

しかし、問題があります。 Angular関数の引数名を認識するGulp-uglifyは、依存関係を注入する必要があります。 現在、アプリケーションは機能しません。 この問題に慣れていない場合は、お読みください。 docs.angularjs.org/guide/di



コードまたはすばらしいツールで配列のかさばる構文を使用できます： ng-gulp-annotate



インストールしてください：

 npm install -D gulp-ng-annotate
      
      

        
        
        
      

    
        
        
        
      
      

        
        
        
      

    
     

そして、gulpfileを補完します。

 var gulp = require('gulp') var concat = require('gulp-concat') var uglify = require('gulp-uglify') var ngAnnotate = require('gulp-ng-annotate') gulp.task('js', function () { gulp.src(['src/**/module.js', 'src/**/*.js']) .pipe(concat('app.js')) .pipe(ngAnnotate()) .pipe(uglify()) .pipe(gulp.dest('.')) })
      
      

        
        
        
      

    
        
        
        
      
      

        
        
        
      

    
     

Gulpの価値を確認してください。

ソースマップ

ほとんどの人がデバッグを使用してコードの問題を診断します。 問題は、縮小されたJavaScriptをデバッグできないことです。 このために、コードマップが使用されます（ソースマップ）。 これらを生成するのに役立つGulpプラグインは次のとおりです。



gulp-sourcemapsをインストールします。

 npm install -D gulp-sourcemaps
      
      

        
        
        
      

    
        
        
        
      
      

        
        
        
      

    
     

そして、gulpfileに適切な表記を追加します。

 var gulp = require('gulp') var concat = require('gulp-concat') var sourcemaps = require('gulp-sourcemaps') var uglify = require('gulp-uglify') var ngAnnotate = require('gulp-ng-annotate') gulp.task('js', function () { gulp.src(['src/**/module.js', 'src/**/*.js']) .pipe(sourcemaps.init()) .pipe(concat('app.js')) .pipe(ngAnnotate()) .pipe(uglify()) .pipe(sourcemaps.write()) .pipe(gulp.dest('.')) })
      
      

        
        
        
      

    
        
        
        
      
      

        
        
        
      

    
     

連結が優れている理由

何よりもまず簡単だからです。 Angularはすべてのダウンロードコードを処理します。ファイルを手伝うだけです。

また、新しいファイルを作成するときに、既存のファイルと一緒にディレクトリに追加するだけで十分であるため、非常に効果的です。 たとえばbrowserifyのように、これらのファイルの追加宣言はどこにも必要ありません。 require.jsにあった依存関係はありません

実際、ミスを犯す可能性のある場所が少ないほど、エラーは少なくなります。

まとめ

これが最終コードです。 これは簡単にAngularアプリを構築するための出発点になります。

• よく構成されています。
• JSは自動的に縮小されます。
• ソースコードマップがあります。
• グローバル変数はありません。
• 冗長スクリプトタグは使用されません。
• ビルドのセットアップは非常に簡単です。

前述のように、これはGulpだけで可能というわけではありません。 JS連結をサポートする任意のコレクターですべて同じことを繰り返します。

未来を見据える：Angular 2.0およびES6

JavaScriptの次のバージョンは、ネイティブレベルでモジュールの問題を解決することが期待されています。 そして、ES6が広くサポートされるようになると、もちろんこの記事は古風なものになりますが、それでもなお、しばらくお役に立てば幸いです。



Angular 2.0はES6モジュールをサポートする予定であり、これは素晴らしいことです。 これは、アプリケーションに必要な機能を簡単にコンパイルできる一連のパッケージのようなものになると思います。 ただし、残念ながらバージョン2.0もリリースにはほど遠い状態です。

Angular 2.0は、モジュールを担当する別個のdi.jsライブラリを使用します。 Angularのすべてのアプリケーションで簡単に使用できます。 唯一の問題は、ES6およびA2.0のリリース前に、現在のモジュールの実装に対処する必要があることです。これにより、私の記事がお役に立てば幸いです。