Angularの公式チュートリアルを実践してみた。第１回目

昨日に引き続き、Angularの勉強をしていきます。
この記事は公式ページのチュートリアルの内容を実践したログです。
昨日は導入編で、今回から実際にチュートリアルアプリケーションを作成していきます。

この記事は数回に分けて進めていきたいと思います。

前提

前回の記事を実行済みであること。

参考:angular.jsよりもAngularを推奨してもらったので、さっそく勉強してみた。
https://qiita.com/ryuutamaehara/items/fa93f5c25f36167124a7

何をつくるのか

ツアー・オブ・ヒーローズチュートリアルという名前のアプリケーションです。
どんな機能があるかは公式ページの説明をご参照ください。

参考:https://angular.jp/tutorial
公式サンプル:https://angular.jp/generated/live-examples/toh-pt6/stackblitz.html

このチュートリアルをやり切ると次のことが出来るようようです。

・要素を表示・隠蔽する。
・データのリストを表示するための組み込みAngularディレクティブを使う。
・リストの詳細やリストを表示するためのAngularコンポーネントを作成する。
・読み取り専用データのための単方向データバインディングを使用する。
・双方向データバインディングを用いて、モデルを更新するための編集可能なフィールドを設置する。
・キー入力やクリックといったユーザーのイベントに対しコンポーネントがもつメソッドをバインドする。
・ユーザーがマスターリストから要素を選択し、詳細画面でその要素を編集できるようにする。
・パイプによりデータを整形する。
・リストを組み立てるための共有サービスを作成する。
・さまざまなビューとそれらのコンポーネント間を遷移可能にするためにルーティングを使用する。

コンポーネントを作って様々な処理ができるって事ですね。きっと。（適当）

最初は昨日やった内容のおさらいです。

新しいワークスペースと初期アプリケーションリンクを作成する。

さて、まずはワークスペースと初期アプリを作ります。
作成が完了したらアプリケーションをそのままサーブします。

ng new angular-tour-of-heroes
cd angular-tour-of-heroes
ng serve --open

正常に完了するとブラウザにページが表示されます。

この表示されているページはアプリケーションシェルで、AppComponentというAngularコンポーネントから
操作されるとのことです。

コンポーネントはAngularの基礎的な構成要素で、画面にデータを表示してユーザからの入力を待ち受け、入力に対して
リアクションを返すことができるらしいです。

なるほど。よくわからん。
ひとまず進めてみます。

アプリケーションを変更する

AppComponentシェルとやらはどうやら３つのファイルに分割されているみたいです。
ファイルはsrc/appに格納されています。

・app.component.ts
TypeScriptで書かれたコンポーネントクラスのコードです。

・app.component.html
HTMLで書かれたコンポーネントのテンプレートです。

・app.component.css
このコンポーネント専用のCSSです。

まずはapp.component.tsから編集します。
タイトルを書き替えます。

app.component.ts

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

@Component({
  selector: 'app-root',
  templateUrl: './app.component.html',
  styleUrls: ['./app.component.css'],
})
export class AppComponent {
  title = 'Tour of Heroes';
}

正直TypeScriptってよくわかってないけど、おそらくAppComponentっていうクラスの
titleっていう属性名前をセットしたんだなーってことはわかりました。(´･ω･｀)

次にapp.component.htmlを編集します。
h1タグに囲まれた部分を編集します。

app.component.html

<!--The content below is only a placeholder and can be replaced.-->
<div style="text-align:center">
  <h1>
    <h1>{{title}}</h1>
  </h1>
  <img width="300" alt="Angular Logo" src="data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHZpZXdCb3g9IjAgMCAyNTAgMjUwIj4KICAgIDxwYXRoIGZpbGw9IiNERDAwMzEiIGQ9Ik0xMjUgMzBMMzEuOSA2My4ybDE0LjIgMTIzLjFMMTI1IDIzMGw3OC45LTQzLjcgMTQuMi0xMjMuMXoiIC8+CiAgICA8cGF0aCBmaWxsPSIjQzMwMDJGIiBkPSJNMTI1IDMwdjIyLjItLjFWMjMwbDc4LjktNDMuNyAxNC4yLTEyMy4xTDEyNSAzMHoiIC8+CiAgICA8cGF0aCAgZmlsbD0iI0ZGRkZGRiIgZD0iTTEyNSA1Mi4xTDY2LjggMTgyLjZoMjEuN2wxMS43LTI5LjJoNDkuNGwxMS43IDI5LjJIMTgzTDEyNSA1Mi4xem0xNyA4My4zaC0zNGwxNy00MC45IDE3IDQwLjl6IiAvPgogIDwvc3ZnPg==">
