LINEヤフー株式会社では、技術に関するイベントや勉強会の主催・協賛などを行っています。最新情報は各リンク先でご確認ください。タイミングによっては、申し込み開始前や既に満席となっていることがあります。...

QA テストケースの AI 生成をスキル化し、精度検証から実運用まで行った話 目次 はじめに 結論 ...

はじめまして。 エンタープライズ会計ソリューション本部 第2ユニット 製品開発部の段下 幸太郎です。 現在は2年目社員として、会計ソリューションアプリの基盤開発に従事しています。 はじめに 技術ニュースを毎日チェックしたいけれど、複数のサイトを行き来するのが地味に面倒——そんな課題を解決するために、Claude Codeを使って個人用のニュースアプリ「IndiviNEWS」を作りました。 Hacker News、はてなブックマーク人気エントリー、Zenn・PublickeyのRSSフィードをまとめて取得し、シンプルなリストとして表示するWebページです。iPhoneの「Web Widget」アプリのWebsiteウィジェットに埋め込んで、ホーム画面から閲覧できるようにしています。 コードはすべてClaude Codeに書かせ、 運用コストは実質$0 という構成で実現しました。本記事では、その構成と、AI駆動開発を通じて得られた学びをまとめます。 本記事は、隔週で開催している社内勉強会『25卒技術会』での発表内容をもとに執筆されています。同じ勉強会のメンバーである渡邉 真太郎さんも、 こちらの記事 で発表内容をまとめています。ぜひご覧ください！ Part 1. 作ったもの Part 2. アーキテクチャを理解する 2-1. サーバーレス構成にした理由 2-2. キャッシュによるコスト最適化 2-3. 毎朝の自動ダイジェスト Part 3. 使用した技術スタック Part 4. 学びを整理する 4-1. 知らない技術へのキャッチアップの機会になる 4-2. エンジニア初学者にとって良い成功体験になる 4-3. 個人開発の心理的・金銭的ハードルが下がる まとめ Part 1. 作ったもの IndiviNEWSは、 個人用の技術ニュースアグリゲーター です。 Hacker News / はてなブックマーク人気エントリー / Zenn・PublickeyのRSSを1つのリストに集約 省略表示のシンプルなUI（ウィジェットサイズに最適化） 毎朝6:00(JST)に、その日の見出しをまとめたダイジェストを自動でMarkdownファイルとして記録 複数のニュースサイトを毎朝巡回する手間をなくし、ホーム画面を見るだけで技術ニュースをキャッチアップできる状態を目指しました。 Part 2. アーキテクチャを理解する このアプリの特徴は、 常時起動するサーバーを一切持たない 構成にした点です。 2-1. サーバーレス構成にした理由 リクエストが来るたびに、Vercelのサーバーレス関数（ api/index.js ）がHacker News・はてなブックマーク・RSSの3つのソースにその場でアクセスし、結果をHTMLに整形して返します。リクエストが終われば関数も終了するため、常駐プロセスがありません。 個人用の小さなアプリのために自宅サーバーやVPSを立てて管理するのは、規模に見合わないコストです。サーバーレス構成にすることで、PCの電源を切っていてもアプリは動き続け、かつインフラ管理そのものが不要になります。 2-2. キャッシュによるコスト最適化 Cache-Control: s-maxage=1800 の設定により、Vercelのエッジサーバーがレスポンスを30分間キャッシュします。30分以内の再アクセスはキャッシュから即座に返され、外部への取得は発生しません。30分を過ぎた後の最初のアクセスで、初めて最新情報が再取得される仕組みです。 Widgetsmith自体の更新頻度もこれより長いため、実際の関数実行回数はごくわずかで、無料枠に余裕を持って収まります。ここが今回の構成でいちばん工夫した部分で、「常に最新である必要はなく、ある程度の鮮度が保たれていれば十分」という要件を、キャッシュの持続時間という形に落とし込みました。 2-3. 毎朝の自動ダイジェスト ウィジェット表示とは別に、GitHub Actionsが毎朝6:00(JST)に起動し、その日の全ソースの見出しをまとめた digests/YYYY-MM-DD.md を自動でリポジトリにコミットします。LLMは使わない単純な処理のため、こちらも追加コストはかかりません。 Part 3. 使用した技術スタック 項目 使用技術 実行環境 Node.js ホスティング Vercel（無料 Hobby プラン） バックエンド Vercel Serverless Functions（ api/index.js ） データソース Hacker News API、はてなブックマークRSS、Zenn・PublickeyのRSS キャッシュ Vercel Edge Cache（ Cache-Control: s-maxage ） 自動化 GitHub Actions（毎朝のダイジェスト生成） フロントエンド表示先 iOS「Web Widget」アプリ コード生成 Claude Code デプロイフローもシンプルで、GitHubリポジトリとVercelを連携させることで、 main ブランチにpushするだけで自動的に再デプロイされます。コードを変更しない限り再デプロイは不要で、コンテンツの更新はキャッシュ切れ後の次回アクセス時に自動反映されます。 運用コストについても触れておくと、Vercelの無料Hobbyプランは個人・非商用利用が前提です。今回のような「個人のウィジェット用にニュースを表示するだけ」の用途であれば無料枠内で十分ですが、今後アクセス数が大きく増えたり用途が変わる場合は、Proプラン（有料）への切り替えを検討する必要があります。 Part 4. 学びを整理する 今回、コードのほぼすべてをClaude Codeに書かせる「AI駆動開発」でこのアプリを作りました。実際にやってみて感じたことを3つに整理します。 4-1. 知らない技術へのキャッチアップの機会になる Vercelのサーバーレス関数やエッジキャッシュの仕組みなど、自分がゼロから調べるとなると時間がかかる技術要素も、AIに実装させながら「なぜこの設定が必要なのか」を都度質問することで、実践を通じて理解を深めることができました。手を動かしながら学べるので、ドキュメントを読むだけよりも定着しやすい実感があります。 4-2. エンジニア初学者にとって良い成功体験になる 「個人で使えるアプリを、実際に動く形まで完成させる」という体験は、初学者にとって大きなモチベーションになります。AIがコードの土台を作ってくれることで、「何もわからず詰まって諦める」というハードルが下がり、完成まで到達しやすくなります。完成した後にコードを読み返すことで、設計の意図や技術選定の理由を後から学び直すこともできました。 4-3. 個人開発の心理的・金銭的ハードルが下がる サーバー管理不要・コスト$0という構成をAIと一緒に設計できたことで、「試しに作ってみる」ことへのハードルが大きく下がりました。今後も、ちょっとしたアイデアを気軽に形にする手段として活用していきたいと考えています。 まとめ 今回作ったIndiviNEWSは、あくまで個人用の小さなツールですが、「AIと一緒に技術選定から実装、デプロイまで一通り経験する」という点で得るものが多いプロジェクトでした。 完全にAIにコードを書かせるAI駆動開発は、単なる時短の手段ではなく、 知らない技術へのキャッチアップの機会 であり、 エンジニア初学者にとっての成功体験 を作る手段でもあると感じています。同じように技術ニュースのキャッチアップに悩んでいる方や、AI駆動開発を試してみたい方の参考になれば幸いです。 私たちは一緒に働いてくれる仲間を募集しています！ 電通総研 キャリア採用サイト 電通総研 新卒採用サイト 執筆： @danshita.kotaro レビュー： @miyazawa.hibiki （ Shodo で執筆されました ）