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

五十川 洋平（Yohei Isokawa）
【更新】
Angular2 for TypeScript – 5 MIN QUICKSTARTの日本語訳だよ。

この記事は内容が古くなっています。最新の内容は、【最新版】Angular2 QUICKSTART for Typescript の日本語訳を参照してください。

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

Angular2 for TypeScript

Githubに実際のファイルを用意したから参考にしてよ。
JavaScriptでやりたい人はこっち、
Dartでやりたい人はこっちを見るといいよ。

はじめるよ。

ゼロからTypeScriptで作る簡単なAngular2アプリケーション制作を始めようよ。

え、もしかしてTypeScriptやりたくないの？
僕たちはTypeScriptで始めようとしているけど、バナーのコンボボックスから他の言語を選択すれば、Angular 2 アプリケーションはJavaScriptやDartでも書くことができるんだよ。

これ、最短で最速だよ。

早くできるようにAngular2の画面に何かを配置するよ。

ぼくたちは君の開発マシン上で実行する手順を説明しようとしてるけど、plunkerとかのインタラクティブなオンラインコーディング環境で同じ手順を踏むことができるよ。
そこならアプリケーションを実行するための静的なサーバーをインストールする必要が無いよ。

もし君が参考にするのが好きなら、後で自分のマシン上でこの練習を繰り返せるんじゃないかな。

こんな感じでぼくたちのアプリケーションを入れる新しいフォルダを作るよ。

mkdir angular2-quickstart
cd    angular2-quickstart

はじめてのAngularコンポーネントだよ。

新しくapp.tsを追加して次のコードを貼り付けてよ。

import {bootstrap, Component} from 'angular2/angular2';

@Component({
    selector: 'my-app',
    template: '<h1>My First Angular 2 App</h1>'
})

class AppComponent { }

bootstrap(AppComponent);

ここではAngular2コンポーネントを定義していて、最も重要なAngular 2の特徴の1つだよ。
コンポーネントっていうのは、アプリケーションのViewを作成するのと、それらのアプリケーションロジックをサポートするんだ。

ぼくたちのは AppComponent っていう名前の、空で何もしないクラスだよ。
ぼくたちは実質的なアプリケーションを構築する準備ができたら、これはプロパティとアプリケーションロジックを拡大するよ。

クラスの上の @Component デコレーションを参照してよ。

メソッド名の前の@は、デコレーションとしてコンポーネントを識別するよ。
「デコレーション（装飾）」というのは、クラスのメタデータを作成するためのTypeScriptの言語機能のことだよ。
AngularはトランスパイルしたJavaScriptでこのメタデータを検出して、適切に応答するんだよ。

@Component はこのクラスがAngularコンポーネントであることをAngularに伝えるよ。
@Component メソッドに渡された設定オブジェクトには2つのフィールド、selector と templateがあるよ。

selector には my-app って名前のホストHTML要素のCSSセレクタを指定するよ。
Angularは my-app 要素をみつけると、 AppComponent インスタンスを作成して表示するよ。

template フィールドは、ビューを描画する方法をAngularに伝える、コンポーネントの密接なテンプレートだよ。
ぼくたちのテンプレートは、”My First Angular App” をHTMLの一行目にアナウンスするよ。

bootstrap メソッドはアプリケーションルートに、このコンポーネントを使用してアプリケーションを起動するようにAngularに指示するよ。
いつかぼくたちのアプリケーションは、このルートからツリー状に発生する複数のコンポーネントから構成されることを推測するのが正しいんだよ。

一番上の行ではAngular2ライブラリからコンポーネントとブートストラップのシンボルをインポートしたんだよ。
それはぼくたちが今やるべき方法なんだ。ぼくたちは、もうぼくたちのコードやグローバル名前空間内の任意のライブラリのコードを見つけることを期待しないんだよ。
名前のファイルとライブラリのリソースから、ぼくたちはそれを必要とする様に必要な物をインポートするんだよ。

index.html を追加するよ

index.html ファイルを作るよ。

その中に次のコードを貼り付けてよ…ぼくがそれを説明してあげるよ。

<html>

  <head>
    <title>Angular 2 QuickStart</title>
    <script src="https://code.angularjs.org/tools/system.js"></script>
    <script src="https://code.angularjs.org/tools/typescript.js"></script>
    <script src="https://code.angularjs.org/2.0.0-alpha.44/angular2.dev.js"></script>
    <script>
      System.config({
        transpiler: 'typescript',
        typescriptOptions: { emitDecoratorMetadata: true }
      });
      System.import('./app.ts');
    </script>
  </head>

  <body>
    <my-app>loading...</my-app>
  </body>

