はじめに
javascript の知識はほぼ皆無ですが、Next.js で湧き水 API を実行してダッシュボードを cursor で作成してみました。
🚀 開発環境
- フレームワーク: Next.js 15.1.6
- フロントエンドライブラリ: React 19
- スタイリング: Tailwind CSS 3.4.1
- OS: Windows 11
- エディタ: cursor
導入
1. nvm のインストール
github のリンクからnvm-setup.exeをダウンロード実行してインストール
（インストール先を現在のユーザー内のディレクトリにしておく←インストール先を間違えて躓いた）
2. Node.js（18.19.0）をインストール
cmd 上で実行（cmd もしくは PowerShell）
# 必要なパッケージをインストール
nvm install 18.19.0
# Node.js（18.19.0）に切り替え
nvm use 18.19.0
# 現在のNode.jsの環境を確認
nvm list
＊ 18.19.0
# パッケージをインストール
npm install
3. APIKEY の取得
LIVLOGの API からトークンを生成し、APIKEY を取得してください。
pythonによるAPI の実行結果（参考）
python で API 実行すると以下のような JSON ファイルが生成されます。
クエリパラメータ： pref（都道府県名）
pref=北海道 で実行すると以下のようにjson形式でたくさんの地名が出力されます。
# ライブラリのインポート
import os
from dotenv import load_dotenv
import requests
import json
# .envファイルから環境変数を読み込む
load_dotenv()
headers = {
"Accept": "application/json",
"Authorization": f"Bearer {os.getenv('API_TOKEN')}",
}
# APIを実行
response = requests.get(
"https://app.livlog.xyz/webapi/v2/spring-water/list?pref=北海道", headers=headers
)
print(response.text)
出力結果
{
"metadata":{"title":"Success","detail":"OK","status":200},
"_links":{
"self":{
"href":"/v2/spring-water/list"
}
},
"results":[
{
"createDate":"2024-02-25T10:05:00.000+00:00","createCd":"admin",
"updateDate":"2024-02-25T10:05:00.000+00:00","updateCd":"admin",
"id":1,
"name":"上南部水神宮の水",
"furigana":"かみなんぶすいじんぐうのみず",
"oldAddress":"北海道旭川市東旭川町瑞穂 上南 部水神宮の水",
"overview":"郊外の山あいの山腹から湧出している湧水。湧出場所への立入可能。",
"access":"◎",
"activity":"付近住民等が設置した利用マナー等が書かれた立て看板がある。また，定期的に周辺の清掃等を行っているようである。",
"address":"北海道旭川市東旭川町瑞穂",
"latitude":43.7294986,
"longitude":142.6228679,
"link":""
}
],
// 他にもたくさん、以下略
}
プロジェクトの作成と実行結果
プロジェクトフォルダの作成
プロジェクトフォルダを作り、移動してください。
# プロジェクトフォルダを作り、移動
mkdir project_root
cd project_root
# プロジェクトを起動
npm run dev
プロジェクトを起動した結果（ディレクトリ構成）
（余計なファイルが複数ありますが）コマンドを実行するとこのようなディレクトリ構成が出来上がります。
主に編集するのはpage.tsx（フロント画面）とapi/spring-water/route.ts（ルーティング設計）です。
localhost:3000にアクセスすることで起動したwebアプリが確認できます。
あとはctrl+Lでchatを開き、cursorにひたすら指示を出してはページを再読み込みして確認の繰り返しです。
Next.js によるAPI の実行結果
javascriptがほぼわからなくても何とか形になりました。知識があればもっと早くいいものができたと思います。
実装内容一覧
- 都道府県名を選択するドロップダウンメニューを作成
- 選択した都道府県名をクエリパラメータとして API を実行
- 実行結果を地名ごとにカード形式で表示
- link の URL をカード内にカードで表示
- 画像のリンクが複数ある時はスライドビューで表示
- リンクがない場合は地名を google 画像検索したリンクを表示
- 緯度と経度の情報から Google Map のリンクを追加
課題
主にエラーハンドリングがうまくいっていない。
- linkにpdfとjpgが混在している場合、正しく表示できていない
- linkの末尾が'JPG'の場合、'jpg'に置き換える処理をしたがうまく表示できない
- 機能改善の指示を出すと別の部分でエラーが発生してしまい、前の履歴に戻ることになるのでgitで管理したほうがいい（以前の状態に戻れなくなり一度作り直した）
cursor chatに投げたプロンプト（参考）
最初に投げたプロンプト
湧き水APIで取得したjsonの内容をカード形式で表示したい
参考にpythonファイルとjsonの内容を添付します
import os
from dotenv import load_dotenv
import requests
import json
# .envファイルから環境変数を読み込む
load_dotenv()
headers = {
"Accept": "application/json",
"Authorization": f"Bearer {os.getenv('API_TOKEN')}",
}
response = requests.get(
"https://app.livlog.xyz/webapi/v2/spring-water/list?pref=愛知県", headers=headers
)
print(response.text)
# レスポンスをJSONとしてパース
data = response.json()
# JSONファイルを保存
with open("spring_water_data.json", "w", encoding="utf-8") as f:
json.dump(data, f, indent=4, ensure_ascii=False)
print("JSONファイルに保存しました。")
#jsonの内容
"results": [
{
"createDate": "2024-02-25T10:05:00.000+00:00",
"createCd": "admin",
"updateDate": "2024-02-25T10:05:00.000+00:00",
"updateCd": "admin",
"id": 1828,
"name": "金明水",
"furigana": "きんめいすい",
"oldAddress": "愛知県名古屋市千種区天白町 金明水",
"overview": "東山動植物園の東南の斜面から湧出しており、近傍には小さな祠が作られています。",
"access": "◎",
"activity": "市民モニターによる実態調査",
"address": "愛知県名古屋市名東区藤巻町１丁目",
"latitude": 35.1507491,
"longitude": 136.9848604,
"link": "https://www.env.go.jp/water/yusui/result/sub4-2/map/23100-1.jpg"
},