Google I/O 2016でも多くのセッションが見られ、これからのサービス開発の効率を大きく変えるフレームワーク、Angular2の 5 Min Quickstartを翻訳してみました。本稿は説明を省き、ひたすらQuickStartに必要なファイルをコピー作業をしていただくための説明なし版です。ぜひ、5分間でのHello World(My First Angular 2 App)成功にチャレンジしましょう。

うまく動いたら振り返りのため、こちらの説明つきの翻訳の方も読んでいただければ幸いです。

私たちのQuickStartのゴールは非常に単純なTypeScriptのAngular 2アプリケーションをビルドし、実行することです。そして、本稿以外のチュートリアルなどのドキュメントに出てくるサンプル、それらは実際のアプリケーションでの基本となるようなものですが、本稿では、それらのための開発環境も確立していきます。

試してみよう!

実行可能な例を試してください。サンプルアプリをplunkerの中に読み込み、サンプルのメッセージを表示します。

アプリをビルドしよう！（目次）

*　前提条件: Node.jsをインストールします。

Step1:アプリのプロジェクトフォルダを作成し、パッケージの依存性を定義や特別なプロジェクト設定を行います。
Step2: アプリのAngularルートコンポーネントを作成します。
Step3: main.tsを追加し、Angularに対してrootコンポーネントを指定します。
Step4: アプリケーションをホストする、index.htmlを追加します。
Step5: アプリをビルドし、実行します。
アプリに幾らかの変更を加える。
ラップアップ

前提条件 Node.js

もし、まだインストールされていないなら、Node.js® と npm をインストールします。

　ターミナルやコンソールのウィンドウでnode -v とnpm -vコマンドを実行して、node v5.x.xとnpm　3.x.xであることを確認してください。古い/新しすぎるバージョンはエラーを起こします。

