QuickStart

優れたツールを使用すると、すべてを手作業で行った場合よりも、アプリケーション開発を迅速かつ簡単に行うことができます。

Angular CLIは、プロジェクトを作成したり、ファイルを追加したり、テスト、バンドル、デプロイメントなどのさまざまな進行中の開発タスクを実行できるコマンドラインインターフェイスツールです。

このガイドの目的は、Angularプロジェクトで役立つスタイルガイドの推奨事項を遵守しながら、Angular CLIを使用してTypeScriptで簡単なAngularアプリケーションを構築して実行することです。

この章の最後では、CLIを使用した開発の基礎知識と、これらのドキュメンテーションサンプルの基礎と、実際のアプリケーションの基礎について説明します。

また、サンプルをダウンロードすることもできます。

ステップ１．開発環境のセットアップ

作業に入る前に開発環境をセットアップする必要があります。

Node.jsとnpmをインストールしていない場合は、以下を参考にインストールを行ってください。

すでにインストール済みの場合でも、ターミナル/コンソールウィンドウでnode -vとnpm -vを実行し、node 6.9.x 以上、npm 3.x.x 以上であることを確認してください。
上記よりも古いバージョンの場合はエラーが発生します。

そのあと、ターミナル/コンソールウィンドウで以下のコマンドを実行して、Angular CLI をグローバルにインストールしてください。

npm install -g @angular/cli

ターミナルウィンドウを開きます。

以下のコマンドを実行して、新しいプロジェクトとアプリケーションのひな形を生成します。

ng new my-app

新しいプロジェクトのセットアップ処理で少し時間がかかりますので、しばらくお待ちください。
npmパッケージのインストールに時間がかかります。

以下のコマンドを実行して、プロジェクトディレクトリに移動し、サーバーを起動してください。

cd my-app
ng serve --open

ng serveコマンドを実行すると、サーバーを起動し、ファイルの変更を監視します。
ファイルの変更を検知すると、自動的にアプリケーションが最新化されます。

--open（またはjust -o）オプションを使うと、ブラウザが自動的に立ち上がり、トップページ(http://localhost:4200) が開かれます。

正常にアプリケーションが立ち上がれば、以下のメッセージの画面が表示されます。

Angular CLIで初期状態のAngularコンポーネントが作成されました。

これはルートコンポーネントとなり、app-rootという名前で定義されています。

./src/app/app.component.ts を開いて、titleプロパティを「Welcome to app!!」から「My First Angular App」に変更してみてください。

src/app/app.component.ts

export class AppComponent {
  title = 'My First Angular App';
}

ファイルの変更が検知され、ブラウザが自動的にリロードされます。
タイトルが変更されました。

素晴らしいです。もう少し見た目を良くして見ましょう。

./src/app/app.component.css を開いて、コンポーネントにスタイルを設定してください。

src/app/app.component.css

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

見た目も良くなりました。

それは、あなたが「Hello World」のアプリでやってみたいことすべてです。

Angularで構築できる素晴らしいアプリケーションを作成する準備が整いましたので、Tour of Heroesチュートリアルに取り組んでいきましょう。

以降の章では、Angularプロジェクトのファイルについてもう少し詳しく知ることができます。