AIがいれば全員フルスタック！ 少人数チームでのAI活用

Transcript

1. AIがいれば全員フルスタック！ 少⼈数チームでのAI活⽤ tabamarine
2. 2 24卒 エンジニア 売上管理のSaaS開発に従事 フロント、サーバーどちらも担当 ⾃⼰紹介 Hiroki Taba
3. 現状 🤔6⼈いたエンジニアが、3⼈まで減ってしまった... 🤔⽇々のコミュニケーションの負担が⼤きい 🤔オンボーディング資料の修正等、忙しくて⼿が回らない 3 AIを使った簡単に導⼊できる取り組みで 負担を減らしたい！
4. チームの状況 リードエンジニア１⼈ + ジュニア の３⼈チーム ❌ SRE、フロントはリードがいない... ❌ 開発関連ツール、監視ツールにお⾦をかけられない 4 フロント   サーバー   インフラ ◯ ◯ ◯ ◯ △ △ ◎ ◯ △ ChatCPTの有料プラン、 New Relic などは使えない...
5. 普段の業務 5 アラート監視 ログ調査 新機能開発 既存実装調査 レビュー 他メンバーの 疑問解消
6. エンジニア３⼈で⽇々のアラート監視は⼤変😢 6 なんとかしてインフラの知⾒が少ないメンバーも アラート調査に参加したい （SRE専任がいないので）調査のたびに時間がかかり、 通常開発が⽌まってしまう アラート 監視 ログ調査
7. NotebookLM 7 NotebookLMとは... ノートのように⾃分で選んだ情報を追加していき、 載っている情報に基づいて回答してくれるツール アラート 監視 ログ調査
8. NotebookLMにエラーのパターンを溜めておく 8 ① Googleスプレッドシートに、過去に出たエラーログとどの原因を記載 アラート 監視 ログ調査 所要時間10分
9. NotebookLMにエラーのパターンを溜めておく 9 ② スプレッドシートをソースに設定 アラート 監視 ログ調査 NotebookLMにエラーのパターンを溜めておく 所要時間10分
10. NotebookLMにエラーのパターンを溜めておく 10 Slackのアラートチャンネルを遡らずに、⼤まかな原因特定ができる！ アラート 監視 ログ調査 Cursorに「READMEに従って環境構築を⾏なってください」と丸投げすれば環境構築完了！ 以下のエラーが出ていました。 何が原因だと思いますか？ NotebookLMにエラーのパターンを溜めておく 所要時間10分
11. 11 10分かけて導⼊したら... 🎉アラート調査の初動が早くなった！ 🎉原因、影響有無を調査する数分が削減 🎉インフラの知⾒が少ないメンバーも、 調査に参加しやすい！ アラート 監視 ログ調査    今後のTODO DB取得データも連帯すれば、 詳細な内容まで 質問１回で 特定できそう ・アラート発⽣店舗の特定 ・その後ユーザーが完了できたか
12. 12 オンボーディングの改善 オンボーディング資料の修正は、⼯数がかかって なかなかできない... オンボーディングのたびに、何⼗回もやりとりしている 他メンバー の疑問解消
13. 13 READMEをAIファーストな書き⽅に変更  元のREADMEは、⼈間が意図を汲み取って実⾏する前提の内容 Cursorに環境構築を頼んでも、勝⼿に判断して進められてしまう... 他メンバー の疑問解消 所要時間30分
14. 14 他メンバー の疑問解消 READMEをAIファーストな書き⽅に変更 Cursorに「READMEに従って環境構築を⾏なってください」と丸投げすれば環境構築完了！ 以下のメッセージを そのままCursorに 伝えてください： README.mdに従って... READMEをAIファーストな書き⽅に変更 所要時間30分
15. 15 READMEをAIファーストな書き⽅に変更 具体的には... ①AIが理解しやすい構造化された⽂書  （番号を振る、セクションに分ける など） ②そのまま実⾏可能なコマンドのみ記載 ③曖昧さを排除した明確な指⽰ 他メンバー の疑問解消 1. リポジトリのクローン cd 〜/Develop … 2. サブモジュールの更新 git submodule update … 3. 依存関係のインストー ル yarn install … ... # キャッシュをクリア yarn cache clean # node_modulesを削除して再イン ストール rm -rf node_modules yarn install ... READMEをAIファーストな書き⽅に変更 所要時間30分
16. 16 30分かけて導⼊したら... 🎉アラート調査の初動が早くなった！ 🎉原因、影響有無を調査する数分が削減 🎉インフラの知⾒が少ないメンバーも、 調査に参加しやすい！    今後のTODO DB取得データも連帯すれば、 詳細な内容まで 質問１回で 特定できそう ・アラート発⽣店舗の特定 ・その後ユーザーが完了できたか 他メンバー の疑問解消
17. レビュー負荷の軽減 17 レビュー エンジニア３⼈とも開発が忙しく、レビューが遅れてしまう プルリクでは毎回同じようなやりとりが起こっている
18. Cursor rulesの活⽤ レビュー Cursor rulesとは... コードの品質や⼀貫性を保つのに役⽴つ設定ファイル 命名規則やコーディングスタイルを定義しておける 例えば... ・文字列はシングルクォートで囲 ・デフォルトエクスポートではな named exportを使用 ・booleanは is has can のいずれ かで始める
19. Cursor rulesの活⽤ 19 レビュー ① 既存のリポジトリのコードを読ませてルールを作成  その内容を .cursorrulesに保存 ② 普段の開発でよくもらうレビューコメントを追加する  （例えば「太字は font-weitht:700 ではなく bold で指定」 所要時間30分
20. Cursor rulesの活⽤ 20 レビュー 「.cursorrulesの内容を踏まえて、◯◯コンポーネントをレビューしてください」 Cursor rulesの活⽤ 所要時間30分
21. Cursor rulesの活⽤ 21 レビュー ライブラリでは⼿が届かない設定をcursor rulesで設定するとよさそう Cursor rulesの活⽤ 所要時間30分
22. Cursor rulesの活⽤ 22 レビュー      このpropsのルールで実際に修正されたコード Cursor rulesの活⽤ 所要時間30分
23. 23 30分かけて導⼊したら... 🎉レビューの往復回数が格段に減った！ 🎉フロントの開発経験が少ないメンバーも レビューがしやすくなった！ 🎉コードの品質が安定するようになった！    今後のTODO lintなど使うと設定が複雑になる 内容を設定していくと良さそう   例えば... ◯◯から◯◯のimportのみ、相 対パスを許可 レビュー
24. ⼈がいない、時間がない、予算がない少⼈数チームでも １時間以内の準備で １時間以上の⼯数が削減できました！！🎉 24
25. ありがとう ございました 25