</html>

じゃ、3つの注目すべきHTMLセクションを参照するよ。

  1. JavaScriptライブラリをウェブから読み込むよ。あんまり考えずに見ていこうよ。
  2. ぼくたちは System ってものを設定して、さっきちょうど書いた AppComponent とアプリケーションファイルをインポートすることをそいつにお願いするんだよ。
    System はモジュールローダー（system.js ライブラリに入ってるよ）だよ。コードを インポート できるんだよ。ぼくたちの AppComponent で import 文を覚えてる？
    あと、ぼくたちのTypeScriptのソースコードをJavaScriptに「トランスパイル（別名コンパイル）」するのに system.js が必要なんだ…ブラウザの中でね。
  3. <body> の中の <my-app> タグに注意するんだよ。それはぼくたちの AppComponent クラスを飾る @Component デコレーションで識別されたカスタムHTML要素なんだよ。

実行するよ！

ブラウザにぼくたちのアプリケーションを提供するために、静的なファイルサーバーが必要なんだよ。

あ、便利な静的ファイルサーバーを持ってなかった？*npmパッケージマネージャーでお気に入りの1つのlive-serverをインストールしてみようよ。

あ、npmも持ってない？このドキュメント全体で繰り返し使うからすぐ入手しておいてよ。

npm をインストールした後は、ターミナルを開いて次のコマンドを入力するよ。

npm install -g live-server

ターミナルを開いてコマンドを入力するよ。

live-server

少し待ってるとブラウザのタブが開いて表示されるよ。

"My First Angular 2 App" が表示されたよ。

おめでとう！準備が整ったよ。

もし Loading... が表示されていたら、ES6対応のおまけをみてみてよ。

これの何がいけないのかな？

ぼくたちはかなりの時間急いでいたんだってことをAngularから探ることが出来るよ。

多くの理由から、これはアプリケーションを構築する良い方法じゃないんだよ。

  • ファイル数がいくつかを超えた時に、ブラウザでTypeScriptをトランスパイルのはうんざりするほど遅くなるんだ。
    本番では確かにそれをすることはないんだよね。ぼくたちはローカルでコンパイルして、サーバーに生成されたJavaScriptをプッシュすることを学ぶ必要があるんだよ。
    そのためにはいくつかのツールが必要になるよ。
  • JavaScriptライブラリをウェブからダウンロードするのはデモではいいけど、でもそれじゃ開発が遅くなるんだよ。
    ぼくたちのアプリをリロードするたびに、ライブラリをまた取得しなきゃいけないんだ。
    ブラウザのキャッシュを頼りにしちゃいけないよ。ぼくたちのデバッグとライブリロードの技術はブラウザのキャッシュを破綻させるんだよ。
    ウェブからライブラリを読み込むと、オフラインとか接続が悪い場合に利用できないんだよ。
    ぼくたちのマシンにライブラリをダウンロードしてローカルで提供するために学習しようよ。
  • 開発サイクルを可能な限り迅速にロスが無いようにしたいんだよ。コードを変更すると、僕たちはすぐにブラウザで結果が見たいんだ。
    そのためのツールと手順があるよ。

もっとよくするよ。

もっといい基礎を取り入れていくつかのステップをやってみようよ。

  1. これからの為にアプリケーションのプロジェクト構造を見直すよ。
  2. いくつかのツールやパッケージをインストールするよ。
  3. index.html ではローカルのライブラリを使うように修正するよ。
  4. TypeScriptをローカルでコンパイルして、ファイルの変更を監視するよ。

ターミナルで実行されている live-server を停止(Ctrl-C)して次に進むよ。

アプリケーションのプロジェクト構造を見直すよ。

今は「angular2-quickstart」ルートフォルダに全部つっこんでるよ。
2つのファイルだけなら悪くないよ。アプリケーションの進化には良くないんだ。

プロジェクトに小さな構造を増やしてみるよ。

サブフォルダを追加するよ。 src はプロジェクトのソースコードとサブのサブフォルダを持つためだよ。 src/app はアプリケーションのソースコードを入れるよ。

OS/XとLinuxは

mkdir -p src/app

Windowsは

mkdir src\app

index.html を src フォルダに移動してよ。

app.ts を src/app フォルダに移動してよ。

プロジェクトフォルダはこんな感じだよ。

angular2-quickstart
└── src
    ├── app
    │   └── app.ts
    └── index.html

ローカルにnpmパッケージをインストールするよ。

