Spring Boot と Claude を使用したタスク管理アプリの作成

このチュートリアルでは、Claude を使用してタスクを管理する Kotlin アプリを作成する方法を学びます。このチュートリアルでは、バックエンドのインフラストラクチャの管理に Spring Boot を使用し、Claude がアプリケーションの計画と開発を行います。

AI の助けを借りずにアプリを作成したい場合は、Kotlin と Spring Boot で Web アプリを作成するチュートリアルに従ってください。

他の AI 搭載ツールと同様に、Claude も間違いを犯す可能性があります。Claude による変更を慎重に確認し、信頼できるコードのみに使用してください。 Claude のセキュリティポリシーの詳細については、Claude Code ドキュメントを参照してください。

環境のセットアップ

このチュートリアルでは JetBrains AI Assistant を通じて Claude を使用しますが、ターミナルで Claude Code を使用してチュートリアルの手順を進めることもできます。

1. 最新バージョンの IntelliJ IDEA をダウンロードしてインストールします。
2. JetBrains AI Assistant をインストールします。
3. 次のいずれかの方法で Claude Agent を有効にします：
   • JetBrains AI サブスクリプションを使用する
   • API キーを使用する
   • Anthropic Console を使用する

プロジェクトの作成

Spring の Web ベースプロジェクトジェネレーターを使用して Spring Boot プロジェクトを作成することもできます。

IntelliJ IDEA で新しい Spring Boot プロジェクトを作成します：

1. IntelliJ IDEA で、File | New | Project を選択します。

2. 左側のパネルで、New Project | Spring Boot を選択します。

3. New Project ウィンドウで以下のフィールドとオプションを指定します：

   • Name: task-manager-demo

   • Language: Kotlin

   • Type: Gradle - Kotlin

     このオプションは、ビルドシステムと DSL を指定します。

   • Package name: org.jetbrains.kotlin.taskmanagerdemo

   • JDK: jbr-21

   • Java: 17

     これらの Java および JDK バージョンがインストールされていない場合は、ドロップダウンリストからダウンロードできます。

   

4. すべてのフィールドを指定したことを確認し、Next をクリックします。

5. Spring Boot フィールドで最新の安定した Spring Boot バージョンを選択します。

6. Web | Spring Web 依存関係を選択します。

   

7. Create をクリックしてプロジェクトを生成し、セットアップします。

   IDE が新しいプロジェクトを生成して開きます。プロジェクトの依存関係のダウンロードとインポートには、しばらく時間がかかる場合があります。

開発計画の作成

プロジェクト内で以下の操作を行います：

1. AI Chat ツールウィンドウを開きます。デフォルトでは、Chat モードが選択されています。Claude Agent を選択します。

   

2. Mode: Default をクリックし、Mode: Plan Mode を選択します。 これで Claude Agent がアクションを実行せずに計画を立てる準備が整いました。

   

   さまざまな動作モードの詳細については、操作モードの選択を参照してください。

3. Claude にタスク管理アプリの作成を依頼するプロンプトを入力します。含めるべきだと思う詳細を共有してください。例：

   I'd like to create a task manager application for managing tasks, such as a grocery list. 
   It should have a basic UI and include categories, due dates, priorities, and status tracking. 
   
   Use VCS while working. Work step by step and create commits at each stage so I can review the changes afterward.

   プロンプトの設計方法に関するガイダンスについては、Claude Code のベストプラクティスを参照してください。

   Claude が既存のプロジェクト構造を調査し、計画を提案します。

4. 続行する前に、計画を注意深く確認してください。修正を加えたい場合は、No, keep planning を選択し、追記コメントを共有してください。

5. 続行する準備ができたら、Claude の変更をどの程度制御したいかに応じて、Yes ... オプションを選択します。

   

   各オプションの詳細については、Claude Code の権限モードを参照してください。

6. Claude が Plan Mode を終了し、作業を開始します。作業が完了するまで待ちます。

コミットの確認

アプリを実行する前に、生成された変更を慎重に確認してください：

1. Git ツールウィンドウを開き、コミットのリストを表示します。
2. コミットを選択し、各変更ファイルをダブルクリックして、IntelliJ IDEA のサイドバイサイドビューアーで差分を確認します。

アプリの実行

変更に納得したら、アプリを実行します：

1. bootRun Gradle タスクを実行するか、ターミナルで次のコマンドを入力します：

   ./gradlew bootRun

2. ブラウザで localhost の URL を開きます。デフォルトは通常次の通りです：

   http://localhost:8080

   Claude が作成した基本的な UI が表示されます。

   

   Claude が UI を設計するため、実際の UI はこのチュートリアルのバージョンとは異なる場合があります。

アプリのテスト

次に、アプリをテストしてみましょう。

UI を手動でテストする

まず UI の機能をテストします。いくつかの簡単なアクションを試してみてください：

1. タスクを作成し、フォームフィールドをテストします。
2. タスクを編集して、変更が保持されることを確認します。
3. タスクのステータスを変更します。
4. タスクを削除します。
5. タスクのカテゴリを変更します。

これらのアクションのいずれかが機能しない場合は、Claude に問題を調査して修正するよう新しいプロンプトを送信してください。

ユニットテストの実行

Claude はいくつかのテストも自動的に作成します。次のコマンドを実行して、すべてのテストに合格することを確認してください：

./gradlew test

または、src/test ディレクトリでテストを開き、ガターにある実行アイコン をクリックします。テストが成功すると が表示されます。

いずれかのテストが機能しない場合は、Claude に問題を調査して修正するよう新しいプロンプトを送信してください。

洗練させる

初期のタスクが完了したので、さらに洗練させることができます。例えば、ユーザーがリスト内で直接タスクを編集できるように UI を改善してみましょう。

次のようなプロンプトを送信できます：

As a next step, allow users to edit tasks inline. For example, let users click on a task title to edit it directly in the list,
and update fields like priority, due date, or status without leaving the current view. 
This change should make the app feel faster and more intuitive to use.

以前と同様に、Claude が既存のプロジェクト構造を調査し、計画を提案します。 計画を承認したら、Claude が完了するのを待ち、変更を確認してから、アプリを再実行します。

おめでとうございます！Claude を使用して、IntelliJ IDEA で直接 Kotlin Spring Boot アプリケーションの計画、構築、テスト、洗練を行いました。

次は？

• について学ぶ
• Junie と Kotlin AI スキルの使用に関するチュートリアルをチェックする