Udemy
    •  
    •  
    •  
    •  
    •  
    •  
    •  
    •  
Turn what you know into an opportunity and reach millions around the world.
Learn More
Your cart is empty.
Keep shopping
【フルスタック開発】NotionクローンをMERNスタックで本格的に構築するWebアプリケーション開発実践講座
Rating: 4.5 out of 5(240 ratings)
2,036 students

【フルスタック開発】NotionクローンをMERNスタックで本格的に構築するWebアプリケーション開発実践講座

人気メモアプリ「Notion」を1からフルスタック開発する講座。使用する技術はReact/Redux/Node.js/Express/MongoDB。ユーザー認証APIやメモ作成API構築など、この講座1本で多くの技術が学べるお得な実践講座
Created byShin Code
Last updated 1/2024
Japanese

What you'll learn

  • Reactを使って超本格的なNotionクローンを構築できます
  • ReactとReduxを使った状態管理手法が学べます
  • 新規登録、ログイン、トークン発行API作成方法が学べます
  • パスワードの暗号化と複合化について学べます
  • React、Redux、MongoDB、Nodejs、Expressを使ったフルスタックプロジェクトフローが理解できます
  • JWTを使ったクライアント認証方法が学べます
  • JWTの基礎と認証の流れが図解で理解できます
  • Expressフレームワーク使ったバックエンド開発フローが学べます
  • MongoDBを使ったユーザーとメモのスキーマ定義が学べます
  • Postmanを使ったテストAPI手法が学べます
  • Express Validatorを使ったバリデーションチェック手法が学べます
  • APIのルーティング設定で運用と保守がしやすいリファクタリングが学べます
  • react-router-domを使ったルーティング設定とOutletの利用法が学べます
  • Axiosインスタンスを使ったAPIフェッチング手法が学べます
  • Axois interceptrosでリクエスト前処理の記述方法が学べます
  • CORSエラー回避法が学べます
  • MaterialUIを使ったクライアントUI実装が学べます
  • ローカルストレージにトークンを保存する方法が学べます
  • JWTチェックで自動ログインが実現できます
  • Redux Toolkitを使って状態管理する手法が学べます
  • useDispatchとuseSelectorのHooks利用法が学べます
  • Notionメモの作成、更新、取得、削除APIを構築できます
  • 絵文字アイコン用ライブラリの使い方が分かります

Course content

9 sections105 lectures7h 6m total length
  • 本講座で学ぶこと2:23
  • 本講座の完成品のデモ4:15

Requirements

  • HTML/CSSの基礎知識(divタグやクラス名のつけ方や当て方)
  • Reactの基礎知識(JSXやコンポーネント管理)
  • Reduxの基礎知識(actionやpayload、redux-toolkitを使用します)

Description

React/Redux等の基礎を学び終え、Notionクローンをフルスタックで開発することでWebアプリケーション開発の大まかな流れを把握して応用力を高める講座です。


■ 本コースの対象者

・React等の基礎技術を学んだだけでは物足りない方

・React/Reduxは一通り学んだからもっとアプリケーションを作ってみたい方

・クライアントとサーバーサイドを自らの手で1から全て構築してみたい方

・本格的なWebアプリを構築することで現場・実務で求められる技術を把握しておきたい方

・ReactやReduxだけでなくNode.jsやDBについての理解も深めたい方

・JWTを使ったユーザー認証やログイン、新規登録のAPI構築を学びたい方

・API構築やAPIルーティング設定、APIフェッチング方法を知っておきたい方

・etc...


フロントエンドもバックエンドも両方扱えるフルスタックエンジニアを目指したい・・・

実際にフルスタックプロジェクト開発をすることでその1歩を踏み出すことができます。


ReactやNode.jsの基礎は分かるけど「実用的なアプリ開発がしたい」「もっとステップアップしたい」という方におすすめの

講座内容となっています。


今回はMERN(MongoDB/Express/React/Node.js)と呼ばれる技術スタックを使用してNotionクローンを開発します。

また、MERNだけでなくJWT認証やAxiosやEmojiPicker等の詳細な技術についても学ぶことができます。


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

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

・Reactの基礎知識は知っている前提でお話を進めております(コンポーネントやJSX記法等)。

・ある程度Javascriptを触ったことがある人だとスムーズに受講できると思います。

Who this course is for:

  • フルスタックプロジェクトを体験してみたい方
  • ReactやReduxを学び終えたWeb開発中級者~上級者向け
  • Notionメモアプリを作ってみたい方
  • 実務に近いWebアプリ開発を体験してみたい方