IT

ionicのフォルダ構成完全解説

 AngularやIonicのフォルダ構成はかなり複雑で、最初に見たときは戸惑うかもしれません。でも実際に触るのはある特定のフォルダだけですので心配はいらいないのですが、忘備録を兼ねて解説したいと思います。

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

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

directory

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

ルートフォルダについて

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

package.json実際にプロジェクトで使用するライブラリを指定します
package-lock.jsonpackage.jsonで指定したものが入っているか確認します。エラーの時にたまにいじります

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

srcフォルダについて

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

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

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

ABOUT ME
Faust
1980年代生まれで東京都府中市育ち。大学は物理化学専攻してメーカへ。 Engineer of Python, Angular. Analyzing data and building app at Awesome Rainbows LCC. #SDGs #Python

COMMENT

メールアドレスが公開されることはありません。 * が付いている欄は必須項目です

CAPTCHA