[超初心者が行く] Angular5 Tutorialしてみた2

Angular5 Tutorial アプリケーションシェルを作る

Angular – Tutorial: Tour of Heroes を翻訳(意訳多め)しています。

[超初心者が行く] Angular5 Tutorialしてみたの続き

前回はAngularのTutorialでどんなウェブサイトが作るのか見ていきました。

今回は、実際にサイトを作っていきます。

ここからが翻訳になります。

ビックリマークの部分は個人的にわからない用語の意味を載せています。

これは、Angularのサイトには記載のない情報です。

では、チュートリアルやっていきましょう!

アプリケーションシェルを作ろう

アプリケーション シェル

アプリケーション シェル(App Shell)アーキテクチャは、ネイティブ アプリのように瞬時に、そして確実にユーザーの画面に読み込める Progressive Web App を構築する方法の 1 つです。

アプリの「シェル」とは、ユーザー インターフェースが機能するために必要な最小限の HTML、CSS、JavaScript です。これらをオフラインで使用できるようにキャッシュしておくことで、ユーザーが同じページに再アクセスした際に、瞬時に高いパフォーマンス が発揮されます。つまり App Shell は、ユーザーがアクセスするたびにネットワークからすべて読み込まれるわけではなく、必要なコンテンツだけが読み込まれます。

JavaScript を多用したアーキテクチャのシングルページ アプリに対しては、App Shell が有力なアプローチとなります。このアプローチではアプリを実行させるために(Service Worker を使用して)積極的にセルをキャッシュします。次に、JavaScript を使用して各ページの動的コンテンツを読み込みます。App Shell はオフライン環境で、最初の HTML コンテンツを高速で画面に表示するのに役立ちます。

App Shell モデル  |  Web  |  Google Developers

リンク先では、画像でわかりやすく説明してあります。

Angular CLIのインストール

Angular CLIをまだインストールしていない場合は、インストールします。

コマンド npm install -g @angular/cli

新しいアプリケーションを作成する

CLIコマンドを使用して、angle-tour-of-heroesという名前の新しいプロジェクトを作成します。

コマンド ng new angular-tour-of-heroes
Angular CLIは、デフォルトのアプリケーションとサポートファイルを持つ新しいプロジェクトを生成しました。

アプリケーションを実行する

プロジェクトディレクトリに移動し、アプリケーションを起動します。

コマンド(一つずつ実行)
cd angular-tour-of-heroes
ng serve –open

ng serveコマンドは、アプリケーションをビルドし、開発サーバーを起動し、ソースファイルを監視し、それらのファイルを変更するときにアプリケーションを再構築します。

–openフラグはブラウザで http:// localhost:4200 / を開きます。

ブラウザで、アプリが動作しているはずです。

Angularコンポーネント

表示されるページは、アプリケーションシェルです。 シェルは、AppComponentという名前のAngularコンポーネントによって制御されます。

コンポーネントは、Angularアプリケーションの基本的なビルディングブロックです。 これらは、画面上にデータを表示し、ユーザーの入力を把握し、その入力に基づいて動的に変化します。

ビルディングブロック

ビルディングブロックサービス(英語表記:Building Block Service)とは色々な処理(サービス)を構築する際にロジックや機能ごとに分類しまとめてブロック化すること。ビルディングブロックで作成されたこれらのブロッグの選択、組み合わせをすることによってシステム構築をより簡単にすることが出来る。

「ビルディングブロックサービス」とは。意味、用語解説を掲載|ITワード辞典 IT PEDIA

アプリケーションのタイトルを変更する

お気に入りのエディタまたはIDEでプロジェクトを開き、src / appフォルダに移動します。

3つのファイルに分散されたAppComponentシェルの実装が見つかります。

  • app.component.ts- TypeScriptで記述されたコンポーネントクラスコード。
  • app.component.html- HTMLで書かれたコンポーネントテンプレート。
  • app.component.css-コンポーネントのプライベートCSSスタイル。

コンポーネントクラスファイル(app.component.ts)を開き、titleプロパティの値を ‘Tour of Heroes’に変更します。

app.component.ts
import { Component } from ‘@angular/core’;
@Component({
selector: ‘app-root’,
templateUrl: ‘./app.component.html’,
styleUrls: [‘./app.component.css’]
})
export class AppComponent {
title = ‘app’;
}
↓に変更
app.component.ts (class title property)
title = ‘Tour of Heroes’;
コンポーネントテンプレートファイル(app.component.html)を開き、Angular CLIで生成されたデフォルトテンプレートをすべて削除し、まっさらな状態から記述していきます。まず、HTML1行に以下のh1タグを記述します。
app.component.html (template)
<h1>{{title}}</h1>

二重中括弧は、Angularの補間バインディング構文です。 この補間バインディングは、コンポーネントのtitleプロパティ値をHTMLヘッダータグ内に示します。

ブラウザが更新され、新しいアプリケーションのタイトルが表示されます。

補間バインディング

テンプレート(View)に表示したい値を、コンポーネントのプロパティとして定義して、バインドさせます。
プロパティの他、メソッド呼び出しも行う事ができる。
構文は {{…}}

Angular データバインディングは4種類 – Qiita

アプリケーションスタイルを追加する

ほとんどのアプリは、アプリケーション全体で一貫した外観を目指しています。 CLIはこの目的のために空のstyles.cssを生成しました。 アプリケーション全体のスタイルを記述します。

以下は、Tour of Heroesサンプルアプリのstyles.cssの抜粋です。

src/styles.css (excerpt)

作成したコードの確認

このチュートリアルのソースコードと完全なTour of Heroesグローバルスタイルは、ライブサンプル/ダウンロードのサンプルで利用できます。

このページで作成したコードファイルは次のとおりです。

src/app/app.component.ts

src/app/app.component.html

src/styles.css (excerpt)

まとめ

  • Angular CLIを使用して、最初のアプリケーション構造を作成しました。
  • Angularコンポーネントでブラウザに表示することを学びました。
  • 補間バインディングの二重中括弧を使用して、アプリのタイトルを表示しました。

次回はブラウザでヒーロー登録

さて、今回は実際にコードをいじったわけですが、

まだまだ、ブラウザに表示されているのは、

「Tour of Heroes」だけで、まったく何もできていないようなものです。

次回からはしっかりとウェブサイトらしいものの欠片くらいはできることになるでしょう!

シェアする

  • このエントリーをはてなブックマークに追加

フォローする