【Capacitor入門-第1回-】WEBアプリからネイティブアプリを簡単に作成したい！

はじめに

普段はWEBアプリを開発しているtellerです！
WEBアプリから簡単にネイティブアプリを作成できるというもので、その実用性を連載形式で検証していこうと思います！
とりあえず、今回はNuxt3で構築した簡単なTODOアプリをCapacitorを用いて、iOSのシミュレーターで起動するところまでやってみようと思います！

Capacitorとは

https://capacitorjs.jp/

上記を参照してみると

Capacitorはどんなウェブアプリでもネイティブアプリにすることができるので iOS、Android、ウェブを横断して同じコードで一つのアプリを 走らせることができます。

と記載されていてとても興味深い。。

今回の目標

今回の記事では以下の手順で進めていきます！

1. Nuxt3プロジェクトの作成
2. 簡単なTODOアプリの実装
3. Capacitorの導入と設定
4. iOSシミュレーターでの動作確認

---

順番に進めていきましょう！

環境準備

まずは開発環境の準備から始めます！

必要なツール

• Node.js (v18以上推奨)
• Xcode (iOSシミュレーター用)
• iOS シミュレーター

Nuxt3プロジェクトの作成

新しいプロジェクトを作成していきます！

npx nuxi@latest init nuxt-capacitor-todo
cd nuxt-capacitor-todo
npm install

プロジェクトが作成できたら、開発サーバーを起動して確認してみましょう！

npm run dev

ブラウザで http://localhost:3000 にアクセスして、Nuxt3のデフォルトページが表示されることを確認してください！

TODOアプリの実装

次に、簡単なTODOアプリを実装していきます！

コンポーネントの作成

components/TodoList.vue を作成します：

<template>
  <div class="todo-container">
    <h2>TODOリスト</h2>
    
    <div class="add-todo">
      <input 
        v-model="newTodo" 
        @keyup.enter="addTodo"
        placeholder="新しいタスクを入力"
        class="todo-input"
      />
      <button @click="addTodo" class="add-button">追加</button>
    </div>
    
    <ul class="todo-list">
      <li v-for="(todo, index) in todos" :key="index" class="todo-item">
        <input 
          type="checkbox" 
          v-model="todo.completed"
          @change="toggleTodo(index)"
        />
        <span :class="{ completed: todo.completed }">{{ todo.text }}</span>
        <button @click="removeTodo(index)" class="remove-button">削除</button>
      </li>
    </ul>
  </div>
</template>

<script setup>
const todos = ref([])
const newTodo = ref('')

const addTodo = () => {
  if (newTodo.value.trim()) {
    todos.value.push({
      text: newTodo.value,
      completed: false
    })
    newTodo.value = ''
  }
}

const toggleTodo = (index) => {
  todos.value[index].completed = !todos.value[index].completed
}

const removeTodo = (index) => {
  todos.value.splice(index, 1)
}
</script>

<style scoped>
.todo-container {
  max-width: 500px;
  margin: 0 auto;
  padding: 20px;
}

.add-todo {
  display: flex;
  gap: 10px;
  margin-bottom: 20px;
}

.todo-input {
  flex: 1;
  padding: 10px;
  border: 1px solid #ddd;
  border-radius: 4px;
}

.add-button {
  padding: 10px 20px;
  background: #007bff;
  color: white;
  border: none;
  border-radius: 4px;
  cursor: pointer;
}

.todo-list {
  list-style: none;
  padding: 0;
}

.todo-item {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 10px;
  border-bottom: 1px solid #eee;
}

.completed {
  text-decoration: line-through;
  color: #888;
}

.remove-button {
  padding: 5px 10px;
  background: #dc3545;
  color: white;
  border: none;
  border-radius: 4px;
  cursor: pointer;
}
</style>

ページの更新

pages/index.vue を更新して、TODOアプリを表示します：

<template>
  <div>
    <h1>Nuxt3 + Capacitor TODOアプリ</h1>
    <TodoList />
  </div>
</template>

これで基本的なTODOアプリが完成しました！ブラウザで動作確認してみてください！

Capacitorの導入

いよいよCapacitorを導入していきます！

Capacitorのインストール

npm install @capacitor/core @capacitor/cli
npm install @capacitor/ios
npx cap init

初期化時に以下の質問が表示されます：

• App Name: Nuxt Capacitor Todo
• App ID: com.example.nuxtcapacitortodo
• Web asset directory: .output/public

Nuxt3の設定

Capacitorは基本的にSPA（Single Page Application）として動作することを前提としているので
nuxt.config.ts を更新して、SSRを無効：

export default defineNuxtConfig({
  ssr: false,
  nitro: {
    prerender: {
      routes: ['/']
    }
  }
})

Capacitorの設定

npx cap add ios

これでiOSプロジェクトが作成されます！

ビルドと同期

npm run build
npx cap sync

iOSシミュレーターでの動作確認

最後に、iOSシミュレーターでアプリを起動してみましょう！

npx cap open ios

Xcodeが開いたら、シミュレーターを選択して「Run」ボタンをクリックします！

無事にアプリが起動すれば、TODOアプリがネイティブアプリとして動作しているはずです！

まとめ

今回はNuxt3で作成したTODOアプリをCapacitorを使ってiOSシミュレーターで動作させることができました！
iOS側のデザインが崩れていたりしますが、TODOの追加などはうまくできていそうです！

WEBアプリのコードをほぼそのまま活用してネイティブアプリを作成できるのは、素晴らしいですね！

あとは複雑なロジックであったり、ログイン関連であったり、どこまでCapacitorが対応してくれるのかとても興味深いので、今後研究していこうと思います！

依存関係で苦しんだりすることがない世界をCapacitorで実現していきたい、、、

サービスについてもネイティブアプリの重要性は、今後より増していくので、
Capacitorを使用したクイックなローンチも実現していきたい。

今後不定期で、Capacitorの活用について詳しく見ていきたいと思います！