EmberJS-概要

Ember.jsとは何ですか？

Ember.jsは、Webアプリケーションの開発に使用されるオープンソースの無料のJavaScriptクライアント側フレームワークです。データ管理とアプリケーションフローを含む完全なソリューションを提供することにより、クライアント側のJavaScriptアプリケーションを構築できます。

Ember.jsの元の名前は_SproutCore MVC framework_でした。これは_Yehuda Katz_によって開発され、2011年12月に最初にリリースされました。 Ember.jsの安定リリースは2.10.0で、これは2016年11月28日にリリースされました。

Ember.jsを選ぶ理由

Ember.jsの使用を理解するには、次の点を考慮してください-

Ember.jsは、MITライセンスに基づくオープンソースのJavaScriptフレームワークです。
_Handerlbars_テンプレートエンジンのスーパーセットである_HTMLBars_テンプレートエンジンを使用して、新しいバインディング構文を提供します。
_Glimmerレンダリングエンジン_を提供して、レンダリング速度を向上させます。
Emberパターンを開発プロセスに統合し、開発者の生産性に簡単に焦点を当てる_Command Line Interface_ユーティリティを提供します。
2つのプロパティ間のリンクを作成する_data binding_をサポートし、1つのプロパティが変更されると、他のプロパティが新しい値でアップグレードされます。

Ember.jsの機能

以下は、Ember.jsの最も顕著な機能の一部です-

Ember.jsは、再利用可能で保守可能なJavaScript Webアプリケーションを作成するために使用されます。
Ember.jsには、開発モデルの中核に_HTML_と_CSS_があります。
インスタンス初期化子を提供します。
ルートは、URLの管理に使用されるEmber.jsのコア機能です。
Ember.jsは、Emberアプリケーションをデバッグするための_Ember Inspector_ツールを提供します。
Ember.jsは、アプリケーションのコンテンツが変更された場合にモデルを自動的に更新するのに役立つテンプレートを使用します。

EmberJS-インストール

システムでEmber.jsを構成するのは簡単です。 Ember CLI（コマンドラインインターフェイス）ユーティリティを使用して、Emberプロジェクトを作成および管理できます。 Ember CLIは、連結、縮小、バージョン管理など、さまざまな種類のアプリケーション資産管理を処理し、コンポーネント、ルートなどを生成するジェネレーターも提供します。

Ember CLIをインストールするには、次の依存関係が必要です-

Git -ファイルに加えられた変更を追跡するためのオープンソースのバージョン管理システムです。詳細については、https://git-scm.com/[git]の公式Webサイトを確認してください。 EmberはGitを使用して依存関係を管理します。
LinuxへのGitのインストール：このリンクを使用してLinuxにGitをインストールします-https://git-scm.com/download/linux[http://git-scm.com/download/linux]
MacへのGitのインストール：このリンクを使用して、Mac OSにGitをインストールします-https://git-scm.com/download/mac
LinuxへのGitのインストール：このリンク-https://git-scm.com/download/winを使用して、WindowsにGitをインストールします
Node.jsおよびnpm -Node.jsは、サーバー側およびネットワークアプリケーションの開発に使用されるオープンソースです。 JavaScriptで書かれています。 NPMは、プロジェクトの依存関係のインストール、共有、および管理に使用されるノードパッケージマネージャーです。 Ember CLIはNode.jsランタイムとnpmを使用して依存関係を取得します。
Bower -HTML、CSS、JavaScript、画像ファイルなどのコンポーネントの管理に使用され、npmを使用してインストールできます。
Watchman -このオプションの依存関係を使用して、ファイルまたはディレクトリを監視し、変更時にいくつかのアクションを実行できます。
PhantomJS -このオプションの依存関係は、ブラウザベースの単体テストを実行してWebページと対話するために使用できます。

Ember CLIのインストール

Ember CLIは、Emberパターンを開発プロセスに統合し、開発者の生産性に簡単に焦点を合わせます。 Ember.jsおよびEmberデータを使用してEmberアプリを作成するために使用されます。

以下に示すコマンドのようにnpmを使用してEmberをインストールできます-

npm install -g ember-cli

ベータ版をインストールするには、次のコマンドを使用します-

npm install -g [email protected]

Emberの正常なインストールを確認するには、次のコマンドを使用します-

ember -v

上記のコマンドを実行した後、このようなものが表示されます-

ember-cli: 2.10.1
node: 0.12.7
os: win32 ia32

EmberJS-コアコンセプト

Ember.jsには次のコアコンセプトがあります-

ルーター
テンプレート
モデル
コンポーネント

Emberjs Core Concepts

