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

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

4.72 (72 reviews)
Udemy
platform
日本語
language
Web Development
category
instructor
617
students
9.5 hours
content
Jul 2022
last update
$84.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)を使ってルーティング設定を学びます

Description

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


■ 本コースの対象者

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

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

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

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

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

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

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

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


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

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

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

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

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


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

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

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

Screenshots

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

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を叩いて画像を投稿してみよう
タイムラインを投稿順に並び変えよう

ボーナスレクチャー

ボーナスレクチャー

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