はじめに
これまで HTML・CSS・JavaScript・TypeScript・React・Next.js といった技術の基礎的な知識を学んできました。
その過程では、学習目的として、Todoリストやメモ管理アプリといった、いわゆる定番のアプリを作ってきました。
今回は一歩踏み込み、アイデアを起点としてアプリ開発に挑戦してみました。
アプリの概要
今回開発したアプリは、英語学習を習慣化するための YouTube 動画キュレーションアプリ、「Habitube English」です。
アプリ名は「習慣（Habit）」と「YouTube」と「English」を組み合わせました。
背景
私自身が行っていた英語学習法の一つに、毎日少しでも英語の YouTube 動画を視聴して、楽しく英語に耳を慣らすという方法がありました。
動画は映像があり文脈をつかみやすく、もともと YouTube をよく見るという習慣もあったため、英語学習と YouTube を組み合わせるのは相性が良いと感じていました。
そして、耳を英語に慣らすには、短時間でも毎日続けることが大切です。
この学習法と習慣化を同時に支援できるアプリがあれば便利だと思ったことが、このアプリ開発のきっかけです。
アプリの全体画面
主な機能
学習の達成状況を一目で確認できるカレンダー機能
- 日々の学習の達成をボタンクリックで簡単に記録
- 月ごとの達成状況をカレンダーで可視化
お気に入りチャンネルの最新動画リスト
- お気に入り登録したチャンネルの最新動画を自動で取得
- タイトル、サムネイル、チャンネル名を表示
- クリックすると YouTube 動画が新規タブで再生
お気に入りのチャンネルの管理
- お気に入りのチャンネルを自由に追加・削除
- チャンネルリストの編集はモーダル UI で操作
使用技術
| カテゴリ | 技術・サービス |
|---|---|
| フロントエンド | 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が豊富にありました。
今回はオリジナルのアイデアであったため、自分でデザインの方向性を決める必要がありました。
もっと最初にUIをある程度決めておけば、よりスムーズに進められたと思います。
アイデアが形になる楽しさ
頭の中にあったイメージが、実際に動くアプリケーションとして形になるのは楽しい体験でした。
AIのサポートによって、想定以上に短時間で実装できたことにも驚きました。
サービスの価値提供という視点
動画表示機能を作る中で、YouTube の強力な推薦アルゴリズムにはかなわないという現実も見えてきました。
今は開発自体に意識が向きがちですが、将来的には技術的な実装だけでなく、ユーザーにどのような価値を提供するかという視点がより重要になると感じています。
感想
追加したい機能はまだ多くありますが、まずは最低限動く形まで完成させました。
今回は開発環境のみでの実装となりましたが、今後は本番環境へのデプロイを目指し、より多くの人に使ってもらえるWebアプリを開発していきたいと考えています。