Angularお勉強 ～その４～ Angularプロジェクトのファイル構成②

その３の続き
ng new コマンドで作ったAngularプロジェクトについて、
自動生成された各ファイルのロールをまとめる

今回はroot folder全体を見ていく
（その３ではroot folder内のsrcフォルダ内を見ていた）

• • • • • • • • • • • • • • -

• • • • • • • • • • • • • • -

The root folder

The src/ folder is just one of the items inside the project's root folder. Other files help you build, test, maintain, document, and deploy the app. These files go in the root folder next to src/.

Angularプロジェクトにおいて、srcフォルダにアプリのソースを配置する必要があった。
そのsrcフォルダはrootフォルダ内にあって、rootフォルダ内のその他のファイルは、
ビルドやテスト、維持、デプロイを手助けしますよ！とのこと。
rootフォルダ内の初期生成ファイル群は次の通り。

my-app
  L e2e
     L src
        L app.e2e-spec.ts
        L app.po.ts
     L tsconfig.e2e.json
     L protractor.conf.js
  L node_modules/...
  L src/...
     L karma.conf.js
  L .editorconfig
  L .gitignore
  L angular.json
  L package.json
  L README.md
  L tsconfig.json
  L tslint.json

e2e/

E2E（End to End）テストファイルを置く場所。
テストコードはあくまでメインアプリをテストするためにあるので、
srcフォルダにいれずに別々に管理するべし！とのこと。
メインアプリと独立しているので、E2Eテストフォルダ専用のtsconfig.jsonが存在する。
E2Eテストといえば筆者的にはSelenium WebDriverがでてくるが、
AngularではProtractorなるテストフレームワークを用いている。
Selenium WebDriverベースのAngular用テストフレームワークとかなんとか。
あまり詳しくないのでそのうち別記事におこしたい。
公式？
Protractor - end-to-end testing for AngularJS

node_modules/

node.jsがpackage.jsonの定義から勝手に作るサードパーティ製のモジュール群がおかれる場所。
bootstrapとか前入れた時もここに配備された。
ただフォルダ数多すぎて目当てのモジュールを探すのが個人的には結構手間だった。
明らかにpackage.jsonに定義されてないモジュールも大量に存在するので、
恐らくmavenよろしく依存関係を全部辿って一覧化されてそう。
ソースの中のimport宣言でfromにここにある参照先を確か書くので地味に面倒だった記憶。。。

.editorconfig

エディター（開発環境）の基本設定を書く設定ファイル。
プロジェクトで統一的な設定をするために使う。
（エディターは別に統一しなくてよくない？とか思ったり・・）
設定の仕方は下記参照
editorconfig.org
Angularの場合メジャーな開発環境はWebStormとかVSCとかだと思うが、
そのあたりではプラグインなしで使える設定ファイルの模様。

.gitignore

gitの設定ファイル。
コミット対象外としたいレポートとかログとかをコミット対象から外す設定を書くやつ。
こっちは有名ですね・・。
デフォルトでdistやtmpなどのコンパイル成果物や、IDE向け設定ファイル、ログ、システムファイルなどが
ignoreされるようになっている。

angular.json

AngularCLIに対する設定ファイル。
ビルド時に何のファイルを含めるか等々をあれこれ設定できる。
もっと深く知りたい場合は公式を見てね！とのことだが、公式ってどこだよ・・。
この辺あさればわかるのか・・・？
Angular CLI
察するにarchitect以下にかかれてるbuildやらがngコマンドと対応していて、
コマンド実行時に引数として渡す仕組みになってるとかそんな感じ？

package.json

こっちはnpmに対する設定。
node_modulesに突っ込まれるファイルの一覧的なやつ（多分）。
こっちのファイルのいじり方は下記参照とのこと。
docs.npmjs.com

protractor.conf.js

Angular専用（？）E2EツールのProtractorに対する設定ファイル。
E2Eテスト自体はng e2eコマンドで起動できる。
設定の詳しい書き方は下記参照？
protractor/config.ts at master · angular/protractor · GitHub

README.md

自分のアプリの情報を書く。
デフォだとAngularCLIに対する説明がちょこっと書かれている。
自分用に書き換えてね！とのこと。

tsconfig.json

TypeScriptのコンパイラに対する設定。
後々下記ファイル等を参考にちょっとまとめたい？
tsconfig.json | TypeScript 日本語ハンドブック | js STUDIO

tslint.json

TSLintに対する設定ファイル。
設定ファイルの設定の仕方は下記参照。
palantir.github.io

長かったがこれでようやくGETTING STARTEDが完了。
（どんだけ時間かけてんの？って感じですね。。）
ようやくコードを書いていける・・・。