はじめに

こんにちは。25年新卒入社のmori、高垣、石田です。

私たちは今回、ニフティで毎年開催されている3日間の新人向けの開発合宿に参加してきました！

本記事では、今回作成したwebアプリや得た学びについてご紹介します。

また、合宿全体の概要・様子はこちらの記事で公開しているので、ぜひ併せてご覧ください！

今年はいつもと違う？ハッカソン合宿に行ってきました！@マホロバ・マインズ三浦

メンバー紹介

• mori
  • バックエンド担当
• 高垣
  • インフラ(AIエージェントを含む)担当
• 石田
  • フロントエンド担当

アプリ紹介

概要

今回作成したアプリは、「AIがサポートするタスク管理アプリケーション」です。ユーザがやりたいこと(目標)を入力すると、AIエージェントが実行可能なタスクに分解してくれます。未着手・進行中・完了といったステータス管理と優先度設定で、効率的な目標達成をサポートします。

画面

ホーム画面

ホーム画面では、画面中央のフォームから目標を入力し、「タスクに分解する」をクリックすると、AIエージェントがタスクを分解してくれます。

その後、タスク分解が完了すると、自動でタスク一覧画面に遷移します。

タスク一覧画面

このページでは、入力した目標に対して生成されたタスクが一覧表示されます。また、各タスクをドラッグ操作すると進捗状況を変更できるため、進捗管理もこの画面で完結できます。

各タスクをクリックすると、タスク詳細画面に遷移します。

タスク詳細画面

タスク詳細画面では、タスクの説明や期限等の情報が確認できます。

メニューバー

 

メインとして使用するのは上記３画面で、各画面間はメニューバーから簡単に遷移できます。

メニューバー左のハンバーガーメニューをクリックすると、目標が一覧表示されます。また、各目標はトグルになっており、クリックすると目標に紐づくタスクが表示されます。

このように、どの画面からでもホーム画面やタスク一覧・詳細画面に簡単に移動することができます。

使用技術

フロントエンド	SolidStart
バックエンド	SolidStart
インフラ	AWS
データベース	PostgreSQL
AIエージェント	Bedrock AgentCore Runtime(基盤), Claude Sonnet 4.5(Bedrockから使用)
ツール系	Claude Code, Spec Kit, Serena, mise, pnpm

構成図

今回作成したアプリの構成図は以下のようになっています。フロントエンドとバックエンドにSolidStartを使用し、データベースはPostgreSQLを使用しています。また、フロントエンドからはSolidStartのAPIエンドポイントを呼び出して、バックエンドがlambdaを介してBedrock AgentCore Runtimeで構築したエージェントを呼び出しています。AgentCore RuntimeのエンドポイントURLには、エージェントのARNが含まれており、エージェントのARNには、アカウントIDが含まれています。そのため、自前のバックエンドとlambdaを介すことで、フロンドエンドからアカウントIDが見えないようになっています。

開発の流れ

0日目: 事前準備

• アイデアソン
• 技術選定・担当決め

1日目: 環境構築・実装

• 開発環境構築
• 要件定義・画面設計・テーブル設計など
• フロントエンド・バックエンドの実装

2日目: 実装

• AIエージェントの実装
• フロントエンドとバックエンドをそれぞれ分担して開発
• フロントエンドとバックエンドの連携

3日目: 実装・成果発表

• AIエージェントの調整
• フロントエンドとバックエンドの最終統合
• 成果発表

工夫した点

ユーザビリティの向上

• どの画面からでも、タスク管理へ遷移できるメニューバーを追加しました。
• タスクの進捗が一目で確認できるよう、タスクボードはカンバン形式で実装しました。各タスクはドラッグ操作による進捗変更も可能で、タスク管理も簡単に行えます。
• ユーザが操作しやすいよう、直観的なレイアウトになるよう工夫しました。

モダン技術の導入

以下のツールを採用しました。

• Spec Kit：仕様を読み込んで開発計画を作成し、ガードレール設定・一貫性のあるコード生成を支援します。
  • リリース：2025/9/2
• Bedrock AgentCore：AIエージェントの構築から運用までできる基盤です。今回はAIエージェントをデプロイをするために、AgentCore Runtimeを使用しました。
  • リリース：2025/10/13(米国時間)(合宿直前!!)
• SolidStart：SolidJSをフロントエンドフレームワークとして使用するフルスタックフレームワークです。SolidJSについては以下の記事も併せてご覧ください。
  • リリース：2024/5

