Angular最速マスターへの道 第1章

何度かAngularについての記事を掲載していますが、まだAngularを触ったことがない方もいると思います。
そこでAngular初心者向けではありますが、必要最低限のことができるようになる、Angular最速マスターへの道を何章かに渡ってご紹介したいと思います。

そもそもAngularとは？という方はまず公式ドキュメントをご覧になってからこの続きを読んでください。

第1章目次

• プロジェクト作成
• Component作成
• ルーティング設定
• Componentのプロパティ設定・表示

Angularのプロジェクトを作成

早速ではありますが以下の環境を準備して始めてみましょう。

• Node.js latest:10.6.0
• Angular CLI latest:6.0.7

ng new my-project
cd my-project
ng serve

はい、これだけです！
localhost:4200にアクセスすればページが表示されているはずです。

Componentを作成

Componentとは簡潔に言えばページを構成する部品です。
Angular CLIを使えばちゃちゃっと作成できます。
まずは深く考えずに作っちゃいましょう。

$ ng g component hello

CREATE src/app/hello/hello.component.css (0 bytes)
CREATE src/app/hello/hello.component.html (24 bytes)
CREATE src/app/hello/hello.component.spec.ts (621 bytes)
CREATE src/app/hello/hello.component.ts (265 bytes)
UPDATE src/app/app.module.ts (392 bytes)

あら簡単。
ではこのComponentを表示させてみましょう。
表示するにはsrc/app/app.component.htmlに追記します。

<!--省略-->
<app-hello></app-hello>

保存すると以下のようにhello works!が表示されていると思います。
このように、Componentでhtmlのパーツをどんどん組み立てていくというイメージです。

ちなみに、保存をしただけで勝手にブラウザがリロードしましたよね？
それがAngularの魅力でもあります！なにせ更新後のリロードは面倒ですからね！！

ルーティング設定

フレームワークと言えばルーティング。
早速作ってみましょう。
まずsrc/app/app.routing.tsを作成します。
例として/helloにアクセスしたら先ほどのhello.componentを表示させるようにしてみましょう。

import { NgModule } from '@angular/core';
import { Routes, RouterModule } from '@angular/router';
import { HelloComponent } from './hello/hello.component';

const appRoutes: Routes = [
    {
        path: 'hello',
        component: HelloComponent
    },
    /**
     * 対象がなかった時
     */
    {
        path: '**',
        redirectTo: 'hello'
    }
];

@NgModule({
    imports: [
        RouterModule.forRoot(appRoutes)
    ],
    exports: [
        RouterModule
    ]
})
export class AppRoutes { }

表示対象がない場合のルーティングもエラーが生じてしまうため必ず書いてください。
そしてapp.module.tsに追記します。

// (省略)
import { AppRoutes } from './app.routing';
import { HelloComponent } from './hello/hello.component';

@NgModule({
    // (省略)
    imports: [
        BrowserModule,
        AppRoutes
    ],
    // (省略)
})
export class AppModule { }

そしてルーティングのComponentを呼び出すセレクタをapp.component.htmlに追記します。

<!--省略-->
<!--<app-hello></app-hello>を削除-->
<router-outlet></router-outlet>

それではlocalhost:4200/helloにアクセスしてみましょう。
先ほどと一見表示は変わっていないと思いますが、どのパスにアクセスしても/helloにリダイレクトされているはずです。

Componentのプロパティを設定・表示

では先ほど作成したhello.componentを少しいじってみましょう。
他のフレームワークにもあるように、裏で設定した値をビュー側に表示させる簡単なところを。

hello.component.ts

import { Component, OnInit } from '@angular/core';

@Component({
    selector: 'app-hello',
    templateUrl: './hello.component.html',
    styleUrls: ['./hello.component.css']
})
export class HelloComponent implements OnInit {
    // 以下のプロパティを追記
    public name: string = 'Mao Miyaji';

    constructor() { }

    ngOnInit() {
    }
}

hello.component.html

<p>
    <!--以下を修正-->
    Hello, {{name}}!
</p>

さぁこれだけでnameの部分にtsファイルで指定した値がバインドされているのがわかりますよね。
非常に簡単です。

まとめ

今回の第1章では本当に基礎でしたが、これだけで基盤ができたようなものです。
導入は本当に簡単なんだということが少しでも伝わっていればなと思います。
すでにAngularに慣れ親しんでいる方にはそれがどうしたと思うかもしれませんが（汗

このAngular最速マスターへの道シリーズは下記のGitHubに公開していきます。

GitHub/AFM

GitHubPageでデモも公開しておりますので軽く見てみてください。

次章予告

• フォーム関連
• Directive
• Template