JavaScript
TypeScript
Angular入門

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


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

昨日に引き続き、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シェルとやらはどうやら3つのファイルに分割されているみたいです。

ファイルは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タグが2重の波括弧で囲まれています。

これは補間バインディングの構文らしいです。

これにより先ほど編集した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;
}

文字色が青になったらOKです。

ここまでは昨日やった内容と大差ないので驚きませんね。

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


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

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

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 」∠)