【ITニュース解説】【個人開発】自分のスキルの課題点を登録するとAIが解決策+サンプル動画を提示してくれるアプリを作りました【React×TypeScript×Gemini】

このニュース記事は、システムエンジニアを目指す開発者が、自身のスキルアップを目的として個人開発に取り組んだ事例を紹介している。彼が開発したのは「自分のスキルの課題点を登録するとAIが解決策とサンプル動画を提示してくれる」というユニークなアプリケーションである。このアプリは、ユーザーが直面している技術的な課題を入力すると、人工知能（AI）がその解決策を提案し、さらに具体的な学習に役立つ動画の例まで示してくれる仕組みを持つ。まるで個人の学習コーチがいるかのような体験を提供することで、スキル習得の効率を高めることを目指しているのだ。

この開発者は、Webアプリケーション開発において広く使われる「React」という技術の学習を深めるために、この個人開発に挑戦した。単に技術書を読んだりチュートリアルを進めるだけでなく、企画から設計、実装、そして実際にアプリケーションをインターネット上に公開するまでの一連の流れを自分一人で経験することで、より実践的な知識とスキルを身につけようと考えたのである。このような一貫した開発経験は、システムエンジニアとしてのキャリアをスタートする上で非常に価値のあるものとなる。

実際に開発されたアプリには、いくつかの主要な機能が備わっている。まず、ユーザーは自身のスキルに関する課題を、タイトル、詳しい説明、関連するカテゴリ、優先度、目標とする完了日時などとともに登録できる。例えば、「Reactでコンポーネント間のデータ連携がうまくいかない」といった具体的な悩みを書き込むことができる。この課題が登録されると、アプリケーションの核となるAIが動き出す。AIは登録された課題を分析し、その解決策をテキスト形式で提示するだけでなく、YouTubeなどの動画プラットフォームから関連性の高いサンプル動画を探し出して提示してくれるのである。これにより、ユーザーは文章での解説だけでなく、視覚的な情報を通してより深く学習を進められる。

さらに、ユーザーはAIが提示した解決策を学習したかどうかを記録できるチェックボックスや、学習した日付を記録する機能を使って、自身の学習進捗を管理できる。登録した課題は一覧で確認でき、検索機能やフィルタリング機能を使って特定の課題を絞り込むことも可能だ。ダッシュボード画面では、登録された課題の解決状況や学習の月別推移がグラフで視覚的に表示され、自身の学習がどれくらい進んでいるか、どの分野の学習が不足しているかなどを一目で把握できる。これらの機能は、ユーザーが継続的にスキルアップに取り組むためのモチベーション維持にも役立つだろう。また、ユーザーが安心してアプリを利用できるように、安全なログイン・ログアウトを実現する認証機能も実装されており、自分だけの学習記録を管理できるようになっている。

このアプリを開発するために、様々な先端技術が組み合わされている。Webページの見た目やユーザーが操作する部分、つまりフロントエンドの開発には「React」と「TypeScript」、そして見た目を整えるための「Tailwind CSS」が使われた。ReactはWebアプリケーションのUI（ユーザーインターフェース）を効率的に構築するためのJavaScriptライブラリであり、TypeScriptはJavaScriptに型安全性を加えることで、大規模な開発でも予期せぬエラーを減らしやすくする。Tailwind CSSは、デザインを素早く適用できるCSSフレームワークだ。

一方、アプリケーションの裏側でデータを処理するバックエンドには「Next.js」のAPI Routesという機能が使われている。Next.jsはReactをベースにしたフレームワークで、フロントエンドとバックエンドの両方を効率的に開発できる点が特徴だ。データベースとしては「PostgreSQL」が採用され、ユーザーの課題情報や学習記録などのデータを永続的に保存している。PostgreSQLへのデータのやり取りには「Prisma」というツールが利用されており、開発者がデータベース操作をより簡単に行えるよう支援する。

そして、このアプリの最も特徴的な部分であるAIによる解決策の提案には、Googleが提供する大規模言語モデル「Gemini API」が活用されている。Geminiは、自然な言葉を理解し、質問に対して適切な回答を生成したり、関連情報を検索したりする能力を持つAIである。開発者はこのGemini APIを呼び出すことで、課題に対する解決策をAIに生成させているのだ。認証機能は「NextAuth.js」というライブラリを使って実装されており、ユーザーが安全にログイン・ログアウトできる仕組みを提供している。開発されたアプリケーションは、Webサービスをインターネット上に公開するためのプラットフォームである「Vercel」と「Railway」を利用してデプロイされている。VercelはフロントエンドとNext.jsのデプロイに、Railwayはデータベースのデプロイにそれぞれ使われた。

この個人開発を通して、開発者は多くの貴重な学びと気づきを得たという。まず、開発を始める前の計画と設計の重要性を痛感した。具体的にどのような機能が必要で、どのように動作するべきかを事前に詳細に洗い出すことで、開発途中の手戻りを減らし、スムーズにプロジェクトを進められることを学んだ。また、ReactやTypeScriptといったフロントエンドの基礎知識を深めるだけでなく、バックエンド技術やデータベースの扱い方、AI APIとの連携方法、さらには認証機能の実装やデプロイといった、システム開発の一連の工程を経験できたことは大きな収穫だった。特に、AIに意図した通りの回答をさせるための「プロンプトエンジニアリング」の試行錯誤は、最新技術を使いこなす上で重要なスキルとなることを示している。

システムエンジニアを目指す初心者にとって、このような個人開発への挑戦は非常に有効な学習方法である。教科書的な知識だけでなく、実際に手を動かし、試行錯誤することで得られる経験は、技術者としての成長を大きく加速させる。この事例は、一つのアイデアを形にする楽しさと、その過程で直面するであろう困難を乗り越えることの重要性を教えてくれる。そして、個人開発を通じて得た達成感は、今後の学習やキャリア形成における大きな自信となるだろう。