
Next.jsとyolov11で火災検知システム構築
ludgi
Next.js, YOLOv11, FastAPIを活用してリアルタイム火災検知システムを構築する方法を学びます。
Basic
Next.js, yolo, Python
Next.jsフルコースをつまみ食い! GraphQL、Redis、RabbitMQ、Prisma、TailwindCSS、Docker Compose、Cypress、Prometheus、Grafanaなど、最新技術で実践プロジェクトを完成させ、App RouterとPage Routerの両方を経験します。
Next.js App Router の活用
GraphQLとTanStack Queryによるデータ連携の自動化
CLIを活用した効率的なGraphQLワークフローの自動化
PostgreSQLとPrismaによるデータベース管理
TanStack Query(React Query)の活用
React Hook Form とデータ検証
zustandで状態管理
Redis でのデータキャッシング
RabbitMQでメッセージキューシステム構築
Docker Compose で環境構築の自動化
TailwindCSSとShadcnを活用したUI/UX設計
Cypress でテスト自動化
Storybookを活用したUIコンポーネントのドキュメント化
AWS 署名付き URL
Iron Session を利用したセッション管理
Redis を利用したセッション管理
この講義は単なる理論講義ではありません。実際のプロジェクトに直接適用可能な例を使用して、最新のWeb技術のすべてを学ぶことができる実務中心の講義です。
Next.jsとReactに基づいて、GraphQL、Prisma、TanStack Query、Redis、RabbitMQなど、さまざまな実務技術スタックを活用します。
複雑な作業はすべて自動化! CLIツールを使用して、GraphQLリゾルバセットとAPI統合をわずか数秒で設定できます。
Docker Composeを使用した開発環境の設定から、AWSを使用したクラウドデプロイまで、一度に体験してください。
リアルタイムデータ処理、セッション管理(Iron Session)、SSR、SEO最適化など、 Webサービスの重要な要素を包括的にカバーします。
簡単なチュートリアルに疲れた場合は、さまざまな例に基づいてProduction Ready状態の機能を実装し、実務感を育ててください。学習が終わったら、スタートアップですぐに使えるオールラウンド技術スタックを自信を持って扱えるようになります!
💡このレッスンでは、Next.js(15+)とReact(19)ベースのプロジェクトで、スタートアップ環境で必要な技術スタックとワークフローを学ぶことに焦点を当てています。特に実務ですぐに活用できる様々な技術と効率的な開発方法を提供します。
企画の背景
スタートアップ環境では、迅速に生産に適した製品を作成する必要があります。このレッスンでは、これらのニーズを満たすために、 CLIツールによる自動化、 GraphQLとTanStack Queryの連携、 RedisとRabbitMQによるリアルタイムデータ処理などを取り上げます。
複雑な技術も、シンプルで明確な実践を通して段階的に習得できるように設計されています。
使用するツールと技術
Next.js(15+)、React(19)、Prisma、Docker Compose、GraphQL、TanStack Query、Redis、RabbitMQ、Iron Sessionなど、さまざまな実務スタックを活用します。
理論と実践のバランス
この講義は単なる理論講義ではありません。実際のプロダクションで使用できる機能を簡単に実装し、コアキーワードを学習して実務で自信を持って活用できるように設計されています。
最近では、 ChatGPTのような人工知能ツールを活用すれば、既に知っているキーワードだけでも複雑な作業を高度化できます。したがって、この講義は何を知らないのかを把握し、必要なキーワードを習得することに焦点を当てました。
講義を通じて得た知識とプロジェクトは、実務でも十分に競争力のあるレベルで、自分だけのプロダクトを作っても遜色のない結果物を得ることになります。
難易度
中級以上のレベルで、基本的なReactとTypeScriptの知識を持つ学習者を対象としています。
しかし、実務経験がなくても、ステップバイステップの例に従い、理解できるように構成しました。
📌さまざまな例で、実務ですぐに活用できる技術スタックを学びます。
スタートアップ環境で必要とされる効率性と生産性を最大化できる技術とワークフローを共有します。
📌 CLIを活用した自動化と生産性の最大化。
GraphQLリゾルバセットとAPI統合を自動的に生成し、コンベンションに合わせたコード構造を簡単に管理するのに役立ちます。
📌理論20%、実習80%。
プロダクションレベルのプロジェクトを中心にすべてのコードを直接作成し、期待どおりに機能していることを確認します。
📌実際のサービスでもすぐに利用可能な構成。
Next.js(15+) と React(19) に基づいて、Redis、RabbitMQ、Prisma、Docker Compose などのスタートアップや実務でよく使う技術を学習します。
📌中級者のための講義です。
基本的なReactとTypeScriptの理解が必要です。高度化は難しくありません。あなたが「何を知らないのか」を理解するのに役立ちます。
1. 講義紹介
Next.jsと最新の技術スタックを活用した実務プロジェクトを紹介します。講義の目標と学習者が得ることができる重要な価値を説明します。
2. 環境構成
Docker Composeを活用して開発環境を統合的に設定し、チームワークと生産性を高めるプロジェクト構造を学びます。
3. Prismaとデータ管理
Prismaを活用してデータベースを設定し、 npx prisma studioでデータを管理し、実務でよく使用されるデータの更新と可視化技術を学習します。
4. GraphQLクエリ、ミューテーション、リアルタイムデータ
CLIでGraphQLリゾルバを自動生成し、QueryとMutationを作成し、トランザクションとデータ統合を実装します。また、サブスクリプションを活用したリアルタイムデータ処理方法も取り上げます。
5. React Hook Formの例
React Hook Formを活用したフォームデータの管理と検証、Zodとの統合により検証を自動化し、フォーム処理効率を最大化します。
6. Zustandを利用した状態管理
Zustandを利用して軽量で簡単な状態管理方式を習得し、実務でこれを活用してグローバル状態を効率的に管理する方法を学習します。
7. TanStack Queryの例
Reactアプリケーションでサーバーの状態管理を効率的に処理する方法を学びます。 useQuery
、 useMutation
、Pagination、Optimistic Updateなどの高度な機能をカバーしています。
8. CRUD機能の実装
Prisma、GraphQL、TanStack Queryを活用して、Create、Read、Update、Deleteを段階的に実装し、実務での活用方案を学習します。
9. RedisとRabbitMQの練習
Redisを活用したデータキャッシングとRabbitMQを利用したメッセージキューシステムを構築し、基礎をカバーします。
10. セッション管理: Iron Session と Redis を活用した認証
CookieベースのIron Sessionを使用したクライアント側セッションの維持方法と、サーバー中心のRedisを活用したサーバー側セッション管理方法について説明します。
11. Next.js + Prometheus + Grafana: 簡単で迅速な監視
PrometheusとGrafanaを活用して、メトリックを収集して視覚化する方法を実践します。 Dockerコンテナで環境を構築し、PrometheusとGrafanaを連携してデータを監視するプロセスを学びます。さらに、JMeterを使用した簡単なAPI負荷テストを実施します。
12. Presigned URLとCloudFrontの連携
Presigned URL を活用した安全なファイルのアップロードとアプローチをカバーします。 S3バケット設定からユーザーグループの管理、ポリシー、およびCORS設定に進み、GoDaddyドメインをAWS Route 53と連携します。また、SSL証明書発行、CloudFront連携、サブドメイン設定、キャッシュ戦略、キャッシュ無効化処理まで実習します。
13.ボーナス:Storybook&E2Eテスト
Storybookを活用したUIコンポーネントの文書化とテスト方法を学び、Cypressを使用したE2Eテストを実践します。
講義はWindows環境で実習を進行しますが、MacOSやLinuxでも問題なく従うことができます。 Dockerがインストールされている場合は、オペレーティングシステムに関係なくほとんどの練習を実行できます。
講義進行のために以下を準備してください:
Docker : 開発環境の構成には Docker が必要です。インストール方法は公式文書を参照してください。
コードエディタ:
Cursor AI :コーディング支援と迅速なトラブルシューティングのための最高の推奨ツールです。特に生産性を最大化できるため、この講義で最も推奨されるコードエディタです。
Visual Studio Code(VS Code) :Cursor AIが用意されていない場合は、VS Codeも講義の内容に無理なく従うことができます。
LLMサービス(ChatGPT、Claudeなど) :練習中のコードの作成とトラブルシューティングを支援するために、1つ以上のLLMサービスを購読することを強くお勧めします。
基本的なプロジェクトは講義で提供され、GitHubリンクを介して共有します。必要な資料をダウンロードして実習に活用できます。 😊
基本的なJavaScriptとTypeScriptについて
ES6+文法と基本的なタイプスクリプトの使用経験があれば、学習は簡単です。
Reactの基本的な使用経験
コンポーネント構造、Props、基本フックの使用に慣れている方は、練習に簡単に従うことができます。
GraphQLの基礎知識
GraphQLの基本的なQueryとMutation構造を知っていれば、学習効果を最大化できます。
SQLとデータベースの基礎知識
基本的なSQLクエリの作成とデータベースの動作原理を理解することで、PrismaとGraphQLの連携を簡単に理解できます。
Dockerのインストールと簡単な使用経験
Docker Composeを活用した開発環境の設定が含まれますので、Dockerのインストールと基礎の使い方をよくお読みください。
コーディング補助ツール(Large Language Model、LLM)の活用経験(オプション)
ChatGPT、Claude、Cursor AIなどのAIツールを使用したことがある場合は、トラブルシューティングと実践の進行がより迅速で効果的です。
学習対象は
誰でしょう?
Next.jsとReactで実務プロジェクトを完成させたい方
スタートアップ環境に適した技術スタックを学びたい方
繰り返し作業を自動化し、生産性を向上させたい方
クラウドへのデプロイまで経験してみたい方
サーバーとクライアントを網羅するオールラウンダーな開発者になりたい方
実務で直ちに適用できる技術を学びたい方
前提知識、
必要でしょうか?
HTML、CSSの基礎知識
JavaScript の基本文法の理解
Reactの基礎知識
Next.jsの基礎知識
TypeScriptの基本理解
541
受講生
24
受講レビュー
8
回答
4.1
講座評価
8
講座
안녕하세요, 주식회사 럿지의 대표입니다.
저는 스타트업, 금융권, 공공기관 등 다양한 분야에서 프로젝트를 진행하며,
개발뿐만 아니라 서비스를 직접 운영하는 경험을 쌓아왔습니다.
이 과정에서 팀원 및 프리랜서들과 협업하며 문제를 해결하고 프로젝트를 완성하는 능력을 길렀습니다.
특히, 단순히 개발자로서의 역할을 넘어서 자신의 서비스를 운영하고자 하는 꿈을 가진 분들께 더 많은 도움을 드릴 수 있다고 생각합니다.
완성의 즐거움과 성취감을 함께 경험하며 성장해 나가길 기대합니다. 감사합니다.
全体
56件 ∙ (3時間 49分)
7. Prismaの簡単な紹介
01:43
11. Prisma活用事例の総合まとめ
13:53
17. GraphQLの紹介
03:59
34. 作成
04:31
35. 残りのRUD機能
05:01
36. Redis を活用したデータキャッシュ
03:26
37. RabbitMQの紹介
02:06
55. Storybookの基本的な使い方
05:28
期間限定セール、あと16:38:18日で終了
¥1,536
25%
¥2,048
知識共有者の他の講座を見てみましょう!
同じ分野の他の講座を見てみましょう!