ルーターとルートハンドラー

URLはアドレスバーにURLを入力することでアプリを読み込み、ユーザーはアプリ内のリンクをクリックします。 Emberはルーターを使用して、URLをルートハンドラーにマップします。ルーターは、既存のURLをルートと照合します。このルートは、データのロード、テンプレートの表示、アプリケーションの状態の設定に使用されます。

ルートハンドラは、次のアクションを実行します-

テンプレートを提供します。
テンプレートにアクセスできるモデルを定義します。
ユーザーがアプリの特定の部分にアクセスする許可がない場合、ルーターは新しいルートにリダイレクトします。

テンプレート

テンプレートは、エンドユーザーにとって強力なUIです。 Emberテンプレートは、http：//handlebarsjs.com/[Handlebars templates]の構文を使用するアプリケーションのユーザーインターフェイスの外観を提供します。通常のHTMLのようなフロントエンドアプリケーションを構築します。また、正規表現をサポートし、表現を動的に更新します。

モデル

ルートハンドラーは、情報をWebサーバーに永続化するモデルをレンダリングします。データベースに保存されているデータを操作します。モデルは、Ember Dataの機能を拡張する単純なクラスです。 Ember Dataは、Ember.jsと緊密に結合され、データベースに保存されているデータを操作するライブラリです。

コンポーネント

コンポーネントは、2つの部分を含むユーザーインターフェイスの動作を制御します-

JavaScriptで記述されたテンプレート
コンポーネントの動作を提供するJavaScriptで記述されたソースファイル。

Emberjs-creating-running-application

EmberJS-オブジェクトモデル

Ember.jsでは、すべてのオブジェクトはEmber.Objectから派生しています。オブジェクト指向の分析および設計手法は、「オブジェクトモデリング」と呼ばれます。 Ember.Objectは、クラスシステムを使用して、ミックスインやコンストラクターメソッドなどの機能をサポートします。 Emberは、https://emberjs.com/api/classes/Ember.Enumerablel [Ember.Enumerable]インターフェースを使用してJavaScript配列プロトタイプを拡張し、配列の観測変更を提供します。また、https://emberjs.com/apiを使用します/classes/Ember.Stringl [フォーマットとローカリゼーション]メソッドを使用して、_Stringプロトタイプ_を拡張します。

次の表は、Ember.jsのオブジェクトモデルの種類とその説明を示しています-

S.No.	Types & Description
1	Classes and Instances クラスはテンプレートまたはブループリントであり、変数と関数のコレクションがありますが、インスタンスはそのクラスのオブジェクトに関連しています。 Ember.Objectの_extend（）_メソッドを使用して、新しいEmberクラスを作成できます。
2	Reopening Classes and Instances これは、クラスの実装を再定義せずに更新することに他なりません。
3	Computed Properties 計算されたプロパティは関数をプロパティとして宣言し、Ember.jsは必要に応じて計算されたプロパティを自動的に呼び出し、1つ以上のプロパティを1つの変数に結合します。
4	Computed Properties and Aggregate Data 計算されたプロパティは、配列内のすべてのアイテムにアクセスして値を決定します。
5	Observers オブザーバーは、計算されたプロパティなどのプロパティを監視し、計算されたプロパティのテキストを更新します。
6	Bindings バインディングはEmber.jsの強力な機能であり、2つのプロパティ間のリンクを作成するのに役立ち、プロパティの1つが変更されると、もう1つが自動的に更新されます。

EmberJS-ルーター

ルーターはEmberJsのコア機能であり、URLを一連のテンプレートに変換し、アプリケーションの状態を表します。Emberはルーターを使用してURLをルートハンドラーにマップします。ルーターは、現在のURLを、データの読み込み、テンプレートの表示、およびアプリケーション状態のセットアップに使用される他のルートと照合します。

ルートハンドラーは、次のようなアクションを実行します-

テンプレートを提供します。
モデルを定義し、テンプレートにアクセスできるようになります。
ユーザーがアプリの特定の部分にアクセスする許可がない場合、ルーターは新しいルートにリダイレクトします。

次の表は、Ember.jsのさまざまなルーターとその説明を示しています-

