技術者ブログとして日ごろ取り組んでいる学習内容をご紹介します。
ローカルファーストとは
最近、ローカルファースト という考え方が注目されています。多くのアプリはオンラインを前提 に作られています。データをクラウドに保存することで、どのデバイスからでもアクセスできる、複数人での共有が容易 などのメリットがあります。しかし、オンライン依存のアプリには以下のようなデメリットもあります。
- インターネットがないとデータにアクセスできない
- サービス停止でサーバーがダウンすると使えなくなる
- サーバーへの通信が発生するため、レスポンスが遅くなることも
- 個人データがクラウド上にあるため、外部からのアクセスリスクがある
こうした問題を解決するのが、ローカルファースト という考え方です。ローカルファーストのアプリでは、まずデータをデバイス内に保存し、必要に応じて同期する ため、以下のようなメリットがあります。
- インターネットがなくてもデータにアクセス可能
- サービス障害の影響を受けず、ローカル保存なので、アプリが独立して動作
- サーバーを介さず、データの読み書きが即座に行われる
- 個人データをローカルで管理し、クラウドに依存しない
ローカルファーストの考え方を活かしたアプリには、以下のようなものがあります。
Evernote（エバーノート）：オフラインでもメモの作成・閲覧が可能で、クラウドと同期することでデバイス間でデータを共有できます。
Notion（ノーション）：ドキュメント管理、タスク管理、データベース機能を備えたオールインワンの生産性向上ツール。オフラインでも編集が可能で、クラウドと同期することでデータの一貫性を保ちます。
アプリを作ってみよう！（TypeScript編）
ローカルファーストの仕組みを体験するために、ブラウザだけで動作する ToDo アプリ を作ってみましょう！このアプリでは、データをローカルに保存し、リロードしても消えない仕組み を実装します。
下記に主要な部分の紹介します。
ToDo の追加（データをローカルに保存）
async function addTodo(text: string) {
const todo = {
_id: new Date().toISOString(), // 一意のID
text,
completed: false
};
// データをローカルに保存
await db.put(todo);
}
ToDo の表示（保存されたデータを取得）
async function renderTodos() {
const result = await db.allDocs({ include_docs: true });
result.rows.forEach(row => {
// タスクを取得して表示
console.log(row.doc.text);
});
}
ToDo の削除
async function deleteTodo(id: string) {
const doc = await db.get(id);
// タスクを削除
await db.remove(doc);
}
作ったアプリを実行してみました。
- ブラウザでアプリを開きます。
- タスクを入力し、追加ボタンをクリックすると、下のリストに追加されます。
- ブラウザと閉じます。（通常はここで入力したタスクは消えてしまいます）
- ブラウザで再度アプリを開きます。（上で入力したタスクは残ったまま表示されます）
- タスクをクリックすると、タスクが削除されます。
実際に動かしてみて感じたこと
今回作成した ToDo アプリは、インターネットに依存せず、ブラウザだけでデータを管理できる という点が大きな特徴です。ローカルにデータを保存することで、オフラインでも利用できる というメリットを実感できたのではないでしょうか？
- リロードしてもデータが消えない！
- サーバーがなくても動作する！
- 動作が軽く、即座にデータを取得できる！
サーバやクラウドを使わないアプリは少し珍しく感じるかもしれませんが、ローカルファーストの考え方は、オフライン対応やデータのプライバシーを考える上で非常に有用 です。今回のアプリはシンプルな実装でしたが、クラウドとの同期を追加したり、モバイル対応に拡張したりすることも可能 です。ローカルファーストなアプリの可能性を感じつつ、活用していきたいです。
では、次回のブログでお会いしましょう。