【個人開発】プログラミングを動画で学習できるサービスを作成しました【Next.js / Hono/ Typescript】
はじめに
こんにちは！daiと申します。
自分専用のudemyのようなプログラミング動画学習サービスを作成したいと思い、「code.」というサービスを開発しました。（まだサンプル用の講座しかなく、途中の段階ですが、、、）今回、モダンな技術を使って作成したので、開発背景や使用した技術を紹介していきます。
自己紹介
大学卒業後、中途で受託開発会社に入社し、1年ほど主にJavaたまにJavaScriptなどを使って、バックエンドやフロントエンドのシステム開発を行っていました。
お給料面や人間関係で悩んでいて、転職を決意した2024年5月からポートフォリオ作成を始めました。
開発期間はだいたい6ヶ月ほどになります。
1. ポートフォリオの紹介
サービス概要
「code.」は自身の知識や経験のアウトプットの場所として作成しました。ここで作ったコンテンツがエンジニアを目指す方やスキルアップしたい誰かの役に立てるようにサービスを続けていきたいと思っています。
▼ サービスURL
レスポンシブ対応済なので、PCでもスマートフォンでも快適にご利用いただけます。
▼ GitHubのリポジトリ
開発背景 🏙️
私はプログラミング学習において、テキストベースの教材よりも動画での学習の方が直感的でわかりやすいと感じていました。実際のコードの入力から実行結果まで一連の流れを視覚的に確認できるので、テキストの教材よりも安心して受講できます。
YouTubeでは多くの優れたプログラミング教材がありますが、学習の途中で表示される広告やおすすめされる動画が集中を妨げることが気になっていました。一方、Udemyのような学習プラットフォームは非常に使いやすく、広告なしでスムーズに学習を進められる点が魅力的です。
この経験から、「自分専用の動画学習プラットフォームがあれば面白いのではないか」というアイデアが生まれました。誰かの特定の課題を解決するというよりも、純粋に自分が作ってみたいと思うサービスとして構想を練っていきました。
また、これまでの開発経験や学んできた知識をアウトプットする場としても、このプラットフォームを活用できると考えています。プログラミングを学ぶ過程で得た気づきや、実務での経験を、動画コンテンツという形で共有することで、自身の学びを深めつつ誰かの役に立てるのではと考えています。
このような「自分が欲しいものを作る」という純粋な動機から、プログラミング動画学習サービスを開発しました。
工夫した点🎯
ユーザー体験の向上 👤
-
レスポンシブなデザイン
- スマートフォンからPCまで、様々なデバイスに最適化されたUI
- デバイスに応じた直感的な操作性の提供
-
高速なページロード
- 必要なデータのみを効率的に取得
-
シンプルなUI/UX
- 必要な機能に絞ったミニマルなデザイン
- ユーザーの学習に集中できる画面構成
- 直感的なナビゲーション設計
開発効率の最適化 ⚡
-
モダンなフルスタック構成
- Next.jsによるフロントエンド開発
- Honoを用いたバックエンド実装
- TypeScriptによる型安全性の確保
-
効率的なAPI連携
- HonoのRPC機能を活用した型安全なAPI通信
- フロントエンドとバックエンド間での型定義の共有
- 開発時のミスを事前に防止
-
状態管理の簡素化
- React Queryによる効率的なデータフェッチング
- キャッシュ管理の自動化
- データ取得や更新に関する定型的なコードを削減
使用技術一覧
バックエンド： Hono 4.6.7
- コード解析：ESLint
- フォーマッター：Prettier
フロントエンド：TypeScript 5.0.0 / React 18.0.0 / Next.js 14.0.4
- コード解析：ESLint
- フォーマッター：Prettier
CSS フレームワーク：Tailwind CSS
主要パッケージ：React Query
インフラ：Vercel
CI / CD：Vercel標準のCICD
認証: clerk
主要機能一覧
機能
- メールアドレスとパスワードを利用したユーザー登録 / ログイン機能
- Googleアカウントを利用したユーザー登録 / ログイン機能
- Githubアカウントを利用したユーザー登録 / ログイン機能
- パスワード再設定機能
- 退会機能
- 講座の作成/編集/削除機能（管理者のみ）
- 講座の公開/非公開機能（管理者のみ）
- チャプターの作成/編集/削除機能（管理者のみ）
- チャプターの公開/非公開機能（管理者のみ）
- 講座の検索機能
- 講座の購入機能
- 画像の取得/アップロード機能
- 動画の取得/アップロード機能
画面
- トースト表示
- ローディング表示
- 404エラー画面
- 500エラー画面
- レスポンシブデザイン
アーキテクチャ
ER図
2. 選定技術の採用理由
本プロジェクトでは、比較的モダンな技術スタックを中心に選定しました。以下、特に検討を重ねた技術について、その採用理由を説明します。
バックエンド：Hono
検討技術：Nest.js
採用理由：
- Next.jsのAPI Routesとの親和性が高く、Vercelのエッジ環境との相性も良かったため
- Nest.jsは今回のプロジェクトにはオーバースペックだと感じたため
フロントエンド：Next.js
検討技術：Remix
採用理由：
- Next.jsの方が学習教材が豊富で、Vercelとの相性もいいため
- Next.jsの方が採用している企業が多いため
認証：clerk
検討技術：supabase auth
採用理由：
- Next.js, Honoともに相性がいいため
- セキュリティの観点からユーザー情報をDBに保存したくなかったため
さいごに
最後まで読んでいただきありがとうございます！引き続きサービスの改善に取り組んでいきます！
※以下に今回参考にした記事を載せておきます🙇
Discussion