Webフロントエンドの開発でおなじみの TypeScript 。使い慣れたフロントエンドの技術（React、Vue、Viteなど）を使って、そのままiOSやAndroidのネイティブアプリを作れたら最高だと思いませんか？
それを可能にするのが、Ionicチームが開発している Capacitor（キャパシタ） です。
この記事では、TypeScriptで作成したWebアプリをCapacitorを使ってビルドし、スマホアプリとして動かすまでの全手順を、初心者にもわかりやすく徹底解説します！
1. Capacitorとは？なぜ今選ばれるのか？
Capacitor は、Webアプリをネイティブアプリのシェル（WebView）の中に埋め込み、iOS/Androidアプリとして配信できるようにするオープンソースのランタイムです。
Cordovaとの違いとメリット
かつて主流だったCordovaの後継にあたり、現代のWeb開発エコシステムに最適化されています。
- 使い慣れたツールがそのまま使える： Vite、Webpack、Next.js、Nuxtなど、TypeScriptが動く環境なら何でも対応。
- ネイティブAPIへの簡単なアクセス： カメラ、位置情報、通知などの機能を、TypeScriptのコードからプラグイン経由で簡単に呼び出せます。
- パフォーマンスの向上： 現代の高速なブラウザエンジン（WKWebView / WebView）を利用するため、非常にスムーズに動作します。
2. 事前準備（前提条件と必要なツール）
ビルドを始める前に、開発環境に必要なツールが揃っているか確認しましょう。
必要な環境
- Node.js（推奨: LTSバージョン）
- TypeScriptのWebアプリ（すでにビルド可能な状態のもの。今回はVite + TypeScriptの構成を例にします）
- Android Studio（Androidアプリをビルドする場合）
- Xcode（iOSアプリをビルドする場合 ※Mac必須）
3. Capacitorをプロジェクトに導入する手順
それでは、既存のTypeScriptプロジェクトにCapacitorを導入していきましょう。
ステップ1：必要なパッケージのインストール
まずはプロジェクトのルートディレクトリで、CapacitorのコアライブラリとCLIをインストールします。
npm install @capacitor/core @capacitor/cliステップ2：Capacitorの初期化
インストールが完了したら、以下のコマンドでCapacitorを初期化します。
npx cap initコマンドを実行すると、対話形式で以下の質問をされます。
- App name: アプリの表示名（例:
MyTSApp） - App ID: アプリの識別子。逆ドメイン形式（例:
com.example.mytsapp） - Web asset directory: Webアプリをビルドした際に出力されるフォルダ名（重要！）
- Viteやパッケージ構成によって異なります（例:
dist、build、outなど）。ご自身の環境に合わせて入力してください（Viteの場合はdist）。
- Viteやパッケージ構成によって異なります（例:
初期化が成功すると、プロジェクトのルートに capacitor.config.ts（または .json）が生成されます。
4. Webアプリ側のビルドと設定
Capacitorは、「Web用にビルドされた静的ファイル」を読み込んでアプリ化します。そのため、まずはTypeScriptアプリをWeb用にビルドする必要があります。
ステップ1：TypeScriptアプリのビルド
# Viteや一般的なプロジェクトの場合
npm run buildbuildコマンドは一例です。
実行後、設定した「Web asset directory（例: dist）」に index.html や assets フォルダが出力されていることを確認してください。
⚠️ 注意ポイント：相対パスの設定 アプリケーション内のリソース読み込みが絶対パス（
/assets/...）になっていると、スマホアプリ（file://形式など）で起動した際に画面が真っ白になることがあります。ベースパスが相対パス（./）になるよう、ビルドツール（vite.config.tsなど）の設定を確認しておきましょう。
5. 各プラットフォーム（iOS / Android）の追加
Webのビルド成果物が用意できたら、いよいよネイティブのプロジェクトを生成します。
プラットフォーム用パッケージのインストール
npm install @capacitor/android @capacitor/iosAndroidプロジェクトの追加
npx cap add androidiOSプロジェクトの追加
npx cap add ios実行すると、プロジェクトルートに android フォルダや ios フォルダが自動生成されます。
6. 同期（Sync）とネイティブでの起動
Webアプリのコードを変更したり、新しいCapacitorプラグインを追加した後は、必ず 「同期（Sync）」 という作業を行います。これは、Webのビルド成果物をネイティブのフォルダにコピーする処理です。
開発の基本サイクル
コードを変更した際は、常に以下の流れでビルドと同期を行います。
# 1. Webアプリをビルド
npm run build
# 2. Capacitorに同期
npx cap syncビルドコマンドにCapacitor同期コマンドを組み込んでおくと楽です。
エミュレータや実機での起動
同期が完了したら、Android StudioやXcodeを立ち上げてアプリを起動します。CapacitorのCLIを使えば、コマンド一発で各IDEを開くことができます。
Android Studioを開く
npx cap open androidXcodeを開く（Macのみ）
npx cap open iosXcodeが起動したら、左上のターゲットデバイスを選択し、「Play」ボタンを押してシミュレータを起動します。
7. トラブルシューティング（よくあるエラーと対処法）
TypeScriptアプリをCapacitorでビルドする際によく遭遇するエラーと、その解決策をまとめました。
| 現象・エラー | 原因 | 解決策 |
| 起動時に画面が真っ白になる | Webのビルド先（dist等）のパス不一致、または絶対パス参照エラー。 | capacitor.config.ts の webDir が正しいか確認。ビルド設定を相対パス（./）に変更する。 |
npx cap sync でエラーが出る | プラットフォームが正しく追加されていない、またはNodeのバージョン問題。 | npx cap add <platform> を再実行。node_modules を削除して再インストールを試す。 |
| TypeScriptの型定義エラー | ネイティブプラグインの型が読み込まれていない。 | 使用しているCapacitorプラグイン（例: @capacitor/camera）が正しく import されているか確認。 |
8. まとめ：Web技術でアプリ開発を加速させよう！
TypeScriptで作ったWebアプリをCapacitorでビルドする方法を解説しました。
一見難しそうに見えるスマホアプリ開発も、Capacitorを使えば「Web用にビルドして、npx cap sync で同期するだけ」という非常にシンプルなワークフローに落とし込むことができます。
一度ベースを作ってしまえば、Webサイトを更新する感覚でアプリのアップデート（※仕様による）や機能追加が行えるため、開発効率は抜群です。ぜひこの記事を参考に、あなたのTypeScriptアプリをApp StoreやGoogle Playに届けてみてください！
💡 次のステップ
アプリが動いたら、次は @capacitor/dialog や @capacitor/preferences などの公式プラグインを使って、ネイティブならではの機能をTypeScriptから呼び出すことに挑戦してみましょう！
現在Playストアにアプリをリリースするには12人以上のテスターにオプトインしてもらう必要があります。もし身近にテスターを頼める方が居ないのであればココナラでテスターを依頼するのがおすすめです。大体4000円くらいで依頼できます。
コメント