ionic-angular 2020年12月17日 07時06分 S., Masaya Ionic(Angular)のフォルダ構成を完全解説 0 Contents hide 1 Ionicのフォルダ構成について 2 ルートフォルダについて 3 srcフォルダについて 4 まとめ 5 その他 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/id1497498494Android => https://play.google.com/store/apps/details?id=com.rainbowsv2.ocr 0