【完全保存版】MERNフルスタック開発で本格的なSNSアプリを1から自分の手で構築してみよう

MERN=MongoDB×Express×React×Node.jsのフルスタック技術を使って、あなたが普段利用しているSNSアプリを1から構築していく講座です。フロントエンドからバックエンドまで駆使できる市場価値の高いエンジニアになろう!

4.71 (372 reviews)
Udemy
platform
日本語
language
Web Development
category
instructor
【完全保存版】MERNフルスタック開発で本格的なSNSアプリを1から自分の手で構築してみよう
2,472
students
9.5 hours
content
Feb 2024
last update
$64.99
regular price

What you will learn

MERNスタックを使って本格的なSNSアプリ開発を1から自作できるようになります

MongoDBとExpressとReactとNodejsを組み合わせてフルスタックプロジェクトの流れを知ることができます

フロントエンドとバックエンドを両方同時に学ぶことができます

Reactの実践的な開発手法を学ぶことができます

自作WebAPIを構築して叩く方法を学びます

SNSのいいね機能を実装できます

フォローとフォロワーをSNSに組み込む方法を学びます

TwitterやインスタグラムのようなSNSを自作できます

MongoDBを使ったデータ管理手法を学べます

NodejsとMongoDBを連携する手法を学べます

Reactからバックエンドの自作APIを叩く手法が学べます

Reduxの概念を学び、それを実装します

multerライブラリを使ってローカルに画像を保存する手法を学びます

postmanを使ってAPIテスト手法を学びます

MongoDBにおけるデータスキーマ作成方法を学びます

useState, useEffect, useRef等の基本的なHooksを利用します

useReducer, useContext等の応用的なHooksを利用します

WebAPIにおけるクエリの考え方を学び、実装します

全てのアプリで必須のログインと新規登録機能を実装します

簡単なフォームバリデーションについて学びます

react-router-dom(v6)を使ってルーティング設定を学びます

Why take this course?

MERNと呼ばれるフルスタック技術で本格的なSNSを作りたい人に向けたコース構成になっています。


■ 本コースの対象者

・フルスタックエンジニアを目指したい方

・フロントとバックエンドの繋げ方が分からない方

・フロントエンドのReactをもっと極めたい方

・バックエンドで自作WebAPIを構築してみたい方

・Node.js×Expressの実践的な使い方をマスターしたい方

・ログイン機能や新規登録機能を実装してみたい方

・いいね、フォロー、フォロワー機能をAPIから実装してみたい方

・Reduxの考え方を学びたい方(ライブラリは使ってません)


全体フローを確認しながら、分かりやすく1つずつ丁寧に解説しました。

このレクチャー1本を受けて頂くだけでフルスタックエンジニアとしての

第一歩を踏み出すことができます。

プログラミング市場で引っ張りダコの高単価エンジニアとして成長したい

方は必見の内容となっています。


■ 本コースを受講する際の注意点

・HTML/CSS/JavaScriptの基本的な文法とルールは教えていません。

・非常にボリュームが多い内容となっています。学習時間の確保ができる方。

Content

はじめに

本講座で学ぶこと
完成品デモの紹介
本講座の学習の流れ

本講座を受講する前の下準備

SNSアプリを構築する全体フローを確認しよう
VSCodeをインストールしよう
Node.jsをインストールしよう

【実践SNS開発】バックエンド構築編(Node.jsとMongoDBを使用)

Node.jsで開発環境を構築しよう
Expressフレームワークでローカルサーバーを立ち上げてみよう
ルーティング設定をしてエンドポイントを手軽に変更してみよう
認証用と投稿用ルーティング設定もしておこう
MongoDBでデータベースを作成しておこう
ユーザースキーマのモデルを作成してみよう
MongoDBとNode.jsを接続してみよう
ユーザー情報をDBに登録するAPIを作成しよう
postmanをインストールする前にpostmanの基礎を知ろう
Postmanをインストールしてみよう
自作APIを叩いてユーザーを登録してみよう
ユーザーログインができるAPIを作ってみよう
ユーザー情報を更新するAPIを自作してみよう
ユーザー情報を削除するAPIを自作してみよう
特定のユーザー情報を取得するAPIを自作してみよう
ユーザーをフォローするAPIを自作してみよう
実際にフォローできるのかAPIを叩いてみよう
ユーザーをフォロー解除するAPIを自作してみよう
投稿用(Post.js)のデータスキーマを作成してみよう
投稿を作成するAPIを自作してみよう
投稿を編集するAPIを自作しよう
投稿を削除するAPIを自作しよう
ある特定の1つの投稿を取得するAPIを自作しよう
投稿に「いいね」を押せるAPIを自作しよう
実際に投稿に「いいね」を押してみよう
フォローしているユーザーの投稿と自分の投稿を取得するAPIを自作しよう
実際にSNSのタイムラインを取得して見てみよう
本セクションのおさらい。次にやるべきこと

