v0を使って高度試験(エンベデッド)の過去問演習サイトを作ってみた
はじめに。過去問道場に頼りすぎた。
IPAの情報処理技術者試験を受けた人なら必ずと言っていいほど過去問道場にお世話になっているはずです。
私は次の秋試験でエンベデッドシステムスペシャリストを受験する予定で既に申し込みも行いました。
そして、いつもの通り午前2試験は過去問道場を使うつもりで探したのですが...
エンベデッドシステムスペシャリストが存在しない!?だと...
そうなんです高度区分にはない試験もあるのです。
(エンベデッドは受験者数少ないし仕方ないか)
色々探したのですが、私が使いたいと思うようなサイトはなく...
そうであれば自分で作ろうと思い今回作ってみました。
作ったもの
今回作ったエンベデッドシステムスペシャリスト試験 午前Ⅱ試験 過去問演習サイトです！！
最小限の構成にしつつも問題フィルターなどの機能を備えています。
主な機能
- 年度別の問題を選択して実施、複数選択も可能
- 計算問題フィルター
- オリジナル解説付き(まだないものをありますけど)
v0と共に爆速でつくる
今回コンセプト・目的は明確だったので欲しい機能を言語化してv0で作ってみました。
意識したこと
- シンプルで最小構成
- スムーズな画面遷移
作業分担
v0 -> デザインやサイトの構成
私とcursor -> 過去問からフォーマット整備・解説作り
v0のTips
作業しているうちに感じたv0を上手く使うためのtipsを紹介します。
タスクの粒度は小さく
これはv0に限らず、AIエージェント全般に言えることです。
指示が多すぎると目的を達成できないため、タスクの粒度は「1つのコンポーネント」や「1ページのレイアウト」のように狭く絞って伝えるのがコツです。
具体的にはこんな感じ：
- フッター・ヘッダーのみのレイアウト調整
- トップページのカードデザインのみ
- 問題一覧ページの並び順とフィルタ機能だけ
1つの指示が完了したら、次の作業に進むというステップバイステップ方式が、結果的に早く・綺麗に仕上がります。
自分の好みかどうかハッキリさせる
デザインに対して素人では曖昧な指示になりがちです。(モダン,ナチュラルなど)
そのため、デザインを提案をしてもらったカラーや、修正してもらったレイアウトや見た目が好みかどうか伝えるとGoodです。
これによりv0の作業が的確になるだけではなく、自分の目的のデザインを把握して言語化してくれます。
デザインガイドラインやブランドカラーを残しておく
ある程度デザインが固まった時点でデザインガイドとブランドカラーをアウトプットしてもらいましょう。
別ページのレイアウトやデザインをしてもらった時に異なる雰囲気になることも多いです。
そのため、簡単に構わないのでアウトプットしてもらうといいです。
Githubと連携すべし
これは公開する・しないにかかわらずプロダクトごとにGithub連携しておくべきです。
通常の開発サイクルのようにリポジトリで管理した方が、切り戻しや自分で修正する場合とても楽になります。
Forkを活用しよう
同じスレッドで作業していると写真のようにバージョンがどんどん増えていきます。
バージョンの粒度や精度はバラバラになりがちなので増えれば増えるほど切り戻しが困難になります。
forkしてv0スレッド＝Githubブランチくらいにすると粒度も的確に作業できると思います。
Pushは手動で行った方がいい
これは先ほどのバージョンの問題にも関連します。
間違ったアウトプット、バージョンでも自動pushしていると、エージェント特有の「たくさんコミットしているけど、なんか違うものが出てきた...」の状態になります。
また、並行してローカルで作業する場合もあるため、その際にリポジトリが混沌としていると作業しにくいため面倒ですが、適切な粒度と正しい方向に作業が行われているときにpushするといい。
修正されたくないファイルはLock
余計なファイルをいじられたくない。もう完成しているページはロックしちゃいましょう。
仕上げは自分で
色々書いてきましたが、微妙なニュアンスの指示やレイアウト調整は、v0（AIエージェント）にとってまだ苦手な領域です。
「この余白感がなんか惜しい」みたいな細かいこだわりは、結局、自分でやったほうが早いことも多いです。そのため私はローカルにて自分 or Cursor などのAIエージェントで微修正して作業をマージしています。とはいえ、ほぼコードを書いていない。
(まとめ)ぜひ利用してください！
自分なりに実質1週間程度でかなり満足するものができました。 今後も更新していく予定なのでぜひ利用して、エンベデッドを受験する人は頑張りましょう！！
Discussion
こちらでもサイトの問い合わせ受け付けます。