【ITニュース解説】DuckDB-Wasm, MapLibre GL JS, CloudFlare Pagesを使って、オープンデータを可視化してみたときの学び

この記事では、行政のオープンデータを活用し、「まちきずき」というウェブサイトを構築した事例とその技術的な学びについて解説する。このプロジェクトは、誰もが自由に利用できる公共のデータを地図上で可視化し、地域に関する理解を深めることを目的としている。具体的には、ウェブブラウザ上で大量のデータを高速に処理し、地図に表示するという高度な取り組みが行われている。

まず、サイトの全体像について説明する。「まちきずき」は、例えば行政が公開している地域の施設情報や統計データなどを、地図上に分かりやすく表示するウェブサイトだ。ユーザーは特別なソフトウェアをインストールすることなく、ウェブブラウザを開くだけでこれらの情報にアクセスし、インタラクティブにデータを探索できる。これにより、地域の課題発見や、新しいまちづくりへのヒントを得るためのツールとして機能する。

このサイトの基盤となっている技術の一つが、Astroという「静的サイトジェネレーター（SSG）」だ。通常のウェブサイトは、ユーザーがアクセスするたびにサーバーがページを動的に生成するが、静的サイトジェネレーターは、サイトのコンテンツをあらかじめ「静的なファイル」（HTML、CSS、JavaScriptなど）として生成しておく。そして、これらのファイルをサーバーに配置することで、ユーザーは常に高速にページを閲覧できる。AstroのようなSSGを使うメリットは、ページ表示の速さ、サーバーへの負荷の軽減、そして高いセキュリティにある。一度生成されたファイルは変更されないため、悪意のある攻撃を受けにくいという利点もある。

生成された静的なファイルは、Cloudflare Pagesというサービスを利用してインターネット上に公開されている。Cloudflare Pagesは、ウェブサイトをホスティング（公開）するためのプラットフォームだ。開発者が作成したファイルをこのサービスにアップロードするだけで、世界中のユーザーがウェブサイトにアクセスできるようになる。Cloudflareは高速なコンテンツ配信ネットワーク（CDN）を提供しているため、ユーザーはどこからアクセスしても、快適に「まちきずき」の情報を閲覧できる。

このプロジェクトの核心ともいえる技術が、ウェブブラウザ内で直接データを検索・処理する仕組みだ。通常、大量のデータを扱うウェブサイトでは、ユーザーからの検索リクエストはサーバーに送られ、サーバー上のデータベースがデータを処理して結果を返す。しかし、「まちきずき」では、DuckDB-Wasmという技術を使うことで、このデータ処理の一部をユーザーのウェブブラウザ（クライアント側）で行う。

DuckDB-Wasmは、高性能なデータベースであるDuckDBをWebAssembly（Wasm）という技術を使ってウェブブラウザ上で動作するようにしたものだ。WebAssemblyとは、ウェブブラウザ上で高速にプログラムを実行するための技術規格で、これによってブラウザの能力が飛躍的に向上した。つまり、DuckDB-Wasmを利用することで、ユーザーのパソコンのブラウザ自体が強力なデータベースとして機能し、サーバーに負荷をかけることなく、直接データを検索・分析できるようになったのだ。

処理するデータは「Parquet（パーケ）形式」という形式で保存されている。Parquetは、大量の構造化データを効率的に保存・処理するために設計されたファイル形式だ。通常のテキスト形式のデータと比べて、ファイルサイズが小さく、データの読み込みや検索が非常に高速に行えるという特徴がある。特に、特定の列（カラム）だけのデータを取り出すような場合に、その真価を発揮する。このように効率的な形式でデータが用意されているからこそ、ブラウザ内での高速処理が可能になる。

さらに、ユーザーのブラウザ内でデータを永続的に保存するために、OPFS（Origin Private File System）という機能が活用されている。OPFSは、ウェブサイトがユーザーのブラウザのストレージ領域に、まるで通常のファイルシステムのようにファイルを保存できるようにする機能だ。これにより、「まちきずき」は一度ダウンロードしたParquet形式のデータをユーザーのブラウザ内に保存し、次回のアクセス時やオフライン時でも、サーバーに再ダウンロードすることなくデータを利用できるようになる。これは、ウェブサイトの応答速度を向上させ、データ転送コストを削減する上で非常に重要な役割を果たす。

そして、可視化の要となる地図表示には、MapLibre GL JSというライブラリが使われている。MapLibre GL JSは、ウェブ上でインタラクティブな地図を表示するためのJavaScriptライブラリだ。ベクトルタイルという形式の地図データを活用することで、拡大・縮小や移動が非常にスムーズに行える美しい地図をウェブサイトに組み込むことができる。このライブラリが、DuckDB-Wasmで処理された行政データを視覚的に魅力的な形で地図上に表現する役割を担っている。

これらの技術を組み合わせることで、「まちきずき」は、サーバーへの依存度を減らし、高速でコスト効率の良い、そしてユーザー体験に優れたウェブサイトを実現している。特に、ブラウザ内でのデータ処理は、サーバー側のインフラにかかる費用を大幅に削減し、さらにユーザー自身のデバイスの計算能力を活用することで、きめ細やかなデータ分析を可能にする。これは、これからのウェブ開発において、サーバーとクライアントの役割分担を再考する上で非常に示唆に富むアプローチだ。

この事例は、システムエンジニアを目指す初心者にとって、最新のウェブ技術がどのように組み合わされ、現実世界の課題解決に貢献しているかを示す良い例だ。静的サイトジェネレーターによる高速なサイト構築、クラウドサービスによる効率的なホスティング、そしてWebAssemblyを用いたブラウザ内での高度なデータ処理という、多様な技術要素が連携することで、これまでにない新しいウェブアプリケーションが生まれる可能性を秘めていることがよくわかるだろう。