Alpine.jsで作るローカルファーストWebアプリ — 高速・プライバシー重視・サーバーレス

💡 なぜ「ローカルファースト」が重要なのか

近年、多くのアプリがユーザーデータをクラウドに送信しています。
しかし、新しい潮流として注目されているのが 「ローカルファースト（Local-First）」 という考え方です。

ローカルファーストアプリは、データをユーザーのデバイス上で処理・保存します。
そのため、オフラインでも動作し、即座に起動し、そして何よりユーザーのプライバシーを守ります。

小規模なツール（計算機、タスク管理、トラッカーなど）では、クラウドサーバーやデータベースを用意する必要すらありません。
そんなシンプルな構成に最適なのが Alpine.js です。

⚡️ ローカルファーストWebアプリとは？

ローカルファーストWebアプリ とは、次の特徴を持つWebアプリです：

完全に ブラウザ内で動作
LocalStorage や IndexedDB にデータを保存
オフラインでも利用可能
必要に応じて後からクラウドと同期

つまり、「ブラウザ上で動くデスクトップアプリ」のような存在です。
高速で安全、そして完全にユーザー主導のアプリケーションです。

🧩 基本スタック

レイヤー	ツール	役割
フロントエンド	Alpine.js	HTMLに軽量なリアクティビティを追加
スタイリング	Tailwind CSS	シンプルで反応的なデザインを実現
データ保持	LocalStorage	ブラウザ内でデータを保存
オフライン動作	Service Worker	ネットワークなしでも動作可能に
ホスティング	Netlify / GitHub Pages / Cloudflare Pages	サーバーレスな無料ホスティング

🧠 動作の仕組み

ユーザーがAlpine.jsで構築されたUIを操作
入力・変更内容が x-model で即時反映

データを LocalStorage に保存

localStorage.setItem('myData', JSON.stringify(data))

ページ再読み込み時にデータを復元

let data = JSON.parse(localStorage.getItem('myData') || '{}')

サーバーにアクセスしなくてもアプリが動作

🧱 例：シンプルなTo-Doリスト

<div x-data="todoApp()" class="p-4">
  <input x-model="newItem" @keydown.enter="addItem" placeholder="新しいタスクを入力..." class="border p-2 rounded w-full">
  <ul class="mt-4">
    <template x-for="(item, index) in items" :key="index">
      <li class="flex justify-between p-2 bg-gray-100 mt-2 rounded">
        <span x-text="item"></span>
        <button @click="removeItem(index)" class="text-red-500">✕</button>
      </li>
    </template>
  </ul>
</div>

<script>
  function todoApp() {
    return {
      newItem: '',
      items: JSON.parse(localStorage.getItem('todos') || '[]'),
      addItem() {
        if (this.newItem.trim()) {
          this.items.push(this.newItem)
          this.newItem = ''
          localStorage.setItem('todos', JSON.stringify(this.items))
        }
      },
      removeItem(index) {
        this.items.splice(index, 1)
        localStorage.setItem('todos', JSON.stringify(this.items))
      }
    }
  }
</script>

このコードは1つのHTMLファイルで完結します。
バックエンドもデータベースも不要です。