モバイルHTMLアプリ開発における課題
iOSとAndroidの両方に対応したアプリをWeb技術で構築する際、UIコンポーネントの実装やプラットフォームごとの見た目の差異をどこまで自前で吸収するかは悩ましい問題です。さらに近年はVueやReactなど、チームが採用しているフロントエンドフレームワークに合わせてUIライブラリを選びたいというニーズもあります。単一のUIフレームワークに固定されると、既存のプロジェクト資産や社内のスキルセットと噛み合わないケースが出てきます。
Framework7io/framework7のREADMEでは、同プロジェクトがMITライセンスのオープンソースとして公開されており、iOS/Android向けアプリを構築するためのフルセットのモバイルHTMLフレームワークであると説明されています。このため、特定のビューライブラリに依存しない形でモバイル向けUIをまとめて提供しようとしている点が特徴として読み取れます。
READMEから確認できる関連機能
READMEの開発手順を見ると、npm installで依存関係を導入したあと、build:devやbuild:prodといったnpmスクリプトでCore(Vanilla JS)、Vue、React、Svelteそれぞれのパッケージを個別にビルドできる構成になっています。開発版はbuildフォルダに、本番向けビルドはpackagesフォルダに出力されると記載されており、フレームワークごとに成果物を分けて管理できる仕組みがあることが分かります。
また、core、react、vue、svelteという名前のnpmスクリプトを実行すると、それぞれの開発版パッケージをビルドした上でKitchen Sinkと呼ばれるデモアプリ一式を起動できるとされています。コンポーネントの挙動や見た目をまとめて確認できるカタログ的な仕組みとして用意されていることがうかがえます。
ソースコードはsrcフォルダ以下に集約されており、CONTRIBUTING.mdのガイドラインに従って変更はすべてsrc配下のファイルに対して行うべきとされています。CSSはLESSで記述し、JavaScriptはESモジュールで構成されていること、.editorconfigとESLintでコーディングスタイルを統一していることも明記されています。
検討時に確認したいポイント
複数のフロントエンドフレームワークが社内で混在しているプロジェクトや、将来的にVueからReactへ移行する可能性があるプロジェクトでは、同じUIフレームワークのAPIをフレームワークごとのラッパーで利用できるという構成が候補になり得ます。また、ビルド構成がCore/Vue/React/Svelteで分離されているため、採用候補の技術スタックに対応したパッケージが用意されているかを事前に確認する流れになるかと思います。
Kitchen Sinkのような動作確認用のデモ環境が同梱されている点は、導入前に実際のコンポーネント群をまとめて把握したい場合の入口として参照先になりそうです。加えて、v1からv7までの過去バージョンのブランチがREADMEに列挙されており、既存プロジェクトのバージョン追従やマイグレーション方針を検討する際の参照情報になります。
READMEだけでは判断できない点
READMEにはビルドスクリプトの名称や出力先、Kitchen Sinkの起動方法、ソースの配置規則などは記載されていますが、各フレームワーク向けパッケージが提供する具体的なコンポーネント数や、SvelteとVue、Reactの間でAPIにどの程度の差異があるかといった詳細は書かれていません。また、実際のパフォーマンスや対応するiOS/Androidのバージョン範囲、他のモバイルUIフレームワークとの比較についても本文からは判断できません。これらを確認するには、ドキュメント(framework7.io/docs)やチュートリアル、フォーラムなど別の情報源を合わせて参照する必要がありそうです。
出典: https://github.com/framework7io/framework7/blob/master/README.md
公式READMEをもとに、AIを執筆・推敲支援に使用しています。実機検証の報告ではありません。