ember.jsember.jsを使い始める


備考

この節では、ember.jsの概要と、開発者がember.jsを使用する理由について概要を説明します。

また、ember.js内の大きなテーマについても言及し、関連するトピックにリンクする必要があります。 ember.jsのドキュメントは新しくなっているので、それらの関連トピックの初期バージョンを作成する必要があります。

バージョン

最新リリース

バージョン発売日
2.14.0ベータ 2017-04-29
2.13.0 2017-04-29

インストールまたはセットアップ

Emberを使い始めるのは簡単です。 Emberプロジェクトは、コマンドライン作成ツールEmber CLIを使用して作成および管理されます。このツールは、

  • 最新のアプリケーション資産管理(連結、縮小、バージョン管理を含む)
  • コンポーネント、ルートなどの作成に役立つジェネレータ。
  • 既存のプロジェクトレイアウト。既存のEmberアプリケーションに簡単にアプローチできます。
  • BabelプロジェクトによるES2015 / ES6 JavaScriptのサポートこれには、このガイド全体で使用されているJavaScriptモジュールのサポートが含まれます
  • 完全なQUnitテストハーネス。
  • Ember Addonsの成長する生態系を消費する能力。

依存関係

Node.jsとnpm

Ember CLIはJavaScriptで構築され、 Node.jsランタイムを必要とします。また、 npmを介してフェッチされた依存関係も必要です。 npmはNode.jsでパッケージ化されているので、コンピュータにNode.jsがインストールされていれば、準備が整いました。

EmberにはNode.jsが0.12以上、npm 2.7以上が必要です。 Node.jsか正しいバージョンのどちらがあるかわからない場合は、コマンドラインでこれを実行してください:

node --version
npm --version

「コマンドが見つかりません」というエラーが表示されたり、ノードの古いバージョンが表示された場合:

npmの古いバージョンがある場合は、 npm install -g npm 実行します。

Git

EmberはGitに多くの依存関係を管理させる必要があります。 GitにはMac OS XとほとんどのLinuxディストリビューションが付属しています。 WindowsユーザはこのGitインストーラをダウンロードして実行できます。

ウォッチマン(オプション)

MacとLinuxでは、 Watchmanをインストールすることで、ファイルの視聴パフォーマンスを向上させることができます。

PhantomJS(オプション)

PhantomJSを使用してコマンドラインからテストを実行できます。ブラウザを開く必要はありません。 PhantomJSのダウンロード手順を参照してください

インストール

npmを使用してEmberをインストールします。

npm install -g ember-cli

インストールが成功したことを確認するには、次のコマンドを実行します。

ember -v

バージョン番号が表示されていれば、準備は整っています。

ローカルホストポートの割り当て(特に許可/可用性の問題、複数のemberサイトの同時実行)

場合によっては、1つまたは複数のポートを手動で割り当てるか、デフォルトを使用するかを選択すると便利です。そうすることで、ポートの可用性/権限の問題を解決したり、一度に複数のEmberインスタンスを実行したりすることができます。


ember-cliが使用可能なポートを識別して割り当てようとするには、次のようにします。

ember serve --port 0
 

emberヘルプ:「0を渡して、使用可能なポートを自動的に選択する」 (端末では、emberのヘルプを入力してください)。


複数のEmberサイトを同時に実行するには、それぞれ独自のサーバーとライブリロードポートが必要です。簡単なアプローチ:別々のターミナルウィンドウでは、各インスタンスに移動し、次のコマンドを使用して独自のポートで起動します。

ember serve --port 0 --live-reload-port 0
 

これらのいずれかのケースで可用性またはアクセス権に関するエラーが発生した場合は、ターミナルプロンプトで次のpythonスクリプトを入力して、使用可能なポートを特定します。

python -c 'import socket; s=socket.socket(); s.bind(("", 0)); print(s.getsockname()[1]); s.close()'
 

結果を使用して、使用可能になったポートを指定します。

ember serve --port <known_port_1> --live-reload-port <known_port_2>
 

アプリケーションの作成

Ember CLIでは、次の2つのオプションのいずれかを使用して新しいアプリを生成できます。

  1. フォルダを作成してember init を実行する(アプリケーション構造を生成し、gitを設定して最初のコミットを行う)
  2. ember new <app name> 実行します(指定された名前のフォルダを作成し、そこに入り、 ember init を実行しember init

生成プロセスが完了したら、次のコマンドを実行して、アプリケーションフォルダ内のライブリロードサーバを起動します。

ember server
 

またはember s 短いため。 * Ta-da、実行中のEmberアプリが登場しました! 公式文書

最初のテンプレートを作成する

ember generate コマンドを使用して新しいテンプレートを作成しましょう。

ember generate template application
 

ユーザーがアプリケーションにアクセスしているときは、 application テンプレートは常に画面に表示されます。選択したエディタで、 app/templates/application.hbs を開き、次のコードを追加します:

<h2>My first Ember application</h2>

{{outlet}}
 

これで、アプリケーションのウェルカムページに新しく追加されたテキストが表示されます。 Emberが新しいファイルを自動的に検出してページをリロードすることにも注意してください。きちんとした、そう?

アプリケーションを配備する

Emberアプリケーションをデプロイするには、emberビルドの出力をWebサーバーに転送するだけです。これは、 rsyncscp ような標準のUnixファイル転送ツールで行うことができます。また、簡単に導入できるサービスもあります。

ember build
scp -r dist/* myserver.com:/var/www/public/
 

通常は、 ember build --environment=production を使用します。これは、コードをプロダクション用に準備する(gzipおよびminifyコード)ためのものです。

JavaScriptプラグインを操作する方法

JavaScriptプラグインを使用するには4つの方法がありますが、

  1. Emberアドオン
  2. JavaScriptプラグインをグローバルにインポートする
  3. 名前付きAMDプラグインを使用する
  4. ember-browserify 経由で