Angular ファイル構成

![angular.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/368226/03ea7906-ff24-ea20-081b-f7487201ae03.png)

今回は以下について解説していきます。

:point_up: Angularのアプリケーションの構成を理解する。
:v: 構成を確認するために、実施に改修を加えてみる。


# Angularのアプリケーションの構成を理解する。
環境構築済みを前提で進めて行くので、まだ[Angular入門] (https://qiita.com/NS19960207/items/a3f1c755a6839ed7b94a)の内容を設定済みでない方はそちらから初めてください。

主なファイルの構成は以下です。

- e2e
- node_modules
- src

###e2e

e2eとは、End-to-Endテストの略称で、自動的にテストを実行してくれる機能です。

Angularのe2eテストは、Webページに対して、テキストの入力やボタンの押下といった操作を自動的に行わせて、結果が正しいかを確認しています。

###node_modules

ここにはライブラリが大量に入っています。
node_modules内の主なパッケージは３つに分類されます。

- Angualrパッケージ
    - @angularで始まるパッケージで、Angularのコアとオプションのモジュールになります。
- サポートパッケージ
    - Angularアプリケーションを実行するために必須の[サードパーティ](https://kotobank.jp/word/%E3%82%B5%E3%83%BC%E3%83%89%E3%83%91%E3%83%BC%E3%83%86%E3%82%A3-3598)のライブラリです。
- ポリフィルパッケージ
    - [ポリフィル](https://developer.mozilla.org/ja/docs/Glossary/Polyfill)はブラウザのJavaScript実装のギャップを埋めます。

###src
HTML,CSS,Componentなど、開発を行う時によく触るファイルがまとめられています。
基本的なことならこのファイルを改修するだけでできます。

#改修を加えてみる。
今回は`src`に改修を加えて、その結果を`e2e`でテストしてみようと思います。
初期画面のタイトルを変更して、`e2e`でテストしてみます。

###src
タイトルは
`app.component.html`内でこのように表されています。
上部の `Welcome to {{ title }}!`が今回のタイトルです。

<img width="1116" alt="スクリーンショット 2019-05-28 0.53.51.png" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/368226/bd6b12be-1d6f-bf85-8ae7-bf7135a27451.png">

ここの`title`を変更するためには、
`app.component.ts`を変更する必要があります。

以下のように、`title = my-app`と変更を加えてみましょう。
<img width="729" alt="スクリーンショット 2019-05-28 0.54.04.png" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/368226/d1a2dbbe-b0e0-cc23-564a-a5cc56c37f0d.png">


####変更内容



 - 変更前

`export class AppComponent {title = 'test-qiita';};`
<img width="711" alt="スクリーンショット 2019-05-28 1.05.30.png" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/368226/fd59a2bc-ce55-5efd-49f3-b0760c786d49.png">



 - 変更後

`export class AppComponent {title = 'my-app';}`
<img width="700" alt="スクリーンショット 2019-05-28 1.06.54.png" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/368226/2121a422-870c-bda3-7be0-938e9c2028b9.png">

このように変更されていればOKです。:ok_hand:

srcのファイルにはこのような、実際にコーディングする際によく変更するファイルが入っています。
これでsrcについて少しわかったのではないでしょうか。:smile:


###e2e
続いてe2eです。

Angular CLIを使用して、プロジェクトのディレクトリで`ng e2e`を実行してみましょう。
すると、以下のような、equalじゃないよーといったエラーが起こります。:frowning2:

<img width="503" alt="スクリーンショット 2019-05-28 1.19.56.png" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/368226/a0132904-edd6-9cca-a1a4-51045dbe735d.png">

これは、設定しているテスト内容が間違っているためです。
テストを設定しているファイルは`app.e2e-spec.ts`です。

このファイルの中間部分の`Welcome to my-app!`の部分を変更してください。
※キャプチャーは変更ずみ
<img width="942" alt="スクリーンショット 2019-05-28 1.24.12.png" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/368226/6bfffd25-2221-54ce-192e-d3e3c1730195.png">

これで、設定が完了しました。
再度、`ng e2e`を実行してみましょう。

一瞬ブラウザが立ち上がり、消えた後にSUCCESSと表示されるはずです。

<img width="828" alt="スクリーンショット 2019-05-28 1.34.11.png" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/368226/b6444e87-9485-2270-8d26-5123e9e2176c.png">

今回はセレクタで、実際の画面からタイトル部分を取得し、それと設定した文言が同一かをテストしていました。

これでe2eついても少しわかったのではないでしょうか。:smile:

#参考資料

https://codezine.jp/article/detail/11013
https://angular.jp/guide/npm-packages