S.No.	Types & Description
1	Defining Routes ルーターは、現在のURLを、テンプレートの表示、データの読み込み、アプリケーションの状態のセットアップを担当するルートと照合します。
2	Specifying a Route’s Model ルートモデルを指定するには、モデルのデータを表示するテンプレートが必要です。
3	Rendering a Template ルートは、外部テンプレートを画面にレンダリングするために使用されます。
4	Redirecting これは、要求されたURLが見つからない場合にユーザーを別のページにリダイレクトするURLリダイレクトメカニズムです。
5	Preventing and Retrying Transitions _transition.abort（）_および_transition.retry（）_メソッドを使用して、ルートの移行中にそれぞれ移行を中止および再試行できます。
6	Loading/Error Substates Emberルーターは、ルートの読み込みと、ルートの読み込み時に発生するエラーの情報を提供します。
7	Query Parameters クエリパラメータは、オプションのキーと値のペアとして表されるURLの「？」マークの右側に表示されます。
8	Asynchronous Routing Ember.jsルーターには、非同期ルーティングを使用して、アプリケーション内の複雑な非同期ロジックを処理する機能があります。

EmberJS-テンプレート

テンプレートを使用して、複数のページにわたって「標準レイアウト」を作成します。テンプレートを変更すると、そのテンプレートに基づいているページが自動的に変更されます。テンプレートは_標準化コントロール_を提供します。

以下の表は、テンプレートに関する詳細を示しています-

S.No.	Types & Description
1	Handlebars Basics Handlebarsテンプレートライブラリを使用すると、静的なHTMLおよび動的なコンテンツを含めることにより、リッチなユーザーインターフェイスを構築できます。
2	Built-in Helpers ヘルパーは、テンプレートに追加の機能を提供し、モデルおよびコンポーネントの生の値をユーザー向けの適切な形式に変更します。
3	Conditionals Ember.jsは、プログラムのフローを制御するのに役立つ2つの条件ステートメントを定義します。
4	Displaying List of Items _＃each_ヘルパーを使用して、配列内のアイテムのリストを表示できます。
5	Displaying Keys in an Object _＃each-in_ヘルパーを使用して、オブジェクトのキーを表示できます。
6	Links _ \ {\ {link-to}} _コンポーネントを使用して、ルートへのリンクを作成できます。
7	Actions HTML要素は、_ \ {\ {action}} _ヘルパーを使用してクリック可能にできます。
8	Input Helpers Ember.jsの_ \ {\ {input}} および \ {\ {textarea}} _ヘルパーを使用して、共通のフォームコントロールを作成できます。
9	Development Helpers HandlebarsとEmberのヘルパーを使用すると、テンプレートの開発が簡単になります。
10	Writing Helpers テンプレートに追加の機能を追加し、モデルおよびコンポーネントの生の値をユーザーに適した形式に変換できます。

EmberJS-コンポーネント

Ember.jsコンポーネントはW3C Webコンポーネント仕様を使用し、真のカプセル化UIウィジェットを提供します。 templates _、 shadow DOM 、 custom elements_の3つの主要な仕様が含まれています。コンポーネントは、プレーン文字列ではなくパス名を持ち、「components/」というプレフィックスが付いたdata-template-name内で宣言されます。

次の表は、アクションのアクションイベントを示しています-

S.No.	Action Events & Description
1	Defining a Component Ember.jsでコンポーネントを簡単に定義でき、各コンポーネントの名前にダッシュが必要です。
2	Component Lifecycle コンポーネントのライフサイクルは、コンポーネントのライフの特定の時間にコードを実行するためにいくつかのメソッドを使用します。
3	Passing Properties to a Component コンポーネントは、テンプレートスコープ内のプロパティに直接アクセスしません。したがって、コンポーネントの減速時にプロパティを宣言するだけです。
4	Wrapping Content in a Component テンプレートを使用して、コンポーネントでコンテンツをラップできます。
5	Customizing a Component’s Element JavaScriptで_Ember.Component_のサブクラスを使用して、属性、クラス名などのコンポーネントの要素をカスタマイズできます。
6	Using Block Params コンポーネントに渡されたプロパティは、ブロック式で結果を返すことができます。
7	Handling Events ダブルクリック、ホバリング、キー押下などのユーザーイベントは、イベントハンドラーで処理できます。これを行うには、コンポーネントのメソッドとしてイベント名を適用します。
8	Triggering Changes with Actions コンポーネントは、アクションを使用して変更をトリガーし、イベントと通信できます。

EmberJS-モデル

モデルは、Ember Dataの機能を拡張するクラスです。ユーザーがページを更新すると、ページのコンテンツはモデルで表される必要があります。 Ember.jsでは、すべてのルートにモデルが関連付けられています。このモデルは、アプリケーションのパフォーマンスを向上させるのに役立ちます。 Ember Dataはサーバーに保存されたデータを操作し、socket.ioやFirebaseやWebSocketsなどのストリーミングAPIでも簡単に動作します。

コアコンセプト

格納
モデル
記録
アダプタ
キャッシング

格納