【実践SNS開発】フロントエンド構築(ホームページ編)

完成品のデモから紹介
Reactの開発環境構築からはじめよう
SNSのコンポーネント構成の確認をしよう
Homeコンポーネント作成の準備をはじめよう
Topbarコンポーネントの雛形(HTML)を作成しよう
本プロジェクトで使用する画像ファイルを準備しよう
マテリアルUIをインストールして使ってみよう
TopbarをCSSでスタイリングしよう(その1)
TopbarをCSSでスタイリングしよう(その2)
TopbarをCSSでスタイリングしよう(その3)
Sidebar,TimeLine,Rightbarコンポーネントを作成してみよう
Sidebarコンポーネントの雛形をHTMLで作成しよう
TopbarをCSSでスタイリングしよう(その1)
TopbarをCSSでスタイリングしよう(その2)
TimeLineコンポーネントの雛形を作成しよう
Shareコンポーネントの雛形を作成しよう
ShareコンポーネントをCSSでスタイリングしてみよう
PostコンポーネントをHTMLで雛形を作成しよう
PostコンポーネントをCSSでスタイリングしてみよう
RightbarコンポーネントをHTMLで雛形を作成しよう
RightbarコンポーネントをCSSでスタイリングしよう
オンラインの友達画像の左上にCSSで丸を追加してみよう
Rightbarにおける広告部分を作成してみよう
ダミーデータを用意してみよう
ダミーデータで投稿内容を更新しよう
ダミーデータで投稿ユーザーを変更しよう
Rightbarのオンラインの友達もダミーデータで更新しよう
Sidebarの友達もダミーデータで更新しよう
Hooksを使って「いいね」ボタンを疑似的に作ってみよう
本セクションを振り返ってみよう

【実践SNS開発】フロントエンド構築(プロフィール編)

プロフィールコンポーネントを作成してみよう
プロフィールページをHTMLで雛形を作成してみよう
プロフィールページをCSSでスタイリングしよう
Rightbarコンポーネントのページ毎の切り分けをしてみよう
プロフィールのRightbarの雛形をHTMLで作成しよう
プロフィールのRightbarをCSSでスタイリングしよう

【実践SNS開発】フロントエンド構築(新規登録とログイン編)

まずは完成品のデモから
ログインのコンポーネントを作成してみよう(その1)
ログインのコンポーネントを作成してみよう(その2)
ログインのコンポーネントを作成してみよう(その3)
新規登録画面のコンポーネントを作成してみよう
最後にフロントエンドセクションを振り返ってみよう

【実践SNS開発】バックエンドとフロントエンド接続(ルーティングとデータフェッチング編)

本セクションで学ぶこと
プロジェクトを整理しよう
react-router-domでルーティング設定をはじめよう
Linkコンポーネントを使って画面遷移できるようにしてみよう
プロフィール画面の画像パスを正常に通してみよう
コンポーネント全体における画像パスを正常に通してみよう
プロフィールページのCSSを正常に当ててみよう
Proxy設定とAxiosライブラリをインストールしてみよう
実際に自作したAPIをAxiosで叩いてデータを取得してみよう
ダミーユーザーデータをAPIを叩いてデータベースから取得しよう
プロフィールアイコン設定がない場合のアイコン画像を追加しよう
タイムライン表示用に投稿追加と他の人をフォローしておこう
投稿画像をデータベースから出力するように設定しよう
投稿の「いいね数」をデータベースから取得してみよう
投稿した時間と現在の時間の差分を出力してみよう
プロフィールのタイムラインを修正しよう(その1)
プロフィールのタイムラインを修正しよう(その2)
クエリを使ってユーザー情報を取得してみよう(その1)
クエリを使ってユーザー情報を取得してみよう(その2)
ユーザー専用プロフィールページを完成させよう(その1)
ユーザー専用プロフィールページを完成させよう(その2)
ユーザー専用プロフィールページを完成させよう(その3)

【実践SNS開発】バックエンドとフロントエンド接続(ログイン・新規登録機能編)

本セクションで学ぶこと
ログインページにバリデーションを設定してみよう
Emailとパスワードの値をuseRefのHooksを使って取得してみよう
Reduxの概要をザックリ理解してみよう
ユーザー入力に応じたアクションを設定してみよう
Reducerを設定して状態更新の仕組みを構築してみよう
ユーザーの初期状態の定義とuseReducerを使ってみよう
authContext.Providerでグローバルで使えるようにしよう
actionを呼び出すためにdispatchを使ってAPIを叩いてみよう
useContextを使ってユーザー状態を取得してみよう
実際にログインできるかどうか確認してみよう
ログインに成功したらホームにリダイレクトさせよう
Registerコンポーネントの中身を修正しよう
ユーザー新規登録機能を実装してみよう
新規登録が完了したら自動的にログインページにリダイレクトさせよう
本セクションを振り返ってみよう

