ランダム名言ジェネレータ

概要

このプロジェクトでは、ボタンをクリックするたびに、ランダムな名言を表示するアプリケーションを構築します。 外部 API を活用し、プログラミングの世界の著名人による言葉を取得し、画面に表示します。

学習目標

React の基本的な Hook である、useState と useEffect を学習します。

特に、useEffect フックを使ったデータフェッチと、その注意点・代替案について確認してください。

推奨技術

このプロジェクトの難易度と趣旨を踏まえて、以下の使用をお勧めします。

• vite を用いた React 環境構築
• Tailwind CSS を用いたスタイリング
• API を利用したデータの取得と表示。
• React の基本的な Hook である、useState と useEffect
• GitHub Pages へのデプロイ

---

🎯 お題

• 「ユーザーストーリー」を全て満たす、アプリを構築してください。
• 必要に応じて、スクリーンショットやデモサイトの URL を、参照してください。
• なお、スタイルは、あなた自身で独自にカスタマイズすることが可能です。

必須機能

1. ランダムな名言の表示:
   • サイトアクセス時にランダムな名言とその著者名を表示する。
2. 名言の更新:
   • ボタンをクリックすると、新しいランダムな名言を取得して表示する。

追加情報

今回使用する API は、「Tech Quotes API」です。

• この API は、プログラミング・テック業界の名言とその著者を提供します。
• 無料でパブリックに公開されており、アクセスキーなどは必要ありません。
• MIT ライセンスの下で提供されているので、商用利用も含め、自由に使用することができます。

ユーザーストーリー

• ユーザーとして、サイトにアクセスしたときに、ランダムな名言が表示されていることを確認できる
• ユーザーが「Generate」ボタンをクリックすると、新しい名言が表示される。
• 名言と共に、その言葉を述べた人物の名前が表示されることを確認できる
• 誰もがアクセスできるように、ウェブサイトをインターネット上に公開している