2026年、Capacitorはクロスプラットフォーム開発の選択肢として採用頻度が増している。本稿ではその使い方、内部モデル、最適化戦略を体系的に解説する。

はじめに：マルチステージDockerビルド

Capacitorウェブアプリのクリーンな本番ビルドパイプライン：

FROM node:20-alpine AS deps
WORKDIR /app
COPY package.json pnpm-lock.yaml ./
RUN corepack enable && pnpm install --frozen-lockfile

FROM node:20-alpine AS builder
WORKDIR /app
COPY --from=deps /app/node_modules ./node_modules
COPY . .
RUN pnpm build

FROM nginx:alpine AS runner
COPY --from=builder /app/dist /usr/share/nginx/html
EXPOSE 80
CMD ["nginx", "-g", "daemon off;"]

マルチステージビルドにより最終イメージをスリムに保てる ─ deps と builder ステージは破棄され、コンパイル済み出力を持つnginxランタイムだけが残る。

React Nativeリストの最適化

CapacitorのReact Native統合でモバイルUIを構築する場合：

import React, { useState, useCallback } from "react";
import { FlatList, TouchableOpacity, Text } from "react-native";

const ItemList = ({ data, onRefresh }) => {
  const [refreshing, setRefreshing] = useState(false);

  const handleRefresh = useCallback(async () => {
    setRefreshing(true);
    await onRefresh();
    setRefreshing(false);
  }, [onRefresh]);

  const renderItem = useCallback(
    ({ item }) => (
      <TouchableOpacity>
        <Text>{item.title}</Text>
      </TouchableOpacity>
    ),
    [],
  );

  return (
    <FlatList
      data={data}
      renderItem={renderItem}
      keyExtractor={(item) => item.id}
      refreshing={refreshing}
      onRefresh={handleRefresh}
    />
  );
};

renderItem に useCallback を使うことで、レンダリングごとの不要な再生成を防ぐ ─ 大きなリストでは重要だ。

重要な考慮事項

• エラーハンドリング：Capacitorプラグインの非同期呼び出しは常にtry/catchで囲む ─ ネイティブブリッジのエラーはデフォルトでサイレント
• 境界条件：空の状態、ローディング状態、エラー状態を明示的に処理する
• テスト：プラグインのJestモックを使って単体テストを高速かつ環境非依存に保つ

まとめ

「Webテクノロジーで一度書き、ネイティブデプロイ」というCapacitorのモデルは2026年までに大きく成熟した。Capacitorプロジェクト成功の鍵は、Webアプリより先にネイティブアプリとして扱うこと：プラットフォームの慣習を尊重し、デバイスの制約に合わせて最適化し、マルチステージビルドパイプラインでデプロイ成果物を小さく保つことだ。