【実践SNS開発】バックエンドとフロントエンド接続(API叩いてみる編)

Topbarにあるアイコン画像のパスを修正してみよう
常にログインできる状態に変更しておこう
ログイン中のユーザーのタイムラインを表示させてみよう
実際にユーザーアイコンを設定してパスを通して表示させよう
いいね機能のAPIを叩いてDBに保存してみよう
Shareコンポーネントにおけるアイコンの表示も変更しておこう
投稿用APIを叩いてタイムラインに投稿してみよう

【実践SNS開発】バックエンドとフロントエンド接続(画像アップロード編)

画像アップロード機能実装の前の下準備をしよう
multerをインストールしよう
画像アップロード用APIを自作してみよう
画像アップロード先を指定しよう
Postmanを使って疑似的に画像をアップロードしてみよう
静的アセットをバックエンド側に移行しよう
実際に画像アップロードAPIを叩いて画像を投稿してみよう
タイムラインを投稿順に並び変えよう

ボーナスレクチャー

ボーナスレクチャー

Screenshots

【完全保存版】MERNフルスタック開発で本格的なSNSアプリを1から自分の手で構築してみよう - Screenshot_01【完全保存版】MERNフルスタック開発で本格的なSNSアプリを1から自分の手で構築してみよう - Screenshot_02【完全保存版】MERNフルスタック開発で本格的なSNSアプリを1から自分の手で構築してみよう - Screenshot_03【完全保存版】MERNフルスタック開発で本格的なSNSアプリを1から自分の手で構築してみよう - Screenshot_04

Reviews

