Ionic(Angular)のフォルダ構成を完全解説

Ionicのフォルダ構成について

Ionicで作成したプロジェクトは下記のような構造になっています。

かなり複雑で、最初に見たときは戸惑うかもしれません。実際に触るのはsrc/appフォルダがほとんどになりますが、他のフォルダを含めて解説したいと思います。

ルートフォルダについて

名前	説明
e2e/	システム全体の動作検証を行うE2Eテストの際に利用します。最初はほとんど触りません
node_modules/	node.js上で動くため、package管理ソフトにnpmを使うことになりますが、npm経由でインストールしたライブラリが保存されます
src/	実際に開発を行う場所です。9割このフォルダを触ります。
angular.json	Angularの設定ファイルです。フォルダの出力先などビルドを中心にした設定はここで行います。
package.json	実際にプロジェクトで使用するライブラリを指定します
package-lock.json	package.jsonで指定したものが入っているか確認します。エラーの時にたまにいじります

したがって、基本的にはsrcだけをいじると考えておいて差し支えないと思います。

srcフォルダについて

それでは、実際に開発を行うsrcフォルダを見てみます。

srcのなかでも触るのはsrc/appがほとんどになりますが、こちらについても簡単に解説をします。

ファイル/フォルダ	説明
src/app	実際に触るのはほとんどこのフォルダのなかです。このフォルダが開発対象と考えていただいて問題ないと思います。
src/assets	画像や音声、動画などのリソースを配置します。例えばsrc/resourcesというフォルダを自分で作成すると読み込まれないので注意が必要です。
src/environments	なかには簡単なjsonファイルが本番用と開発用に入っています、環境変数をそれぞれ定義します。Google Analyticsをいれるときなどにいじりました。
src/theme	cssの拡張であるscssでデザインを規定しますが、そのファイルが入っています。IonicのUIが優れているため、個人的にはあまり触りません。
src/global.scss	プロジェクト全体に適用するscssを書く際はこちらを使います。たた、実際はpageごとに用意されるscssをいじることが多いです。
src/index.html	Anugular(Ionic)でも最初によみこまれるのはIndex.htmlです。
src/main.ts	アプリを起動するためのファイルです。index.htmlのあとに読み込まれます。
src/polyfills.ts	IE10/ 11対応を行うもののようですが、IonicってIEで見れないんですよね。。
src/test.ts	単体テストの設定ファイルです

まとめ

基本的に、src/appのなかをいじる、とだけ考えておけばいいと思います。

その他

IonicをAngularで使って、写真から文字情報を抽出して爆速でレポートや記事を作成するアプリを作成しています。無料なのでよかったらどうぞ。 iOS => https://apps.apple.com/app/id1497498494 Android =>  https://play.google.com/store/apps/details?id=com.rainbowsv2.ocr