Angular2の始め方。Angular2 公式チュートリアル – SETUP FOR LOCAL DEVELOPMENT（簡単な和訳）
2016.12.30
この記事は最終更新日から1年以上が経過しています。
こちらのページは、こちらのページの簡単な和訳です。
Angular2 tutorial | SETUP FOR LOCAL DEVELOPMENT
その他のページ
Angular2の始め方。Angular2 公式チュートリアル – Introduction（簡単な和訳）
Angular2の始め方。Angular2 公式チュートリアル – The Hero Editor（簡単な和訳）
Angular2の始め方。Angular2 Angular2の始め方。Angular2 公式チュートリアル – Master/Detail（簡単な和訳）
準備を素早くできる、クイックスタートシードをインストールして、マシンの開発をより迅速かつ効率的に行う。
Setup a local development environment
クイックスタートライブコーディングの例は、Angular playgroundです。実際のアプリケーションを開発する場所ではありません。
あなたは自分のマシンでローカルに開発する必要があります。ローカルに開発環境を作り、Angularを学んでいきましょう。
—–
クイックスタートシードのライブサンプルは、QuickStartと、リッチなアプリケーションの例を容易に簡単に始めれる、app.module.tsとmain.tsアプリケーションファイルが設置されています（後述）。
—–
nodeとnpmがインストールされていることを確認してください。
1. プロジェクトフォルダを作成します（クイックスタートと命名。後で名前を変更できます）。
2. QuickStartシードをプロジェクトフォルダにクローンまたはダウンロードします。
3. npmパッケージをインストールします。
4. npm startを実行してサンプルアプリケーションを起動します。
Clone
クイックスタート Github レポジトリ
https://github.com/angular/quickstart
これらのターミナルコマンドを使用してクローンから起動までの手順を実行します。
$ git clone https://github.com/angular/quickstart.git quickstart $ cd quickstart $ npm install $ npm start
Download
クイックスタートシードをダウンロードし、プロジェクトフォルダに解凍します。
次に、これらのターミナルコマンドを使用して残りの手順を実行します。
cd quickstart npm install npm start
What’s in the QuickStart seed?
QuickStartシードには、QuickStartプレイグラウンドと同じアプリケーションが含まれています。
しかし、真の目的は、地方開発のための確かな基盤を提供することです。
その結果、マシン上のプロジェクトフォルダにはさらに多くのファイルがあります。それらは、後ほど学ぶことができます。
/ appフォルダー内の次の3つのTypeScript（.ts）ファイルに注目してください。
app ├── app.component.ts ├── app.module.ts └── main.ts
import { Component } from '@angular/core';
@Component({
selector: 'my-app',
template: `<h1>Hello {{name}}</h1>`
})
export class AppComponent { name = 'Angular'; }
import { NgModule } from '@angular/core';
import { BrowserModule } from '@angular/platform-browser';
import { AppComponent } from './app.component';
@NgModule({
imports: [ BrowserModule ],
declarations: [ AppComponent ],
bootstrap: [ AppComponent ]
})
export class AppModule { }
import { platformBrowserDynamic } from '@angular/platform-browser-dynamic';
import { AppModule } from './app.module';
platformBrowserDynamic().bootstrapModule(AppModule);
すべてのガイドとcookbooks には、少なくともこれらのコアファイルがあります。
各ファイルには明確な目的があり、アプリケーションが成長するにつれて独立して進化していきます。
| File | Purpose |
| app.component.ts | QuickStartプレイグラウンドと同じAppComponentを定義します。
これは、アプリケーションが進化するにつれてネストされたコンポーネントのツリーになる要素のルートコンポーネントです。 |
| app.module.ts | アプリケーションをアセンブルする方法をAngularに伝えるルートモジュールであるAppModuleを定義します。
今はAppComponentだけを宣言しています。後に宣言するコンポーネントが増えていくでしょう。 |
| main.ts | JiTコンパイラを使用してアプリケーションをコンパイルし、アプリケーションをブートストラップしてブラウザで実行します。
これは、ほとんどのプロジェクトの開発にとって合理的な選択であり、Plunkerのようなライブコーディング環境で実行されるサンプルにとって唯一の実行可能な選択肢です。 後で別のコンパイルオプションとデプロイメントオプションについては、ドキュメントの後半で説明されます。 |
Next Step
Angularを初めてお使いの場合は、learning path. を行うと良いでしょう。
Appendix: node and npm
Node.jsとnpmは、パッケージプラットフォームやその他のプラットフォームを使用した最新のWeb開発に不可欠です。
Nodeはクライアントの開発とビルドのためのツールです。 npmパッケージマネージャー自体は、Nodeアプリケーションであり、JavaScriptライブラリーをインストールします。
あなたのマシンにまだインストールされていない場合は、今すぐ入手してください。
https://docs.npmjs.com/getting-started/installing-node
ターミナル/コンソールウィンドウでnode -vおよびnpm -vコマンドを実行して、ノードv4.x.x以上およびnpm 3.x.x以上を実行していることを確認します。
古いバージョンではエラーが発生します。
nvmは複数のバージョンのノードとnpmを管理することをお勧めします。
他のバージョンのノードとnpmを使用しているマシン上ですでにプロジェクトを実行している場合は、nvmが必要になることがあります。
Appendix: Why develop locally
ブラウザーでのライブコーディングは、Angularを探検するのに最適な方法です。
ほぼすべてのドキュメントページにリンクがあり、完成したサンプルがブラウザに表示されます。
サンプルコードを使って遊んだり、変更を友人と共有したり、自分のマシンでコードをダウンロードして実行することができます。
クイックスタートには、AppComponentファイルだけが表示されます。
これは、内部でplaygroundのみのapp.module.tsおよびmain.tsに相当するものを作成します。
読者は気を散らすことなく確認することができます。他のサンプルはQuickStartシードに基づいています。
何もインストールせずにこれを試すことができます。
Plunkrのクイックスタートのサンプルを別のタブで開き、続いてください。
すべてのコンポーネントは、メタデータオブジェクトを受け取る@Componentデコレータ関数で始まります。
メタデータオブジェクトは、HTMLテンプレートとコンポーネントクラスがどのように連携して動作するかを記述します。
selectorプロパティは、index.htmlのカスタム<my-app>タグ内にコンポーネントを表示するようにAngularに指示します。
Playgroundとしてのライブコーディング環境、ドキュメンテーションサンプルを試して自分で試してみてください。
ドキュメンテーションの問題を提出したり、Angular自体で問題を提出したりするときに、バグを再現するのに最適な場所です。
実際の開発には、ローカル開発を強くお勧めします。