index.html の中の、ウェブベースのスクリプトをローカル上のスクリプトで置き換えるよ。
ぼくたちのプロジェクトに2ランタイムnpm パッケージをインストールすることで、それらのスクリプトを取得するよ。

  • angular2 – Angular 2 ライブラリだよ。
  • systemjs – モジュールの読み込みを提供する、オープンソースライブラリだよ。

また、2つの開発ツールをインストールするよ。

  • typescript – TypeScriptのコンパイラだよ。
  • live-server ファイルを変更するとブラウザをリロードしてくれる静的なファイルサーバーだよ。
    TODO

アプリケーションのルートフォルダでターミナルを開いてよ。

これらのコマンドを入力してよ。

npm init -y
npm i angular2@2.0.0-alpha.44 systemjs@0.19.2 --save --save-exact
npm i typescript live-server --save-dev

これらのコマンドは、パッケージをインストールしてnpmの package.json を作成 、将来アプリケーションを開発、維持するのに役立ちます。
ぼくたちの package.json は次のようになるよ。

{
  "name": "angular2-getting-started",
  "version": "1.0.0",
  "dependencies": {
    "angular2": "2.0.0-alpha.44",
    "systemjs": "0.19.2"
  },
  "devDependencies": {
    "live-server": "^0.8.1",
    "typescript": "^1.6.2"
  }
}

scripts セクションもあるよ。次のように変更してよ。

{
  "scripts": {
    "tsc": "tsc -p src -w",
    "start": "live-server --open=src"
  }
}

すぐ実行するよ。スクリプトコマンドでプロジェクトの世界を拡張したんだよ。

index.html を更新するよ。

ライブラリのスクリプトセクションの参照を、インストールしたパッケージに置き換えるよ。

<script src="../node_modules/systemjs/dist/system.src.js"></script>
<script src="../node_modules/angular2/bundles/angular2.dev.js"></script>

次のように System の設定を更新するよ。

<script>
  System.config({
    packages: {'app': {defaultExtension: 'js'}}
  });
  System.import('app/app');
</script>

もうブラウザでTypeScriptをトランスパイルすることはないよ。マシン上で生成されたJavaScriptファイルをサーバーに送るんだ。

ぼくたちはデフォルトで .js 拡張子を持つJavaScriptファイルが期待されるように system.js を再設定するんだよ。
いつかぼくたちは foo.ts ファイルにアプリケーションの Foo クラスを追加して、インポートすることがあるよ。

import {Foo} from './app/foo'

system.js はsrc/app の中のファイル名 foo.js って解釈するんだ。

それはまさに最後の行でやってることなんだよ。
src/app フォルダ（これは移動したよ。覚えてる？）の中のメインアプリケーションファイル app (正確にはapp.js) をインポートしてるんだよ。

これが最終版になるよ。

<html>

  <head>
    <title>Angular 2 QuickStart</title>
    <script src="../node_modules/systemjs/dist/system.src.js"></script>
    <script src="../node_modules/angular2/bundles/angular2.dev.js"></script>
    <script>
      System.config({
        packages: {'app': {defaultExtension: 'js'}}
      });
      System.import('app/app');
    </script>
  </head>

  <body>
    <my-app>Loading...</my-app>
  </body>

</html>

TypeScriptのコンパイルの準備をするよ。

TypeScriptの設定ファイルを追加するよ。

tsconfig.json って名前の設定ファイルを追加するよ。TypeScriptのコードが解釈する方法と、TypeScriptのコンパイルコマンドをシンプルにして、早く実行するんだよ。

src フォルダに tsconfig.json ファイルを作って次の内容に変更してよ。

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

この詳細はTypeScript設定のおまけを参照してよ。

最終的な構造だよ。

最終的なプロジェクトの構造は次のようになるよ。

angular2-quickstart
├── node_modules
├── src
│    ├── app
|    │    └── app.ts
│    ├── index.html
│    └── tsconfig.json
└── package.json

TypeScriptをJavaScriptにコンパイルするよ。

もうブラウザではTypeScriptからJavascriptにはコンパイルしないよ。代わりにTypeScript Compiler（TSC）をぼくたちのマシンで実行するんだよ。

アプリケーションのルートフォルダでターミナルを開いて次のコマンドを入力してよ。

npm run tsc

コンパイルが終わると、srcフォルダに生成されたapp.jsファイルと、デバッガがJavaScriptとTypeScriptを行き来するのに役立つapp.map.jsファイルを見つけることができるよ。
このスクリプトは、コンパイラの監視オプション（-w）を設定すると、そのコマンドを終えてもコンパイラは起動し続けるんだ。
それはぼくたちの .ts ファイルの変更を監視して、自動的に再コンパイルするんだよ。

ターミナルで実行してこのコマンドを残すよ。 Ctrl-C でいつでも止められるよ。

