前回は、これから理解するMonacaプロジェクトの作成方法について説明しました。
Monacaは、Cordovaを利用した開発環境を提供しています。そのため、MonacaプロジェクもCordovaが提供しているプロジェクトをベースにMonaca用にカスタマイズされています。Monacaプロジェクトは、大きく分けると、以下の2種類のプロジェクトを提供しています。
- トランスパイルが不要なプロジェクト
- トランスパイルが必要なプロジェクト
トランスパイルについて簡単に説明すると、トランスパイルは、ソースコードの状態では、Monacaプロジェクトのアプリとして動作しないため、Monacaプロジェクトのアプリとして動作するように変換、出力する処理になります。
今回は、Monacaプロジェクトを理解するために、上記2種類のプロジェクト構成について説明していきたいと思います。
トランスパイルが不要なプロジェクトの構成
Monacaで提供しているトランスパイルが不要なテンプレートプロジェクトは、JavaScriptで構成されたプロジェクトになります。（スクリーンショット参照）
今回は、以下のテンプレートプロジェクトを参考に説明していきます。
- Onsen UI V2 JS Minimum
ルート
Monacaプロジェクトのルートに配置されている設定ファイルは、以下になります。
- .gitignore
- .monacaignore
- config.xml
- package.json
.gitignore
.gitignoreは、Gitリポジトリ内でコミットしたくないファイルやディレクトリを指定するファイルになります。MonacaプロジェクトをGitで管理する場合に使用します。
.monacaignore
.monacaignoreは、MonacaクラウドとMonaca LocalkitやMonaca CLI上のMonacaプロジェクト間で、アップロードまたはダウンロードしたくないファイルやディレクトリを指定するファイルになります。詳しくは、以下を参照してください。
config.xml
config.xmlは、Cordovaプロジェクトでも使用されている設定ファイルになります。config.xmlの詳しい説明は、以下を参照してください。
config.xmlの設定の中で、MonacaクラウドIDEから追加される設定については、今後の設定編で説明する予定です。
package.json
package.jsonは、Monacaプロジェクトで使用するnpmパッケージ設定や実行コマンド設定、Cordovaプラグインの設定を行うファイルになります。
package.jsonの設定の中で、MonacaクラウドIDEから追加される設定については、今後の設定編で説明する予定です。
resフォルダー
resフォルダーは、アプリのアイコンやスプラッシュスクリーンの画像ファイルや、CordovaプラグインをZip等の圧縮パッケージでインポートした際に保存されるフォルダーになります。
MonacaクラウドIDEからresフォルダーに追加される設定については、今後の設定編で説明する予定です。
wwwフォルダー
wwwフォルダーは、アプリの実行ファイルが保存されるフォルダーになります。アプリ開発を行う場合は、wwwフォルダー内のファイルを編集する形になります。Monacaで提供しているテンプレートプロジェクトの起動ファイルは、wwwフォルダー配下に配置されているindex.htmlになります。
componentsフォルダー
componentsフォルダーは、MonacaクラウドIDEのメニュー、
- 設定 - JS/CSSコンポーネントの追加と削除
で追加されるコンポーネントが保存されるフォルダーになります。最新のテンプレートプロジェクトでは、JS/CSSコンポーネントの追加と削除で追加されるコンポーネントは、使用していません。現状では、旧テンプレートプロジェクトの互換性のために残されています。
cssフォルダー
cssフォルダーは、テンプレートプロジェクトで使用するCSS（Cascading Style Sheets）ファイルが保存されているフォルダーになります。テンプレートプロジェクトでは、以下のファイルが配置されています。
- style.css
テンプレートプロジェクトでCSS設定を行う場合は、上記のstyle.cssを編集します。index.htmlでは、style.cssを使用するために、下記の設定が追加されています。
<head>
<link rel="stylesheet" href="css/style.css">
</head>
libフォルダー
libフォルダーは、テンプレートプロジェクトで使用するライブラリーが保存されているフォルダーになります。今回使用しているテンプレートプロジェクトで使用されているOnsen UIのライブラリーもlibフォルダー内に配置されています。index.htmlでは、Onsen UIを使用するために、下記の設定が追加されています。
<head>
<script src="lib/onsenui/js/onsenui.min.js"></script>
<link rel="stylesheet" href="lib/onsenui/css/onsenui.css">
<link rel="stylesheet" href="lib/onsenui/css/onsen-css-components.css">
</head>
.monacaフォルダー
.monacaフォルダーは、隠しフォルダーになります。基本的に、.monacaフォルダー内の以下のファイルは、システム側が操作するファイルになるため、直接編集することは、推奨されていません。
- local_properties.json
- project_info.json
local_properties.json
local_properties.jsonは、Monaca LocalkitやMonaca CLIで使用しているローカル上のプロジェクトとMonacaクラウド上のプロジェクトを紐づける設定を行っているファイルになります。
project_info.json
project_info.jsonは、Monacaプロジェクトの構成情報が保存されているファイルになります。
トランスパイルが必要なプロジェクトの構成
Monacaで提供しているトランスパイルが必要なテンプレートプロジェクトは、JavaScript以外で構成されたプロジェクトになります。今回は、以下のテンプレートプロジェクトを参考に説明していきます。
- Onsen UI V2 Vue3 Minimum
トランスパイルが必要なプロジェクトにもトランスパイルが不要なプロジェクトと同じファイルやフォルダーが配置されています。同じファイルやフォルダーについては、同様の仕様のため、トランスパイルが不要なプロジェクトの構成を参照してください。
ここでは、トランスパイルが必要なプロジェクト特有の構成について説明していきます。
ルート
テンプレートプロジェクトでは、トランスパイルが不要なプロジェクトの構成にはなかった、以下のファイルが配置されています。
- vite.config.js
vite.config.js
トランスパイルが不要なプロジェクトでは、アプリ開発を行う際には、wwwフォルダー内のファイルを直接編集して開発を行いますが、テンプレートプロジェクトに配置されているVue3用のファイルは、wwwフォルダー内に配置しただけでは動作しないため、アプリとして動作するために変換してwwwフォルダー内に出力するトランスパイル処理が必要になりなす。
vite.config.jsは、トランスパイル処理の設定が記述されている設定ファイルになります。基本的に、vite.config.jsを直接編集する必要は、ありません。
node_modulesフォルダー
トランスパイルが必要なプロジェクトでは、package.jsonに設定されているトランスパイル処理に必要なライブラリーをインストールする必要があります。node_modulesフォルダーは、インストールされたライブラリーが保存されているフォルダーになります。
package.jsonに設定されているライブラリーのインストールは、MonacaクラウドIDEやMonaca Localkit、Monaca CLIでテンプレートプロジェクトを初めて開いた際に自動でインストールされます。
srcフォルダー
srcフォルダーは、トランスパイルが必要なプロジェクトのソースファイルが保存されているフォルダーになります。テンプレートプロジェクトのsrcフォルダーには、以下のファイルが配置されています。
- App.vue
- index.html
- main.js
テンプレートプロジェクトでアプリ開発を行う場合は、srcフォルダー内のファイルを編集します。
wwwフォルダー
wwwフォルダーについて、トランスパイルが不要なプロジェクトと同様に、アプリの実行ファイルが保存されるフォルダーになる点は同じなのですが、トランスパイルが必要なプロジェクトのwwwフォルダーは、トランスパイル処理で実行ファイルが出力されるフォルダーになります。
そのため、wwwフォルダー内のファイルを直接編集しても、トランスパイルの処理が実行された際には、上書きされてしまう点を注意してください。
おわりに
今回は、トランスパイルが不要なプロジェクトとトランスパイルが必要なプロジェクトの構成について説明しました。次回は、トランスパイルが必要なプロジェクトの設定と注意点について説明していきたいと思います。