ストアは、アプリケーションで使用可能なすべてのレコードの中央リポジトリおよびキャッシュです。ルートとコントローラーは、アプリケーションの保存データにアクセスできます。 DS.Storeは、オブジェクト全体でデータを共有するために自動的に作成されます。

import Ember from 'ember';

export default Ember.Route.extend ({
   model() {
      return this.store.find();
   }
});

モデル

モデルは、他のオブジェクトとの関係を指定するEmber Dataの機能を拡張するクラスです。ユーザーがページを更新すると、ページのコンテンツはモデルで表される必要があります。

import DS from 'ember-data';

export default DS.Model.extend ({
   owner: DS.attr(),
   city: DS.attr()
});

記録

レコードは、サーバーからロードされる情報を含むモデルのインスタンスであり、モデル_type_および_ID_によってレコードを識別できます。

//It finds the record of type 'person' and an 'ID' of 1
this.get('store').findRecord('person', 1);//=> { id: 1, name: 'steve-buscemi' }

アダプタ

アダプターは、要求されたレコードをEmberから特定のサーバーバックエンドへの適切な呼び出しに変換するオブジェクトです。たとえば、IDが1の人を検索する場合、EmberはHTTPを_/person/1_として使用してURLをロードします。

キャッシング

レコードはストアによって自動的にキャッシュされ、サーバーからレコードを2回目にロードするときに同じオブジェクトインスタンスを返します。これにより、アプリケーションのパフォーマンスが向上し、ユーザーにアプリケーションUIができるだけ速く表示されます。

次の表は、モデルに関する詳細を示しています-

S.No.	Model Ways & Description
1	Defining Models モデルは、Ember Dataの機能を拡張する単純なクラスです。
2	Finding Records Emberデータストアを使用してレコードを取得できます。
3	Creating and Deleting Records モデルのインスタンスでレコードを作成および削除できます。
4	Relationships Ember.jsは、モデルが互いにどのように関連するかを指定する関係タイプを提供します。
5	Pushing Records Into The Store アプリケーションからレコードを要求することなく、レコードをストアのキャッシュにプッシュできます。
6	Handling Metadata メタデータは、レコードを使用する代わりに、特定のモデルまたはタイプに使用されるデータです。
7	Customizing Adapters Ember.jsアダプターは、URL形式やREST APIヘッダーなど、データがバックエンドデータストアで保持される方法を指定します。

EmberJS-依存関係の管理

Emberは、NPMのpackage.jsonおよびBowerの_bower.json_で定義されている依存関係の管理にNPMとBowerを使用します。たとえば、Emberアプリの開発中にEmberによってインストールされないSASSをスタイルシートにインストールする必要がある場合があります。これを実現するには、_Ember Addons_を使用して再利用可能なライブラリを共有します。 CSSフレームワークまたはJavaScript datepickerの依存関係をインストールする場合は、Bowerパッケージマネージャーを使用します。

アドオン

_Ember CLI_は、次のコマンドを使用してEmberアドオンをインストールするために使用できます-

ember install ember-cli-sass

_ember install command_は、すべての依存関係をそれぞれの構成ファイルに保存します。

バウアー

これは、HTML、CSS、JavaScript、または画像ファイルのコンポーネントを管理するWeb用のパッケージマネージャーです。基本的に、すべてのパッケージを維持および監視し、新しい更新を検査します。構成ファイル_bower.json_を使用して、Ember CLIプロジェクトのルートに配置されたアプリケーションを追跡します。

次のコマンドを使用して、プロジェクトの依存関係をインストールできます-

bower install <dependencies> --save

資産

サードパーティのJavaScriptをプロジェクトの_vendor/_フォルダーに配置します。これらはアドオンパッケージまたはBowerパッケージとしては使用できず、robots.txt、faviconなどの独自のアセットを配置できます。プロジェクトの_public/_フォルダー内。 Emberアプリの開発中にEmberによってインストールされない依存関係は、マニフェストファイル_ember-cli-build.js_を使用して含める必要があります。

AMD JavaScriptモジュール

最初の引数としてアセットパスを指定し、2番目の引数としてモジュールとエクスポートのリストを指定できます。これらのアセットを_ember-cli-build.js_マニフェストファイルに含めることができます-

app.import('bower_components/ic-ajax/dist/named-amd/main.js', {
   exports: {
      'ic-ajax': [
         'default',
         'defineFixture',
         'lookupFixture',
         'raw',
         'request'
      ]
   }
});

環境固有の資産

オブジェクトを環境名である最初のパラメーターとして定義することにより、異なる環境で異なる資産を使用でき、オブジェクトの値はその環境の資産として使用する必要があります。 _ember-cli-build.js_マニフェストファイルでは、次のように含めることができます-

