📚 【第3ページ】データストア（保管庫）の選び方と高度な抽出テクニック

by harunano_mz717on 投稿日:

概要： システムの規模や用途に合わせて、データをどこに保存し、どうやって高速に引っこ抜くべきか。今回は身近なGoogleスプレッドシートを例に、データ設計の基準と、劇的に通信を高速化する裏技テクニックを解説します。

Webアプリを作る際、「データをどこに保存するか（データストアの選定）」はシステムの寿命を決める重要なポイントです。
本格的なデータベース（MySQLなど）を構築する前に、まずは手軽な「スプレッドシート」や「JSONファイル」をデータベース代わりに使う手法がよく選ばれます。しかし、これらには明確な「向き・不向き」があります。

3.1 スプレッドシート（2次元表） vs JSON（多次元ファイル）の切り分け基準

データをスプレッドシートで管理すべきか、JSONファイルとして保存すべきか。その判断基準を以下の4つの視点で整理しました。比較ポイントスプレッドシート（2次元）JSONファイル（多次元）実用行数の限界数万行（重くなりやすい）数十万行以上（軽量）データ構造フラットな行と列のみ無限の入れ子・ネスト構造が可能アクセス頻度数秒に1回（排他ロックの壁）ミリ秒単位の超高頻度アクセス最大のメリット人間が直接見て編集しやすいプログラムが超高速で処理できる【結論のトレードオフ】「管理者が手作業でデータを頻繁に書き換える」ならスプレッドシートが圧倒的に便利です。しかし、「ユーザーの行動ログなど、機械が大量に読み書きする」場合は、迷わずJSON（または本格的なデータベース）を選びましょう。

3.2 GoogleサイトにおけるGAS（Google Apps Script）の連携制限

スプレッドシートを簡易データベースとして使う際、GAS（Google Apps Script）を使ってAPI化する手法が定番です。しかし、これを「Googleサイト」などのプラットフォームに埋め込もうとすると、ある壁にぶつかります。

iFrame（埋め込み枠）の制限: GASで作ったWebアプリをGoogleサイトに埋め込むと、HTMLは「iFrame」という隔離された窓の中で表示されます。

デザイン（CSS）が効かない壁: iFrameの外側（親サイト）のCSS設定は、内側（GASの画面）には一切影響を与えません。そのため、サイト全体で統一したデザインを適用するのが非常に困難になります。
この制限を突破するには、「画面は通常のHTML/JSで作り、裏側のデータだけをAPIで取得する」というデータ通信に特化したアプローチが必要になります。

3.3 スプレッドシートのSQL化（Google Visualization API）

GASを経由せずに、スプレッドシートから直接、超高速でデータを引っこ抜く魔法のような裏技があります。それが「Google Visualization API（gviz/tq）」です。
これは本来、Googleのグラフ描画用の機能ですが、これを使うとスプレッドシートに対して直接SQL文（データベース言語）を投げつけることができます。

💡 gviz/tq を使う3つのメリット

GASの実行時間制限（6分）を完全回避: GASを通さないため、エラーやタイムアウトの心配がありません。

サーバー側で一瞬でフィルタリング: SELECT A, B WHERE C = ‘東京’ のようなクエリを投げると、Googleの強力なサーバーが条件に合うものだけを瞬時に抜き出してくれます。

JSONで受け取れる: 受け取ったデータはJavaScriptですぐに扱える形式（JSON）で返ってきます。

🛠️ 【実例】JavaScriptでの抽出サンプルコード

実際にフロントエンド（画面側）からスプレッドシートのデータを取得するコードのイメージは以下のようになります。

// スプレッドシートのIDとシート名 const SHEET_ID = 'あなたのスプレッドシートID'; const SHEET_NAME = 'ユーザーデータ'; // 投げつけるSQLクエリ（例：B列が'有効'な人のA列とC列を取得） const SQL_QUERY = encodeURIComponent("select A, C where B = '有効'");
// gviz/tq の魔法のエンドポイントURL const endpoint = `https://docs.google.com/spreadsheets/d/${SHEET_ID}/gviz/tq?tqx=out:json&sheet=${SHEET_NAME}&tq=${SQL_QUERY}`;
// データを取得する処理 fetch(endpoint) .then(response => response.text()) .then(text => {
// 最初の不要な文字列をカットして綺麗なJSONに変換 const jsonString = text.substring(47, text.length - 2); const data = JSON.parse(jsonString); console.log("取得完了！", data.table.rows);
// ここでDOMを操作して画面にリストを表示する }) .catch(error => console.error("エラーが発生しました:", error));

このアプローチを使えば、重たいGASの処理を待つことなく、ユーザーの画面に一瞬でデータを表示させる「爆速Webアプリ」が完成します！
次回の【第4ページ】では、世界中で使われているブログシステム「WordPress」を、最強のデータベース（ヘッドレスCMS）として改造する高度な魔法（ACF活用術）について解説します。お楽しみに！