たけのこきのこ
September 6, 2023
途中axiosのcorsエラーに悩まされ、3、4日ほど苦しみましたがなんとか講座終了できました。 フロントエンド側は仕事でも関わっているため、こうした方がいいかも?という考えで若干アレンジしつつ取り組めたり、 バックエンド側は知識が浅いのでこんな書き方するんだな、という発見があったりで学ぶ箇所がとても多かったです。 一点気になった箇所としては、認証周りはこれだと業務利用は難しいかと思った点です。今後セキュアな認証の実装についても学んでいきたいと思いました。 まだまだ他の動画でお世話になる予感しかしないので、今後ともよろしくお願いします!
292929
August 14, 2023
■良かった点  実例に近い形で、MongoDB/Express/React/Node.jpが学べて非常に  参考になりました。 ■気になった点  ソースの記述の間違いが多い  LocalStrageにパスワードをセットしていた
Yasushi
July 28, 2023
割と早口の説明なので約10時間の動画でも、実際やってみたら30-50時間位はかかることに気づくかと思います。なので多少覚悟が必要です。ボリュームもそれなりにあるため、やっていて途中しんどくなった事がありましたが、フルスタックエンジニアを目指す最初のステップとしてはとても良い教材だと思いました。 内容についても、現在(2023/7/29時点)でも特に詰まることなく実装できることもグッドポイントだと思います。 react18以降だと、ReactDOM.renderは非推奨となります。 なので、 ./src/index.js は以下に直したほうが良いと思います。 ----- import React from "react"; import App from "./App"; import { createRoot } from "react-dom/client"; const root = createRoot(document.getElementById("root")); root.render( <React.StrictMode> <App /> </React.StrictMode> ); ----
川津
June 16, 2023
長時間の講座でしたが、身になることが多かったです。 私自身ReactやNode.jsの基礎を強化していた為、理解がしやすくスムーズに取り組むことができました。Reduxに関しては未収得でしたが、この講座で一緒に学ぶことができました。 今後に活かしていきたいと思います。ありがとうございました。
プログラミング
June 14, 2023
Windowsフォームアプリは沢山作ってきましたが、ウエブアプリは最近になって、PHPで少し作りましたが、モダンなウエブアプリを作るスキルを身に着けたいと、Reactdをかじり始めました。 結局フルスタックで開発しなくてはならないので、バックエンドはLaravelを学べばいいのか、迷ってたところ、Node.js+Reactdでフルスタックというコースがあったので、受講させていただきました。 開発の概念はわかっているので、内容的にはすべて理解できました。 テンポがいいのでスムーズに勉強できました。 先生のおっしゃる通り、ここで学んだ手法が応用できれば、AI応用などは除いて、ほとんどのウエブアプリは開発できると思います。 ソースコードなどを振り返り繰り返し勉強しながら、いろいろ応用できると思います。 VPSへのデプロイなどは他の動画でもあるので、それを参考にします。 ありがとうございました。
sk
April 2, 2023
基礎的な講座(他講師のreact,node.js講座)を受講後、本講座を購入させて頂きました。フロントエンドとバックエンドの連携(APIをたたく)について何度も反復するようなハンズオンとなっており実装方法について理解が深まった気がしました。個人開発において実装方法が知りたかった(ログイン機能、画像投稿、ローカルストレージ)の使用方法に触れており大満足でした!また、講座終盤にはAPIたたくことに慣れてきた事で自分で解いてみて答えを見るみたいな受講の仕方を勝手して楽しみながら完走する事出来ました。最後に本講座では専門用語をかみ砕いて初心者にわかりやすく教えてくれてますので基礎を学んで実際に何かを作る練習をしてみたい人にはうってつけかもと思います。
吉田
November 10, 2022
Expressを勉強しようと思い、書籍を買って勉強していましたが内容が古く、それをもとにググっても一向に進めませんでした、今回、shincodeさんのコースを受講してバックエンド構築、フロントエンド構築は教え方が上手く、すんなり進みました。バックエンド、フロントエンドの連結で難しくなり、時間がかかりましたが新しいことを色々知ることができ本当に楽しく受講できました。本当にありがとうございました。
Nezu
November 3, 2022
インフラ、バックエンド、フロントエンドの実装を経験できてすばらしい講座だと思います。約10時間と長丁場ですが、全てやり切った際には充実感と確実なスキルアップを実感することができました。ありがとうございました。
Knz
October 27, 2022
すごくわかりやすい講座でした。これがしっかり理解できれば、フルスタックのスタートラインに立てるのではないかと思いました。何度か見なおしてモノにしたいと思います。後半の講座がさらにブラッシュアップされていくことも期待しています。この度は良い講座をありがとうございました。
yompi
August 16, 2022
環境由来でエラーになることもなく、とても楽しくスムーズに学べました。 たまたまなのか狙ってなのか、記述ミスでエラーが起きて、エラーの原因を探って修正する流れもとても参考になります。 クォーテーションやカッコ系の言い方がその時によってブレたりするので、そこは音声ではなく画面をしっかり見たほうが確実です。 欲を言えばdeployするところまでやってみたかったです。別講座で続編が出たら絶対にやります。
テル
August 13, 2022
アプリを構築する中で「なぜ?」という問いに対して、1つ1つ答えてくれる素晴らしい講師です。難しい内容ですが、分かりやすく解説をしてくれるので、初心者でも問題なく受講することができると思います。Youtubeも登録していますが、私はShinCodeさんの大ファンです。
none
August 7, 2022
とても説明が分かりやすく助かります。 ただ、何度か講師の説明が間違える点があり、Reactの仕組みを理解してないと難しかったです。Reactに慣れてきてから再度講習を見ると、とても情報が整理されていることが分かりました。 とても勉強になります。
No
July 31, 2022
MERNを取り扱った教材は英語ではありますが日本語での教材はなかったので大変勉強になりました。 講座内でもお話のテンポも良く、コードを書いてからしっかりした説明もあり、とても聞きやすく非常にわかりやすいと思いました。 エラーなど詰まった際に質問させていただいたのですが、すぐに返信もいただけてとても助かりました。 これだけ作り込まれた講座を受けることができ、とても良かったです。
梁取拓馬
July 28, 2022
実務ではReact,TypeScriptしか使ったことがなく、初めてバックエンド開発をしてみました。 フロントエンドとバックエンドの連携であったりAPIの作成がよく分かり勉強になりました。 これからも楽しく学べるudemy動画を期待しています! ありがとうございました。
Yukisuke
July 13, 2022
reactを用いてSNSアプリを構築する講座です。内容は自分の中ではかなり高度な部類に入り、javascript、reactの基礎がまだできていない場合はそちらをまずしっかりと学んだあとにこちらのコースを受講することをお勧めします。サポートの方もQ&Aに時間がかかっても答えてくださるので大丈夫だと思います。短所としては画像投稿以外のボタンの設計がこの講座にはまだ含まれていないので、これについては別の講座を作っても良いので続編ということで教えて頂きたいです。

Charts

Price

【完全保存版】MERNフルスタック開発で本格的なSNSアプリを1から自分の手で構築してみよう - Price chart

Rating

【完全保存版】MERNフルスタック開発で本格的なSNSアプリを1から自分の手で構築してみよう - Ratings chart

Enrollment distribution

【完全保存版】MERNフルスタック開発で本格的なSNSアプリを1から自分の手で構築してみよう - Distribution chart
4607390
udemy ID
3/22/2022
course created date
4/20/2022
course indexed date
Bot
course submited by