ペロハム大学

ﾔﾙｿﾞｰ

Angularチュートリアルをやる 1日目

Angular

■ 思ったこと

まずは公式みながら環境設定→ワークスペースの作成→チュートリアルまでやろうと思うhttps://angular.jp/guide/setup-local#angular-cliをインストールする-

■ Angularをはじめよう

下準備

なになに、ローカルシステムにAngularをインストールするには、Node.jsとnpmが使える必要とな……ある！！OK！！

Angular CLIをインストール

Angular開発で必須なコマンドラインツールのこと、コマンドプロンプトでnpm install -g @angular/cliでインストールできる、ng versionでversion確認まで出来たらOK！ng なんちゃらって感じで使えるよ

ワークスペース作ってみる

VSCodeのターミナルでng new my-appしました。全部入りのひな形プロジェクトが作られるみたい、npmインストールも兼ねている。成功するとこんな感じ

実行してみる

cd my-appしてng serve --openするとhttp://localhost:4200/が立ち上がって画面が開く！これでとりあえずの動作確認はいいか

■ チュートリアルやり申す

https://angular.jp/tutorial/tour-of-heroes/toh-pt0ツアー・オブ・ヒーローズ……？

1. ヒーローエディター

アプリケーションシェル

画面開いた時に表示されたページ、それがアプリケーションシェルらしい。こいつはAppComponentと名の付く三つのコンポーネントから成り立つぞ、src/appに行ってみよお！

  • app.component.ts
    • TypeScriptで書かれたコンポーネントクラスのコード
    • AppComponentクラスがすでにできているが、ここのtitleプロパティを書き換えてあげると、htmlで{{}}でバインディングされた対応箇所も変わる仕組み。だからexport されてるんですね
  • app.component.html
    • HTMLで書かれたコンポーネントのテンプレート
    • 上で先に言ったけど・・{{}}は補間バインディングという構文、tsでどんどんプロパティ作ってhtmlに埋め込んでいくイメージか
  • app.component.css
    • そのまんま、CSS

コンポーネントを作る

ng generate component heroesってやると、src/app/heroes/ごとまるっとコンポーネントが作成される！こりゃあ便利だね。中身はやっぱりtsとhtml,css

Componentシンボル

  • 生成したtsファイルにはデフォルトでComponentがインポートされていたが、クラスに@Componentもくっついているはず
  • こいつはデコレーターつって、クラスにメタデータを付与してくれていたのだ
  • （メタデータはとりあえず、クラスに設定必要な情報と理解しておこう）
  • ng generateが生成してくれたものは3つのメタデータプロパティでした
  • こうしてみると、確かに自動生成されているとありがたい

インターフェースを作成する

  • おさらいすると、インターフェースはオブジェクト型に型名つけるやつ！
  • heroesクラスにこれからHeroを生成していくわけだけど…src/appに自分でhero.ts作って、そこにHeroインターフェースを作成しとこうって話
  • 作ったオブジェクトはhtml内に{{selector.プロパティ名}}でバインディングすべし

双方向データバインディング

  • チュートリアルいわく、htmlから入力した値をプロパティに流し込んだら素敵やん、ということで[(ngModel)]というものがあるらしい
  • 双方向に データを流すから、双方向データバインディング！
<input id="hero-name" [(ngModel)]="hero.name" placeholder="name" />
  • placeholderはhtmlで使える属性、初期値を設定できるぜ

ていうか…データバインディングについてもっと詳しく！

AppModule

  • ngModelを使うにはFormsModuleのインポートが必要
  • インポート先はAppModule！Angular全体としてどーいう部品使う？みんなファイルやライブラリ何使ってるの？…いわゆるメタデータ！こゆのを知っておく場所
  • だいたいメタデータは@Componentで個別に付与されてるけど、その他重要なものはAppModuleの@NgModuleに含まれている
  • ということで、ここにインポートして@NgModuleのimports配列に追記してあげればOK
    • アプリケーションに必要な外部モジュールのリストだよ
  • これに限らず、すべてのコンポーネントはNgModuleで宣言されていなければならない
  • 実際、さっき作ったHeroesComponentもいつの間にdeclarations配列に含まれている
    • ng generateしたときに自動で書きこんでくれてたんだね…！ありがとう、CLI

■ 感想

手でコンポーネント作ったらそれなりに事故が起きそうだ、ありがとうCLI。チュートリアルの文章がユーモアあって結構おもしろい、いいね！！でも、細かい仕組みとかはよくわからんので・・まずは手を動かして、そのあと改めて勉強も必要そうな！