Menu
CoddyTech
学習パス

MERN スタック開発者 ロードマップ

MERN スタックの開発者が必要とする順番で並べた無料コース。ページのための HTML、CSS、JavaScript、画面のための React、そしてサーバーのための Node.js と Express、データのための MongoDB、それを守るためのログイン機能。最初のタグから最後の API ルートまで、使う言語は JavaScript ひとつ。すべてのレッスンはブラウザ上で動きます。

711,880+ 人のcoddersがこれらのコースに登録中

718 レッスン808 チャレンジ3,295 クイズの問題

MERN スタックのロードマップ、ステップごとに

5 コース16 セクション718 レッスン808 チャレンジ3,295 クイズの問題

各ステップは既存の Coddy のコースのセクションです。順番に進んでも、足りないところから始めても構いません。進捗はどちらの場合もコースごとに保存されます。

  1. 1
    このステップを始める開始要素、リンク、フォーム、セマンティックなマークアップ、続いてセレクタ、ボックスモデル、flexbox、grid、レスポンシブレイアウト。あとで React が代わりに HTML を書いてくれるので、これは React が話す言葉です。開始専用ページ
  2. 2
    このステップを始める開始変数、関数、配列、オブジェクト、続いて条件分岐とループ、そしてクラス。このあとのすべてのステップで、ブラウザでもサーバーでも使うただ 1 つの言語です。開始専用ページ
  3. 3
    このステップを始める開始DOM、イベント、フォームと入力チェック、そしてタブ、モーダル、レスポンシブなナビゲーションといった実務的なパターン。React が代わりにやってくれることは、一度自分の手でやってみると意味がわかります。開始
  4. 4
    このステップを始める開始コンポーネント、JSX、props、状態、イベント、リスト、制御されたフォーム。最後に小さなソーシャルカードを一歩ずつ作ります。React は、あなたの API が届ける画面です。開始専用ページ
  5. 5
    このステップを始める開始ブラウザの外の JavaScript:コマンドライン引数、モジュール、ファイルの読み書き、コールバック、Promise、async と await、イベントループとイベント。コマンドラインのメモツールを作ります。開始専用ページ
  6. 6
    このステップを始める開始レシピサイトでルート、パラメータ、JSON、ミドルウェア、エラーハンドラ、ルーター、続いてタスク管理の API:POST、PATCH、PUT、DELETE、zod によるバリデーション、絞り込み、並べ替え、ページネーション、CORS。開始
  7. 7
    このステップを始める開始Express の API からドキュメントとコレクションを扱います:挿入、ObjectId、フィルター、更新演算子、ユニークインデックス、集計、$lookup。続いて、誰がデータを見てよいか:ハッシュ化したパスワード、セッション、JWT、所有者と管理者のロール、セキュリティヘッダー、レート制限。開始
  8. 8
    このステップを始める開始本物のターミナルでファイル、パーミッション、パイプ、スクリプト、続いてコミット、ブランチ、マージ、リモート。MERN のプロジェクトはどれも Git リポジトリの中にあり、コマンドラインで動きます。開始専用ページ
使える機能
コーディングを学ぶために使うすべて

実践で学ぶ

実際のコードを書き、データベースをクエリし、ウェブサイトを構築し、AIプロンプトをマスターしましょう。インタラクティブなレッスンで現代の開発者に必要なすべてのスキルを網羅しています。

playground.js
コードエディタ
1const greeting = "Hello, Coddy!"
2function sayHi(name) {
3    return greeting + " " + name
4}
5
bottombar Collapse icon
テスト #1test Case Success icon
テスト #2test Case Success icon
テスト #3test Case Failure icon
入力
"Alex"
出力
"Hello, Coddy! Alex"

連続記録を築こう

継続して進捗を見守りましょう!毎日のコーディング習慣を追跡し、フリーズ日で連続記録を守り、毎日参加することで報酬を獲得しましょう。

12 日連続

明日も戻ってきて連続記録を維持しましょう!

fire Filled icon
left icon

January 2026

right icon

1

2

3

4

5

6

7

8

9

10

11

12

13

14

15

16

17

18

19

20

21

21

22

23

24

25

26

27

28

29

30

product Double Or Nothing icon

ダブル・オア・ナッシング

7日中5日目

fire Freeze icon

連続記録フリーズ

2 left

あなたは一人じゃない

グローバルリーダーボードで競い、友達を招待して報酬を獲得し、お互いの成功を祝いましょう。プログラミングは友達と一緒の方が楽しい!

チャレンジャーリーグ
チャレンジャーリーグ上位7名が昇格
leaderboard First icon1
avatar 1 icon
fire Filled icon
Alex7+ Days
2840
leaderboard Second icon2
avatar 2 icon
fire Filled icon
Jordan7+ Days
2650
leaderboard Third icon3
avatar 3 icon
fire Filled icon
Sam7+ Days
2420
4
avatar 4 icon
Casey
2180
5
avatar placeholder icon
fire Filled icon
Morgan7+ Days
1950
leaderboard Arrow Up icon昇格ゾーンleaderboard Arrow Up icon

あらゆる学び方に対応

読む・聴く・自分を試す・AIに聞く・学んだことを調べる。どんな学び方にも対応したレッスンです。

変数の入門
音声

変数は、後でプログラム内で参照できる値を格納する、名前のついた入れ物です。

