はじめに

Markdwon からサイトマップ生成ツールを作成しました。
AIの助けを借りて、土曜日半日 x 3 = 12h ~ 16h 位 でスクショのようなものが生成できるツールができました。

github : kaku3/workbooks/04_インタラクティブサイトマップ/12_src

最近 X で『20分でプロダクトができました！』というポストがチラホラ飛んできますが、それよりは身近な感じ(?)がしていいかなと思ったので寄稿します。

ソース（AIに書いてもらったソースが大半ですが）は github で無料公開してますので使ってみたい方は上のリンクよりお持ちになってください。

サイトマップ生成ツール（３回目）

github のリンクを踏んで頂いた方はお気づきかもしれませんが、サイトマップ生成ツールを作成するのは、yaml版、Excel版に加えてMarkdown版(★New)で３回目になります。

たいして反響もないツールを３度も作るのは モチベーションが全く上がらない のですが（苦笑）、Markdown版を作れたらまぁまぁ便利ではないかと思ったのと、そろそろAIにちょろっと頼んだら作ってくれるのでは？ という思いから作成をすることにしました。

サンプルサイトデータ用意

ツール作りで最初の難関が「サンプルデータ」の用意です。
時間がかかる割に開発が全く進まないというところで、モチベーションがじわじわ削られます。こんなところでモチベーションを削られるわけにはいきません。

GPT先生とClaude先生の無料枠で作っていきます。

いい感じのECサイトのサイトマップ構成をください

今回は Markdown からサイトマップを作りたいので、Markdown にしてもらいましょう。

各ページを ## で表現してください。
リンクは ### link としてください。

仕様的にもページIDが定義されていた方が便利です。また、各ページに url も必要なのでお願いします。

## {ページId},{ページ名},{url} となるような形でページIDやurlをいい感じに付与してください。

仕様書感もでていてほしいので、説明文もつけてもらいましょう。

各ページに簡単な説明もつけてください。

そうこうしてできあがったマークダウンが以下となります。

github : ECサイト.md

(抜粋)

# サイトマップ

## SC001, トップ, /,0

サイトのメインページ。新着商品、おすすめ商品、キャンペーン情報などを表示。
ヘッダー、左メニュー、フッターを含む基本レイアウトを提供。

### link, ヘッダー

- 検索,SC002
- カート,SC300
- 新規会員登録,SC111
- ログイン,SC101
- マイページ,SC201

### link, 左メニュー

- カテゴリー一覧,SC010
  - カテゴリー1,SC011
  - カテゴリー2,SC011
  - カテゴリー3,SC011
- アカウント,SC101

### link, フッター

- 企業情報
  - 会社概要,SC401
  - ご利用ガイド,SC402
  - 利用規約,SC403
  - プライバシーポリシー,SC404
  - お問い合わせ,SC405

## SC002, 検索結果, /search

キーワードによる商品検索結果を表示。
フィルタリング機能（価格帯、カテゴリー、商品状態等）を提供。

### link

- 商品詳細,SC021

## SC010, カテゴリー一覧, /categories

全商品カテゴリーの一覧を表示。
メインカテゴリーとサブカテゴリーの階層構造を表示。

### link

- カテゴリー,SC011

## SC011, カテゴリー, /categories/{category_id}

選択されたカテゴリーに属する商品一覧を表示。
ソート機能とフィルタリング機能を提供。

### link

- 商品詳細,SC021

## SC021, 商品詳細, /products/{product_id},3,2

商品の詳細情報（価格、説明、画像、在庫状況等）を表示。
カートへの追加、お気に入り登録機能を提供。

### link

- カートに追加,SC300
- お気に入りに追加,SC201

Markdown の解析

筆者は Markdown の解析は未経験です。
週末趣味プログラマーとしてはちまちま調べて、このようなところを作り上げていくところが楽しかったりするのですが、モチベーション残量を鑑みてショートカットします。

