こんにちは！今日は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: コードの自動整形
ここでは上記を選びました。
spaceが反応しない場合は、文字入力を日本語入力から英語入力に切り替えると、spaceが反応するようになるかもしれません。
-
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アプリがスマートフォンアプリとして動くようになりました。
最初は複雑に感じるかもしれませんが、何度か繰り返すうちに慣れてきます。エラーが出ても焦らず、一つずつ解決していけば大丈夫です。
分からないことがあったり、うまくいかない部分があったりしたら、いつでも質問してくださいね。一緒に解決していきましょう！
次のステップとして：
- アプリにアイコンや画像を追加してみる
- プッシュ通知機能を実装してみる
- アプリストアにリリースする準備をする
などに挑戦してみると、さらにスキルアップできますよ。頑張ってください！