ANGULAR.JS公式チュートリアルのPhoneCat Tutorial Appはじめました。

なぜ始めたのか?

業務でJavascriptのwindowオブジェクトの操作とJasmineのUTをやる機会が
あったので、これを機会にJavaScriptの知識を深めたいと思い、テーマを探していました。

目に留まったのがGoogleなどが開発を手掛けたAngularJSが有名！などという情報が入ってきたので、公式ページにあったチュートリアルを試してみることにしました。
電話のカタログページを使ったチュートリアルみたいですね。

ひとまず、今回は環境構築から始めたいと思いまっす。

・Gitがインストールされていることを前提として進めます。

繰り返しになりますが、今回は環境構築がメインです。

まずはangular-phoncatのリポジトリをクローンして
クローンしたフォルダをカレントディレクトリにします。

git clone --depth=16 https://github.com/angular/angular-phonecat.git
cd angular-phonecat

--depth=16のオプションは最新16件分のコミットのみ抽出するらしいです。
ダウンロード速度を考慮して設定してるみたいですね。

次に依存関係を解決するためにNode.jsをインストールします。
これは事前設定されているローカルWEBサーバの実施に使うみたいです。

インストーラはOS毎に分かれているので公式ページから適切なものをダウンロードしてインストールしてください。

Node.JSについてよくわからなかったので調べてみたところ、サーバでJavaScriptを実行できるようにするための
プラットフォームらしいです。
まずは使ってみて雰囲気つかんでみて、気になるとこがあったら詳細に調べてみたいと思います。

インストールが完了したらコマンドラインで次のコマンドを叩いて正常にインストールされた事を確認します。
ちなみに、2019年2月26日現在ではv10.15.1が推奨される最新のNode.jsです。
11.10.0も公開されていましたが、安定している方を選びます。

node --version

Node.jsをインストールしたらnpmも取得されます。
npmはパッケージ管理ツールでNode.jsのパッケージを管理するのに使用します。
まずは依存関係をインストールしてみます。

npm install

完了したら実際にWEBサーバを起動してみましょう！
デフォルトの設定ではポート8000をリスナーとするlocalhostが作成されるはずです。

npm start

起動に成功したらhttp://localhost:8000/index.htmlにアクセスしてみましょう。
こ、これがAngular.jsを使ったページか！めっちゃカッコいい画面やんけ！って画面が表示されれば成功です。

さて、まだ環境構築は終わりではありません。
次は単体テストの機能が正常に動作するか確認します。

angular.jsはKarmaを使って単体テストするように構築されています。
さっそくKarmaを起動してみます。
起動はnpmの以下コマンドでできます。

npm test

Chromeのブラウザが起動してKarmaの画面が表示されます。
今回はKarumaの勉強に焦点を当てるわけではないので、いったん此処まで。

次にテストツールのE2E(エンドツーエンド)の確認です。
このプロダクトはユーザとブラウザの対話をシュミレートすることでテストします。

WEBサーバが起動した状態で、別のコマンドラインを起動して、次のコマンドを実行します。

npm run protractor

すると、ブラウザが起動してアプリケーションを自動でテストし始めます。
検索用テキストボックスに勝手に文字が入力されて検索されたりと少し驚きますが、これによりE2Eのテストが自動化できる仕組みっぽいです。
たぶん別途specを用意する必要があるんだと思いますが、これは別の機会に勉強します。

今回はここまで!

マークダウンは後程なおします。
おやすみなさい。