序文
- AIは単なるツールであり、マスターが必要です
- あなたを失業させるのはAIではなく、AIを知っている同僚のせいです
最近ではAIの人気が非常に高く、さまざまな記事や動画でAIやその活用シーンが紹介されています。私も長時間観察しました。
私たち開発者にとって、AI にできることは効率を向上させることだけです。つまり、AIツールの恩恵により開発効率が向上し、N人で使えるようになるのです。ちょうど自動車が N 台の車両の代わりになるのと同じです。
そこで、要件、設計、開発、最適化に至るまで、AI を使用してプロセス全体を操作する小さな Vue3 プロジェクトを単純に開発して、その様子を確認してみました。
結果は私の期待を大きく上回り、AI は効率的かつ高品質なコードを生成することができ、プロジェクト内のコードの 90% は AI によって生成されました。約 1 ～ 2 日でこのプロジェクトは完了しました。
ChatGPT を使用して要件を整理する
要件は通常 PM によって作成されますが、ChatGPT がプロジェクトの要件をどのように理解して支援できるのかを実際に見てみたいので、私も試してみます。
PS: 私たちが開発者で要件を記述する必要がない場合でも、要件をレビューする必要があります。(PM の言うことをそのまま実行することはできません) ChatGPT を使用して要件を分析すると、より適切なレビュー提案を行うことができます。
要件の概要
あなたのニーズ、背景、意図を明確に書き留めて、ChatGPT に質問してください。
你是互联网行业一名资深的产品经理，现在主导设计一个博客产品的需求，
这个产品是面向编程技术人员的，例如简书、博客园、掘金这种网站。
要求产品以博客功能为主，不要有其他无关功能。你来写这个产品的需求文档，先列出需求大纲。
ここに書かれている要件は非常に包括的であり、その中には予想外のものもあることがわかります。
これらの要件は完全に適用できるわけではありませんが、十分な参考価値があります。
需要の絞り込み
概要を理解した後、引き続きいくつかの詳細な要件を尋ねることができます。
根据上文，请详细描述“博客管理” 部分的需求，按层级、条目列出
ニーズに応じて必要なページ数や各ページの機能をデザインさせることもできます。このような質問
根据上文需求，你分析需要多少个页面？每个页面都有哪些功能？按条目列出
ChatGPT のサポートにより、プロジェクト要件をより迅速かつ包括的に完了できます。
ChatGPT + Copilot を使用してプロジェクトを開発する
以下功能，有的是 ChatGPT 开发的，有的是 Copilot 开发的，其实两者可以切换的，两者在生成代码时有些共性。我想同时体验两者的能力，所以混合使用了，仅供参考。
顶部栏（ChatGPT）
先写一个左右结构的框架
写一个顶部导航栏组件，宽度 100% 。左右结构，左侧是 logo ，右侧是“登录”链接
再开发导航菜单。注意：菜单要通过 url 参数 category 进行搜索，以及激活 activeMenu
使用 vue3 和 ElementPlus 写一个菜单组件，包含：前端、Java、Python、小程序
要求如下：
1. 每个菜单点击时，都跳转到首页，并加一个 query `?category=xxx`
2. activeMenu 要根据 url query `category` 参数实时变化，默认值是空
3. 使用 vue3 setup script 语法
最后再开发搜索组件。注意：通过 url 参数 keyword 进行搜索
使用 vue3 和 ElementPlus 写一个 input search 组件。要求：
1. 搜索时跳转到当前 path ，并加一个 query `?keyword=xxx` ，且保留现有的 url query
2. 实时监听 url query `keyword` 并讲内容显示到 input 中
3. 使用 vue3 setup script 语法
初试 ChatGPT 写代码感觉整体效率非常高，超出预期
- 只要能描述清楚需求，ChatGPT 会给你反馈不错的结果
- 个别代码（如 CSS 样式）需要自己调整一下
注册/登录页（ChatGPT）
给出详细需求，直接用 ChatGPT 生成表单代码
使用 vue3 和 ElementPlus 写一个注册页面，包含一个标题“注册新用户”和一个表单。要求：
1. 页面内容水平垂直居中
2. 注册表单包含：用户名（必填）、密码（必填）、确认密码、昵称、注册按钮
3. 注册表单要根据 item 数据类型设置校验规则
4. 使用 vue3 setup script 语法
【注意】这次 ChatGPT 生成代码有 bug ！！！
经过排查，原因在于 model 和 ref 重复了。然后简单修改一下，即可正常运行。
还是要比自己从 0 手写快很多，它把模板、主要逻辑、表单校验，都给你写好了。
尤其是表单校验的规则，和正则表达式，自己写还得参考各种文档。
PS：AI 是你的助手，依然需要你有专业能力去解决问题。
博客列表（Copilot + ChatGPT）
先获取博客列表的数据。使用 Copilot，写出注释（如下图），回车换行，即可自动生成代码。非常便捷！
PS：生成效果可以参考 Copilot 官网 的动图
在 Vue 模板中写注释 <!-- 遍历显示 blogList 的内容，每个 item 使用 div --> 会自动代码
但是为了 UI 体验，我们会使用博客卡片来显示每条博客。
用 ChatGPT 帮助生成组件代码，写出详细的要求：
用 vue3 和 ElementPlus 写一个博客卡片组件（BlogCard.vue），用于在博客列表中显示单个博客信息
该组件接受一个属性 blog ，是一个 js 对象
该组件的 UI 分为上中下三层结构：
- 上层显示：博客作者（blog.author）并在前面加 icon ，分类（blog.category），时间（blog.updatedAt）
- 中层显示：博客标题（blog.title），博客简介（blog.summary），且点击标题跳转到 `/blog/:id`
- 下层显示：点赞数量（blog.likes），收藏数量（blog.favorites）、评论数量（blog.comments）。每个使用合适的 icon 来表示
还要求：
- 当鼠标 hover 卡片，设置浅灰色背景
- 点击卡片跳转到 `/blog/:id`
- CSS 样式要美观，可参考当前博客网站的样式
- 使用 vue3 setup script 语法
它写的代码整体结构没问题，但还有一些细节不满足我的要求（我们不可能说清楚每一个细节）
然后我继续向它追问：
你的代码大部分写的很好。但有需要改动的地方：上层、下层的内容，都靠左显示，且内容之间要有间隔。
它又重新修改代码，这次效果就基本可以了。除了几个 CSS 样式需要自己调整一下。
博客详情页（Copilot）
首先，获取博客详情页的数据。然后在模板中显示博客内容。
使用 Copilot 根据注释生成代码即可，CSS 样式也可以自动生成。
然后再使用 Copilot 生成点赞和收藏的代码逻辑。写出注释即可生成，非常强大！
博客评论（Copilot）
首先获取评论数据。然后使用 Copilot 写出注释，即可生成评论列表的模板和 CSS 。还可以继续让它根据条件渲染“删除”按钮。
然后写出注释，让 Copilot 自动生成删除、发表评论的代码逻辑，还可以让它增加 confirm 验证。
对于开发场景，感觉 Copilot 比 ChatGPT 更加好用一些。
封装网络请求（ChatGPT）
先封装 axios ，增加拦截器。ChatGPT 写的非常好，不用我们再去翻查文档。
我想用 axios 发送 ajax 请求，需要你帮助封装一下 axios 的各个常用功能
直接写出 js 代码示例
再封装博客请求的 API ，直接使用上面封装的 axios 。
其他工具函数（Copilot）
我想写一个日期时间格式化的函数。 可以直接写出注释，Copilot 会自动生成代码，非常方便。
像这种工具函数是最适合用 AI 写的，它没有什么业务逻辑，输入输出比较规范，AI 生成一般不会有错误。
使用 ChatGPT 优化代码
作成したコードを ChatGPT に送信すると、最適化の提案が行われ、最適化されたコードが提供されます。
下面是一个 vue3 组件的代码，使用了 ElementPlus 组件库。
你作为一名资深前端工程师，有什么优化建议吗？
1. 请结合代码，分条目指出建议
2. 请给出你优化后的代码
(贴上组件代码，使用 markdown 代码块格式）
同誌が提案する提案は完全に真似することはできませんが、参考にする価値はあります。予想外のことが起こるでしょう。
このプロジェクトに私が採用した最適化の提案は次のとおりです。
watch代わりに を使用してwatchEffect、リスニング範囲を狭めます- フォーム検証ロジックを簡素化してコードを明確にする
computed二重カウントを避けるためにデータをキャッシュするために使用します- 送信関数を分割して関数のコード サイズを削減します。
要約する
AI の恩恵により、コードの作成は非常に効率化されます。コードの 90% は AI によって生成でき、1 人で効率を最大限に高めることができます。
私はまだ GPT3.5 バージョンを使用しています。GPT4.0 の使用料を払って将来の CopilotX を使用すると、より効率的になります。
AI の普及により、実際に一部の人々、特に CRUD を書くだけで非効率な人々が職を失う可能性があります。もちろん、そのような人はAIツールを積極的に学ぶべきではありません。
AIは単なるツールであり、マスターが必要です。あなたを失業させるのはAIではなく、AIに詳しい同僚です。
もちろん、AIは使えばいいというわけではなく、チャットしたりメモを書いたりするだけのように見えますが、多くのスキルや手順が必要です。
最後に、このプロジェクトの詳細な開発プロセスを知りたい場合は、プライベートで私に連絡することを歓迎します〜