Angular2 for Dart – 5 MIN QUICKSTARTの日本語訳だよ。

Angular2 for Dart – 5 MIN QUICKSTARTの日本語訳だよ。

これは5 MIN QUICKSTART for Dartの日本語訳だよ。
Angular2とDartがはじめての人のために5分のクイックスタートをやるよ。

Angular2 for TypeScript

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つのパラメータ、selectortemplate があるよ。

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の dependenciestransformers セクションに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_pointsmain() 関数があるDartファイルを識別するよ。
もっと詳しい情報はAngular transformer wiki pageを見てよ。

パフォーマンス、トランスフォーマー、それとAngular2ライブラリ

bootstrap.dart をインポートしてJavaScriptにコンパイルしたときに、パフォーマンスの問題が発生したリフレクションライブラリは dart:mirrors を取得するよ。
心配しないでよ。ミラーを使わないようにAngularトランスフォーマーがエントリーポイント(pobspec.yamlentry_points)に変換するよ。

いいね!次は…

Angular2をDartで続けるために、デベロッパーガイドに従ってよ。

もしくは、AngularかDartについて詳しく読んでみてよ。

五十川 洋平(Yohei Isokawa)

五十川 洋平(Yohei Isokawa)

フロントエンドエンジニア/面白法人カヤックなどのWeb制作会社に勤務したのち、故郷の新潟に戻り独立。JSフレームワークAngularやFirebase、Google Cloud Platformを使ったWebアプリ開発が得意。 また、Udemyのプログラミング解説の講師、writer.appの自主開発や上越TechMeetupの主催などを行っています。

プロフィール

©Copyright 2022 Yohei Isokawa All Rights Reserved.