概要
このプロジェクトでは、ボタンをクリックするたびに、ランダムな名言を表示するアプリケーションを構築します。 外部 API を活用し、プログラミングの世界の著名人による言葉を取得し、画面に表示します。
学習目標
React の基本的な Hook である、useState と useEffect を学習します。
特に、useEffect フックを使ったデータフェッチと、その注意点・代替案について確認してください。
推奨技術
このプロジェクトの難易度と趣旨を踏まえて、以下の使用をお勧めします。
- vite を用いた React 環境構築
- Tailwind CSS を用いたスタイリング
- API を利用したデータの取得と表示。
- React の基本的な Hook である、useState と useEffect
- GitHub Pages へのデプロイ
🎯 お題
- 「ユーザーストーリー」を全て満たす、アプリを構築してください。
- 必要に応じて、スクリーンショットやデモサイトの URL を、参照してください。
- なお、スタイルは、あなた自身で独自にカスタマイズすることが可能です。
必須機能
- ランダムな名言の表示:
- サイトアクセス時にランダムな名言とその著者名を表示する。
- 名言の更新:
- ボタンをクリックすると、新しいランダムな名言を取得して表示する。
追加情報
今回使用する API は、「Tech Quotes API」です。
- この API は、プログラミング・テック業界の名言とその著者を提供します。
- 無料でパブリックに公開されており、アクセスキーなどは必要ありません。
- MIT ライセンスの下で提供されているので、商用利用も含め、自由に使用することができます。
ユーザーストーリー
- ユーザーとして、サイトにアクセスしたときに、ランダムな名言が表示されていることを確認できる
- ユーザーが「Generate」ボタンをクリックすると、新しい名言が表示される。
- 名言と共に、その言葉を述べた人物の名前が表示されることを確認できる
- 誰もがアクセスできるように、ウェブサイトをインターネット上に公開している