Angular.jsよりもAngularを推奨してもらったので、さっそく勉強してみた。

今日の勉強時間

一通り実行してみた結果、実際にかかった時間は３０分ぐらいかも。
Angular.jsよりサンプルプログラムをインストールして実行するまでの時間は短く感じました！

前提

・npmがインストールされていること
・Node.jsのバージョン8.xまたは10.xがインストールされていること

僕は昨日の記事の中でインストール済みなので飛ばします。

参考:ANGULAR.JS公式チュートリアルのPhoneCat Tutorial Appはじめました。
https://qiita.com/ryuutamaehara/items/4f095b264f5e688ef1c1#comment-54fb8b28131e1bbf3996

なぜAngular？昨日はAngular.jsだったじゃん。

昨日の記事を見ていただいた方にコメントをいただきました。

「angularJS はもう古くなってしまっている」

ﾅﾝﾄ(´･ω･｀)

WEB開発って時代の流れが速いっていうけど本当なんですね。

いままで顧シス担当やらメインフレームの運用とか〇〇みたいな現場しか回ったことなかった私はこの事に感動を覚えました。いいね。web系。
これからちょこっとずつ頑張っていきたいと思います('ω')ノ

では、今日から実際にオススメをいただいた「Angular」を勉強してみたいと思います。

さっそく公式サイトをチェック！

まずは公式サイトから！
驚くなかれ！な、なんと日本語だァァァァァァァ！('ω')ﾜｰｲ

参考:https://angular.jp/

トップページに「モバイルとデスクトップ、ひとつのフレームワーク」なんてオシャンなキャッチフレーズを見てわかる通り、Angularでは今の主要なデバイスのシステムを１つのフレームワークで構築可能な事が強みのようです。

では、まずはじめに

Angular.jsと同じくNode.jsとnpmを使うみたいですね。
この二つはこの記事の頭にも書きましたが、すでにインストール済みなので飛ばします。

Angular CLIをインストールする

ここも記事通りに進めてみます。
Angularは主にCLI(コマンドラインインタフェース)で操作を進めるみたいですね。
CUI嫌いだからwindows使っているんだけどなぁ...。

文句言っちゃダメですよね。はい。

コマンドプロンプトから以下のコマンドを実行します。

npm install -g @angular/cli

ワークスペースと初期アプリケーションを作成の作成

ワークスペースと初期アプリケーションを作成します。
次のコマンドを実行する前に作成したいディレクトリに移動しておいてくださいね。

ng new my-app

ng newコマンドでアプリケーションのひな型を作成されるようです。
my-appが作成されるアプリケーション名になります。

作成されるひな型プロジェクトは以下の構成を含むようです。
・my-appという名前のルートフォルダをもつ新しいワークスペース
・my-appと呼ばれる最初のスケルトンアプリケーションプロジェクト（srcサブフォルダ内）
・エンドツーエンドのテストプロジェクト（e2eサブフォルダ内）
・関連する設定ファイル

このアプリの中にはすぐに実行できるアプリが入ってるみたいですね。

サーバを起動する

作成したひな型の中にはサーバも含まれるみたいですね！
さっそく起動してアプリの動作を確認してみます。

cd my-app
ng serve --open

serverではなくserveですよ。（笑）
成功するとhttp://localhost:4200/が自動的にブラウザで開かれます。

Angularのアイコンとともに「Welcome to my-app! 」といった表記が画面が表示されていたら成功です。

Angularコンポーネントを編集してみる

./src/app/app.component.tsのファイルがAngularの構成管理ファイルらしいです。
画面上のデータ表示からユーザからの入力に基づいたアクションなどもここに記載するっぽいです。

この中に「my-app」という記載があるので、「My First Angular App」という文字列に変更してみます。
この状態で先ほど起動したアプリ画面を更新すると、「Welcome to my-app! 」といった表記が、「Welcome to My First Angular App! 」に変わったことが確認できます。

次にcssの設定をしてみます。

./src/app/app.component.css

h1 {
  color: #369;
  font-family: Arial, Helvetica, sans-serif;
  font-size: 250%;
}

元のブラウザに戻ると、cssが適用されたことが確認できます。

ここまでで今日の分のチュートリアルは完了です。

明日のおはなし

次のステップとして公式サイトには次のように記載されています。

・Tour of Heroesチュートリアルでは、実践的な追加学習が提供されています。それは、人材派遣会社がスーパーヒーローの従業員のグループを管理するのに役立つアプリを構築する手順を順を追って説明します。

なんか聞き覚えがあるような無いような…
タイバニ？なんだ？記憶が…ｗ

・アーキテクチャガイドでは、モジュール、コンポーネント、サービス、依存性の注入（DI）などの重要な概念について説明します。特定のAngularの概念と機能に関する詳細なガイドの基礎を提供します。

今日は以上です！！眠い！(:3 」∠)