LoginSignup
4
8

Delete article

Deleted articles cannot be recovered.

Draft of this article would be also deleted.

Are you sure you want to delete this article?

More than 5 years have passed since last update.

@ryuutamaehara(ryuta maehara)

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

Posted at

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

4
8
0

Register as a new user and use Qiita more conveniently

  1. You get articles that match your needs
  2. You can efficiently read back useful information
  3. You can use dark theme
What you can do with signing up
Sign upLogin
4
8

Delete article

Deleted articles cannot be recovered.

Draft of this article would be also deleted.

Are you sure you want to delete this article?