(筆者註：node最新版は6.xですのでnvmのインストールしたり、旧版をクリーンインストールするのが良さそうです。）

ソースコードのダウンロード

以下の説明の各ステップの代わりに、QuickStartのソースコードをgithubからダウンロードして手短に以下の手順を終わらせることもできます。

Step 1: プロジェクトの作成と設定

この手順では以下を扱います。

(a) プロジェクトのフォルダを作成する。
(b) パッケージ定義と設定ファイルを追加する。
(c) パッケージをインストールする。

(a) プロジェクトのフォルダを作成する。

> mkdir angular2-quickstart
> cd    angular2-quickstart

(b) パッケージ定義と設定ファイルを追加する。

以下のパッケージ定義ファイルと設定ファイルをプロジェクトのフォルダーへ追加します。

package.jsonはQuickStartアプリが依存するパッケージをリストし、幾つかの有用なスクリプトを定義します。詳細はNPM　パッケージ設定をご覧ください。

tsconfig.json はTypeScriptコンパイラの設定ファイルです。詳細はTypeScriptの設定をご覧ください。

typings.json はTypeScriptの定義ファイルです。詳細はTypeScriptの設定をご覧ください。

systemjs.config.jsはSystemJSの設定ファイルです。以下で議論されます。

package.json

{
  "name": "angular2-quickstart",
  "version": "1.0.0",
  "scripts": {
    "start": "tsc && concurrently \"npm run tsc:w\" \"npm run lite\" ",
    "lite": "lite-server",
    "postinstall": "typings install",
    "tsc": "tsc",
    "tsc:w": "tsc -w",
    "typings": "typings"
  },
  "license": "ISC",
  "dependencies": {
    "@angular/common":  "2.0.0-rc.1",
    "@angular/compiler":  "2.0.0-rc.1",
    "@angular/core":  "2.0.0-rc.1",
    "@angular/http":  "2.0.0-rc.1",
    "@angular/platform-browser":  "2.0.0-rc.1",
    "@angular/platform-browser-dynamic":  "2.0.0-rc.1",
    "@angular/router":  "2.0.0-rc.1",
    "@angular/router-deprecated":  "2.0.0-rc.1",
    "@angular/upgrade":  "2.0.0-rc.1",
    "systemjs": "0.19.27",
    "core-js": "^2.4.0",
    "reflect-metadata": "^0.1.3",
    "rxjs": "5.0.0-beta.6",
    "zone.js": "^0.6.12",
    "angular2-in-memory-web-api": "0.0.10",
    "bootstrap": "^3.3.6"
  },
  "devDependencies": {
    "concurrently": "^2.0.0",
    "lite-server": "^2.2.0",
    "typescript": "^1.8.10",
    "typings":"^1.0.4"
  }
}

tsconfig.json

{
  "compilerOptions": {
    "target": "es5",
    "module": "commonjs",
    "moduleResolution": "node",
    "sourceMap": true,
    "emitDecoratorMetadata": true,
    "experimentalDecorators": true,
    "removeComments": false,
    "noImplicitAny": false
  }
}

typings.json

{
  "globalDependencies": {
    "core-js": "registry:dt/core-js#0.0.0+20160317120654",
    "jasmine": "registry:dt/jasmine#2.2.0+20160505161446",
    "node": "registry:dt/node#4.0.0+20160509154515"
  }
}

systemjs.config.js

/**
 * System configuration for Angular 2 samples
 * Adjust as necessary for your application needs.
 */
(function(global) {
  // map tells the System loader where to look for things
  var map = {
    'app':                        'app', // 'dist',
    '@angular':                   'node_modules/@angular',
    'angular2-in-memory-web-api': 'node_modules/angular2-in-memory-web-api',
    'rxjs':                       'node_modules/rxjs'
  };
  // packages tells the System loader how to load when no filename and/or no extension
  var packages = {
    'app':                        { main: 'main.js',  defaultExtension: 'js' },
    'rxjs':                       { defaultExtension: 'js' },
    'angular2-in-memory-web-api': { defaultExtension: 'js' },
  };
  var ngPackageNames = [
    'common',
    'compiler',
    'core',
    'http',
    'platform-browser',
    'platform-browser-dynamic',
    'router',
    'router-deprecated',
    'upgrade',
  ];
  // Add package entries for angular packages
  ngPackageNames.forEach(function(pkgName) {
    packages['@angular/'+pkgName] = { main: pkgName + '.umd.js', defaultExtension: 'js' };
  });
  var config = {
    map: map,
    packages: packages
  }
  System.config(config);
})(this);

(c)パッケージをインストールする。

package.jsonでリストされたパッケージをnpmを使ってインストールします。以下のコマンドをターミナルウィンドウ（Windowsではコマンドウィンドウ）へ入力してください。

> npm install

私たちは準備ができました さあ、少しコードを書きましょう。

Step 2: 最初のAngularコンポーネント

それでは、私たちのアプリケーションが中に入るフォルダを作成します。そして、とっても簡単なAngularコンポーネントを作成しましょう。

アプリ用サブフォルダの作成
プロジェクトのルートディレクトリへサブフォルダを追加してください。

> mkdir app

コンポーネントファイルの作成
以下の内容でapp/app.component.tsファイルを（新しく追加されたフォルダの中へ）作成します。

app/app.component.ts


    import { Component } from '@angular/core';
    @Component({
      selector: 'my-app',
      template: '<h1>My First Angular 2 App</h1>'
    })
    export class AppComponent { }

Step 3: main.tsの追加

Angularにルートコンポーネントをロードさせましょう。以下の内容でapp/main.tsファイルを作成してください。

app/main.ts


    import { bootstrap }    from '@angular/platform-browser-dynamic';
    import { AppComponent } from './app.component';
    bootstrap(AppComponent);

Step 4: index.htmlを追加する。

プロジェクトのルートフォルダーにindex.htmlファイルを作成し、以下の内容をペーストしてください。

index.html


    <html>
      <head>
        <title>Angular 2 QuickStart</title>
        <meta charset="UTF-8">
        <meta name="viewport" content="width=device-width, initial-scale=1">
        <link rel="stylesheet" href="styles.css">
        <!-- 1. Load libraries -->
         <!-- Polyfill(s) for older browsers -->
        <script src="node_modules/core-js/client/shim.min.js"></script>
        <script src="node_modules/zone.js/dist/zone.js"></script>
        <script src="node_modules/reflect-metadata/Reflect.js"></script>
        <script src="node_modules/systemjs/dist/system.src.js"></script>
        <!-- 2. Configure SystemJS -->
        <script src="systemjs.config.js"></script>
        <script>
          System.import('app').catch(function(err){ console.error(err); });
        </script>
      </head>
      <!-- 3. Display the application -->
      <body>
        <my-app>Loading...</my-app>
      </body>
    </html>

スタイルの追加

スタイルは必須ではありませんが、良いものです。index.htmlにもstyles.cssと呼ばれるスタイルシートを準備しましょう。

styles.cssファイルをプロジェクトのルートフォルダに作成します。それではスタイリングを始めましょう。ひょっとした、スタイルは以下のような最小限のものから始めるのが良いかもしれません。サンプルの文書で使われているフルセットのマスタースタイルのためには、styles.cssをご参照ください。

styles.css(excerpt)



h1 {
  color: #369;
  font-family: Arial, Helvetica, sans-serif;
  font-size: 250%;
}
body {
  margin: 2em;
}

 /*
  * See https://github.com/angular/angular.io/blob/master/public/docs/_examples/styles.css
  * for the full set of master styles used by the documentation samples
  */

Step 5: アプリのビルドと実行!

ターミナルウィンドウを開いて、こちらのコマンドを入力してください。


> npm start

このコマンドは二つの並行してnodeプロセスを実行します。

TypeScriptコンパイラを監視モードで実行
lite-serverと呼ばれる静的サーバー　ブラウザでindex.htmlをロードし、アプリケーションファイルが更新された時にリフレッシュします。

しばらく経つと、ブラウザタブが開き、QuickStartアプリの出力が表示されるでしょう。

Great job!

変更を加える

メッセージを"My SECOND Angular 2 app"へ変更してみましょう。

TypeScriptとlite-serverは監視しています。変更を検知し、TypeScriptをJavaScriptへ再コンパイルし、ブラウザを更新し、新しいメッセージを表示します。アプリケーションを開発する気の利いた方法ですね！

コンパイラとサーバーの利用が終わったら、ターミナルウィンドウを閉じてください。

ラップアップ

私たちのプロジェクトのフォルダ構成は以下のようになります。

angular2-quickstart
	+app
		+app.component.ts
		+main.ts
	+node_modules ...
	+typings ...
	+index.html
	+package.json
	+styles.css
	+systemjs.config.js
	+tsconfig.json
	+typings.json

以下がファイルの内容です。(筆者註：要するに以下のファイルをコピーしてファイルを揃えましょう！)

app/component.ts

    import { Component } from '@angular/core';
    @Component({
      selector: 'my-app',
      template: '<h1>My First Angular 2 App</h1>'
    })
    export class AppComponent { }

app/main.ts

import { bootstrap }    from '@angular/platform-browser-dynamic';
import { AppComponent } from './app.component';
bootstrap(AppComponent);

index.html

<html>
  <head>
    <title>Angular 2 QuickStart</title>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <link rel="stylesheet" href="styles.css">
    <!-- 1. Load libraries -->
     <!-- Polyfill(s) for older browsers -->
    <script src="node_modules/core-js/client/shim.min.js"></script>
    <script src="node_modules/zone.js/dist/zone.js"></script>
    <script src="node_modules/reflect-metadata/Reflect.js"></script>
    <script src="node_modules/systemjs/dist/system.src.js"></script>
    <!-- 2. Configure SystemJS -->
    <script src="systemjs.config.js"></script>
    <script>
      System.import('app').catch(function(err){ console.error(err); });
    </script>
  </head>
  <!-- 3. Display the application -->
  <body>
    <my-app>Loading...</my-app>
  </body>
</html>

package.json

{
  "name": "angular2-quickstart",
  "version": "1.0.0",
  "scripts": {
    "start": "tsc && concurrently \"npm run tsc:w\" \"npm run lite\" ",
    "lite": "lite-server",
    "postinstall": "typings install",
    "tsc": "tsc",
    "tsc:w": "tsc -w",
    "typings": "typings"
  },
  "license": "ISC",
  "dependencies": {
    "@angular/common":  "2.0.0-rc.1",
    "@angular/compiler":  "2.0.0-rc.1",
    "@angular/core":  "2.0.0-rc.1",
    "@angular/http":  "2.0.0-rc.1",
    "@angular/platform-browser":  "2.0.0-rc.1",
    "@angular/platform-browser-dynamic":  "2.0.0-rc.1",
    "@angular/router":  "2.0.0-rc.1",
    "@angular/router-deprecated":  "2.0.0-rc.1",
    "@angular/upgrade":  "2.0.0-rc.1",
    "systemjs": "0.19.27",
    "core-js": "^2.4.0",
    "reflect-metadata": "^0.1.3",
    "rxjs": "5.0.0-beta.6",
    "zone.js": "^0.6.12",
    "angular2-in-memory-web-api": "0.0.10",
    "bootstrap": "^3.3.6"
  },
  "devDependencies": {
    "concurrently": "^2.0.0",
    "lite-server": "^2.2.0",
    "typescript": "^1.8.10",
    "typings":"^1.0.4"
  }
}

tsconfig.json

{
  "compilerOptions": {
    "target": "es5",
    "module": "commonjs",
    "moduleResolution": "node",
    "sourceMap": true,
    "emitDecoratorMetadata": true,
    "experimentalDecorators": true,
    "removeComments": false,
    "noImplicitAny": false
  }
}

typings.json

{
  "globalDependencies": {
    "core-js": "registry:dt/core-js#0.0.0+20160317120654",
    "jasmine": "registry:dt/jasmine#2.2.0+20160505161446",
    "node": "registry:dt/node#4.0.0+20160509154515"
  }
}

style.css

h1 {
  color: #369;
  font-family: Arial, Helvetica, sans-serif;
  font-size: 250%;
}
body {
  margin: 2em;
}
 /*
  * See https://github.com/angular/angular.io/blob/master/public/docs/_examples/styles.css
  * for the full set of master styles used by the documentation samples
  */

system.config.js

/**
 * System configuration for Angular 2 samples
 * Adjust as necessary for your application needs.
 */
(function(global) {
  // map tells the System loader where to look for things
  var map = {
    'app':                        'app', // 'dist',
    '@angular':                   'node_modules/@angular',
    'angular2-in-memory-web-api': 'node_modules/angular2-in-memory-web-api',
    'rxjs':                       'node_modules/rxjs'
  };
  // packages tells the System loader how to load when no filename and/or no extension
  var packages = {
    'app':                        { main: 'main.js',  defaultExtension: 'js' },
    'rxjs':                       { defaultExtension: 'js' },
    'angular2-in-memory-web-api': { defaultExtension: 'js' },
  };
  var ngPackageNames = [
    'common',
    'compiler',
    'core',
    'http',
    'platform-browser',
    'platform-browser-dynamic',
    'router',
    'router-deprecated',
    'upgrade',
  ];
  // Add package entries for angular packages
  ngPackageNames.forEach(function(pkgName) {
    packages['@angular/'+pkgName] = { main: pkgName + '.umd.js', defaultExtension: 'js' };
  });
  var config = {
    map: map,
    packages: packages
  }
  System.config(config);
})(this);

次は?

私たちの最初のアプリケーションは多くのことをしません。基本的にAngular 2の"Hello World"です。

最初のアプリを簡単に保ちました。小さなAngularコンポーネントを作成し、簡単なindex.htmlを作り、静的ファイルサーバーで起動しました。それが、私たちが"Hello World"アプリに期待するすべてのことです。

私たちにはもっと大きな野望があります！

良いお知らせは、これでセットアップのオーバーヘッドはほとんどなくなったということです。package.jsonを触ってライブラリ更新したり、index.htmlへ必要なライブラリやcssスタイルシートを追加しましょう。

私たち次のステップにいける段階になりました。次のステップは、より大きなアプリケーションをAngular2を使って構築できることを示すような、小さなアプリケーションを作ってみることです。

Tour of Herosチュートリアルをやってみましょう！

Powered by Google ©2010-2016. Code licensed under an MIT-style License. Documentation licensed under CC BY 4.0.