はじめに
Svelte（SvelteKit）の高い開発生産性と、Ionic Frameworkの豊富なWeb UIコンポーネントを組み合わせて、クロスプラットフォーム（iOS/Android）のモバイルアプリを構築する手法が注目されています。
本記事では、Nextbeat様のエンジニアブログ等で紹介されている導入手順を参考にしつつ、パッケージマネージャーとして pnpm を利用する場合の具体的なプロジェクト追加・構築手順をまとめました。
特に、Capacitorの初期設定やシミュレータでのデバッグ手順において、npm手順からそのまま置き換えるだけではつまずきやすいポイントも補足しています。
前提条件
本記事の手順を進めるにあたり、以下の環境が構築されていることを前提としています。
- Node.js (v18以降を推奨)
-
pnpm がインストールされていること (
npm install -g pnpm等) - Xcode (iOSアプリをビルド・起動する場合 ※macOSのみ)
- Android Studio (Androidアプリをビルド・起動する場合)
サンプルリポジトリ
本記事の手順に沿って構築したデモアプリのソースコードは、以下のGitHubリポジトリで公開しています。設定内容やファイル構成の参考にしてください。
1. プロジェクトの新規作成
IonicとSvelteを統合したテンプレートを生成できる create-ionic-svelte-app を利用します。
# プロジェクトの作成
pnpm create ionic-svelte-app my-app
# ディレクトリへ移動
cd my-app
(※ npm の npm create ionic-svelte-app@latest に相当します)
このテンプレートには、SvelteKitの基本構成に加え、Ionic UIコンポーネントを利用するための設定があらかじめ組み込まれています。
2. 依存関係のインストールとWebでの動作確認
次に、依存パッケージをインストールし、Webブラウザ上で開発サーバーを起動して動作確認を行います。
# パッケージのインストール
pnpm install
# 開発サーバーの起動
pnpm dev
起動後、ブラウザで http://localhost:5173 等にアクセスし、Ionicコンポーネントを含んだSvelteアプリが表示されることを確認します。
💡 pnpm固有の注意点
pnpmの厳格なシンボリックリンク構造により、IonicのWeb Componentsなどでモジュール参照エラーが出る場合があります。その場合は、プロジェクトルートに.npmrcを作成しshamefully-hoist=trueを記述してください。
3. モバイルアプリ用（Capacitor）のセットアップ
Webアプリとしての動作が確認できたら、iOSやAndroidのネイティブアプリとして動かすための設定（Capacitorの導入）を行います。
① Webアセットのビルド
ネイティブアプリに組み込むための静的ファイルを生成します。
pnpm build
② Capacitor設定ファイルの修正（App IDのバリデーション対応）
テンプレートから生成した時点で capacitor.config.ts があらかじめ存在していますが、デフォルトのApp ID（例: ionic-svelte-demo-app.ionic.io）にハイフン (-) が含まれていると、後のプラットフォーム追加時にエラーになります。
エディタで capacitor.config.ts を開き、appId をJavaパッケージ形式（ハイフンなし）に修正します。
import { CapacitorConfig } from '@capacitor/cli';
const config: CapacitorConfig = {
appId: 'io.ionic.demoapp', // ← ハイフンを取り除く（例: com.example.app）
appName: 'my-app',
webDir: 'build'
};
export default config;
⚠️ 注意
capacitor.config.tsがすでに存在するため、pnpm exec cap initコマンドを実行するとエラー（Cannot run init for a project using a non-JSON configuration file.）になります。初期化コマンド（cap init）はスキップしてください。
③ プラットフォーム用パッケージのインストール
Capacitorのコア機能は入っていますが、iOS/Android用のネイティブプラットフォームパッケージは初期状態でインストールされていません。手動で追加します。
pnpm add @capacitor/ios @capacitor/android
④ プラットフォームの追加と成果物の同期
iOS、Androidのネイティブプロジェクトを生成し、ビルド済みのWebアセットを流し込みます。
# iOSプラットフォームの追加
pnpm exec cap add ios
# Androidプラットフォームの追加
pnpm exec cap add android
# Webアセットの同期
pnpm exec cap sync
4. シミュレータ / エミュレータでのデバッグ
Capacitorアプリをシミュレータ上でデバッグするには、ネイティブIDE（Xcode / Android Studio）経由で起動するのが基本です。
⚠️ よくある間違い
pnpm dev :iosのようなコマンドは、Vite（Webサーバー）に不正なホスト名を渡してしまうためENOTFOUNDエラーになります。
基本の起動手順
コマンドから各ネイティブIDEを開きます。
# Xcodeを開く (iOS用)
pnpm exec cap open ios
# Android Studioを開く (Android用)
pnpm exec cap open android
IDEが立ち上がったら、ターゲットとするシミュレータ（iPhone 15等）やエミュレータを選択し、**再生ボタン（Run）**を押してアプリを起動させます。
ライブリロード（Hot Reload）付きで起動したい場合
毎回ビルドと同期を行う手間を省き、コードの変更を即座にシミュレータに反映させたい場合は、Ionic CLIを使用すると便利です。
# iOSシミュレータでライブリロード実行
pnpm dlx @ionic/cli cap run ios -l --external
5. まとめ
Svelte + Ionicの組み合わせは非常にパワフルですが、pnpmを使用する場合や、Capacitorの初期設定時にいくつかの躓きやすいポイント（cap init のスキップ、App IDのハイフン除去、プラットフォームパッケージの事前追加）があります。
本記事の手順に沿って進めることで、スムーズにクロスプラットフォーム開発の環境構築が完了するはずです。
参考記事
- SvelteとIonicで始めるモバイルアプリケーション開発入門 Part1. 導入編 (nextbeat-engineering)