</div>
<h2>Here are some links to help you start: </h2>
<ul>
  <li>
    <h2><a target="_blank" rel="noopener" href="https://angular.io/tutorial">Tour of Heroes</a></h2>
  </li>
  <li>
    <h2><a target="_blank" rel="noopener" href="https://angular.io/cli">CLI Documentation</a></h2>
  </li>
  <li>
    <h2><a target="_blank" rel="noopener" href="https://blog.angular.io/">Angular blog</a></h2>
  </li>
</ul>

<router-outlet></router-outlet>

h1タグが２重の波括弧で囲まれています。
これは補間バインディングの構文らしいです。

これにより先ほど編集したapp.component.tsのtitleにセットした値が渡されるようです。

次はcssの設定をします。

src/style.css

/* Application-wide Styles */
h1 {
  color: #369;
  font-family: Arial, Helvetica, sans-serif;
  font-size: 250%;
}
h2, h3 {
  color: #444;
  font-family: Arial, Helvetica, sans-serif;
  font-weight: lighter;
}
body {
  margin: 2em;
}
body, input[type="text"], button {
  color: #888;
  font-family: Cambria, Georgia;
}
/* everywhere else */
* {
  font-family: Arial, Helvetica, sans-serif;
}

文字色が青になったらＯＫです。
ここまでは昨日やった内容と大差ないので驚きませんね。

ではここからが今日の勉強の本番です。

新しくコンポーネントを作る。

今日からの内容を学習するために新しいコンポーネントを作成します。

ng generate component heroes

このコマンドを実行すると新しくsrc/app/配下にheroesコンポーネントが作成されます。

この中のheroes.component.tsについて内容を確認してみます。

heroes.component.ts

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

@Component({
  selector: 'app-heroes',
  templateUrl: './heroes.component.html',
  styleUrls: ['./heroes.component.css']
})
export class HeroesComponent implements OnInit {

  constructor() { }

  ngOnInit() {
  }

}

まず、コアライブラリからComponentをインポートします。
さらに@Componentでコンポーネントクラスに注釈をつけています。
これにより、メタデータを定義することができるようです。

CLIによって自動で3つのプロパティが作成されていますので確認していきます。

・selector
コンポーネントのCSS要素セレクター。
つまりapp-rootがCSS要素のセレクターになりますね。

・templateUrl
コンポーネントのテンプレートファイルの場所。
カレントディレクトリのapp.component.htmlが指定されています。

・styleUrls
コンポーネントのプライベートCSSスタイルの場所
カレントディレクトリのapp.component.cssが指定されています。

ngOnInit()はライフサイクルフックと呼ばれるもので、Angularがコンポーネントを作成した直後に
呼び出されるため、初期化ロジックを設置するのに適しているとのことです。

では次にプロパティを追加してみます。
windstormeっていうヒーローのために…ってありますが、好きな名前を付けましょう。

僕の幼少期のヒーローはティーンエイジ・ミュータント・ニンジャ・タートルズのドナテロでした。(TEMNT Donatello)でした。
なので、このヒーローのためにプロパティを作ります。

heroes.component.ts

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

@Component({
  selector: 'app-heroes',
  templateUrl: './heroes.component.html',
  styleUrls: ['./heroes.component.css']
})
export class HeroesComponent implements OnInit {
  hero = 'Donatello';

  constructor() { }

  ngOnInit() {
  }

}

プロパティを追加したら、次にhtmlにheroプロパティへのデータバインディングを追加します。

heroes.component.html

<p>
  {{hero}}
</p>

ここまでできたら、次は作成したHeroComponentをAppComponentのテンプレートに追加します。
app-heroesはHeroesComponentの要素セレクタらしいです。

AppComponentのテンプレートファイルのタイトルの直下に要素を追加してみましょう。
再度サーブします。

今日はここまで！途中経過ですが、作成したコンポーネントはGitHubにpushしておきます。

参考:https://github.com/ryuutamaehara/Angular-tutorial

明日以降は「HeroesComponent ビューを表示する」の項目からスタート予定です。

眠い_(:3 」∠)_