はじめに

株式会社プロットハブの新人エンジニアです！

未経験エンジニアとして、2023年中旬から弊社で働き始めました。日々の実務を通じて初めて知る言葉や、悩んだエラーについての記事を執筆しています。これらの経験が、同じような悩みを持つ方々の助けになれば嬉しいです。

ぜひ、お暇なときに他の記事もご覧ください😎

執筆にあたって

初めて0→1の案件をメインで任せてもらうことになり、内容としては会員限定のネイティブアプリの作成でした。

技術選定の際にネイティブアプリ開発用の知識や経験がないため、WebViewを使用してアプリ開発を行うことになったのですがそこで選ばれたのが『Monaca』でした。

私と同様に初めて『Monaca』を使用する方が迷わないで済むような記事にできれば幸いです。

※WebViewについてはこちらの記事を参照してください！（記事URL）

Monacaとは？

『Monaca』とはハイブリッドアプリケーションを簡単に開発できるプラットフォームです。

MonacaはCordovaを使用してHTML、CSS、JavaScriptを使用してクロスプラットフォームのモバイルアプリケーションを作成するためのクラウドベースの開発環境を提供します。これにより、特別なネイティブアプリ用コードの知識がなくても、iOSやAndroid向けのアプリを開発することができます。

※Cordovaについてはこちらの記事をご確認ください！（記事URL）

Monacaの特徴

1. 豊富なテンプレート
   • MonacaはOnsenUIという独自のフレームワークを用意しており、手軽にアプリ開発環境を準備することができるので即座にデプロイすることが可能です。
   • ReactやVueなどのフレームワークにも対応しており自身のローカル環境で作成したそれら使用したアプリケーションでもMonacaにアップロードすることでハイブリッドアプリケーションにすることが可能です。
2. 豊富なプラグイン
   • ネイティブアプリ特有の設定などもCordovaにある豊富なプラグインが標準で備わっているのでWebの画面上から簡単に設定を行うことができます。
   • 例えば、特定の画面に遷移した時にiPhoneを横画面に固定するなども可能です。※その実装方法についての記事はこちらになります（記事URL）
3. クロスプラットフォームアプリ開発
   • 本来であればSwiftとKotlinなどでiOSとAndroid両方の実装別途必要になる所が、1つのソースコードでiOSとAndroidの両方に対応したアプリを作成できるため、開発効率が大幅に向上します。特に、リソースが限られている小規模チームやスタートアップに最適です。
4. サポートの充実度
   • 実際に運用する際はMonacaの有料プランに入ることになりますが、有料プランにはチケットというものが存在して、チケットを消費することでMonacaの中の人に技術的な質問などをすることができます。また対応スピードも非常に速いです。　実際に私も対応方法がわからない時に連絡しましたが、即時対応いただきご返答いただくことができました！
5. 既存ウェブアプリのモバイル化
   • 既にウェブアプリケーションとして実装されているものを、簡単にモバイルアプリとして利用することができます。WebViewを活用して、既存のウェブコンテンツをモバイル環境に提供できます。
   • 例えばVueで作成されたものでもMonaca上にアップロードするようにすることで即座にモバイルアプリ化することが可能です。

現状Next.jsやNuxt.jsなどが対応可能なのかどうか判断できていないので有識者の方ご教授いただければと思います🙇

Monacaのデメリット

1. Monacaの提供する標準Cordovaプラグイン以外のプラグインが必要な場合 別途Cordovaの仕様を把握しプラグインをインストールする必要が出てくる
2. Cordovaのバージョンによって使用ライブラリやフレームワークのimportの記述が変わる
   • tailwindなどのCSSフレームワークなどはよく記事に記述されている方法ではJavaScriptのバージョン互換性などの問題によりCordovaが最新のJavaScriptに合わせたimportの記述に対応していないなどのエラーが発生した為、この辺りの使用可否の確認と使用するフレームワークやライブラリの選定は少し慎重になる必要があります。※そのエラーが出た時の記事はこちらになります（記事URL）

まとめ

Monacaは、特にネイティブアプリ開発の経験が少ないエンジニアにとって非常に強力なツールになると思います！

豊富なプラグイン、簡単なビルドやデプロイ機能を利用することで、効率的にハイブリッドアプリの開発ができます。

私自身も今回初めてMonacaを使用したので認識違いがあるかもしれませんので公式のドキュメントも確認をオススメ致します。

この記事が、初めてMonacaを使用する方々の参考になれば幸いです。

参考URL（https://ja.docs.monaca.io/products_guide/monaca_intro）