NTT西日本の技術ブログ

全85件

2026/01/13

【個人開発の第一歩】ブラウザだけで完結！データ保持の基本「LocalStorageとIndexedDB」をわかりやすく解説

はじめに NTT西日本の中川です。本記事ではフロントエンド（ブラウザ）だけで利用できるデータの保持方法とデータベースサービスを厳選してご紹介します。本記事は、2025年12月時点の情報に基づきます。対象読者本記事が想定する対象読者は次の通りです。駆け出しエンジニアフロントエンド縛りでデータの保持が必要な状況の人データの保持に対して難しそうなイメージを持っている人背景プログラミングの勉強を始めたばかりの方や、簡単なアプリケーション開発に挑戦しようとしている方は、多くの場合、まず「どこにデータを保存するか」という課題に直面するのではないでしょうか。最初はデータを保存しないシンプルなアプリから始めると思いますが、開発を進めるうちに「データの保持」というテーマは避けて通れない領域になってきます。しかし、プログラミング学習を始めたばかりの段階では、本格的なデータベースを用意し、サーバーサイドの環境を構築するのは、個人開発の初期段階では少し敷居が高く感じられます。「できるだけお金を使わずに」「できるだけ手軽に」データを保持したいというのが本音ではないでしょうか。私自身もデータをどう扱うかについて悩んだ経験があります。サクッと作ってどんどん数をこなしたい、という当時の自分だったらという個人的なニーズが、今回の記事作成のきっかけです。この記事が、皆さんのエンジニアライフに少しでも役立てば嬉しいです。本記事で紹介するデータ保持アプローチの全体像フロントエンド開発だけでデータを保持（ブラウザを閉じる/アプリのタブを閉じてもデータを保持すること）するには、大きく分けて以下の2つのアプローチがあります。クライアントサイドで保持 : データがユーザーのブラウザ（デバイス）内に保存されるサーバーサイドで保持 : データがサーバーに保存される例：PaaS、BaaS上などのサーバーまたはストレージ今回は、特に入門に適した以下の方法を解説します。前半のクライアントサイドの2つをメインに見ていきましょう。カテゴリ方法データの保存場所主な用途クライアントサイドで保持 LocalStorage ユーザーのブラウザ内 (簡易データ) ユーザー設定、セッション情報の保持、簡易的なオフライン利用 IndexedDB ユーザーのブラウザ内 (構造化データ) 大量の構造化データの保持、本格的なオフラインアプリケーション (PWA) サーバーサイドで保持 Supabase/Firebase サーバー上のデータベース複数ユーザー間の共有、認証・認可が必要な本格アプリケーション 1. LocalStorage LocalStorageは、JavaScriptの標準機能で利用できる、最も手軽なデータ保持方法の一つです。データはユーザーのブラウザ内に保存されます。特徴事前準備 : JavaScriptの標準機能なのでブラウザだけですぐに利用できます構造 : キーと値のシンプルなセット（Key-Valueストア）保存形式 : 文字列 (String) のみ。オブジェクトや配列を保存するには JSON.stringify() で文字列化が必要データ量 : 比較的小さい（5MB程度）用途 : ユーザー設定（ダークモード/ライトモード）、セッション情報、簡易なToDoリストなどサンプルコード（データの保存と取得） // 【保存】キー 'username' に 'Nakagawa' という文字列を保存する localStorage . setItem ( "username" , "Nakagawa" ) ; console . log ( "データを保存しました" ) ; // 【取得】キー 'username' の値を取得する const storedUsername = localStorage . getItem ( "username" ) ; console . log ( "取得したデータ:" , storedUsername ) ; // 出力: 取得したデータ: Nakagawa // 【削除】キーを指定してデータを削除する localStorage . removeItem ( "username" ) ; console . log ( "データを削除しました" ) ; データの保存、取得、削除が3行ほどで完結します。格納されたLocalStorageの値はブラウザの検証ツールで確認できます。今回は、Google Chromeを利用して確認していきます。検証ツールの起動方法起動 Windows : Ctrl + Shift + I または F12 Mac : Command + Option + I 確認箇所 Applicationタブを選択サイドバーのLocalStorageを選択すると自身のサイトのURLがあるので、それをクリックサンプルコードで登録した username が登録されていることを確認できる　補足（オブジェクトを保存する場合）オブジェクトを保存する場合は、値の保存/取得時に文字列変換↔︎JSON変換が必要なので要注意 const userSettings = { theme : "dark" , notifications : true } ; // ダークモードなどの設定を想定 // オブジェクトを文字列（JSON）に変換して保存 localStorage . setItem ( "settings" , JSON . stringify ( userSettings )) ; // 取得後、JSONを元のオブジェクトに戻す const storedSettingsString = localStorage . getItem ( "settings" ) ; const storedSettingsObject = JSON . parse ( storedSettingsString ) ; console . log ( "取得したオブジェクト:" , storedSettingsObject . theme ) ; Tips かつて広告トラッキングやコンバージョン計測などではよくCookieが使われていました。数年前からAppleがSafariに ITP（Intelligent Tracking Prevention）と呼ばれるユーザーのウェブ上でのトラッキングを制限することを目的としたプライバシー保護機能を搭載したことで（Cookieの有効期間などへの規制が盛り込まれています）、LocalStorageが代替案として使われてきましたが、最近、さらに要件が厳しくなってきています。 LocalStorageは意外と身近に使われている機能なので、興味があれば色々調べて見るととても面白いです。 2. IndexedDB IndexedDBは、LocalStorageよりも大容量で、本格的なデータベース機能をブラウザ内で提供してくれます。非同期処理が前提で、リレーショナルデータベースに近い構造化データを扱えますので、開発の勉強やちょっとした処理にも便利です。特徴構造 : オブジェクトストア（NoSQLのコレクションに相当）保存形式 : JavaScriptのオブジェクトをそのまま保存可能データ量 : 比較的大容量（数GBまで）用途 : オフラインで動作するPWA (Progressive Web App) のキャッシュ、大量の構造化データ保持サンプルコード（データの保存と取得） IndexedDBは複雑なため、今回はデータの追加 (Add) と取得 (Get) に焦点を当てたシンプルな例を紹介します。 // データベース名とバージョンを定義 const DB_NAME = 'MyTodoDB' ; const DB_VERSION = 1 ; const STORE_NAME = 'tasks' ; // データベースを開く（存在しない場合は作成） const request = indexedDB . open ( DB_NAME , DB_VERSION ) ; let db ; // データベースのバージョンが変わった時（初回作成時も含む）に実行される request . onupgradeneeded = ( event ) => { db = event . target . result ; // オブジェクトストアを作成（ここでは 'id' をキーとする） db . createObjectStore ( STORE_NAME , { keyPath : 'id' , autoIncrement : true }) ; } ; // 接続成功時 request . onsuccess = ( event ) => { db = event . target . result ; console . log ( 'IndexedDB接続成功' ) ; // サンプルデータの追加と取得を実行 addTask ({ text : '記事を完成させる' , priority : 'High' }) ; getAllTasks () ; } ; request . onerror = ( event ) => { console . error ( 'IndexedDBエラー:' , event . target . error ) ; } ; // 【保存】データの追加関数 function addTask ( task ) { // トランザクションを開始し、読み書きを許可 const transaction = db . transaction ([ STORE_NAME ] , 'readwrite' ) ; const store = transaction . objectStore ( STORE_NAME ) ; // オブジェクトをそのまま追加 const addRequest = store . add ( task ) ; addRequest . onsuccess = () => { console . log ( 'タスクが正常に追加されました:' , task ) ; } ; addRequest . onerror = ( e ) => { console . error ( 'タスク追加エラー:' , e . target . error ) ; } ; } // 【取得】全データの取得関数 function getAllTasks () { const transaction = db . transaction ([ STORE_NAME ] , 'readonly' ) ; const store = transaction . objectStore ( STORE_NAME ) ; const getRequest = store . getAll () ; getRequest . onsuccess = () => { console . log ( '全タスク:' , getRequest . result ) ; } ; } 格納された値はLocalStorage同様にブラウザの検証ツールで確認できます。こちらも、Google Chromeを利用して確認していきます。検証ツールの起動方法起動 Windows : Ctrl + Shift + I または F12 Mac : Command + Option + I 確認箇所 Applicationタブを選択サイドバーのIndexedDBを選択すると先ほど作成した「MyTodoDB」があるので、それをクリック tasksテーブルをクリックサンプルコードで登録した MyTodoDB と tasks が登録されていることを確認できる実行方法の補足ここまで紹介したブラウザで動く LocalStorage と IndexedDB は、試すだけなら実はわざわざファイルを作成する必要はありません。結果を確認するために使っている検証ツールの「 Console 」というタブに、今回紹介しているコードをそのまま貼り付けるだけで動きます。 LocalStorageの章で紹介した内容をConsoleにコピペして実行 3. サーバーサイドにおけるデータ保持の紹介最後に、クライアントサイドの制約（データ量の制限、複数ユーザー間での共有ができない）を超えて、本格的なアプリケーション開発に進むためのアプローチを簡単に紹介します。 BaaS (Backend as a Service) は、サーバー側の機能（データベース、認証、ストレージなど）を、APIを通じてフロントエンドから手軽に利用できるように提供するサービスです。サーバーサイドの構築作業を行わずに、高度なデータ保持を実現できます。 Supabase と Firebase SupabaseはPostgreSQLベースのリレーショナルなデータベース、FirebaseはNoSQLのリアルタイムデータベースを提供しています。どちらも無料枠があり、駆け出しのエンジニアが本格的なWebサービスを開発する際のデータ保持に適しています。用途 : 複数ユーザー間のデータ共有、ユーザー認証・認可、リアルタイム通信が必要なチャットアプリなど。特徴 : フロントエンドのコードから、サービスが提供する専用のライブラリ（SDK）を使って、クラウド上のデータベースに直接データの読み書きができます。これらのサービスは、さらに次のステップに進むための強力な武器になります。このブログでも機会があれば紹介したいなと思います。一層本格的なアプリケーションに挑戦する際には、ぜひ調べてみてください。まとめ本記事では、プログラミング初心者やフロントエンド開発を主軸とする方が、手軽かつ安価にデータを保持するための主要なアプローチを解説しました。この記事を通じて、データの保持は決して難しいものではなく、実は手軽に開発のニーズに合わせて適切なツールを選べることが伝えられていたら嬉しいです。まずはLocalStorageやIndexedDBで実際に手を動かし、開発を加速させていきましょう！💪 執筆者中川　拓哉（NTT西日本デジタル革新本部デジタル改革推進部所属） NTT西日本の法人向けの顧客ポータルサイトを開発・運営しています。 TypeScript, Vue.js, GraphQL, Laravelが好きです。参考文献 IndexedDB の使用 - Web API | MDN ウェブストレージ API - Web API | MDN 商標「Supabase」は、Supabase Inc.（米国デラウェア州法人）の商標もしくは商標登録です「Google Chrome」「Firebase」は、Google LLCまたはその関連会社の商標もしくは登録商標です

JavaScript, Windows, PaaS, Firebase, サーバーサイド, フロントエンド, 初心者, データベース, PWA, NoSQL

NTT西日本 の技術ブログ

コンテンツ

NTT西日本の技術ブログ