お茶漬けびより

"あなたに教わったことを、噛んでいるのですよ" 五等分の花嫁 7巻 「最後の試験が五月の場合」より

Angular を始める

comic-girls.com

アニメのこみっくがーるずが好きです。

仕事で Angular を使っていて、その仕事が一息ついたので学んだことをまとめていこうと思います。 Angualr の簡単な紹介は公式に任せます。

一つだけ補足しておくと、過去にAngularJS というものがありました。バージョン的には 1 扱いですが、2 以降との後方互換性はありません。AngularJS については、知る必要がありません。また、Angular(2 以上) について調べるとき、AngularJS の記事がよく引っかかります。参考にならないので、-angularjs を検索ワードにつけることをオススメします。

環境

  • Windows 10
  • Node.js 10.8.0
  • npm 6.2.0
  • Angular CLI 6.2.3
  • TypeScript 2.9.2

ここですること

  • Node.js のインストール
  • Angular プロジェクトの作成
  • 簡単なコンポーネントの構成紹介

Node.js のインストール

Angular を使うためには、Node.js を入れないといけません。 Node.js は、こちらからダウンロードしてください。 推奨版と最新版どちらでも好きなほうをダウンロードしてください。

Node.js のインストール方法は特に設定を変更することはないので、省略します。

Angular プロジェクトの作成

作成する前に、Angular をインストールする必要があります。 まずは、ちゃんと Node.js がインストールされているか確認しましょう。

> npm -v
6.2.0
> node -v
v10.8.0

次に、Angular CLI をインストールします(プロキシ環境下だとうまくいかないかもしれません。プロキシの設定をしてください)。

> npm install -g @angular/cli

インストールが完了したら、バージョンを確認して、ちゃんと入っているか確認します。

> ng -v

     _                      _                 ____ _     ___
    / \   _ __   __ _ _   _| | __ _ _ __     / ___| |   |_ _|
   / △ \ | '_ \ / _` | | | | |/ _` | '__|   | |   | |    | |
  / ___ \| | | | (_| | |_| | | (_| | |      | |___| |___ | |
 /_/   \_\_| |_|\__, |\__,_|_|\__,_|_|       \____|_____|___|
                |___/


Angular CLI: 6.2.3
Node: 10.8.0
OS: win32 x64
Angular:
...

Package                      Version
------------------------------------------------------
@angular-devkit/architect    0.8.3
@angular-devkit/core         0.8.3
@angular-devkit/schematics   0.8.3
@schematics/angular          0.8.3
@schematics/update           0.8.3
rxjs                         6.2.2
typescript                   2.9.2

以上のような感じで表示されると思います。 では、プロジェクトを作成するので、作成したい場所に移動してから下記のコマンドを入力してください。

ng new my-app

実行が完了すると、プロジェクト(my-app)が作成されます。 my-app > src > app この下に必要なソースや html, css を作成していきます。 作業を始める前に、サーバを立ち上げて、Webブラウザで動作確認をしましょう。

> cd my-app
> ng serve
...
i  「wdm」: Compiled successfully.

最後の一行が表示されたら、Webブラウザを開き、http://localhost:4200 にアクセスします。 Welcome to my-app! という文字と Angular の画像が出たページが表示されると思います。 次に、簡単な変更をしてみましょう。

app.component.ts を開き、AppComponent クラスの title の中身を書き換えます。 自分は、以下のように書き換えました。

export class AppComponent {
+  title = 'The World';
-  title = 'my-app';
}

Webブラウザを確認しましょう。先に開いたタブを見ると文字が変わっているのが分かると思います。 何が起きたのかというと、変更を加えて保存をしたときにサーバ側が勝手に再度ビルドし、画面の更新を行ってくれます。 つまり、サーバを立ち上げ直す必要がなく、リアルタイムに動作の確認が出来ます。

簡単なコンポーネントの説明

最後に、コンポーネントを軽く紹介しておきます。 Angular は、一つのコンポーネントにつき、3 つのファイルが必要です(厳密には1つでもいけますが)。 それは、

  • TypeScript ファイル(.component.ts)
  • HTML ファイル(.component.html)
  • CSS ファイル(.component.css

の 3 つです。HTML と CSS は、TypeScript のファイルの中に直接書くことができるので、ファイルが必ず必要というわけではありませんが、現実的ではないでしょう。HTML と CSS は、Pug や SCSS のようなものも使えます(自分は書けないので使ったことがありませんが)。

.component.spec.ts は、コンポーネント単体テストのファイルです。そのコンポーネントのテストはここに書くことになります。

Angular では、ルートコンポーネントがあり、そのコンポーネントの中に別のコンポーネントを埋め込んでいくように作ります。 ルートのコンポーネントは、app.component です。例えば、hero というコンポーネントがあり、それを app コンポーネントに埋め込むとします。この場合、app コンポーネントの HTML ファイル(app.component.html)に以下を追加したい場所に記載します。

<app-hero></app-hero>

するとこの <app-hero></app-hero> の場所に hero コンポーネントの内容が追加されるようになります。 ここらへんは、話を聞くより実際に動かしたほうが理解できると思うので、Angular のチュートリアルをすることをオススメします。

Angular 日本語ドキュメンテーション