SolidJSという選択肢

• mise：事前に設定したツールチェインやタスクをファイルで共有することで、環境構築を簡易化し、プロジェクトでの管理を可能にしました。

miseを用いたツール管理

以下のツールをmiseを用いてインストール、管理したことによって、DBに用いたdocker以外すべてをプロジェクトによる管理下におきました。

• node
• pnpm
• claude code
• serena
• aws cli

また、DBのスキーマ生成やマイグレーション、テストの実行などのタスクもmiseを用いて管理することによって、未担当領域の実装内容であっても簡単に実行可能にしました。

mise.tomlの一部

 

Spec KitとClaude Codeを組み合わせた仕様駆動開発

• 仕様書に記述した要件を漏れなくコード化するため、実装忘れや仕様の解釈ミスが激減しました。
• 設計意図を正確に反映したコードが生成され、開発速度と品質を両立した開発が実現しました。
• 事前にclaude用のガードレールを用意し、担当領域の知識が少なくても安定して開発できるようにしました。
  • 特に使用するUIコンポーネントやスタイリングに関する使用ライブラリを明示、使用方針を事前に用意することでフロントエンドのデザインを丸投げしても破綻せず最後まで走り抜けることができました。

Bedrock AgentCoreを使用したマルチエージェント構成

• 指示役(Orchestrator)と専門性があるサブエージェントに分ける構成にしました。
  • これにより他のサブエージェントに影響を与えずに、サブエージェントの追加・修正が可能となります。
  • 3日間で、Orchestratorエージェントとタスクを細分化するcreate_taskエージェントを作成しました。

バックエンドでテストまで実装した事による最終統合の難易度低減

• バックエンド側で想定する動作や役割を事前に詰め、型定義、モックを作成したことでフロントエンド統合時の競合を比較的減らす事ができました。
• それでも型の定義共有が遅れたのと、想定が甘かったことでメンバ名の食い違いや状態を表すenumの表記ゆれなどの問題が発生しました。

実装できなかった機能

3日間で実装できなかった機能は以下のとおりです。

• それぞれのタスクで具体的な手順や参考となる情報も提示してくれる
• ユーザのライフスタイルからAIが今日どのくらいタスクをこなせば良いかを提案する
• AIが今日やるべきタスクやユーザの動向に合わせたタスクを通知する

当初はAIが自発的にユーザに通知したり、タスクを考えたりする機能を実装する予定をしていました。そのため、自立型のAIエージェントをアプリケーションに組み込むことを目標としていました。しかしながら、時間の都合によりタスク分解の機能しか実装できませんでした。

成長したこと・学んだこと

今回の開発合宿を通して、私たちは多くのことを学び、成長することができました。

特に、AIコーディングエージェントに対する明確な仕様情報の伝達方法について深く理解しました。手戻りを防止するための情報伝達は、人間に対するものと同等かそれ以上に重要であることを実感しました。詳細な実装には細かい指示や方針が必要で、最終的には使用者自身のツールやフレームワークへの知識が問われます。

一方で、メンバー間の認識や事前知識の違いによって指示内容にブレが生じ、実装内容の食い違いにつながる場面もありました。本来であれば、このような問題はレビューによって発見・修正されますが、今回は完全に分業を行っており、レビューを実施していませんでした。

これらの経験を通して、以下のような学びと成長を得ることができました。

• 上流工程のスキル向上：設計段階での詳細な仕様定義の重要性を理解しました。
• 新規ツール・フレームワークへの理解：最新技術を活用するための知識習得をしました。
• 事前準備の重要性：環境構築や型定義の共有など、開発前の準備が開発効率に大きく影響することを学びました。
• レビューの重要性：分業体制においても、相互レビューによる品質担保が不可欠であることを再認識しました。

おわりに

今回の合宿で私たちは、新規技術・手法を取り入れながら、AIエージェントを主軸としたアプリを3日間で開発しました。

仕様駆動開発による開発効率の向上や柔軟性のあるマルチエージェント構成など、速度と品質を両立した開発ができたと感じでいます。

一方で、事前準備やレビューの不足によって環境構築や型の不一致修正といった作業が発生し、工数を多く取られてしまう場面も見られました。

技術的な収穫はもちろん、日々の業務に対するモチベーション向上にも繋がりました。各々が得られた成長と課題を糧にし、今後の業務に取り組んでいきます。