Pythonでは、名前、イコール記号、格納したい値の順で書くことで作成します。

値は後から変えられます。再代入すると、名前は新しい値を指すようになります。

1xSarah

修了証を取得

完了したすべてのコースで証明書を獲得しましょう。LinkedInプロフィールや履歴書に追加して、雇用主にプログラミングスキルをアピールしましょう。

Coddy修了証明書
これは以下を証明します山田 太郎が正常に完了しました
python iconPythonの基礎
認証済み
日付2026年1月
LinkedInLinkedInに追加

MERN スタックを Coddy で学ぶ理由

  • どの層もコードのすぐ横で動きます。React のコンポーネントは入力するそばから描画され、Express のサーバーはメソッド、ヘッダー、JSON ボディを選べるリクエストバーに応答し、MongoDB のクエリは Data タブで開けるデータベースに対して実行されます。インストール不要なので、学校のノート PC でも学べます。
  • スタック全体で言語はひとつ。このパスは最初のステップで JavaScript とブラウザを学ぶので、Node.js に進んだとき、サーバーで出会うのは新しい考え方であって新しい言語ではありません。同じ関数、オブジェクト、非同期のコードが、今度はリクエストに応えます。
  • バックエンドの各セクションに制作物があります。コマンドラインのメモツール、レシピサイト、タスク管理の API、MongoDB を使った本の評価 API、アカウント付きのメモアプリ。どれもレッスンごとに少しずつ作り、あなたのサーバーに本物のリクエストを送るチェックで採点されます。
  • あなたのコードを読むヒント。ルートが 404 を返す、クエリが何も返さない、ログインで別のユーザーが入れてしまう。そんなとき AI チューターの Bugsy はあなたが書いた内容を見て、修正を代わりに書くことなく、問題の行を示します。

MERN スタックについてのよくある質問

MERN スタックとは?

4 つのツールで Web アプリケーション全体を JavaScript で作る方法です。MongoDB はデータをドキュメントとして保存し、Express は Node.js のプログラムを Web サーバーと API に変え、React はブラウザで動く画面を作り、Node.js はサーバーで JavaScript を動かします。ブラウザの React のコードが Express の API を呼び出し、その API が MongoDB を読み書きします。

MERN は何の略?

MERN は MongoDB、Express、React、Node.js の頭文字です。この並びは単語の文字の順番で、学ぶ順番ではありません。このパスではまずページ(HTML、CSS、JavaScript、React)から始め、そのあとサーバー(Node.js と Express)とデータベース(MongoDB)に進みます。

MERN スタック開発者の仕事とは?

データベースから画面まで機能を作ります。MongoDB のドキュメントを設計し、それを作成、読み取り、更新、削除する Express のルートを書き、ログインでそのルートを守り、それを呼び出す React のページを作ります。4 つのツールはすべて JavaScript なので、1 人の開発者が 1 つの機能をすべての層にわたって追いかけられます。

MERN スタックは今も学ぶ価値がある?

はい。React と Node.js は Web 開発で最もよく使われるツールの 2 つで、Express と MongoDB はそれらと最もよく組み合わされる相棒です。だから別のデータベースやフレームワークを使うチームでもスキルは活きます。1 つのスタックを端から端まで学ぶと、どんな Web アプリケーションがどう組み合わさっているかもわかります。それこそが面接で問われることです。

MERN スタックと MEAN スタック、どちらを学ぶべき?

今から始める人の多くには MERN です。2 つのスタックは MongoDB、Express、Node.js が共通で、違うのはフロントエンドだけです。MERN は React、MEAN は Angular。React のほうが広く使われていて、始めやすいほうでもあります。あとで Angular に移るときも、学ぶのは新しいフレームワーク 1 つで、新しいスタックではありません。

MERN スタックの習得にかかる期間は?

1 日 1 時間で、このパスを終えるまでおよそ 8 か月から 10 か月です。HTML と CSS が約 6 週間、JavaScript とブラウザが 2 から 3 か月、React が約 1 か月、そして Node.js の 5 つのセクション(Node.js、Express、REST API、MongoDB、ログイン機能)でさらに 3 か月です。すでに JavaScript を知っているなら React のステップから始められ、約 4 か月で終わります。

何もインストールせずに MERN スタックを学べる?

はい、このパスなら学べます。すべてのレッスンはブラウザで動きます。React はエディタの横で描画され、Node.js のプログラムはターミナルで動き、サーバーはリクエストバーに応答し、MongoDB のセクションでは MongoDB ドライバーと同じ API で操作できるインメモリのデータベースを使います。あとで自分のアプリを作るときは、Node.js と MongoDB を自分のパソコンにインストールすれば、コードはそのまま使えます。

MERN スタック開発者パスの修了証はもらえますか?

はい。すべてのステップを修了すると、MERN スタック開発者パス全体の無料修了証を1枚取得できます。途中で修了した各コースが記載され、各コースの修了証にリンクしているので、記載されたスキルを誰でも確認できます。LinkedInのプロフィールに追加できます。Coddyが発行する修了証であり、認定された資格ではありません。

他の学習パス

同じコースを別の職種向けに並べたものです。進捗は引き継がれ、あるパスで修了したコースは、それを含むすべてのパスで修了扱いになります。

すべての学習パス
Coddyのプログラミング言語のイラスト

MERN スタック開発者パスを無料で始める

学習を始める