はじめに
自分が所属する会社では、優秀な社員がたくさんおり、最近では自主的にハンズオン形式での勉強会を開いてくれる人がいます。
凄すぎる。
その勉強会で、skillsについての説明や使い方を解説してくれたり、実際に使用しているskillsを社内で共有してくれたので、それを参考にAIを使って実装をしてみました。
その時に、
「実際にskillsを使った時と使わなかった時の実装はどう違うのだろうか？」
と疑問に思ったため、試してみました。
ここでは、skillsを使った時と使わなかった時の実装の違いを記事にしていきます。
ちなみに、その勉強会をしてくれた社員は
「この時代で、skillsを知らないエンジニアは自身をエンジニアとは言わないでください」
と言っていました... ギクっ...
(※誇張してます。実際はもっと優しいニュアンスで言ってくれています。)
この記事を読んで、
「skillsは余裕で知ってる」
「当然の結果だろ」
「skills使ってみた！」
という人は、これからもエンジニアと宣言できそうです🙆♂️
結論
当然ながら、skills を使った方がスムーズかつエラーも少なく充実した実装をしてくれました。
よかった点の代表例を挙げると
- エラー件数 -> skills を使用すると０！ 使用しない場合は5件あり。
- テストコード、ciの用意までしてくれる！
- +アルファの機能を相談しながら用意してくれる！
という感じです。
使わない理由がないですね。
詳細
前提
今回は、AIがどこまで実装してくれるかということを検証したかったので、コードのより詳細な指示や、基本は修正の依頼は投げずに、AIが完成だよというまでほぼ任せきりにしました。
skills の内容は、適当な依頼文(メモ書き程度の要件定義)をより丁寧な要件定義書にするというものです。
初期依頼文
とりあえず適当な文を投げてみます。
条件を変えないために、skills を使用した場合と使用していない場合で文は全く変えていません。
Next.js でアプリを作りたい。
ユーザーが飲食店を登録・閲覧・編集・削除できるような感じで。
ユーザーはログインできなくても閲覧はできるけど、登録とか編集・削除はログインしないとできないようにしたいかな。
あとは、口コミの情報とかはログインしないとぼやけて見えない感じで。
pc, tab, sp にもそれぞれ対応したい。
postgresql を使って、ローカルでは docker で立ち上がるように用意して。
tailwind は使ってほしくて、UIUXは任せる。
prisma を使ってもらおうかな。
それぞれのバージョンは安定版の最新のやつで。
必要な情報があれば、何個でも質問してくれてOK。
依頼文を受けて、AIさんは...
skills なしの時
そのまますぐに実装に入りました。
23分間、放置されました...
エラー対応なども含めると +10分ほど、合計は 35分くらいでした。
skills ありの時
この依頼文を受けて、/docs の配下に、要件定義書を記載してくれました。
さらに、不足情報として以下の３点を質問されました。
実際には全ての質問で、選択肢を提示してくれています。
- ログイン方式は...？
- 店舗データと口コミデータの権限ルールは...？
- 未ログイン時のぼかしの具体的挙動は...？
質問に回答すると、再度 /docs は以下の要件定義書を更新してくれました。
そして、こちらに確認の上、実装を進めてくれます。
途中で次の実装方針をこちらに何度か確認してくれました。
特に修正はせず、そのまま進めてもらって完成です。
回答も含めて、大体50分くらいですかね。
丁寧に進めてくれている分は、使用していない時と比べて時間が長くなりました。
起動してみた
READMEに従い、コマンドを実行して起動してみました。
skills なしの時
ローカルの状況が原因だったのですが、DB接続でエラーが出たのでそれは修正を指示。
また、seedデータがなかったのでそれも指示しておきました。
seed 実行でもまたエラーです。
それを修正してもらい、問題なく立ち上げることができました。
全体的に最低限の機能はいい感じ。
ログイン・ログアウトもできました。
バリデーション時に、一部だけエラーです...
skills ありの時
エラーも全く出ず、起動することができました。
ちょっとプラスアルファで機能を入れてくれました。
マイページまで実装済みです
構成
skills なし
seed はなかったですが、最低限のものは用意してくれる感じですね。
no-skills-app/
├── .env
├── .env.example
├── .gitignore
├── README.md
├── docker-compose.yml
├── eslint.config.mjs
├── next-env.d.ts
├── next.config.ts
├── package-lock.json
├── package.json
├── postcss.config.mjs
├── prisma.config.ts
├── prisma/
│ ├── schema.prisma
│ ├── seed.mjs
│ └── migrations/
│ ├── migration_lock.toml
│ └── 20260301082448_init/
│ └── migration.sql
├── public/
│ ├── file.svg
│ ├── globe.svg
│ ├── next.svg
│ ├── vercel.svg
│ └── window.svg
├── src/
│ ├── app/
│ │ ├── favicon.ico
│ │ ├── globals.css
│ │ ├── layout.tsx
│ │ ├── page.tsx
│ │ ├── login/
│ │ │ └── page.tsx
│ │ ├── signup/
│ │ │ └── page.tsx
│ │ ├── api/
│ │ │ ├── register/
│ │ │ │ └── route.ts
│ │ │ └── auth/
│ │ │ └── [...nextauth]/
│ │ │ └── route.ts
│ │ └── restaurants/
│ │ ├── new/
│ │ │ └── page.tsx
│ │ └── [id]/
│ │ ├── page.tsx
│ │ └── edit/
│ │ └── page.tsx
│ ├── components/
│ │ ├── header.tsx
│ │ ├── login-form.tsx
│ │ ├── logout-button.tsx
│ │ ├── providers.tsx
│ │ └── review-card.tsx
│ ├── lib/
│ │ ├── actions.ts
│ │ ├── auth.ts
│ │ ├── format.ts
│ │ └── prisma.ts
│ └── types/
│ └── next-auth.d.ts
└── tsconfig.json
skills あり
ci やテストまで用意してくれています。
skills-app/
├── .env
├── .env.example
├── .github/
│ └── workflows/
│ └── ci.yml
├── app/
│ ├── api/
│ │ ├── auth/
│ │ │ ├── login/route.ts
│ │ │ ├── logout/route.ts
│ │ │ └── register/route.ts
│ │ ├── restaurants/
│ │ │ ├── [id]/
│ │ │ │ └── reviews/route.ts
│ │ │ ├── [id]/route.ts
│ │ │ └── route.ts
│ │ └── reviews/
│ │ └── [id]/route.ts
│ ├── login/page.tsx
│ ├── me/page.tsx
│ ├── register/page.tsx
│ ├── restaurants/
│ │ ├── [id]/
│ │ │ ├── edit/page.tsx
│ │ │ └── page.tsx
│ │ └── new/page.tsx
│ ├── favicon.ico
│ ├── globals.css
│ ├── layout.tsx
│ └── page.tsx
├── components/
│ ├── delete-restaurant-button.tsx
│ ├── logout-button.tsx
│ ├── restaurant-form.tsx
│ ├── review-actions.tsx
│ └── review-form.tsx
├── docs/
│ └── SPEC-restaurant-app.md
├── lib/
│ ├── auth.ts
│ ├── prisma.ts
│ ├── session.ts
│ └── validators.ts
├── prisma/
│ ├── migrations/
│ │ └── 20260301082354_init/
│ │ └── migration.sql
│ ├── schema.prisma
│ └── seed.mjs
├── tests/
│ └── e2e/
│ └── app.spec.ts
├── public/
│ ├── file.svg
│ ├── globe.svg
│ ├── next.svg
│ ├── vercel.svg
│ └── window.svg
├── docker-compose.yml
├── eslint.config.mjs
├── next.config.ts
├── package.json
├── package-lock.json
├── playwright.config.ts
├── postcss.config.mjs
├── prisma.config.ts
├── README.md
└── tsconfig.json
最後に
結局、skills は手順書のようなものなので、当然といえば当然ですね。
skills の内容が丁寧であればエラーの発生可能性は低くなるし、ヒアリング・実装を丁寧にしてくれます。
また、skills と言いましたが、結局は skills として用意しないといけないわけではなく、その手順書をAIに読み込ませれば同じだと思います。
こういった手順書があると、丁寧に実装を進めてくれたり、より良い方向に持っていってくれます。
エラーが発生しないのも手間が少なくてとても良いですね。
今回は、記事で公開できる情報を用意するために新規でアプリを作る時に使用した例ですが、すでに実装済みのアプリで、機能追加・修正などの時はより明確に差が生まれているように感じます。
AIで開発していない時代から重要だとは思いますが、状況に合わせて skills などの手順書を用意する力はより重要になってますね。
正確に用意できれば、開発効率はとても上がりそうです。
また、株式会社シンシアではたくさんのエンジニアや学生インターンを採用させていただき、一緒に働いています。
※ シンシアにおける働き方の様子はこちら
弊社には年間100人以上のエンジニアの方に応募いただき、技術面接を実施しております。
実務未経験のエンジニアも積極採用しております。
この記事が少しでも学びになったという方は、ぜひ wantedly のストーリーもご覧いただけるととても嬉しいです！