講義の紹介および開発環境の準備
VS Code · Node.js · React Vite · GitHubの設定とプロジェクトの骨組み構築
(フロントエンド)会社ページ制作 — 1
Tailwind 適用、Navbar · Footer コンポーネント、ルーティング構造
(フロントエンド)会社ページの制作 — 2
メインヒーローバナー、Forum、Contact Usセクション
(フロントエンド) 会社ページ制作 — 3
会社紹介・サービス・リーダーシップなど詳細ページのUI完成
React、Node.js、MongoDBを活用して、会社のウェブサイトを自ら制作する過程を学べる実践講義です。 簡単なReact、Node.jsの知識をベースに、フルスタックプロジェクトを一緒に作りましょう!
受講生 311名
難易度 中級以上
受講期間 無制限


学習した受講者のレビュー
5.0
yoonjangg
良い講義をありがとうございます。
5.0
hdr.ecssh
フルスタックコースを非常にリーズナブルな価格で、完成度の高い講義を制作してくださりありがとうございます。 열심히 듣겠습니다!
5.0
초보자
とても丁寧な説明と質問への回答 リーズナブルな価格に比べて、非常に質の高い講座でした。
React & Tailwind CSSでトレンディなUIを設計、実装
Node.jsとExpressでバックエンドサーバーを構築
MongoDBとExpress Routerによるデータベース設計および管理
フロントエンドとバックエンド間のデータ通信の理解
実際の企業のウェブサイトレベルのプロジェクト完成
ReactでトレンディなUIを設計し、Node.js・MongoDBでバックエンドと問い合わせ・掲示板管理まで — 実際の企業ホームページレベルのProduction Readyフルスタックプロジェクトを完成させます。
강의 소개 영상講義を購入する前に、直接アクセスして体験してみてください。
https://my-company-cdfa1.web.app 사이트 열기 →Voice to Text 講座のオープンを記念して、自分だけの会社ウェブサイト講座 30% 割引をプレゼントいたします。 下のクーポンと一緒に Voice to Text 講座もぜひチェックしてみてください。
リンクをクリックすると自分だけの会社ウェブサイト講座へ移動し、
クーポンが適用された割引価格で受講いただけます。
※ 8月2日 23:59までのみ適用されます。
WhisperX · Gemini · PortOneを活用し、アップロードから文字起こし・決済・デプロイまで、Voice AI SaaSの全体フローを実習します。
👉 강의 보러가기Zustandの状態管理からWindows・Mac・Linuxの配布まで、デスクトップアプリの全体的な流れを実習します。
👉 강의 보러가기PyTorchモデル・FastAPIバックエンド・Next.jsフロントエンドでAIフルスタックサービスを完成させます。
👉 강의 보러가기会社紹介・サービス・お問い合わせ・掲示板・管理者機能まで、MERNスタックで実サービスレベルの会社ウェブサイトを、基礎からデプロイまで完成させます。
その秘訣は React、Node.js、MongoDB、HTML/CSS、JavaScriptで構成された強力な技術スタックにあります。 トレンドを抑えたUIと効率的なデータ管理で、ユーザー体験を最大化する方法を学びます。
3年間のプロジェクト経験で検証された、企業のウェブサイト制作の実務メソッドをそのまま伝授します。
スキーマ設計、状態管理、DB最適化など、実務に必要なフルスタックの核心スキルとインサイトを提供します。
すべてのコードを自ら作成しテストすることで、実際に動作する高品質なウェブサイトを完成させます。
HTML・CSS・JSとReact・Node.jsの基礎さえあれば進められるよう、ステップバイステップで親切に案内します。
UI・API・DB・管理者機能まで、会社のウェブサイトに必要な機能を一つのプロジェクトで完成させます。
コンポーネントを活用して再利用可能なモダンUIを設計し、効率的な状態管理でレスポンシブなウェブサイトを実装します。
RESTful APIを設計し、クライアントとサーバー間のデータを安定的に通信するバックエンド技術を学びます。
スキーマ・モデルでデータ構造を設計し、Express Routerで柔軟なRESTful APIを実装します。
React、Node.js、MongoDBを通じてProduction Readyなウェブサイトを完成させます。
会社紹介ページから掲示板・お問い合わせ・管理者認証まで、一つのサービスとして設計します。
フロントエンドUIから管理者・問い合わせシステム、多言語対応・デプロイまで、段階的に構成します。
VS Code · Node.js · React Vite · GitHubの設定とプロジェクトの骨組み構築
Tailwind 適用、Navbar · Footer コンポーネント、ルーティング構造
メインヒーローバナー、Forum、Contact Usセクション
会社紹介・サービス・リーダーシップなど詳細ページのUI完成
MongoDB連動、Userモデル、認証基盤の設計
ログイン · JWT · 保護された Admin ルート
Contact モデル、お問い合わせ受付 API、管理者一覧
状態管理、詳細照会、フロント・バックエンド連携
掲示板CRUD、画像アップロード、管理者ダッシュボードUX
UIモーション、i18n、プロダクションドメインデプロイ
ついていくのが難しい方のための核心概念の補足説明
React、Node.js、MongoDBで実際の会社ウェブサイトを最初から最後まで作りたい方
Production Readyレベルの会社ホームページプロジェクトをポートフォリオに追加したい方
基礎は理解したけれど、実務型のスキーマ・API・管理者システムまで一度にしっかりと身につけたい方
React · Node.js · MongoDB · Tailwindで
実際のサービスに近いフルスタックプロジェクトを完成させます。
学習対象は
誰でしょう?
React、Node.js、MongoDBでフルスタックWeb開発に挑戦したい方へ
実際の企業のウェブサイトレベルのプロジェクトを完成させてみたい方
Web開発を初めて始めるが、体系的に学びたい初心者
ポートフォリオにプロジェクトを追加したい就活生および社会人
基礎を固めながら、実務に必要な開発技術を身につけたい方
前提知識、
必要でしょうか?
React
Node.js
HTML
CSS
JavaScript
キャリア認証
2,220
受講生
97
受講レビュー
71
回答
4.5
講座評価
12
講座
こんにちは!西江大学のコンピュータ工学科を卒業し、現在大学院への進学を準備している学生です。
高校時代、偶然フルスタックWeb開発とPythonを活用した自動売買を始めたことで、プログラミングにのめり込むようになりました。
その後、様々なプロジェクトやプログラミングの家庭教師活動を経験し、実力とノウハウを共有してきました。これらの経験を通じて、プログラミングに初めて触れる方々にも「こんなに簡単なんだ!」と感じていただけるような講義を作れるよう努めています。
実用的な例題と親しみやすい説明で、皆さんの学習をサポートしたいと思っています。ありがとうございます。
全体
76件 ∙ (15時間 13分)
講座資料(こうぎしりょう):
全体
31件
4.9
31件の受講レビュー
受講レビュー 5
∙
平均評価 5.0
5
ReactとNodeを一度に理解するのに最適な、シンプルながらも必須要素を網羅した例題をご紹介します。 最も基本的な**「掲示板(ToDoリスト)」**の構造で、データの流れ(フロントエンド ↔ バックエンド ↔ データベース)を把握するのが一番の近道です。 ### 1. 全体的な構造 * **Frontend (React):** ユーザーインターフェース、HTTPリクエスト(axios/fetch) * **Backend (Node.js/Express):** APIエンドポイントの作成、ビジネスロジック * **Database:** データの保存(最初は簡単な配列やJSONファイルから始めるのがおすすめ) --- ### 2. 必須で学ぶべき要素(チェックリスト) #### [Node.js / Express] * **Expressサーバーの構築:** `app.listen()` でサーバーを起動する方法 * **REST APIの概念:** GET(取得)、POST(作成)、PUT(修正)、DELETE(削除)の4つのメソッド * **CORSの設定:** React(ポート3000)とNode(ポート5000)が通信できるようにする設定 * **body-parser:** クライアントから送られてくるJSONデータを解析する方法 #### [React] * **useState / useEffect:** データの状態管理と、コンポーネント読み込み時のAPI呼び出し * **Axios:** Node.jsサーバーにリクエストを送るライブラリの使い方 * **Map関数:** サーバーから受け取った配列データを画面にリスト表示する方法 --- ### 3. おすすめの学習ステップ 1. **Node.jsで簡単なAPIを作る:** `/api/hello` にアクセスすると `{"message": "Hello"}` を返すサーバーを作ってみる。 2. **Reactでそのデータを呼ぶ:** `useEffect` を使って、サーバーのメッセージを画面に表示させる。 3. **データの送信:** Reactの入力フォーム(input)に入力した内容を、Node.jsの配列に追加する(POST)。 4. **データの削除:** 特定のアイテムのIDをサーバーに送り、配列から削除する(DELETE)。 ### 4. ヒント 最初はデータベース(MongoDBやMySQL)を繋げようとすると難易度が上がるので、まずは**Node.jsサーバー内の変数(配列)にデータを保存する**形で作ってみてください。サーバーを再起動するとデータは消えますが、ReactとNodeの通信の流れを理解するにはそれが最も効率的です。
素敵なレビューを残していただきありがとうございます 😊 ReactとNodeを併せて見ることで、構造を理解するのに役立ったとおっしゃっていただけて、本当に嬉しいです。おっしゃる通り、複雑な概念よりも、必ず押さえておくべき流れを簡単に理解できるように構成しようと努めましたが、その部分がうまく伝わったようでやりがいを感じています。 これからも実務で直結して理解していただけるよう、より直感的な例題と流れを重視した講義を作り続けていきます。 貴重なフィードバックをありがとうございました!
受講レビュー 3
∙
平均評価 5.0
5
初心者でも真似しやすいです
星5つと貴重なレビュー、本当にありがとうございます!弊社のウェブサイト講座を受講していただきありがとうございます。次の講座でもまたお会いできることを楽しみにしております!
受講レビュー 2
∙
平均評価 5.0
5
詳しく教えてくださってとても良いです :) 良い講義ありがとうございます!
星5つと貴重なレビュー、本当にありがとうございます!弊社のウェブサイト講義を受講していただき感謝いたします。次の講義でもまたお会いできることを楽しみにしております!
受講レビュー 9
∙
平均評価 5.0
5
おかげでMERNスタック全体を味わうことができました!
こんにちは。JMK受講生様。貴重なレビューありがとうございます!MERNスタック全体を一度に体験されたとのこと、本当に嬉しいです。今後も学習のお役に立てることを願っています!ありがとうございます。
受講レビュー 2
∙
平均評価 5.0
5
ある程度知識がある状態で見ると役に立つ講義。 速く進行されますが基礎知識(nodeのミドルウェアやjsonのデータを移す構造など)が少しあればプロセスを理解しやすい講義だと思います。私は分からない部分は一生懸命調べながらやっていますが役に立ちます。ありがとうございます!
こんにちは。キム・ジヌ受講生様。良いフィードバックをいただき、ありがとうございます!すでに基礎知識をお持ちの方々にお役に立てたとのことで嬉しいです。今後もより良い講義でお会いできるよう努めてまいります。応援しています!
知識共有者の他の講座を見てみましょう!
同じ分野の他の講座を見てみましょう!
期間限定セール
¥33,000
25%
¥5,514