どうもこんにちは、たくびー(@takubii)です！
今回は、最近プログラミングを学んだ動画について、そのまとめ兼備忘録をお届けします。この記事が、皆さんの学びの一助となれば幸いです。
参考にした動画
今回参考にしたのは、こちらの動画です：
このチャンネルでは、主にフロントエンドのクローンアプリを開発しています。あなたが作りたいアプリが見つかるかもしれませんし、常に最新の技術スタックを使用しているので、トレンドを追うのにも最適です。
学んだ技術スタック
この動画では、以下の技術スタックを学ぶことができます：
- Next.js: サーバーサイドレンダリングと静的サイト生成が可能なReactフレームワーク
- Hono: 高性能なWebフレームワーク
- Drizzle ORM: データベースとのやり取りを簡素化するORM
- shadcn/ui: UIコンポーネントライブラリ
- Tanstack: 高度な状態管理ライブラリ
- Zod: 型安全なスキーマ定義ライブラリ
- Zustand: 軽量な状態管理ライブラリ
- TypeScript: 型安全なJavaScript
- Clerk: 認証管理ライブラリ
- Neon DB: 高性能なデータベース
おすすめのポイント
- ハンズオン形式: 実際に手を動かしながら進めるので、ステップバイステップで理解が深まります。
- 公式ドキュメント参照: 必要に応じて公式ドキュメントを参照するため、フレームワークやライブラリの情報収集方法が身に付きます。
- フルスタック開発: フロントエンドとバックエンドの両方をカバーしているので、Web全般の知識を深めることができます。
- 最新技術の習得: 常に最新の技術を使っているため、今後のプロジェクトにも役立つ知識が得られます。
- コミュニティサポート: 動画作成者が定期的に質問に答えてくれるので、疑問点を解消しやすいです。
作成できるアプリケーション
以下の画像は、今回の動画を参考に作成したアプリケーションのスクリーンショットです：
この家計簿アプリは、収入と支出を管理し、グラフで視覚的に表示する機能を持っています。このクオリティのアプリケーションを1から作れることは大きな自信につながります。ぜひ挑戦してみてください。
作成プロセスの詳細
- プロジェクトセットアップ: 初めに、Next.jsをベースにプロジェクトをセットアップします。
- フロントエンド開発: shadcn/uiやTanstackを使って、直感的で使いやすいインターフェースを構築します。
- バックエンド構築: HonoとDrizzle ORMを使って、データベースとの連携をスムーズに行います。
- 認証機能: Clerkを導入して、安全なユーザー認証機能を実装します。
- デプロイ: Neon DBとVercelを使用して、アプリケーションを本番環境にデプロイします。
まとめ
今回作成したプロジェクトは、以下のGitHubリポジトリで公開しています：
また、実際に動作を確認できるように、Vercelにデプロイも行いました：
この機会に、ぜひ動画を通してプログラミングを学んでみてください。新しい知識とスキルを得られること間違いなしです。
最後まで読んでいただき、ありがとうございました。質問やコメントがあれば、ぜひお気軽にお寄せください。また、今後も役立つ情報を発信していきますので、ぜひチャンネル登録やフォローをよろしくお願いします！