AIに作ってもらったMarkdown から過去に作ったサイトマップ生成ツールと同じ形式の json を出力してもらえれば Markdown からサイトマップ生成の目的を達成できるので以下のようにお願いしてみます。

この Markdown を、

(Markdown)

この json にするパーサーを作ってほしいです。node で

(json)

出てきたものを何度かやりとりしてちょいちょい直してもらったら完成しました。
モチベーションとテンションが上がりました。
unified や remark-parse を知らなかったので覚えておくことにします。

import {
  unified
} from 'unified';
import remarkParse from 'remark-parse';

UI改善 : 左メニュー

モチベーションを上げるために UI改善は必須(笑) です。
Markdown 解析部だけを作って既存のサイトマップ用のデータを作って終了にするのが 工数としては最小ですが、何のために週末にプログラムをしているのかというと勉強のためとか技術をキープするためとか大義名分は色々ありますが 自己満足 のためかなと思います。
自己満足度を上げるためには、カッコいいUI(笑) が必要です。

出たり消えたりする左メニューにファイル一覧を出したい。

自分では絶対にデザインしない左メニューが出てきました。打ち出の小槌のようです。
楽しい。

リンク解析（マニュアル）

ここは言語化がうまくできなかったのか、どうしても思った通りのコードを作ってもらえませんでした。

ページとリンクのデータ生成まではきれいにできたので、あとはそれを辿って階層と位置を決めてくれればいいのですが、「違う、そうじゃない」 というコードが生成されました。

プロンプトエンジニアならここはプロンプトを頑張るところなのでしょうけど、ちょこちょこっとロジックを書きました。
往年プログラマーの生存ルートはこういうところにあるかもなぁーと妄想しました。

UI改善 : 接合線の色

全部同じ色でつなぐと、線が増えた時にどの線がどこにつながっているかが見づらくなるので、色を変えることにしました。

以前であれば、FlatUI Colors や Paletton などを見てごにょごにょやってましたが、ここもショートカットです。

接合線をカラフルにしたいんだけど、16色ぐらいくれますか？

目がチカチカするんで、もうちょいくすんだ色がいいです。4色でいいかな。

なんてやり取りをしたら、およそよさげな色が出てきました。

仕上げ

接合線を微妙にズレた位置に配置するなどの味付けは手でやりました。
chat 先生に聞くまでもないというか、無料枠がもったいないというのもありますが、味付けを自分でやるのは、自己満足感 を上げるための重要な作業かと思っています(笑)。

ここも chat 先生にアドバイスをもらった方がよりよいものになる可能性が高いなぁと思いながら、Matrixのネオに想いを寄せつつ手を動かしたのでした。

まとめ

プログラミングが 「分からないことベース」 ではなく 「やりたいことベース」 で調べ物(?)をして組み上げていくスタイルに変わったと感じました。

ちまちま調査をして新しいキーワードを手に入れてキーワードを紡いで真実にたどり着く昭和のアドベンチャーゲーム¹の様な開発スタイルが前時代の手法になろうとしているのを感じました。

一方で、AIネイティブ開発者の場合「どうしてもAIにうまく作ってもらえないもの」が出てきた時にどうするかというのが当面は課題になるのかなとも思いました。

また、プログラムの上達のコツに 「つくりたいもの」 を思いつくことが大事というのがあります。それがモチベーションとなって楽しく調べたり学習をしたりできたので。
AIサポート開発になると、「つくりたいもの」 があればすぐに開発できるし、なければ何も開発できない、といった未来になっていくことが想像されるので、「つくりたいもの」 があるのがよりいっそう大事になっていくのかなと思いました。

おまけ

kaku3 - Qiita記事一覧
ポエム多め。PM、メンター、未経験エンジニアや新卒向け記事など。
エンジニアのためのお仕事問題集
2030年にIT人材が最大79万人不足するとのことで、学習用の資料をgitで無料公開してます(不定期更新)。

よろしければどうぞ。

ファミコン版のポートピア連続殺人事件でふみえの写真を取り忘れると進行不能になります。 ↩