Newsクイズアプリ - 開発ストーリー
近頃急速に進化する技術情報を効率よくキャッチアップするためのクイズアプリ
なぜ作ろうと思ったか？
近頃、技術の移り変わりや発達があまりにも早く、新しい技術に追いつくのが困難に感じていました。 そこで、ニュース記事をクイズ形式で楽しみながら学習できる仕組みがあれば、日々のアップデートを効率よくできるのではと考えました。
「新しい技術のキャッチアップを、いかに楽しく効率よく行うか？」
何の技術で作ったか？
- Next.js： 最近学んだ技術であり、APIの統合に慣れているため選択。SSR・SSGにより、高速で最適なUXを提供可能。
- Vercel： Next.jsとの相性が良く、デプロイもシンプルに行えるため採用。
- OpenAI API： 以前から興味があり、クイズ生成など高度な処理を簡単に実現できるため。
- NewsAPI： 有名なAPIであり、正確なニュース情報を取得可能。 ただし、無料プランではローカル環境のみの使用が前提であるため、現状は一部制限あり。
- TypeScript： 型定義により、コードの可読性と保守性が向上。大規模化しても安心して開発を進められる。
困難は？
API①：APIキーの管理
最初はコード内にAPIキーを書き込んでしまい、公開リポジトリで危険性が発覚。 環境変数や.gitignoreによる秘匿管理の大切さを学びました。
API②：Next.jsの特性
通常、APIでのデータ取得は/apiディレクトリを利用するのがベストプラクティス。 しかし、libフォルダから直接fetchしておりエラー多発。 これを機にNext.jsのフォルダ構成を学び直し、次回からスムーズに進められるようになりました。
NewsAPI
デプロイ後に動作しない不具合が発生。 理由は無料版NewsAPIがローカル環境専用であったため。事前の情報収集の重要性を痛感しました。
学んだこと
- APIの正しい使い方と、秘匿情報の管理方法
- Next.jsのフォルダ構成やベストプラクティス
- 無料プランのAPI制約を事前に把握する重要性
こだわりポイント
OpenAI APIを活用することで、リアルタイムに最新の情報をクイズ形式に生成。 単なるニュース取得にとどまらず、最後には補足情報も加えることで 学習効果をさらに高められるよう工夫しました。
これからやっていくポイント
- APIの検討：NewsAPI無料プランの制約があるため、他のAPIへの移行を検討中。
- ユーザーログイン機能：クイズ履歴の保存・管理により、継続的な学習や振り返りが可能になるよう改善したい。