チェックとテンプレ
- 道具マスタ（名称・カテゴリ・重量 g）
- 日帰り／泊りの必須装備テンプレ
- 山行ごとのチェックリスト
- 日帰り標準装備の一括チェック
- チェック操作の楽観的 UI と一括保存
Personal App × Spreadsheet DX
登山道具チェック
出発前の装備確認を、紙のメモからスマホで同期できるチェックリストへ。 Google スプレッドシートをデータベース、Apps Script を API、Vite + React を画面にした個人向け Web アプリの制作事例です。
Overview
「日帰り／泊りで必須装備が違う」「荷物重量とざっくりカロリーも見たい」「スマホと PC で同じリストを共有したい」—— 登山前の確認を自分用にまとめたアプリです。エンジニア教育を受けたわけではなく、やりたいことを Cursor と対話しながら組み立てたバイブコーディングの成果物です。
データは Google シートに残し、画面だけをフロントで組み立てる構成にしました。 現場の DTP / DX でも使う Spreadsheet + GAS の考え方を、個人の実用アプリへ展開した事例です。 意図の言語化とプロンプトエンジニアリングで仕様を固め、出てきた実装を現場目線で採否しています。
本ページは制作内容の紹介です。公開デモの登録や外部からのログインは想定していません。
Features
山行の計画補助
- 国土地理院の主な山岳標高一覧から山を選択
- 登山口選択と標高差（山頂 − 登山口）の算出
- 距離・荷物重量・体重からの消費カロリー概算
- ヒーロー型トップ画面など、アプリらしい導線
- サイトパスワード（Cloudflare Pages Functions）
Architecture
01
React / Vite
チェックリストと山行 UI
02
Apps Script API
CORS を避けた text/plain POST
03
Spreadsheet
道具・必須・山行・チェックを保持
04
Pages 公開
スマホ向けに静的配信＋簡易認証
Data Sources
山岳・登山口
- 国土地理院「日本の主な山岳標高（1003山）」
- 登山口: OpenStreetMap（ODbL）
- 登山口標高: 国土地理院 標高 API
シート構成
- settings / gear
- required_day / required_overnight
- trips / checks
Tech Stack
TypeScript
React 19
Vite
React Router
Google Apps Script
Google Spreadsheet
Cloudflare Pages
Pages Functions
Insight
「全部を専用 DB に載せる」より、普段触れるシートを正とする方が、個人アプリでは運用が続きやすい、という実感がありました。 画面側では一括保存や楽観的更新で体感速度を上げ、データ側はシートの見通しを残す——現場の DX と同じ分割です。 非エンジニアでも、Cursor と対話しながらプロンプトの精度を上げれば、こうしたバイブコーディングで実用アプリまで届く、という手応えもあります。