4
1

Delete article

Deleted articles cannot be recovered.

Draft of this article would be also deleted.

Are you sure you want to delete this article?

Local-First について調べてみた。これを使えばユーザー体験を最高にできそう!

Posted at

Local-Firstとは?

Local-Firstは、アプリケーションのデータや処理をローカルで実行し、クラウドやサーバーの遅延を極力排除するアプローチです。これにより、ユーザーは素早くレスポンスを得られ、オフラインでもアプリを使えるようになります。

今回は、Local-Firstの特徴や利点、そして使えるライブラリについて紹介していきます。

ユーザー体験が良い

Local-Firstの最大の利点は、ユーザー体験の向上です。

  • ローカルにDBがあり反映が早い
    • サーバーにリクエストを送って結果を待つ必要がなく、データがすぐに表示されます。
  • オフラインでも利用可能
    • ネットワーク接続がなくても、ローカルに保存されたデータを使ってアプリを継続的に利用できます。後で同期するだけです。

この「待たない体験」は、特にモバイルアプリやウェブアプリで大きな効果を発揮します。ローカルでの処理が中心となるため、アプリのレスポンスが非常に速く、使っていてストレスを感じません。

モバイルにも力を入れている

Local-Firstはモバイルアプリの開発にも適しています。Flutter、Kotlin、Swiftなど、主要なモバイルアプリ開発フレームワークでも利用可能です。Swiftでは現在クローズドアルファでの対応が進んでいるとのことです。

  • FlutterKotlin はすでに対応済み
  • Swift はクローズドアルファで利用可能

同期の仕組み

Local-Firstの大きな課題の一つは、ローカルでデータを持ちながら、どのようにしてクラウドや他の端末とデータを同期するかです。これに対して、CRDT (Conflict-free Replicated Data Type) という技術が使われています。この技術を用いることで、複数の端末で編集されたデータが競合することなく同期されるとされています。

CRDTの導入により、ユーザーが複数の端末で同じデータにアクセスしても、データの不整合や競合が発生せず、シームレスな同期が可能になります。

Local-Firstに対応したライブラリ

Local-Firstアプローチを簡単に導入できるライブラリも存在します。これらのライブラリを使えば、手軽にLocal-Firstの環境を構築でき、開発のスピードも上がります。

  • PowerSync
  • Electric-SQL
  • その他にも多くのライブラリが開発されています。

わかっていないこと

この仕組みには多くのメリットがあるようですが、実際に運用する際に気になる点もいくつかあります。

  • 表示が本当に早いのか?
    • 実際にLocal-Firstを導入した際、どれだけのスピードが期待できるかは検証が必要です。

感想

Local-Firstを使えば、ユーザー体験が本当に最高になる可能性があります!
ただし、同期の競合が本当に発生しないのかや、アクセス制御の仕組みなど、まだ完全には理解できていない部分もあります。アクセス制御に関しては、バックエンドで実装可能だと言われていますが、詳細はもう少し掘り下げて調べる必要がありそうです。

Local-Firstは今後も注目される技術であり、ユーザー体験を向上させるために取り入れる価値は大いにあると感じました。


興味のある方は、ぜひLocal-Firstのライブラリを使って、自分のプロジェクトに導入してみてください!

4
1
0

Register as a new user and use Qiita more conveniently

  1. You get articles that match your needs
  2. You can efficiently read back useful information
  3. You can use dark theme
What you can do with signing up
4
1

Delete article

Deleted articles cannot be recovered.

Draft of this article would be also deleted.

Are you sure you want to delete this article?