Jump to the content

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

Angular2

    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について詳しく読んでみてよ。

    注目記事

    最近の記事

    ぼくが書いてます

    フロントエンドエンジニア

    イソップ

    ページの先頭に戻る

    Search results

    ×