Framework7 + Reactで作るモバイルWebアプリ入門
akinori概要
モバイルWebアプリで「ネイティブアプリのような操作感」を実現しようとすると、ページ遷移アニメーション・タブバー・スワイプバック・プルトゥリフレッシュといった要素を自前で実装することになり、想像以上の工数がかかります。
Framework7 は、こうしたモバイルUIをまとめて提供するUIフレームワークです。iOS風・Material Design風のコンポーネントが最初から揃っており、React / Vue / Svelte との統合パッケージも用意されています。本記事では Framework7 + React の構成で、ゼロからモバイルWebアプリの土台を作るところまでを入門として解説します。
対象読者は、Reactの基本（コンポーネント・props・useState程度）を理解していて、モバイル向けWebアプリに初めて取り組む方を想定しています。
環境
本記事は以下のバージョンを前提にしています（執筆時点の目安）。
- Node.js 24 系（現行LTS）
- Framework7 / Framework7-React v9 系
- React 19 系
- ビルドツール: Vite
Framework7 v9 では iOS 26 スタイルと Material You に対応し、既定の見た目が刷新されました。また framework7-react が React 19 に対応しています。一方で App / View / Page / Navbar / Link / Tabs / Toolbar といったコアAPIは v8 から概ね維持されているため、最小構成・ルーティング・タブの基本的なコードはそのまま動作します。v8 から移行する際に特に意識したいのは、後述する戻るリンクの既定表示がアイコンのみに変わった点です。
Framework7 はメジャーバージョンでAPIが変わることがあるため、公式ドキュメントで対象バージョンを確認しながら進めてください。
Framework7とは何か
Framework7 の特徴は次の3点に整理できます。
- モバイルUIコンポーネントが標準装備 — ナビゲーションバー、タブバー、リスト、カード、ポップアップなどが揃っている
- ネイティブ風の画面遷移 — ルーターが遷移アニメーションやスワイプバックを標準で扱う
- マルチフレームワーク対応 — Core（素のJS）に加え、React / Vue / Svelte 向けの統合がある
「React Router + 自前CSS」で同じことをやろうとすると、遷移アニメーションやOS別の見た目の出し分けを自分で設計する必要があります。Framework7 はそこを肩代わりしてくれるのが入門者にとって大きなポイントです。
セットアップ
公式CLIもありますが、構成を理解しやすいように Vite + 手動セットアップで進めます。
npm create vite@latest my-mobile-app -- --template react cd my-mobile-app npm install framework7 framework7-react npm run dev
framework7 がコア、framework7-react がReact統合（コンポーネントとフック）です。両方インストールします。
最小構成のアプリ
Framework7-React では、アプリ全体を App で包み、画面（ビュー）を View、各ページを Page で表現します。
// src/App.jsx
import React from 'react';
import { App, View, Page, Navbar, Block } from 'framework7-react';
import 'framework7/css/bundle';
const f7params = {
name: 'My Mobile App',
theme: 'auto', // iOS/Androidを端末に合わせて自動判定
};
export default function MyApp() {
return (
<App {...f7params}>
<View main>
<Page>
<Navbar title="ホーム" />
<Block strong>
<p>はじめてのFramework7 + Reactアプリです。</p>
</Block>
</Page>
</View>
</App>
);
}
ポイントは次のとおりです。
import 'framework7/css/bundle'でコンポーネントのスタイルを一括読み込みtheme: 'auto'にすると、iOS端末ではiOS風、Android端末ではMaterial Design風になる<View main>がメインビュー。ルーターはこのビュー単位で動く
ルーティング（画面遷移）
モバイルアプリらしさの肝が画面遷移です。Framework7 は「URLパス → ページコンポーネント」の対応としてルートを定義します。React Router とは別系統の独自ルーターを使う点に注意してください。
// src/routes.js
import HomePage from './pages/HomePage';
import DetailPage from './pages/DetailPage';
const routes = [
{ path: '/', component: HomePage },
{ path: '/detail/:id/', component: DetailPage },
];
export default routes;
ルートを App に渡します。
const f7params = {
name: 'My Mobile App',
theme: 'auto',
routes,
};
// ...
<View main url="/" />
画面遷移は link 属性で行います。遷移先パスを指定するだけで、遷移アニメーションとスワイプバックが自動で付きます。
// src/pages/HomePage.jsx
import React from 'react';
import { Page, Navbar, List, ListItem } from 'framework7-react';
export default function HomePage() {
return (
<Page>
<Navbar title="ホーム" />
<List>
<ListItem link="/detail/1/" title="1件目の詳細へ" />
<ListItem link="/detail/2/" title="2件目の詳細へ" />
</List>
</Page>
);
}
遷移先ページでは、パスパラメータを props 経由で受け取れます。
// src/pages/DetailPage.jsx
import React from 'react';
import { Page, Navbar, Block } from 'framework7-react';
export default function DetailPage({ f7route }) {
const { id } = f7route.params;
return (
<Page>
<Navbar title={`詳細 #${id}`} backLink="戻る" />
<Block strong>
<p>ID: {id} の詳細ページです。</p>
</Block>
</Page>
);
}
backLink="戻る" のように文字列を渡すと、戻るボタンに「戻る」というテキストが表示されます。ここで注意したいのは、Framework7 v9 では戻るリンクの既定表示がアイコンのみに変わった点です。v8 まではテキストが既定で出ていましたが、v9 ではこの例のように明示的に文字列を指定しないとアイコンだけになります（テキストを出したいだけなら backLinkShowText を使う方法もあります）。iOSではスワイプバックも自動で効きます。ここを自前実装せずに済むのがFramework7 最大のメリットと言えます。
タブバーで画面を切り替える
ボトムタブバーは Toolbar と Tabs の組み合わせで実装します。
import React from 'react';
import {
Page, Navbar, Toolbar, Link, Tabs, Tab, Block,
} from 'framework7-react';
export default function TabsPage() {
return (
<Page>
<Navbar title="タブの例" />
<Toolbar bottom tabbar>
<Link tabLink="#tab-home" tabLinkActive>ホーム</Link>
<Link tabLink="#tab-mypage">マイページ</Link>
</Toolbar>
<Tabs>
<Tab id="tab-home" tabActive><Block>ホームタブの中身</Block></Tab>
<Tab id="tab-mypage"><Block>マイページタブの中身</Block></Tab>
</Tabs>
</Page>
);
}
Toolbar に bottom tabbar を指定すると画面下部のタブバーになります。tabLink と Tab の id を対応させるだけで切り替えが動きます。
Reactの状態管理との付き合い方
Framework7-React のコンポーネントは普通のReactコンポーネントなので、useState / useEffect や Context・外部ストアがそのまま使えます。
import React, { useState } from 'react';
import { Page, Navbar, Block, Button, Stepper } from 'framework7-react';
export default function CounterPage() {
const [count, setCount] = useState(0);
return (
<Page>
<Navbar title="カウンター" />
<Block strong className="text-align-center">
<p>現在の値: {count}</p>
<Stepper value={count} onStepperChange={setCount} />
<Button fill onClick={() => setCount(0)}>リセット</Button>
</Block>
</Page>
);
}
「UIはFramework7、状態とロジックはReact」という役割分担で考えると迷いにくくなります。
PWA化について
Framework7 で作ったアプリは、Service Worker と Web App Manifest を追加すればPWA（ホーム画面に追加できるWebアプリ）にできます。Vite なら vite-plugin-pwa が手軽です。
PWA化は独立したテーマなので本記事では深追いしませんが、「ネイティブ風UI（Framework7） + インストール可能（PWA）」の組み合わせで、ネイティブアプリに近い体験をWebで提供できる、という点を押さえておくとよいでしょう。
確認方法
- PCブラウザの開発者ツールでモバイル表示 — Chrome DevTools のデバイスモードでスマホ幅に
- テーマ切り替えの確認 —
theme: 'ios'/theme: 'md'を明示指定して見た目が切り替わるか - 遷移アニメーションの確認 — リスト→詳細の遷移、戻るボタンでの復帰が滑らかか
- 実機確認 — 同一ネットワークのスマホから開き、スワイプバックなどタッチ操作を確認
タッチ操作はマウス操作では再現しきれないため、一度は実機で触っておくことをおすすめします。
注意点
- Framework7独自ルーターとReact Routerは別物 — 混在させると混乱します。遷移はFramework7 側に寄せるのが基本です
- CSSバンドルは重め —
framework7/css/bundleは全コンポーネントのCSSを含みます。本番でサイズが気になる場合は必要分だけ読み込む構成を検討します - バージョン差異に注意 — メジャーバージョンでAPIが変わります。v8 から v9 への移行では、戻るリンクの既定表示がアイコンのみになった点や、iOS 26 スタイル／Material You 対応による見た目の刷新が主な差分です。参照記事は対象バージョンを必ず確認してください
まとめ
Framework7 + React は、「モバイルらしいUIと画面遷移を自前実装せずに済ませたい」場面で効果的な選択肢です。
- UIコンポーネントと遷移アニメーションが標準装備
theme: 'auto'でiOS/Androidの見た目を出し分けられる- 状態管理はReactの流儀そのままで書ける
まずは最小構成を動かし、ルーティングとタブバーまで触ると、Framework7 が何を肩代わりしてくれるのかが体感できます。そこからPWA化やカスタマイズへ進むと、無理なく実践的なモバイルWebアプリに育てていけます。
＼ 最新情報をチェック ／
