diff --git a/README-ja-jp.md b/README-ja-jp.md index d642fe4..ee65df9 100644 --- a/README-ja-jp.md +++ b/README-ja-jp.md @@ -1,7 +1,5 @@ # AngularJS in Patterns -_このドキュメントは[AngularJS in Patterns](https://github.com/mgechev/angularjs-in-patterns/blob/master/README.md)の日本語翻訳版です。_ - ## 目次 @@ -49,15 +47,15 @@ _このドキュメントは[AngularJS in Patterns](https://github.com/mgechev/a ## はじめに -このドキュメントはAngularJSの概要を簡単に見ていくところから始まります。「AngularJSの概要」ではAngularJSの主なコンポーネントとして、ディレクティブ、フィルタ、コントローラ、サービス、スコープを見ていきます。２番目のセクションでは、フレームワークの内部で利用されている別のデザインとアーキテクチャのパターンを解説していきます。いくつかのコンポーネントで利用されているパターンがあった場合は、言及していきます。 +このドキュメントはAngularJSの概要を簡単に見ていくところから始まります。「AngularJSの概要」ではAngularJSの主なコンポーネントとして、ディレクティブ、フィルタ、コントローラ、サービス、スコープを見ていきます。２番目のセクションでは、フレームワークの内部で利用されているそれぞれのデザインとアーキテクチャのパターンを解説していきます。いくつかのコンポーネントで利用されているパターンがあった場合は、言及していきます。 -最後のセクションでは、AngularJSで作られているシングル・ページ・アプリケーションでよく使われているいくつかのアーキテクチャ・パターンを解説します。 +最後のセクションでは、AngularJSで構築されているシングル・ページ・アプリケーションでよく使われているいくつかのアーキテクチャ・パターンを解説します。 ## AngularJSの概要 AngularJSはCRUDなシングル・ページ・アプリケーション（SPA）開発の基盤を提供する目的で作られたGoogle製のJavascriptフレームワークです。 -SPAとは一度ロードされたら以後ページの全要素を再読込する必要なく、ユーザの操作を受け付けるウェブ・アプリケーションです。これはデータ、テンプレート、スクリプト、スタイルなど全てのリソースを最初のリクエスト時に、または、それが必要になった時にロードすることを意味します。ほとんどすべてのCRUDなアプリケーションは共通の特性と要求を持っているので、AngularJSはそれらのアプリケーションが必要とするものをまとめてすぐに使える最高セットを提供しようとしています。AngularJSのいくつかの重要な特徴は下記のとおりです: +SPAとは一度ロードされたら以後ページの全要素を再読込する必要なく、ユーザの操作を受け付けるウェブ・アプリケーションです。これはデータ、テンプレート、スクリプト、スタイルなど全てのリソースを最初のリクエスト時に、または、それが必要になった時にロードすることです。ほとんどすべてのCRUDなアプリケーションは共通の特性と要求を持っているので、AngularJSはそれらのアプリケーションが必要とするものをまとめてすぐに使える最高のツール・セットを提供しようとしています。AngularJSの重要な特徴は下記のとおりです: - 双方向バインディング - 依存性の注入 @@ -73,11 +71,11 @@ SPAとは一度ロードされたら以後ページの全要素を再読込す - サービス - フィルタ -これらのコンポーネントはそれぞれのモジュールの中でグループ化することができるので、高度な抽象化がやりやすくなりますし、複雑な処理も扱いやすくなっています。それぞれのコンポーネントはアプリケーションの必要なロジックを隠蔽します。 +これらのコンポーネントはそれぞれのモジュールの中でグループ化することができるので、高度な抽象化や、複雑な処理の扱いもしやすくなっています。それぞれのコンポーネントはアプリケーションの必要なロジックを隠蔽します。 ### パーシャル -パーシャルはHTMLの文字列です。パーシャルはエレメントまたはアトリビュートの中にAngularJSのエクスプレッションを含むことがあります。AngularJSとその他のフレームワークの違いの１つは、AngularJSのテンプレートがHTMLに変換される前の中間的なフォーマット（例えば、mustache.jsやhandlebarsのようなもの）ではないということです。 +パーシャルはHTMLの文字列です。パーシャルはエレメントまたはアトリビュートの中にAngularJSの式を含むことがあります。AngularJSとその他のフレームワークの違いの１つは、AngularJSのテンプレートがHTMLに変換される前の中間的なフォーマット（例えば、mustache.jsやhandlebarsのようなもの）ではないということです。 SPAは最初に `index.html` ファイルを読み込みます。AngularJSの場合、このファイルに標準のHTMLアトリビュート、エレメント、コメントに加えカスタムのものも含みます。この段階で、アプリケーションの設定と準備をします。これに続くユーザのアクションは、例えば、フレームワークによって提供されるデータ・バインディングを通すなどして、アプリケーションの他のパーシャルの読み込みや、状態の変更のみで対応します。 @@ -90,18 +88,18 @@ SPAは最初に `index.html` ファイルを読み込みます。AngularJSの場 + 式です --> ``` -AngularJSのエクスプレッションでパーシャルはユーザとの対話の中でどのアクションを実行すべきかを定義します。上記の例では、 `ng-click` の値は、現在の *scope* の `changeFoo` メソッドが実行されることを表しています。 +AngularJSの式でパーシャルはユーザとの対話の中でどのアクションを実行すべきかを定義します。上記の例では、 `ng-click` 属性の値は、現在の *scope* の `changeFoo` メソッドが実行されることを意味しています。 ### コントローラ -AngularJSのコントローラはユーザとウェブ・アプリケーションとの双方向のやりとり（マウスイベント、キーボードイベントなど）を扱うJavaScriptの関数です。 *scope* に、メソッドを追加することで実現します。コントローラに必要なコンポーネントはAngularJSの依存性の注入によって提供されます。コントローラはまた *scope* にデータを追加することで、パーシャルに *model* を提供する責務を負います。このデータを *view model* と考えることができます。 +AngularJSのコントローラはユーザとウェブ・アプリケーションとの双方向のやりとり（マウスイベント、キーボードイベントなど）を扱うJavaScriptの関数です。 *scope* に、メソッドを追加することで実現します。コントローラに必要なコンポーネントはAngularJSの依存性の注入によって提供されます。コントローラはまた *scope* にデータを追加する方法で、パーシャルに *model* を提供する責務を負います。このデータを *view model* と考えることができます。 ```JavaScript function MyController($scope) { @@ -124,11 +122,11 @@ function MyController($scope) { ### スコープ -AngularJSではスコープはパーシャルに露出したJavaScriptのオブジェクトです。スコープはプリミティブ、オブジェクト、メソッドなど異なるプロパティを含んでいます。スコープに追加された全てのメソッドはスコープと関連付けられたパーシャルの中でAngularJSのエクスプレッションによって評価され実行されます。また、スコープへの参照を持つコンポーネントから直接呼び出されます。適切な *ディレクティブ* を使うことでスコープに追加されたデータはビューにバインディングされ、パーシャルの中の変更がスコープのプロパティに反映されます。また、プロパティの変更がパーシャルに反映されます。 +AngularJSではスコープはパーシャルに露出したJavaScriptのオブジェクトです。スコープはプリミティブ、オブジェクト、メソッドなど異なるプロパティを含んでいます。スコープに追加された全てのメソッドはスコープと関連付けられたパーシャルの中でAngularJSの式によって評価され実行されます。また、スコープへの参照を持つコンポーネントから直接呼び出されます。適切な *ディレクティブ* を使うことでスコープに追加されたデータはビューにバインディングされ、パーシャルの中の変更がスコープのプロパティに反映されます。また、プロパティの変更がパーシャルに反映されます。 -AngularJSアプリケーションのスコープのもう一つの重要な特性は、それがプロトタイプ・チェーンと結びついていることです（ 明示的に *分離* されたものを除きます）。これにより、子のスコープは親のスコープのメソッドを実行することができます。この場合のメソッドは子のスコープの直接、または関節のプロトタイプのプロパティだからです。 +AngularJSアプリケーションのスコープのもう一つの重要な特性は、それがプロトタイプ・チェーンと結びついていることです（ 明示的に *分離* されたものを除きます）。これにより、子のスコープは親のスコープのメソッドを実行することができます。この場合のメソッドは子のスコープの直接、または間接のプロトタイプのプロパティだからです。 -スコープの継承は次の例で説明します: +スコープの継承を次の例で説明します: ```HTML
@@ -157,8 +155,8 @@ function ChildCtrl($scope) { ### ディレクティブ -AngularJSでは全てのDOM操作がなされるべき場所です。目安としては、コントローラがDOM操作を含む場合、新しいディレクティブを作るか、すでにあるディレクティブが必要なDOM操作ができるようにするためのリファクタリングをするべきでしょう。 -全てのディレクティブは名前と関連するロジックを持っています。最もシンプルなケースとしては、ティレクティブは名前と必要なすべてのロジックをカプセル化するための *postLink* 関数を持ちます。少し複雑なケースでは、下記のようなたくさんのプロパティを持ちます: +AngularJSでは全てのDOM操作がなされるべき場所です。目安としては、コントローラがDOM操作を含む場合、新しいディレクティブを作るか、必要なDOM操作ができるようにすでにあるディレクティブをリファクタリングするべきでしょう。 +全てのディレクティブは名前と関連するロジックを持っています。最もシンプルなケースとしては、ティレクティブはその名前と *postLink* 関数のみを持ちます。 *postLink*　関数が必要なすべてのロジックをカプセル化します。少し複雑なケースでは、下記のようなたくさんのプロパティを持ちます: - テンプレート - コンパイル関数 @@ -192,9 +190,9 @@ myModule.directive('alertButton', function () { Click me ``` -上記の例では、 `` タグはボタンエレメントに置換えられます。ユーザがボタンをクリックした時に、文字列の `42` がアラートとして表示されます。 +上記の例では、 `` タグはボタン・エレメントに置換えられます。ユーザがボタンをクリックした時に、文字列の `42` がアラートとして表示されます。 -このドキュメントの意図はAngularJSの完全なAPIの解説をすることを意図しているわけではないので、ディレクティブの説明はこの辺りでやめておきます。 +このドキュメントはAngularJSの完全なAPIの解説をすることを意図しているわけではないので、ディレクティブの説明はこの辺りでやめておきます。 ### フィルタ @@ -240,7 +238,7 @@ myModule.service('Developer', function () { }); ``` -サービスは依存性の注入を扱えるどのコンポーネント（コントローラ、多のサービス、フィルター、ディレクティブ）にも注入できます。 +サービスは依存性の注入を扱えるどのコンポーネント（コントローラ、他のサービス、フィルター、ディレクティブ）にも注入できます。 ```JavaScript function MyCtrl(developer) { @@ -259,15 +257,15 @@ function MyCtrl(developer) { #### シングルトン ->シングルトン・パターンはクラスのインスンタンスを１つに制限するデザイン・パターンです。システムを通してアクションを調整するオブジェクトが１つで良い場合に役に立ちます。この考え方はしばしばシステムに対して、オブジェクトを１つにして効率的に稼働させることや、オブジェクトの数を一定の数以下にを制限することに一般化されます。 +>シングルトン・パターンはクラスのインスンタンスを１つに制限するデザイン・パターンです。システムを通してアクションを調整するオブジェクトが１つで良い場合に役に立ちます。この考え方はしばしばシステムに対して、オブジェクトを１つにして効率的に稼働させることや、オブジェクトの数を一定の数以下にを制限することために適用されます。 下記のUMLダイアグラムはシングルトンのデザイン・パターンを表しています。 ![Singleton](https://rawgit.com/mgechev/angularjs-in-patterns/master/images/singleton.svg "Fig. 1") -依存性がコンポーネントに必要とされる際に、AngularJSは次のアルゴリズムを使って依存性の解決を行っています: +コンポーネントが依存性を必要とする際、AngularJSは次のアルゴリズムを使って依存性の解決を行っています: -- 依存性の名前で語彙のクロージャの中に定義されているハッシュ・マップを検索します（プライベートにアクセスできるようになっています）。 +- 依存性の名前でクロージャの中に定義されているハッシュ・マップを検索します（プライベートにアクセスできるようになっています）。 - 依存性がAngularJSの中に存在する場合は、それを必要としているコンポーネントにパラメタとして渡します。 - 依存性が存在しない場合は: - AngularJSはプロバイダのファクトリ・メソッド（ `$get` ）を用いてその依存性をインスタンス化します。 依存性のインスタンス化は必要に応じて、同じアルゴリズムを用いて再帰的に行われます。このプロセスは循環依存を起こします。 @@ -300,14 +298,14 @@ function getService(serviceName) { } ``` -サービスは一度しかインスタンス化されないので、全てのサービスをシングルトンと考えることができます。キャッシュはシングルトンのマネージャと考えることができます。上記のUMLダイアグラムと少し違いがあります。コンストラクタ関数の中のシングルトンオブジェクトにスタティックでプライベートな参照を保つ代わりに、シングルトン・マネージャ（上記のコードの中の `cache` ）の中に参照を保ちます。 +サービスは一度しかインスタンス化されないので、全てのサービスをシングルトンと考えることができます。キャッシュはシングルトンのマネージャと考えることができます。上記のUMLダイアグラムと少し違いがあります。コンストラクタ関数の中のシングルトン・オブジェクトに静的でプライベートな参照を保つ代わりに、シングルトン・マネージャ（上記のコードの中の `cache` ）の中に参照を保ちます。 -このように、サービスは実際にはシングルトンですが、シングルトン・パターンを通して実装されているわkではありません。これは、一般的な実装に比べていくつかの利点があります。 +このように、サービスは実際にはシングルトンですが、シングルトン・パターンを通して実装されているわけではありません。これは、一般的な実装に比べていくつかの利点があります。 - テストをしやすくします。 -- シングルトンオブジェクトの生成をコントロールできます（私達のケースでは、IoCコンテナがシングルトンを遅延インスタンス化することでコントロールしています）。 +- シングルトン・オブジェクトの生成をコントロールできます（私達のケースでは、IoCコンテナがコントロールしています。IoCコンテナがシングルトンを遅延インスタンス化しています）。 -このトピックに関する更に一歩踏み込んだ議論のために、Google Testing blogのMisko Heveryの [記事](http://googletesting.blogspot.com/2008/05/tott-using-dependancy-injection-to.html) を考慮にいれましょう。 +このトピックに関する更に一歩踏み込んだ議論のために、Google Testing blogのMisko Heveryの [記事](http://googletesting.blogspot.com/2008/05/tott-using-dependancy-injection-to.html) は考慮に値するでしょう。 #### ファクトリ・メソッド @@ -335,7 +333,7 @@ myModule.config(function ($provide) { ``` -新しい "プロバイダ" を定義するために、上記のコードで `config` コールバックを利用しています。プロバイダは `$get` メソッドを持っているオブジェクトです。JavaScriptでインターフェイスを持たず、ダックタイプされているので、このようにプロバイダのファクトリ・メソッドを名付ける慣例があります。 +新しい "プロバイダ" を定義するために、上記のコードで `config` コールバックを利用しています。プロバイダは `$get` メソッドを持っているオブジェクトです。JavaScriptはインターフェイスを持たず、ダックタイプなので、このようにプロバイダのファクトリ・メソッドを名付ける慣例があります。 サービス、フィルタ、ディレクティブ、コントローラはそれぞれコンポーネントのインスタンスを生成する責務を負うプロバイダ（ `$get` を持つオブジェクト）を持ちます。 @@ -448,7 +446,7 @@ myModule.config(function ($provide) { >2. 同じ理由から、ライブラリを読みやすくします。 ->3. 外部のコードのライブラリの処理に対する依存性を減らします。なぜなら、ほとんどのコードはファサードを使うのでシステム開発の際の柔軟性を許容します。 +>3. 外部のコードのライブラリの処理に対する依存性を減らします。ほとんどのコードはファサードを使うことでシステム開発の際の柔軟性を許容します。 >4. うまくデザインされていないAPI群を、（タスクが必要とする単位で）よくデザインされたAPIとしてラップします。 @@ -514,7 +512,7 @@ $http.post('/someUrl', data) - リモート・プロキシ - プロテクション・プロキシ -この副章では、AngularJSのバーじゃる・プロキシの実装を見ていきます。 +この副章では、AngularJSのバーチャル・プロキシの実装を見ていきます。 下記のスニペットでは、 `User` という名の `$resource` インスタンスの `get` メソッドを呼んでいます: @@ -539,7 +537,7 @@ function MainCtrl($scope, $resource) { ``` -上記のスニペットが事項された直後、 `$scope` の `user` プロパティは空のオブジェクト（ `{}` ）になります。 `user.name` はundefinedとなり何もレンダリングされません。内部ではAngularJSはこの空のオブジェクトに参照を保っています。サーバがGETリクエストのレスポンスを返すと、AngularJSはサーバから受け取ったデータをオブジェクトに格納します。次の `$digest` ループでAngularJSは `$scope.user` の変更を検知し、ビューの更新に移ります。 +上記のスニペットが実行された直後、 `$scope` の `user` プロパティは空のオブジェクト（ `{}` ）になります。 `user.name` はundefinedとなり何もレンダリングされません。内部ではAngularJSはこの空のオブジェクトに参照を保っています。サーバがGETリクエストのレスポンスを返すと、AngularJSはサーバから受け取ったデータをオブジェクトに格納します。次の `$digest` ループでAngularJSは `$scope.user` の変更を検知し、ビューの更新に移ります。 #### アクティブ・レコード @@ -592,7 +590,7 @@ Martin Fowlerがこのように宣言しているように: HTTPリクエストの際に、事前処理、または、事後処理、またはその両方をしたい時があります。傍受フィルタを使うと、ログ出力、セキュリティまたリクエストのボディやヘッダによって影響を受ける関心事に対応するために、HTTPリクエストやレスポンスに事前・事後プロセスを追加することができます。基本的に傍受フィルタ・パターンはフィルタのチェーンを含みます。それぞれのフィルタは順番通りにデータを処理します。それぞれのフィルタのアウトプットは次のフィルタのインプットになります。 -AngularJSでは `$httpProvider` で母樹フィルタのアイディアを利用しています。 `$httpProvider` は `interceptors` と呼ばれている配列プロパティを持っています。それぞれのオブジェクトは `リクエスト` , `レスポンス` , `requestError` , `responseError` と呼ばれるプロパティを必要に応じて持ちます。 +AngularJSでは `$httpProvider` で傍受フィルタの考え方を採用しています。 `$httpProvider` は `interceptors` と呼ばれている配列プロパティを持っています。それぞれのオブジェクトは `リクエスト` , `レスポンス` , `requestError` , `responseError` と呼ばれるプロパティを必要に応じて持ちます。 `requestError` は一つ前のインターセプタがエラーを投げた時や、処理の拒否を行って終了した時に呼び出されるインターセプタです。 `responseError` は、一つ前の　`response` インターセプタがエラーを投げた時に呼び出されます。 @@ -766,9 +764,9 @@ JavaScriptにはmustache.jsやhandlebarsなどたくさんのテンプレート baz ``` -AngularJSのテンプレートは本物のHTMLです。同等的なテンプレートエンジンがするような中間フォーマットではありません。 +AngularJSのテンプレートは本物のHTMLです。伝統的なテンプレート・エンジンがするような中間フォーマットではありません。 -AngularJSコンパイラはDOMツリーを行き来し、既に知っているディレクティブ（要素、アトリビュート、クラス、コメント）を探すことです。AngularJSがこれらのディレクティブを見つけると、それと関連付けられたロジックを実行します。現在のスコープ・コンテキストの中で別の式を評価することもあります。 +AngularJSコンパイラはDOMツリーを行き来し、既に知っているディレクティブ（要素、アトリビュート、クラス、コメント）を探します。AngularJSがこれらのディレクティブを見つけると、それと関連付けられたロジックを実行します。現在のスコープ・コンテキストの中で別の式を評価することもあります。 例えば: @@ -794,7 +792,7 @@ $scope.names = ['foo', 'bar', 'baz']; ![Observer](https://rawgit.com/mgechev/angularjs-in-patterns/master/images/observer.svg "Fig. 7") -AngularJSアプリケーションのスコープ間では主に２つの基本的なやりとりの方式があります。一つ目は子スコープが親スコープのメソッドを呼び出すことです。子スコープは親スコープをプロトタイプ継承しているのでこれが可能になります（参考: [スコープ](#スコープ) ）。これは子から親への1方向のコミュニケーションです。時に、親スコープから子スコープのメソッドを呼び出したり、子スコープにイベントの通知を送りたい時があります。AngularJSはこれを実現するための組み込みのオブザーバ・パターンを用意しています。オブザーバ・パターンが必要とされる別のケースとして、複数のスコープがあるイベントに関心があるものの、そのイベントは別スコープにあるため気づけないというものがあります。別々のスコープ間の分離が行われているため、別のスコーぷの変更に気づくことができません。 +AngularJSアプリケーションのスコープ間では主に２つの基本的なやりとりの方式があります。一つ目は子スコープが親スコープのメソッドを呼び出すことです。子スコープは親スコープをプロトタイプ継承しているのでこれが可能になります（参考: [スコープ](#スコープ) ）。これは子から親への1方向のコミュニケーションです。時に、親スコープから子スコープのメソッドを呼び出したり、子スコープにイベントの通知を送りたい時があります。AngularJSはこれを実現するための組み込みのオブザーバ・パターンを用意しています。オブザーバ・パターンが必要とされる別のケースとして、複数のスコープがあるイベントに関心があるものの、そのイベントは別スコープにあるため気づけないというものがあります。別々のスコープ間の分離が行われているため、別のスコープの変更に気づくことができません。 それぞれのAngularJSのスコープは `$on` 、 `$emit` 、 `$broadcast` と呼ばれるパブリック・メソッドを持っています。 `$on` メソッドは最初の引数として関心のある項目をとり、２つ目の引数としてコールバックをとります。このコールバックを `Observer` インターフェイスが実装されたオブザーバと考えることができます（JavaScriptでは関数は第一級オブジェクトなので、ただ、 `notify` メソッドを実装すればよいだけです）: @@ -826,13 +824,13 @@ JavaScriptコミュニティではこのパターンはパブリッシュ／サ #### チェーン・オブ・レスポンシビリティ ->チェーン・オブ・レスポンシビリティ・パターンはコマンド・オブジェクトと続く一連の処理オブジェクトからなるデザイン・パターンです。それぞれの処理オブジェクトは処理が可能なコマンド・オブジェクトを規定するロジックを持っています。残りの部分は次の処理オブジェクトに連鎖的に渡されます。新しい処理オブジェクトを連らの末尾に追加するメカニズムも存在しています。 +>チェーン・オブ・レスポンシビリティ・パターンはコマンド・オブジェクトと続く一連の処理オブジェクトからなるデザイン・パターンです。それぞれの処理オブジェクトは処理が可能なコマンド・オブジェクトを規定するロジックを持っています。残りの部分は次の処理オブジェクトに連鎖的に渡されます。新しい処理オブジェクトを連鎖の末尾に追加するメカニズムも存在しています。 ![Chain of Responsibilities](https://rawgit.com/mgechev/angularjs-in-patterns/master/images/chain-of-responsibilities.svg "Fig. 5") 上述のようにAngularJSアプリケーションのスコープはスコープ・チェーンという階層構造を持っています。いくつかのスコープは "分離" しています。 "分離" とは親スコープからプロトタイプ継承していないということを意味しています。しかし、親スコープへは `$parent` プロパティでアクセスできます。 -`$emit` や `$broadcast` が呼ばれた時、スコープ・チェーンをイベント・バスとして、またはより正確に責任の連鎖考えることができます。イベントが起こると、それは（呼ばれたメソッドに応じて）下方向に、または、上方向に伝播します。続くスコープは: +`$emit` や `$broadcast` が呼ばれた時、スコープ・チェーンをイベント・バスとして、またはより正確に責任の連鎖と考えることができます。イベントが起こると、それは（呼ばれたメソッドに応じて）下方向に、または、上方向に伝播します。続くスコープは下記の処理を行います: - イベントを処理し、次のスコープに渡す - イベントを処理し、そこで伝播を止める @@ -918,7 +916,7 @@ $watch: function(watchExp, listener, objectEquality) { ページ毎にたくさんの似たような振る舞いがある（フッタやヘッダのレンダリング、ユーザ・セッションの扱い）ので、ページコントローラは階層構造を持っています。AngularJSでは責任の制限されたコントローラを持っています。このコントローラは `$route` や `$state` サービスがあるため、ユーザのリクエストを受け付けません。また、ページのレンダリングは `ng-view` や `ui-view` ディレクティブの責任です。 -ページ・コントローラと同じようにAngularJSのコントローラはユーザのインタラクションを扱いますし、モデルを提供して更新します。モデルはスコープに付けられた場合、ビューに露出します。ユーザのアクションによってビューから呼び出されるメソッドは既にスコープに付けられたものです。ページ・コントローラとAngularJSのコントローラのもう一つの類似点は、階層構造です。これはスコーぷの階層構造に対応しています。このやりかたで、共通のアクションはベース・コントローラに分離することができます。 +ページ・コントローラと同じようにAngularJSのコントローラはユーザのインタラクションを扱いますし、モデルを提供して更新します。モデルはスコープに付けられた場合、ビューに露出します。ユーザのアクションによってビューから呼び出されるメソッドは既にスコープに付けられたものです。ページ・コントローラとAngularJSのコントローラのもう一つの類似点は、階層構造です。これはスコープの階層構造に対応しています。このやりかたで、共通のアクションはベース・コントローラに分離することができます。 AngularJSのコントローラはASP.NET WebFormsのコードにとても良く似ています。これらの責任はほぼ重なります。 いくつかのコントローラの階層構造の例です: @@ -960,9 +958,9 @@ function ChildCtrl($scope, User) { #### モジュール・パターン -これは実際にはGang of FourやP of EAAのデザイン・パターンではありません。これはカプセル化とプライバシーを目的とした伝統的なJavaScriptのパターンです。 +これは実際にはGang of FourやP of EAAのデザイン・パターンではありません。これはカプセル化と非公開性を目的とした伝統的なJavaScriptのパターンです。 -モジュール・パターンを利用することで、JavaScriptの関数スコープにおけるプライバシーを達成することができます。それぞれのモジュールは関数のローカルスコープの中に隠されたゼロかプリミティブな番号を持っています。この関数は与えられたモジュールのパブリックAPIを出力するオブジェクトを返します。 +モジュール・パターンを利用することで、JavaScriptの関数スコープにおける非公開性を達成することができます。それぞれのモジュールは関数のローカル・スコープの中に隠されたゼロかプリミティブな番号を持っています。この関数は与えられたモジュールのパブリックAPIを出力するオブジェクトを返します。 ```javascript var Page = (function () { @@ -989,7 +987,7 @@ var Page = (function () { このケースでは `Page` オブジェクトのユーザは `title` に直接アクセスするすべを持っていません。 `title` はIIFEのローカルスコープの中に定義されているからです。 -モジュール・パターンはAngularJSでサービスを定義する際にとても有益です。このパターンを使うことで、プライバシーをシミュレート（事実上達成）することができます: +モジュール・パターンはAngularJSでサービスを定義する際にとても有益です。このパターンを使うことで、非公開性をシミュレート（事実上達成）することができます: ```javascript app.factory('foo', function () { @@ -1010,13 +1008,11 @@ app.factory('foo', function () { }); ``` -`foo` を別のコンポーネントに注入すると、パブリック・メソッドだけにアクセスしてプライベートメソッドを呼ぶ必要がありません。この方法は再利用可能なライブラリを作成する際にとても強力なたすけになります。 - -Once we want to inject `foo` inside any other component we won't be able to use the private methods, but only the public ones. This solution is extremely powerful especially when one is building a reusable library. +`foo` を別のコンポーネントに注入すると、パブリック・メソッドだけにアクセスしてプライベートメソッドを呼ぶ必要がありません。この方法は再利用可能なライブラリを作成する際にとても強力な助けになります。 ### データ・マッパ ->データ・マッパは永続データ・ストア（リレーショナル・データベースがよく使われる）とイン・メモリ・データ・リプリゼンテーション（ドメイン・レイヤ）との双方向のやりとりをするためのデータ・アクセス・レイヤです。このパターンの目的はイン・メモリ・リプリゼンテーションと永続データ・ストアとマッパそれ自体をそれぞれ独立させることです。 +>データ・マッパは永続データ・ストア（リレーショナル・データベースがよく使われる）とイン・メモリ・データ・リプリゼンテーション（ドメイン層）との双方向のやりとりをするためのデータ・アクセス層です。このパターンの目的はイン・メモリ・リプリゼンテーションと永続データ・ストアとマッパそれ自体をそれぞれ独立させることです。 ![Data Mapper](https://rawgit.com/mgechev/angularjs-in-patterns/master/images/data-mapper.svg "Fig. 10")