前書き
日本にReactを広めた第一人者、mizchi師匠がReact以来、再び魂が震えたとのことなので、そこまで言うならと思い触ってみました。
今回のお題
- lit.linkのようなSNSやらWebサイトをまとめて紹介できるサービスがありますが、あれの自分用ページ。DBやバックエンドなしの静的ペライチサイトとして作る。
- 元々Vue.jsおよびtailwindの学習目的で環境構築だけして放置（コラ）していたので続きをやってもらう。
与えたプロンプト
過去のプロンプトの一部しか見れないので、記憶だよりに再現。
私（ゆうやみ）に関するポータルサイトを作りたいです。
まず最初に、全てのGit操作はこちらで行うので都度承認を求めてください。
次にファイル編集などで読み書き操作をしていいのは現在のフォルダ(Portal)のみです
- [lit.link](https://lit.link/)のようなSNSリンクまとめサービスを参考に、自分用にWebサイトやSNSリンクをまとめたペライチサイトを作ってください。DBやバックエンドなしの静的ウェブサイトでお願いします。
- TypeScriptとVue.jsの利用は必須です
- デザイン等のライブラリやフレームワークの利用は自由です。なるべくメジャーなものにしてください
- リンクしたいサイトのデータオブジェクト（URLやアイコン、説明等）から動的に画面を生成するアプローチでお願いします。
- data.jsに作りかけのものがあるので参考にしてください。
- 既にある程度、環境構築済みで作りかけたものがあるので使えるものは使ってください。ライブラリのアップデートや追加等も自由です。
確かこんな感じだったかと思います。正直デザインの細かい所は漠然としていたのと、うまく言語化できず、参考元のサービスだけ紹介した形だったので、難しいかなと思ったんですが……。
これでAuto-approve全部ONのストロングスタイルでお願いしました。
成果物
これで所要時間8分/1$。
記事のためにこのバージョンのまま長期公開できればよかったんですけど、firebaseにホスティングしちゃって30日ごとにデプロイし直す必要があり、自動化仕込むのも面倒なのでスクショにしました。まぁアニメーションとかもないので十分分かるかと。
デザインはシンプルすぎますが、リンクは全て正しく遷移できてますし作成完了です。
注目点/気になった点
- lit.link等を開いて調べてる様子がなかったので「SNSリンクまとめサービス」という概念自体を知っているっぽい。まぁ海外産も多く10～20ぐらいあるのでおかしくはないか。
-
アイコンのSVGはCLINEが全部作りました。FilmarksとQiitaガッツリ捏造してて草。あとZennを知ってるのか。
- 普通に規約とかあるので後で確認して修正なり削除なりしておきます……
- プロンプトにも関わらず途中1回もコミットしてくれませんでした。 粒度の指示は出してないとはいえ……
- バージョンアップを自由にしたら中途半端にしかバージョンアップしてくれず、
viteコマンドは通っても、vite buildが通らなかった（viteコマンドで開発用画面がちゃんと表示できているところで完了と判断されたため） - このため追加で「全ライブラリできるだけ最新のものにバージョンアップ」を依頼したのですが、2つの問題があり、思ったより時間と手間とお金（所要時間5~6分/1$）かかりましたw
- tailwindcssのv3→v4移行がやや重く、ヘッドレスブラウザでtailwindcssのサイトを開いて、マイグレーションガイドを探し、読み（一部始終が動画で描写されて草）、そこからプログラム修正していた
- Windows環境なんですけど コンソールで勝手にコマンド打つけど出力結果が取得できない？中途半端に受け取ってる？ みたいで、バージョンアップ作業でかなり詰まって「おそらくエラーが発生しているようです」等と勝手に判断して遠回りしようとするので、こちらから補助しまくりました
総評
- mizchiさんみたいにプロンプトの下準備してないので、改善の余地は全然あると思います
- 今回は初歩的すぎ、ビジネスロジックないので自動テストも無しでマジで表示のためのロジックだけなんですが、vue,tailwindcssほぼ分からん俺なら下手すると1日かかりかねない（レイアウト調整でドハマりしそう）と思うので、これで8分/1$は破格だと思いました
- タスクにもよると思うんですけど、コンソールの出力を取得できないのはちょっと痛いですね……
後書き
全部で20ドル課金したのですが、後約18ドル残ってるのでもうちょっと高度なことをやらせてみます。
続編