app.import ({
   development: 'bower_components/ember/ember.js',
   production:  'bower_components/ember/ember.prod.js'
});

その他の資産

すべてのアセットが_public/_フォルダーに配置されると、それらはdist/ディレクトリーにコピーされます。たとえば、_public/images/favicon.ico_フォルダーにあるファビコンをコピーすると、_dist/images/favicon.ico_ディレクトリーにコピーされます。サードパーティのアセットは、_vendor/_フォルダーに手動で追加するか、_import（）_オプションを介してBowerパッケージマネージャーを使用して追加できます。 _import（）_オプションを使用して追加されていないアセットは、最終ビルドには存在しません。

たとえば、アセットを_dist/_フォルダーにインポートする次のコード行を考えます。

app.import('bower_components/font-awesome/fonts/fontawesome-webfont.ttf');

上記のコード行は、_dist/font-awesome/fonts/fontawesomewebfont.ttf_にフォントファイルを作成します。以下に示すように、上記のファイルを別のパスに配置することもできます-

app.import('bower_components/font-awesome/fonts/fontawesome-webfont.ttf', {
   destDir: 'assets'
});

_dist/assets/fontawesome-webfont.ttf_にあるフォントファイルをコピーします。

EmberJS-アプリケーションの懸念

Emberアプリケーションは、アプリケーションの構築に役立つオブジェクトを宣言および構成する_Ember.Application_クラスを使用して拡張できます。

アプリケーションは、実行中に_Ember.ApplicationInstance_クラスを作成します。これは、その側面の管理に使用され、インスタンス化されたオブジェクトの所有者として機能します。つまり、_Ember.Application_クラスはアプリケーションを定義し、_Ember.ApplicationInstanceクラスはその状態を管理します。

次の表は、モデルの詳細を示しています-

S.No.	Model Ways & Description
1	Dependency Injection これは、1つのオブジェクトの依存関係を別のオブジェクトに提供するプロセスであり、Emberアプリケーションがオブジェクトとそれらの間の依存関係クラスを宣言およびインスタンス化するために使用します。
2	Initializers イニシャライザは、起動時にアプリケーションを構成するために使用されます。
3	Services サービスは、アプリケーションのさまざまな部分で利用できるEmberオブジェクトです。
4	The Run Loop これは、アプリケーションの内部コードの大部分が発生する領域です。

EmberJS-Ember.jsの構成

Ember.jsは、アプリケーションの環境を管理するために構成できます。 Ember.jsの構成には、次のトピックが含まれます-

S.No.

Configuring Ways & Description

1

Configuring App and Ember CLI

EmberアプリとCLIを構成して、アプリケーションの環境を管理できます。

2

Disabling Prototype Extensions and Specifying URL Type

プロトタイプの拡張機能を無効にするには、_EXTEND_PROTOTYPES_フラグをfalseに設定し、Emberルーターオプションを使用してURLタイプを指定します。

3

Embedding Applications and Feature Flags

ルート要素を変更することにより、既存のページにアプリケーションを埋め込むことができ、プロジェクトの構成に基づいて機能フラグを有効にできます。

EmberJS-エンバーインスペクター

Emberインスペクターは、Emberアプリケーションのデバッグに使用されるブラウザーアドオンです。 Emberインスペクターには、次のトピックが含まれています-

S.No.	Ember inspector Ways & Description
1	Installing the Inspector Emberインスペクターをインストールして、アプリケーションをデバッグできます。
2	Object Inspector Emberインスペクターを使用すると、Emberオブジェクトと対話できます。
3	The View Tree ビューツリーは、アプリケーションの現在の状態を提供します。
4	Inspecting Routes, Data Tab and Library Info インスペクターによって定義されたアプリケーションのルートのリストを見ることができ、データタブを使用してモデルタイプのリストを表示します。
5	Debugging Promises Emberインスペクターは、その状態に基づいて約束を提供します。
6	Inspecting Objects and Rendering Performance コンテナを使用してオブジェクトインスタンスを検査し、Render Performanceオプションを使用してアプリケーションのレンダリング時間を計算します。

EmberJS-便利なリソース

次のリソースには、EmberJSに関する追加情報が含まれています。これについての詳細な知識を得るためにそれらを使用してください。

EmberJSの便利なリンク

EmberJS Wiki-EmberJSのウィキペディアリファレンス。
EmberJS-EmberJS公式サイト。

EmberJSに関する便利な本

このページにサイトを登録するには、 contact @ finddevguides.com にメールを送信してください。

Emberjs-quick-guide

目次