目次
Angular５ Tutorial アプリケーションシェルを作る
Angular – Tutorial: Tour of Heroes を翻訳（意訳多め）しています。
[超初心者が行く] Angular５ Tutorialしてみたの続き
前回はAngularのTutorialでどんなウェブサイトが作るのか見ていきました。
今回は、実際にサイトを作っていきます。
ここからが翻訳になります。
ビックリマークの部分は個人的にわからない用語の意味を載せています。
これは、Angularのサイトには記載のない情報です。
では、チュートリアルやっていきましょう！
アプリケーションシェルを作ろう
アプリケーション シェル（App Shell）アーキテクチャは、ネイティブ アプリのように瞬時に、そして確実にユーザーの画面に読み込める Progressive Web App を構築する方法の 1 つです。
アプリの「シェル」とは、ユーザー インターフェースが機能するために必要な最小限の HTML、CSS、JavaScript です。これらをオフラインで使用できるようにキャッシュしておくことで、ユーザーが同じページに再アクセスした際に、瞬時に高いパフォーマンス が発揮されます。つまり App Shell は、ユーザーがアクセスするたびにネットワークからすべて読み込まれるわけではなく、必要なコンテンツだけが読み込まれます。
JavaScript を多用したアーキテクチャのシングルページ アプリに対しては、App Shell が有力なアプローチとなります。このアプローチではアプリを実行させるために（Service Worker を使用して）積極的にセルをキャッシュします。次に、JavaScript を使用して各ページの動的コンテンツを読み込みます。App Shell はオフライン環境で、最初の HTML コンテンツを高速で画面に表示するのに役立ちます。
リンク先では、画像でわかりやすく説明してあります。
Angular CLIのインストール
Angular CLIをまだインストールしていない場合は、インストールします。
新しいアプリケーションを作成する
CLIコマンドを使用して、angle-tour-of-heroesという名前の新しいプロジェクトを作成します。
アプリケーションを実行する
プロジェクトディレクトリに移動し、アプリケーションを起動します。
ng serveコマンドは、アプリケーションをビルドし、開発サーバーを起動し、ソースファイルを監視し、それらのファイルを変更するときにアプリケーションを再構築します。
–openフラグはブラウザで http：// localhost：4200 / を開きます。
ブラウザで、アプリが動作しているはずです。
Angularコンポーネント
表示されるページは、アプリケーションシェルです。 シェルは、AppComponentという名前のAngularコンポーネントによって制御されます。
コンポーネントは、Angularアプリケーションの基本的なビルディングブロックです。 これらは、画面上にデータを表示し、ユーザーの入力を把握し、その入力に基づいて動的に変化します。
ビルディングブロックサービス(英語表記：Building Block Service)とは色々な処理(サービス)を構築する際にロジックや機能ごとに分類しまとめてブロック化すること。ビルディングブロックで作成されたこれらのブロッグの選択、組み合わせをすることによってシステム構築をより簡単にすることが出来る。
アプリケーションのタイトルを変更する
お気に入りのエディタまたはIDEでプロジェクトを開き、src / appフォルダに移動します。
3つのファイルに分散されたAppComponentシェルの実装が見つかります。
- app.component.ts- TypeScriptで記述されたコンポーネントクラスコード。
- app.component.html- HTMLで書かれたコンポーネントテンプレート。
- app.component.css-コンポーネントのプライベートCSSスタイル。
コンポーネントクラスファイル（app.component.ts）を開き、titleプロパティの値を ‘Tour of Heroes’に変更します。
@Component({
selector: ‘app-root’,
templateUrl: ‘./app.component.html’,
styleUrls: [‘./app.component.css’]
})
export class AppComponent {
title = ‘app’;
}
二重中括弧は、Angularの補間バインディング構文です。 この補間バインディングは、コンポーネントのtitleプロパティ値をHTMLヘッダータグ内に示します。
ブラウザが更新され、新しいアプリケーションのタイトルが表示されます。
テンプレート(View)に表示したい値を、コンポーネントのプロパティとして定義して、バインドさせます。
プロパティの他、メソッド呼び出しも行う事ができる。
構文は {{…}}
アプリケーションスタイルを追加する
ほとんどのアプリは、アプリケーション全体で一貫した外観を目指しています。 CLIはこの目的のために空のstyles.cssを生成しました。 アプリケーション全体のスタイルを記述します。
以下は、Tour of Heroesサンプルアプリのstyles.cssの抜粋です。
作成したコードの確認
このチュートリアルのソースコードと完全なTour of Heroesグローバルスタイルは、ライブサンプル/ダウンロードのサンプルで利用できます。
このページで作成したコードファイルは次のとおりです。
まとめ
- Angular CLIを使用して、最初のアプリケーション構造を作成しました。
- Angularコンポーネントでブラウザに表示することを学びました。
- 補間バインディングの二重中括弧を使用して、アプリのタイトルを表示しました。
次回はブラウザでヒーロー登録
さて、今回は実際にコードをいじったわけですが、
まだまだ、ブラウザに表示されているのは、
「Tour of Heroes」だけで、まったく何もできていないようなものです。
次回からはしっかりとウェブサイトらしいものの欠片くらいはできることになるでしょう！