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

Angular5 Tutorial: Tour of Heroes

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

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

前回はAngularの環境構築と単純なAngularを使ったウェブサイトの仕組みについて見ました。

今回は、AngularのチュートリアルとしてAngularを使ったウェブサイトで何ができるのか見ていきます。

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

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

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

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

チュートリアルで作るサイトでできること

Tour of HeroesチュートリアルではAngularの基本について説明します。

このチュートリアルでは、英雄派遣会社が英雄人材の安定を管理するのに役立つアプリを作成します。

この基本的なWEBアプリには、データ駆動型アプリケーションで期待される多くの機能があります。ヒーローのリストを取得して表示し、選択したヒーローのデータを編集し、変更データを基にさまざまな項目間でデータ変更が行われます。

チュートリアルでは次のようなことを行います。

  • 組み込みのAngularディレクティブを使用して、要素を表示または隠し、ヒーローデータのリストを表示します。
  • ヒーローの詳細を表示し、ヒーローの配列を表示するためのAngularコンポーネントを作成します。
  • 読み取り専用データには一方向データバインディングを使用します。
  • 編集可能なフィールドを追加して、双方向データバインディングでモデルを更新します。
  • コンポーネントメソッドを、キーストロークやクリックなどのユーザーイベントにバインドします。
  • ユーザーがマスターリストからヒーローを選択し、そのヒーローを詳細ビューで編集できるようにする。
  • パイプでデータをフォーマットします。
  • ヒーローを組み立てるための共有サービスを作成します。
  • ルーティングを使用して、さまざまなビューとそのコンポーネントをナビゲートします。
Angularディレクティブ
ディレクティブ(英: Directive)は、プログラミングにおいてコマンドのような意味で使われる用語であり、プログラミング言語の一部の構成要素(例えば、コンパイラやアセンブラに処理方法を指示する記述など)を指すこともある。

Angular には、3種類のDirectiveがあります。
1. Components … テンプレートの使用したDirective
2. Structural Directives(構造ディレクティブ) … DOM要素を追加・削除してDOMレイアウトを変更できるDirective
3. Attribute Directive(属性ディレクティブ) … 要素、コンポーネント、または別のディレクティブの外観や動作を変更できるDirective

Components は3種類のディレクティブの中で、最も一般的に使われます。

angular.io Guide: Attribute Directives – Qiita

DOM(Document Object Model)とは、xmlやhtmlの各要素、たとえば<p>とか<img>とかそういった類の要素にアクセスする仕組みのことです。
このDOMを操作することによって、要素の値をダイレクトに操作できます。
例えば<p>の中身のテキストを変更したり、<img src=”sample.jpg”>のsrcの中身を変更して別の画像に差し替えるといったことができます。

DOMとは – JavaScript超初心者によるJavaScript入門講座

データバインディング(データバインド、あるいはData Bindingの訳からデータ結合とも呼ばれる。)とは、XMLなどのデータソースとアプリケーションやウェブページ(ウェブアプリケーション)のユーザインタフェースを静的または動的に結合する技術である。分離されたデータソースとユーザインタフェースの間を橋渡しする役割を果たし、データが変更されるとそれに応じてユーザインタフェースが変更される一方向なデータバインディングと、併せてユーザインタフェースの変更または操作に応じてデータが変更される双方向のデータバインディングがある。
メソッドとは、オブジェクト指向プログラミングにおける、特定のクラスやオブジェクトに属する、特定の処理をひとまとまりにしたサブルーチンのことである。「method」という単語は、一般的な英単語としては「手段」「方法」などを意味する。
キーストローク
キーストロークとは、キーボードのキーを押したときに、キートップが沈み込む深さ、あるいは、そのような動きのことである。英語訳では、タイプライターやコンピュータのキーの一打ちや、キーを打鍵することをいう。
バインド
各要素を相互に関連付けること
ルーティング
ルーティングとはURLに応じてコンテンツの部分を動的に表示させる仕組みです。ルーティングは昨今話題のSinglePageApplicationを実装する上では欠かせない仕組み AngularJSのルーティング機能の基本 | Tips Note by TAM
ナビゲート
画面遷移

Angularはあなたが必要とすることを何でもすることができます。

すべてのチュートリアルの手順を完了すると、最終的なアプリはこのライブサンプル/ダウンロードの例のようになります。

こんなサイトが作れます

まず、我が英雄派遣会社で最も人気な英雄たちのダッシュボードから見てみよう!

Dashboard上の2つのリンク([Dashboard]と[Heroes])をクリックすると、このDashboardとHeroesの移動ができます。

ダッシュボードのヒーロー「Magneta」をクリックすると、ヒーローの名前を変更できる「Hero Details」を開きます。

[Back]ボタンをクリックすると、ダッシュボードに戻ります。 「Heroes」をクリックすると、アプリは「Heroes」リストを表示します。

別の主人公名をクリックすると、リストの下にある読み取り専用Messagesが新しい選択肢を反映します。

次の図は、すべてのナビゲーションオプションをキャプチャしています。

実際のアプリは次のとおりです!

次回は実際に作り始めます

今回は特に難しいこともなく、Angularの雰囲気だけでした。

こういうのができますというのがだんだんと見えてきました。

さて、次回から実際に作り始めるということで、

ようやくAngularの知識だけではなくを使ってみるということになります。

シェアする

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

フォローする