😽

Vue.js + Capacitor モバイルアプリ開発ガイド(WebNative未使用版)

2025/09/18に公開

Vue.js

Capacitor

tech

こんにちは！今日はVue.jsとCapacitorを使って、Webアプリをスマートフォンアプリに変身させる方法を一緒に学んでいきましょう。

最初は難しく感じるかもしれませんが、一歩ずつ進めていけば大丈夫です。分からないことがあったら、いつでも遠慮なく質問してくださいね。

Vue プロジェクトの作成

ステップ1: 新しいVueプロジェクトを作成しましょう

まずはターミナル（コマンドプロンプト）を開いて、以下のコマンドを入力してください。pnpmはnpmよりも高速で効率的なパッケージマネージャーです。

pnpm create vue@latest

このコマンドを実行すると、いくつか質問が表示されます。どれも重要な設定なので、一つずつ丁寧に選んでいきましょう。

質問される内容：

Project name: プロジェクト名を入力してください（例：MyFirstApp）
Package name: パッケージ名（通常はプロジェクト名の小文字版）
Select features to include in your project: プロジェクトに含める機能選択（↑↓で移動しspaceで選択）
- TypeScript: 型安全性を高めるTypeScriptを使うかどうか
- Router: 画面遷移機能
- Pinia: データ管理ライブラリ
- ESLint: コードの品質チェック
- Prettier: コードの自動整形

ここでは上記を選びました。

Select experimental features to include in your project: プロジェクトに含める実験的機能選択（↑↓で移動しspaceで選択）

ここでは何も選びませんでした。

Skip example code: サンプルコードをスキップするか

Yes でシンプルに始めましょう。

ステップ2: プロジェクトディレクトリに移動

プロジェクトが作成されたら、そのフォルダに移動しましょう。

cd プロジェクト名

Visual Studio Codeで開く場合は、こちらのコマンドが便利です：

code プロジェクト名

ステップ3: 必要なパッケージをインストール

次に、プロジェクトに必要なライブラリをインストールします。

pnpm install

このコマンドは少し時間がかかることがありますが、パソコンが頑張って作業している証拠です。気長に待ちましょう。

Ignored build scripts: esbuild. Run "pnpm approve-builds" to pick which dependencies should be allowed to run scripts. というWarningが表示されたら、以下を実行して、スクリプトの実行を許可する依存関係を選択してください。

pnpm approve-builds

ステップ4: 開発サーバーを起動してみましょう

いよいよWebアプリを動かしてみます！

pnpm run dev

他のパソコンからもアクセスしたい場合は、--host オプションを付けてください：

pnpm run dev --host

ブラウザに表示されたリンクをクリックすると、あなたの作ったWebアプリが表示されます。わくわくしますね！

サーバーを停止するときは、ターミナルで Ctrl + C を押してください。

Capacitorの導入でスマホアプリ化

ステップ5: Capacitorをインストール

今度は、作成したWebアプリをスマートフォンアプリに変身させるCapacitorを導入します。

pnpm add @capacitor/core @capacitor/android @capacitor/ios
pnpm add -D @capacitor/cli

ステップ6: Capacitorの初期設定

Capacitorを使えるように設定していきましょう。

npx cap init

ここで2つの重要な情報を聞かれます：

アプリ名: ユーザーが見るアプリの名前（例：「私の最初のアプリ」）
Package ID: アプリを識別するID（例：com.yourname.myfirstapp）

Package IDは、逆ドメイン形式で入力してください。あなたの名前やプロジェクト名を使って、他と重複しないユニークなIDを作りましょう。

ステップ7: スマートフォンプラットフォームを追加

AndroidとiOSの両方に対応させるため、それぞれのプラットフォームを追加します。

npx cap add android
npx cap add ios

ステップ8: アプリをビルドして同期

Webアプリをスマートフォンアプリとして使えるように準備します。

# まずWebアプリをビルドします
pnpm build

# 次にネイティブプロジェクトに同期します
npx cap sync

エラーが発生した場合

Xcodeライセンスエラーが出た場合

You have not agreed to the Xcode license, which you must do to use CocoaPods. Agree to the license by running: xcodebuild -license. のようにXcodeライセンスエラーが出た場合は、ライセンスに同意しましょう。

# ライセンスを表示して同意
sudo xcodebuild -license

# ライセンスを表示せずにすぐ同意
sudo xcodebuild -license accept

Xcode初期セットアップが必要な場合

xcodebuild failed to load a required plug-in. Ensure your system frameworks are up-to-date by running 'xcodebuild -runFirstLaunch' のように表示されXcode初期セットアップが必要な場合は、Xcodeの初期セットアップを実行しましょう。

# Xcode初期セットアップ実行
sudo xcodebuild -runFirstLaunch

これらのコマンドでパスワードを求められることがありますが、あなたのパソコンのパスワードを入力してください。

アプリを実際に動かしてみましょう

Androidアプリとして実行

方法1: Android Studioを開いて実行

npx cap open android

Android Studioが開いたら、画面上部の緑の三角ボタン（実行ボタン）をクリックしてください。

方法2: コマンドから直接実行

npx cap run android

iOSアプリとして実行

方法1: Xcodeを開いて実行

npx cap open ios

Xcodeが開いたら、画面左上の再生ボタンをクリックしてください。

方法2: コマンドから直接実行

npx cap run ios

開発環境について

必要なソフトウェア

Android開発の場合：

Android Studio Ladybug 2024.2.1以降
Java JDK 21（Android Studio Ladybugに同梱）

iOS開発の場合：

Xcode 16.0以降（Macのみ）
iOS 14.0以降をサポート

Node.jsのバージョン

Capacitor 7では、Node.js 20以降が必要です。古いバージョンを使っている場合は、最新のLTS版にアップデートしてください。

まとめ

お疲れさまでした！ここまでの手順で、Vue.jsで作ったWebアプリがスマートフォンアプリとして動くようになりました。

最初は複雑に感じるかもしれませんが、何度か繰り返すうちに慣れてきます。エラーが出ても焦らず、一つずつ解決していけば大丈夫です。

分からないことがあったり、うまくいかない部分があったりしたら、いつでも質問してくださいね。一緒に解決していきましょう！

次のステップとして：

アプリにアイコンや画像を追加してみる
プッシュ通知機能を実装してみる
アプリストアにリリースする準備をする

などに挑戦してみると、さらにスキルアップできますよ。頑張ってください！