これは5 MIN QUICKSTART for Dartの日本語訳だよ。
Angular2とDartがはじめての人のために5分のクイックスタートをやるよ。
Githubに実際のファイルを用意したから参考にしてよ。
JavaScriptでやりたい人はこっち、
TypeScriptでやりたい人はこっちを見るといいよ。
はじめるよ。
ゼロからDartで作る簡単なAngular2アプリケーション制作を始めようよ。
え、もしかしてDartやりたくないの？
僕たちはDartで始めようとしているけど、Angular 2 アプリはTypeScriptやJavaScriptでも書くことができるよ。バナーのコンボボックスから他の言語を選択してみてよ。
これからやることはすでにDart SDKと君がDartで使用したい任意のツールを持ってることが前提の話だよ。
もしお気に入りのエディタが無かったら、WebStormを試してみてよ。Dartのプラグインが付属してるよ。
あと、他のIDEやエディタのDartプラグインをダウンロードできるよ。Dart SDKや他のツールの用意ができたら、ここに戻ってきてよ。
新しくアプリディレクトリをセットアップするよ。
新しいディレクトリを作って、pubspec.yaml をその中に配置するよ。
> mkdir angular2_getting_started
> cd angular2_getting_started
> vim pubspec.yaml # 好きなエディタを使ってよ！
pubspec.yaml では、Angular2、ブラウザパッケージの依存関係とか、トランスフォーマーを指定するよ。
Angular2は急速に変わっちゃうから、正確なバージョンの2.0.0-alpha.45で進めるよ。
name: angular2-getting-started
version: 0.0.1
dependencies:
angular2: 2.0.0-alpha.45
browser: ^0.10.0
transformers:
- angular2:
entry_points: web/main.dart
同じディレクトリに web ディレクトリを作って、pub get を実行してAngular2とブラウザパッケージを（依存パッケージも一緒に）インストールするよ。
> mkdir web
> pub get
Resolving dependencies...
Dartファイルを作るよ。
web の下に main.dart を作成するよ。
> vim web/main.dart # 好きなエディタを使ってよ！
web/main.dart に次のコードを貼り付けてよ。
import 'package:angular2/angular2.dart';
import 'package:angular2/bootstrap.dart';
@Component(selector: 'my-app', template: '<h1>My First Angular 2 App</h1>')
class AppComponent {}
main() {
bootstrap(AppComponent);
}
ここではAngular2コンポーネントを定義していて、最も重要なAngular 2の特徴の1つだよ。
コンポーネントっていうのは、アプリケーションのViewを作成して、アプリケーションのロジックをサポートするための方法なんだ。
このコンポーネントは、AppComponent っていう名前の、空で何もしないクラスだよ。
アプリケーションを構築する準備ができたら、後でそれにプロパティとアプリケーションロジックを追加できるよ。
クラスの上のは @Component アノテーションで、Angularにこのクラスはコンポーネントだって伝えるんだよ。
@Component コンストラクタの呼び出しは、2つのパラメータ、selector と template があるよ。
selector には my-app って名前のホストHTML要素のCSSセレクタを指定するよ。
Angularは my-app 要素をみつけると、 AppComponent インスタンスを作成して表示するよ。
template フィールドは、ビューを描画する方法をAngularに伝える、コンポーネントの密接なテンプレートだよ。
この場合、テンプレートは “My First Angular App” をHTMLの一行目にアナウンスするよ。
main() 関数はAngularの bootstrap() メソッドを呼び出して、アプリケーションルートで AppComponent を使ってアプリケーションが起動したことをAngularに伝えるんだよ。
いつかぼくたちのアプリケーションは、このルートからツリー状に発生する複数のコンポーネントから構成されることを推測するのが正しいんだよ。
始めの行では2つのライブラリをインポートしてるよ。Angular APIを使用する全てのDartファイルは angular2.dart をインポートするよ。
bootstrap.dartをインポートしたファイルだけ、 boostrap() を呼び出すよ。
HTMLファイルを作るよ。
次のコードを含めた web/index.html を作成するよ。
<!DOCTYPE html>
<html>
<head>
<title>Getting Started</title>
<script async src="main.dart" type="application/dart"></script>
<script async src="packages/browser/dart.js"></script>
</head>
<body>
<my-app>Loading...</my-app>
</body>
</html>
<body> の中の <my-app> タグはDartファイルの中で定義されたカスタムHTML要素だよ。
アプリを実行するよ。
アプリを実行するためのいくつかのオプションがあるよ。
1つはローカルHTTPサーバーを起動して、Dartiumにアプリを表示することだよ。
こういうWebStormのサーバーやPythonのSimpleHTTPServerとか、好きなサーバーを使うことができるよ。
もう一つのオプションは pub serve を使ってビルドと提供して、モダンブラウザでhttp://localhost:8080にアクセスするんだ。
最初にページにアクセスした時にちょっと時間がかかることがあるけど、Pub serveはJavaScriptをオンザフライで生成するんだよ。
アプリが起動したら、ブラウザに「My First Angular 2 App」って表示されるはずだよ。
もし表示されなかったら、正しく全てのコードを入力して、pub get を実行して確認してよ。
JavaScriptを生成するよ。
君のアプリをデプロイする前に、JavaScriptファイルを生成する必要があるよ。
Pub buildはそれが簡単になるよ。アプリのパフォーマンスを改善するために、直接生成するJavaScriptが含まれるようにHTMLファイルを変換するよ。
そのための方法の1つが dart_to_js_script_rewriter だよ。
pubspecの dependencies と transformers セクションにdart_to_js_script_rewriter パッケージを追加するよ。
name: angular2-getting-started
version: 0.0.1
dependencies:
angular2: 2.0.0-alpha.45
browser: ^0.10.0
dart_to_js_script_rewriter: ^0.1.0
transformers:
- angular2:
entry_points: web/main.dart
- dart_to_js_script_rewriter
その後、pub build を使ってDartコードをJavaScriptにコンパイルするよ。
> pub build
Loading source assets...
生成されたJavaScriptは、サポートファイルと一緒に build ディレクトリの下に入るよ。
AngularアプリのJavaScriptを生成した時に、Angularのトランスフォーマーを使うようになるよ。
それは君のコードを解析して、静的なコードへ反射的に変換して、Dartのビルドツールが速くて小さいJavaScriptにコンパイルすることができるんだよ。
pubspec.yaml で強調表示された行はAngularトランスフォーマーを構成するよ。
name: angular2-getting-started
version: 0.0.1
dependencies:
angular2: 2.0.0-alpha.45
browser: ^0.10.0
dart_to_js_script_rewriter: ^0.1.0
transformers:
- angular2:
entry_points: web/main.dart
- dart_to_js_script_rewriter
entry_points は main() 関数があるDartファイルを識別するよ。
もっと詳しい情報はAngular transformer wiki pageを見てよ。
パフォーマンス、トランスフォーマー、それとAngular2ライブラリ
bootstrap.dartをインポートしてJavaScriptにコンパイルしたときに、パフォーマンスの問題が発生したリフレクションライブラリはdart:mirrorsを取得するよ。
心配しないでよ。ミラーを使わないようにAngularトランスフォーマーがエントリーポイント（pobspec.yamlのentry_points）に変換するよ。
いいね！次は…
Angular2をDartで続けるために、デベロッパーガイドに従ってよ。
もしくは、AngularかDartについて詳しく読んでみてよ。