はじめに

こんにちは。入社2年目、実務経験約半年の駆け出しフロントエンドエンジニアです。日々の業務では主にNuxt、Vue、AWS、TypeScriptを使って開発を行っています。

今回は、最近indexedDBというものを触る機会があったので、便利だと感じた部分を共有したいと思います。
駆け出しのエンジニアの方にとって、少しでも参考になる情報をお届けできれば嬉しいです。

indexedDBとは

indexedDBは、ブラウザ上で動作する強力なクライアントサイドのデータベースシステムです。WebStorageよりも高度な機能を持ち、大量のデータを扱えるのが特徴です。

主な特徴は以下の通りです:

ブラウザ上で動作するNoSQLデータベース
キーと値のペアでデータを保存
非同期APIを使用
トランザクションをサポート
大容量のデータを扱える

indexedDBの便利な点

indexedDBを使ってみて、以下の点が特に便利だと感じました:

オフライン対応: インターネット接続がなくてもデータの保存や取得が可能
大容量データの扱い: WebStorageよりもはるかに大きなデータ量を扱える
複雑なデータ構造: オブジェクトや配列などの複雑なデータ構造を直接保存できる
パフォーマンス: 非同期APIにより、大量のデータを歌う際も高速に動作する

実際の活用例: Nuxt3とAWS Lambdaを使用したWebアプリ

私が実際にindexedDBを活用したのは、Nuxt3でフロントエンドを構築し、バックエンドにAWS Lambdaを使用したWebアプリケーションです。

具体的には以下のような方法で実装しました:

データ取得の最適化:
・同じエンドポイントへのリクエストがあった場合、まずindexedDBをチェックします。
・データがindexedDBに存在する場合は、そこから直接データを取得します。
・データが存在しない場合のみ、AWS Lambdaにリクエストを送信します。
キャッシュの実装:
・ AWS Lambdaから取得したデータは、indexedDBに保存します。
・次回同じデータが必要になった時、ネットワークリクエストを送る代わりにindexedDBから高速に取得できます。
コード例(簡略化):

fetch.js

async function getData(endpoint) {
    // indexedDBからデータを取得
    const cachedData = await getFromIndexedDB(endpoint);

    if(cachedData) {
        return cachedData;
    }

    //キャッシュにない場合、Lambdaからデータを取得
    const response = await fetch(endpoint);
    const data = await response.json();

    //取得したデータをindexedDBに保存
    await saveToIndexedDB(endpoint, data);

    return data;
}

実装して感じたメリット

この方法を実装することで、以下のような利点がありました：

アプリケーションの応答速度が向上
AWS Lambdaへのリクエスト回数が減少し、コスト削減
オフライン時でも、一度取得したデータにアクセス可能

注意点と課題

indexedDBは便利ですが、使用する際には以下の点に注意が必要です:

データの鮮度: キャッシュしたデータが古くなる可能性があるため、適切なタイミングでデータを更新する仕組みが必要
ストレージ容量: indexedDBの容量には制限があるため、大量のデータを保存する場合は注意が必要
セキュリティ: 機密性の高いデータをindexedDBに保存する場合は、適切な暗号化などの対策が必要
ブラウザ対応: 古いブラウザではindexedDBがサポートされていない可能性があるため、フォールバック機能の実装検討が必要

まとめ

indexedDBは、フロントエンド開発において非常に強力なツールです。特に、Nuxt3やAWS Lambdaのようなモダンな技術と組み合わせることで、効率的なデータ管理と優れたユーザーエクスペリエンスを実現できます。
初心者エンジニアとして、indexedDBの活用は少し難しく感じる部分もありましたが、実際に使ってみるとその便利さを実感できました。パフォーマンスの向上やオフライン対応など、ユーザー体験を大きく改善できる可能性を秘めていると思いました。

おわりに

今回、私自身まだまだ駆け出しエンジニアとして、indexedDBを使った開発経験を共有させていただきました。正直なところ、この方法が最適だとは思っていませんし、もっと効率的なアプローチがあると思っています。
そのため、経験豊富な先輩エンジニアの方々からご意見やアドバイスをいただけたら非常にありがたいです。「ここはこうしたほうがいいよ」とか「別の方法も考えられるね」といったコメントを大歓迎します。
私たち若手エンジニアにとって、現場で活躍されている方々の知見は本当に貴重です。この記事をきっかけに、様々な視点や経験を共有できる場になれば嬉しいです。
みなさんのフィードバックを楽しみにしています。一緒により良い開発方法を探っていけたらと思います！