はじめに

これまで HTML・CSS・JavaScript・TypeScript・React・Next.js といった技術の基礎的な知識を学んできました。

その過程では、学習目的として、Todoリストやメモ管理アプリといった、いわゆる定番のアプリを作ってきました。

今回は一歩踏み込み、アイデアを起点としてアプリ開発に挑戦してみました。

アプリの概要

今回開発したアプリは、英語学習を習慣化するための YouTube 動画キュレーションアプリ、「Habitube English」です。
アプリ名は「習慣（Habit）」と「YouTube」と「English」を組み合わせました。

私自身が行っていた英語学習法の一つに、毎日少しでも英語の YouTube 動画を視聴して、楽しく英語に耳を慣らすという方法がありました。

動画は映像があり文脈をつかみやすく、もともと YouTube をよく見るという習慣もあったため、英語学習と YouTube を組み合わせるのは相性が良いと感じていました。

そして、耳を英語に慣らすには、短時間でも毎日続けることが大切です。

この学習法と習慣化を同時に支援できるアプリがあれば便利だと思ったことが、このアプリ開発のきっかけです。

カテゴリ	技術・サービス
フロントエンド	Next.js v15.4.5 / React v19.1.0 / TypeScript v5 / Tailwind CSS v4
バックエンド	Next.js API Routes v15.4.5 / TypeScript v5
データベース	SQLite v3.46.0
ORM	Prisma v6.13.0
開発支援	GitHub Copilot
外部サービス・API	YouTube Data API v3

これまで作ったアプリは定番の題材が多く、参考になるUIが豊富にありました。

今回はオリジナルのアイデアであったため、自分でデザインの方向性を決める必要がありました。

もっと最初にUIをある程度決めておけば、よりスムーズに進められたと思います。

頭の中にあったイメージが、実際に動くアプリケーションとして形になるのは楽しい体験でした。

AIのサポートによって、想定以上に短時間で実装できたことにも驚きました。

動画表示機能を作る中で、YouTube の強力な推薦アルゴリズムにはかなわないという現実も見えてきました。

今は開発自体に意識が向きがちですが、将来的には技術的な実装だけでなく、ユーザーにどのような価値を提供するかという視点がより重要になると感じています。

追加したい機能はまだ多くありますが、まずは最低限動く形まで完成させました。

今回は開発環境のみでの実装となりましたが、今後は本番環境へのデプロイを目指し、より多くの人に使ってもらえるWebアプリを開発していきたいと考えています。