アプリを実行するよ！

もうアプリを見ることができるよ。

別のターミナルウィンドウを開いて、アプリケーションのルートフォルダでこの npm スクリプトコマンドを実行して、また live-server を起動するよ。

npm start

live-server はブラウザを読み込むとHTMLとJavaScriptファイルを提供して、もう一度アプリケーションのメッセージを表示するんだよ。

"My First Angular 2 App" が表示されたよ。

なにか変更してみてよ。

live-server はファイルの変更を検出して自動的にブラウザのページをリフレッシュするよ。

メッセージを”My SECOND Angular 2 app”に変更してみてよ。

TypeScriptコンパイラは最初のターミナルでソースコードを監視してるんだよ。
これは、再コンパイルして修正された app.js を生成するよ。
live-server はその変更を見てブラウザをリロードするよ。

ターミナルの画面でlive-serverを実行したまま続けてよ。
Ctrl-C でいつでも止めることができるよ。

何をしたのかな？

最初のアプリケーションは大したことをしてないよ。
Angular 2での一般的な「Hello, World」だよ。

最初はシンプルに保ったよ。index.html にJavaScriptライブラリを追加して、静的なファイルサーバーを起動して、少しAngularコンポーネントを書いたんだよ。
「Hello, World」アプリのためにやることを期待したいよ。

ぼくたちはおっきな野望があるんだよ。

ぼくたちは「Hello, World」を構築することを、Angularには求めてないよ。
洗練された要件を持つ高度なアプリケーションの構築を支援することを求めてるんだよ。

だから、ぼくたちのおっきな目標を達成するためにいくつかの戦略的な技術投資をしたんだ。

  • ぼくたちのアプリケーションの読み込みを早くするためにローカルにライブラリをインストールしたんだよ。希望ならオフラインでも開発ができるよ。
  • TypeScriptを事前にコンパイルしているよ。
  • 変更を行うと即座にフィードバックを与えるコマンドで、コンパイラとlive-serverを実行しているよ。

良いニュースとして、セットアップのオーバーヘッドが（主に）ぼくたちの後ろにあるってことなんだよ。
2つの小さいアプリケーションを作ることで、すごいものをAngular 2で作ることができるってことを実証したんだ。

おまけ：TypeScriptの設定だよ。

コンパイラに指示してJavaScriptファイルを生成するために、TypeScriptの設定ファイル（tsconfig.json）をプロジェクトに追加したよ。
公式のTypeScript wiki で tsconfig.json の詳細について知れるよ。

noImplicitAny フラグについて少し議論したいよ。TypeScriptの開発者はそれが true か false であるべきかどうか意見が合わないんだよ。
そこに正解はないんだよ。ぼくたちは後でフラグを変更することが出来るんだよ。
でも、大規模なプロジェクトではメリットを議論して選択する必要があるよ。

noImplicitAny フラグが false で、コンパイラの変数の型がデフォルトで any だと、その変数が使用されている方法に基づいて型を推測することができないんだ。
それは「暗黙的」って意味なんだよ。

noImplicitAny フラグが true で、TypeScriptコンパイラが型を推測できない時は、JavaScriptファイルを生成するけど、エラーを報告するよ。

このプロジェクトと開発者ガイドの他の例では、noImplicitAny フラグに false を設定するよ。
厳格な型チェックが好きなデベロッパーは true に設定する必要があるよ。
それが最善の選択だと思うなら、まだ any に設定することができるよ。
問題について考えたあとで、明示的にそうすると思うよ。

noImplicitAny フラグを true に設定した場合、暗黙的なインデックスエラーが起こることがあるよ。
もし、これが役立つと思ったら、次の追加フラグを設定してエラーを抑制することができるんだよ。

"suppressImplicitAnyIndexErrors":true

おまけ：ブラウザのES６対応

Angular 2ではES6の対応が必要で、最新ブラウザで見ることができるんだよ。
古いブラウザ（IE11を含む）のために必要な機能を使えるようにするために、シムを使用することができるんだ。

package.json （途中クイックガイドを通して）を作った後に、コマンドを実行してシムをプロジェクトに追加するよ。

npm install es6-shim --save

index.html の他のスクリプトの前に、シムを読み込むことができるよ。

<script src="../node_modules/es6-shim/es6-shim.js"></script>
五十川 洋平（Yohei Isokawa）

五十川 洋平（Yohei Isokawa）

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

プロフィール

Related Posts

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

【最新版】Angular2 QUICKSTART for Typescript の日本語訳

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

©Copyright 2022 Yohei Isokawa All Rights Reserved.