Ionic(Angular)のフォルダ構成を完全解説
by
クリエイターとエンジニアを応援するNP-Systems@個人開発
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