生成AIを活用したReactウェブアプリケーション開発：初心者の挑戦

こんにちは。最近話題の生成AIを使って、私が今まであまり経験のなかったReactでのウェブアプリケーション開発に挑戦しました。この記事では、その過程と学びを共有します。開発に生成AIをまだ取り入れていない方々に、少しでも興味を持っていただければ幸いです。

使用ツール：天秤.AI by GMO

今回の開発で活用したのは「天秤.AI by GMO」です。このプラットフォームの特徴は以下の通りです：

ChatGPT, Claude, Geminiなど、最新のAIモデルを選択可能
無料で利用可能
※注意点：入力されたプロンプトは学習には利用されませんが、サービスの品質維持のためモニタリングされています。業務利用の際は十分な注意が必要です

1. プロンプト入力

以下のようなプロンプトを入力し、AIに指示を出しました：

あなたは経験のあるベテランエンジニアです。
Reactを使ったWebシステムを構築してください。

システム的な要件としては、生成AIと通信してユーザーからの質問に返答するチャットボットです。
APIと連結する部分はモックでいいです。

複数のレスポンスを吟味して、参考になるものを組み合わせてシステム構築を行います。

2. 環境セットアップ

AIの提案に基づき、以下のコマンドでプロジェクトを初期化しました：

npx create-react-app front-end --template typescript
cd front-end
npm install axios styled-components

TypeScriptを使用することで、型安全性を確保し、開発効率を向上させることができます。

3. 開発と実装

AIの提案を参考にしながら、チャットボットの基本的な機能を実装しました。APIレスポンスはモックデータを使用しています。

APIのレスポンスはモックですが、とりあえず、それなりに動くものができました。

4. 開発時間と課題

全体の実働時間は約40分でした。途中、画面表示の問題に直面しましたが、AIの助けを借りて解決することができました。

生成AIモデルの比較
今回の開発で使用した各AIモデルの特徴は以下の通りです：

ChatGPT-4
- 最も参考になる提案を提供
- コードの質と説明の詳細さが優れている
Claude 3.5 Sonnet
- 今回のタスクではあまり有用な提案が得られなかった
- タスクの性質によって性能が変わる可能性あり
Gemini 1.5 Pro
- 他の2モデルと比較すると、やや劣る結果
- 継続的な改善が期待される

まとめと今後の展望

生成AIを活用することで、Reactの初心者でも短時間で基本的なアプリケーションを構築することができました。しかし、実際の開発では以下の点に注意が必要です：

AIの提案を鵜呑みにせず、適切に評価・検証する
セキュリティやパフォーマンスの観点からコードを見直す
実際のAPIとの連携やエラーハンドリングを適切に実装する
今後は、より複雑な機能の実装やテスト、デプロイメントなどにもAIを活用し、開発プロセス全体の効率化を図っていきたいと考えています。

皆さんも、ぜひ生成AIを活用した開発に挑戦してみてください！

ちなみに、このQiitaの記事も生成AI(Claude3.5)が書いてくれました

GPT-4oの場合

最近流行している生成AIを使用して、初めてReactのWebアプリケーションを作成してみました。本記事を通じて、開発に生成AIを取り入れていない方々にも興味を持っていただければ幸いです。

天秤.AI by GMOを活用した開発

天秤.AIではChatGPT、Claude、Geminiなどから最新のモデルを選んでプロンプトを実行することができます。さらに、無料で利用することができます。ただし、入力されたプロンプトは学習には利用されませんが、天秤.AI by GMOのサービスの品質維持のためモニタリングをしています。 とのことなので、業務利用する際には十分ご注意ください。

プロンプト入力例

以下のプロンプトを生成AIに入力しました：

あなたは経験のあるベテランエンジニアです。Reactを使ったWebシステムを構築してください。システム的な要件としては、生成AIと通信してユーザーからの質問に返答するチャットボットです。APIと連結する部分はモックでいいです。

複数の応答を受け取り、その中から参考になるものを組み合わせてシステムを構築しました。

開発手順

最初にReactのプロジェクトを作成します。

npx create-react-app front-end

生成AIから提供されたコードがJavaScriptだったため、TypeScriptを使用するようにプロンプトを修正しました。

npx create-react-app front-end --template typescript
cd front-end
npm install axios styled-components

APIのレスポンスはモックですが、一応動作するチャットボットを作成しました。

ここまでの実働時間は約40分でした。その間、画面表示ができなくなる問題に遭遇し、解決に時間を要しましたが、無事完了しました。

生成AIの比較

ChatGPT-4
- 最も参考になる回答を提供してくれました。
Claude 3.5 Sonnet
- 今回はあまり参考になる回答を得られませんでした。
Gemini 1.5 Pro
- 他のモデルに比べて劣る応答が多かったです。

本記事が、生成AIを活用した開発手法に興味を持つきっかけとなれば嬉しいです。Reactや生成AIの活用に関心がある方は、ぜひ試してみてください。

Gepini 1.5 Proの場合

**タイトル:** 生成AIでReactのチャットボットを作ってみた！～初心者でも40分で動くものができた！～

本文:

みなさん、こんにちは！最近話題の生成AI、もう試してみましたか？今回は、今までReactを触ったことのなかった私が、生成AIの力を借りてWebアプリケーション（チャットボット）を作ってみました！生成AIを使ったことがない方にも、その可能性を感じていただければ幸いです。

開発環境:

天秤.AI by GMO
- ChatGPT, Claude, Geminiなど、最新のAIモデルから選択可能
- 無料で利用できる
- 注意点: 入力したプロンプトは学習には利用されないが、サービス品質維持のためにモニタリングされている。業務利用する際は注意が必要。

開発の流れ:

チャットボットの要件定義:

まずは、天秤.AIに以下のプロンプトを入力し、チャットボットの開発を依頼しました。

あなたは経験のあるベテランエンジニアです。
Reactを使ったWebシステムを構築してください。

システム的な要件としては、生成AIと通信してユーザーからの質問に返答するチャットボットです。
APIと連結する部分はモックでいいです。

生成されたコードの確認と実行:

天秤.AIから複数のコード例と解説が提供されました。今回は、その中から良さそうなものをピックアップして参考にしながら開発を進めました。
```
npx create-react-app front-end
```
TypeScriptでの開発:

提供されたコードはJavaScriptでしたが、私はTypeScriptを使いたかったので、プロンプトに「TypeScriptで記述してください」と追記しました。
```
npx create-react-app front-end --template typescript
cd front-end
npm install axios styled-components
```
チャットボットの実装:

APIとの通信部分はモックで実装しましたが、約40分で最低限動くチャットボットが完成しました！

開発中に画面表示がうまくいかなくなる問題が発生しましたが、生成AIの力を借りながら解決することができました。

生成AIモデル比較:

ChatGPT-4: 最も的確で参考になる意見を提供してくれた。
Claude 3.5 Sonnet: 今回はあまり参考になる意見は得られなかった。
Gemini 1.5 Pro: 他の2つと比べて、やや精度が劣る印象。

感想:

今回初めて生成AIを活用した開発を体験しましたが、想像以上にスムーズに開発を進めることができました。特に、React初心者にとっては、生成AIが強力なサポートツールになることを実感しました。もちろん、生成AIが出力するコードは完璧ではありません。しかし、コードの自動生成だけでなく、エラー解決のヒントなども得られるため、開発効率を大幅に向上できます。生成AIを使った開発、ぜひ一度試してみてはいかがでしょうか？