こんにちは！  KEPPLE CREATORS LAB でエンジニアをやっている大石です。

私はこれまで Web アプリの開発に携わってきましたが、ある新規プロジェクトでモバイルアプリの開発を担当することになりました。
Web エンジニアがはじめてモバイルアプリを開発するにあたり、Ionic Framework + Capacitorを利用してみたので今回はその構成について話をしていきたいと思います。

Ionic Frameworkとは

Ionic Framework とは HTML、CSS、JavaScript などのウェブ技術でモバイルアプリのUI・UXを構築できるUIツールキットです。
iOS や AndroidのUI ガイドラインをエミュレートしているため、Ionic が提供しているコンポーネントを利用することによりネイティブアプリらしい見た目や動作を実現することができます。
実際、Web ブラウザーで確認しながら開発し、ある程度のまとまりができたら各 OS の実機で動作を確認するという進め方をしていたのですが、iOS・Android 共に違和感を感じることはあまりありませんでした。

また React や Vue などのライブラリやフレームワークと容易に統合することが可能なため、それらの恩恵を受けながら開発することができます。
ただし、Ionic はあくまで UI コンポーネントを提供しているだけなので、ネイティブの機能を利用する際には後述する Capacitor と併用して開発を進めることになります。

Capacitorとは

公式ドキュメントでは Web アプリをクロスプラットフォーム化するネイティブライブラリという説明がなされています。*1
Web 領域部分とネイティブ領域部分の橋渡しをするものと整理すると分かりやすいのではないかなと思っています。その実体は、Ionic コンポーネントを利用して作成した Web アセットを WebView 上で表示するネイティブアプリを生成しています。
ネイティブ領域部分はプラグイン化されており、カメラやファイルなどのネイティブ機能を利用したい場合に各プラグインの API を通して利用するかたちとなっています。
そのため、開発者は Swift などのネイティブ側のコードをあまり意識することなくネイティブ機能を利用できます。

また、場合によってはネイティブ側のコードを書ける人にプラグインの作成を依頼して役割分担をすることもできます。モバイルアプリのフロントエンド開発を UI 構築する人とネイティブ側の機能部分を構築する人で分けるイメージですね。最初の頃の要件では既存のプラグインで満たせる場合だったとしても、時が経つにつれて既存のプラグインでは満たせなくなる場合があるかと思います。そんな時にネイティブ側を拡張できる余地があるというのは、アプリを継続的に開発するにあたって重要なことだと思います。

なぜIonic Framework + Capacitorなのか

今回私たちが Ionic Framework + Capacitor を採用した一番の理由は、私たちのチームには Web 技術の経験者が多いことから、その資産をそのまま活かせるためです。
Web 技術の知見をそのまま活かせるため、初期開発スピードや修正サイクル（体験→修正→反映→体験...）を早く回せるのではないかという判断がありました。
実際、プロトタイプを作るにあたって一度もネイティブ側のコードをさわっていません。（プラグインを利用するためのおまじない的なコードは除く）
他の候補として Flutter や React Native があがりましたが、今回のプロジェクトで重要なのは可能な限り早く MVP を作り、仮説検証と方向修正を行うことだったので採用に至りませんでした。

また、WebView ベースで動く Ionic Framework + Capacitor だとアプリケーションのパフォーマンスやネイティブらしさという観点では他の選択肢と比べると劣ると思いますが、今回はそこまでシビアに要求されませんでした。
このアプリケーションのパフォーマンスやネイティブらしさというのをどこまで許容できるかというのはそのプロジェクトやプロダクトによってまちまちだと思うので、初期段階ではミニマムなサンプルアプリを作成し実際に体験してもらうのがいいかと思いますし、私たちもそうしました。

最後に

アプリの要件やチームの技術スタック次第では Web 技術を用いて iOS・Android のアプリ開発ができる Ionic Framework + Capacitor は一つの選択肢としてありだと思います。

モバイルアプリをどう開発するか迷っている方や調査している方の参考になれば幸いです。

WE ARE HIRING！

KEPPLE CREATORS LAB では一緒に働くメンバーを募集しています。
募集しているポジションの詳細はこちらをご覧ください。

▼KEPPLE CREATORS LAB ブランディングサイト

▼KEPPLE CREATORS LAB 求人一覧

*1   https://capacitorjs.jp/docs/