OpenCourser brand icon
Sign in
We may earn an affiliate commission when you visit our partners.
Course image
Udemy logo

【Next.js/Node.js/Prisma/Supabase】本格的なSNSアプリをフルスタック構築するマスター講座

Shin Code

フルスタックエンジニアになるためにはフルスタック技術を使って何かアプリを作ってみるのが１番の近道です。本講座では簡単なSNSアプリ（ユーザー認証、ログイン、新規登録、投稿取得、投稿、プロフィール等）を作ってフロントからバックエンドまでの技術を身に着けていただきます。

■ 本コースの対象者

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

・フルスタック技術を使ってSNS開発をしてみたい方

Read more

フルスタックエンジニアになるためにはフルスタック技術を使って何かアプリを作ってみるのが１番の近道です。本講座では簡単なSNSアプリ（ユーザー認証、ログイン、新規登録、投稿取得、投稿、プロフィール等）を作ってフロントからバックエンドまでの技術を身に着けていただきます。

■ 本コースの対象者

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

・フルスタック技術を使ってSNS開発をしてみたい方

・PrismaのORMを使ってDB操作をしてみたい方

・SupabaseのBaasを使ってDB管理をしてみたい方

・デプロイ(無料)してSNSアプリを運用してみたい方

・モダンな技術をキャッチアップしてみたい方

・ただただWebアプリ開発好きで好奇心がある方

・etc...

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

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

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

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

Enroll now

14 deals to help you save

We found 14 deals and offers that may be relevant to this course.
Save money when you learn. All coupon codes, vouchers, and discounts are applied automatically unless otherwise noted.
Use code at checkout. Valid until December 3
Cyber Monday
Develop career-changing skills with these steeply discounted courses.
Up to
85%
off
BFCMSALE24
Use code at checkout. Only 17 hours left!
Black Friday
Develop career-changing skills with these steeply discounted courses.
Up to
85%
off
BFCMSALE24
Use code at checkout. Valid until December 1
For new customers
Save when you purchase top courses. For new customers only.
Special Offer
UDEAFNULP2024
Valid for a limited time only
Future-proof your career
Access O'Reilly books, live events, courses, and more. Save with an annual subscription.
Take
15%
off

What's inside

Learning objectives

  • フルスタック技術を使って簡単な機能を備えたsns開発ができる
  • Nextjsの基礎(動的ルーティングやssg等)が学べる
  • Nodejs(express)を使ったバックエンドapi構築ができる
  • Supabaseを使ったdb管理ができる
  • Prismaを使ってormを実現し、supabaseと連携する方法が学べる
  • フロントエンドとバックエンドを両方構築し、フルスタック開発手法が学べる
  • Prismaを使ってsns開発に必要なモデルを定義できる
  • Jwtの基礎知識が学べる
  • ユーザー認証/ログイン/新規登録api実装が学べる
  • Reactのhooksを使って状態管理手法が学べる
  • Thunderclientを使ってapiテストする方法が学べる
  • Nextjsにtailwindcssを導入する方法が学べる
  • Axiosライブラリを使ってapiを叩く手法が学べる
  • Corsエラー回避方法が学べる
  • Snsで必要な呟き投稿や呟き取得apiを構築できる
  • Expressにおけるミドルウェア設定の意味と実装方法がわかる
  • ログイン状態の監視してナビゲーションバーuiの変更ができる
  • Snsにおけるプロフィールページが実装できる
  • Identiconライブラリでユーザー新規登録時にアイコン自動生成ができる
  • 閲覧中のユーザーが投稿した呟きで取得できるapiが作れる
  • Vercelを使ってnextjsをデプロイする方法が学べる
  • Renderを使ってnodejsをデプロイする方法が学べる
  • 最終的にフロントとバックエンドをデプロイしてweb上で公開・利用できるようにする
  • Show more
  • Show less

Syllabus

本講座で学べる事とデモを閲覧することができます
本講座で学べること
本講座で作るSNSの完成品デモ
本講座で必要な環境を設定することができます
Read more
VSCodeをインストールしよう
Node.jsをインストールしよう
コーディングが早くなるVSCode設定をしてみよう
本レクチャーの全体ソースコード
Node.jsやExpressをバックエンドとして、DBはPrismaやSupabaseを用いてユーザー登録やログインAPIを構築できるようになります
【追加】次の動画におけるNext.jsの雛形を作る際の変更点
フルスタック開発する開発環境を構築してみよう
Expressフレームワークでローカルサーバーを構築してみよう
ユーザー用DBをSupabaseで管理してみよう
Prismaで初期化セットアップを開始しよう
UserモデルとPostモデルを構築してマイグレーション操作をしてみよう
ユーザー新規登録APIを作成してみよう
パスワードをbcryptライブラリを使ってハッシュ化してみよう
Thunder Clientを使ってAPIテストをやってみよう
ユーザーログインAPIを作成してみよう
トークンを発行するためにjsonwebtokenを利用してみよう
ログインAPIをテストしてトークンを発行してみよう
API処理を見やすい形にリファクタリングしておこう
Next.jsにTailwindCSSを組み込む方法が学べます。またSNSのログインフォーム等を作成しAPIフェッチング手法を学びます。
Next.jsにTailwindCSSを導入してみよう
SNS用ナビゲーションバーを作成してみよう
投稿用タイムラインを作成してみよう
新規登録フォームとログインフォームを作成してみよう
フォームに入力された値を取得してみよう
axiosライブラリを使ってAPIを叩いてみよう
CORSエラーを解決してみよう
Next.js側からログイン用APIを叩いてみよう
認証情報をアプリ全体に共有できるようなプロバイダーを作成してみよう
valueとchildrenの型を定義しておこう
AuthProviderをアプリ全体に共有させてみよう
PrismaとSupabaseを用いてSNSで必須の呟き投稿と呟き取得APIを構築できるようになります。
呟き投稿用APIを構築してみよう
Next.jsで呟き投稿用APIを叩いてみよう
投稿した呟きを配列に格納する作業をはじめよう
実際に呟いて投稿が即時反映されるか確認してみよう
最新投稿を10件取得するAPIを作ってみよう
タイムライン読み込み時に最新投稿取得のAPIを叩いてみよう
呟いた人のユーザー名を取得できるようにAPIを修正してみよう
ローカルストレージにトークンがある場合に認証許可ヘッダーを付与してみよう
認証ヘッダにトークンがあるユーザーだけ投稿できるミドルウェアを作成してみよう
ミドルウェアが実際に機能するか投稿して確かめてみよう
他のユーザーでログインして投稿してみよう
【追加】ログインユーザーを切り替えてもトークンが変わらない問題について
ログインしているユーザーを取得して、表示するUIの内容を変更できるようになります。
ログインユーザー取得用APIを構築してみよう
Next.js側でリロードする度にログインユーザー取得APIを叩いてみよう
ログインユーザーがいた場合にナビゲーションバーの表示を変更させよう
ログアウトを実装して実際にログアウト/ログインをしてみよう
ログインしてもユーザーが切り替わらないバグを修正しよう
SNSで必須のプロフィール専用ページ（マイページ）を構築できるようになります。
プロフィール用のモデルをPrismaで構築してみよう
ユーザー作成と同時にプロフィール作成もやってみよう
identiconライブラリを使ってデフォルトでユーザーアイコンを実装してみよう
実際にユーザーアイコンを生成してみよう
アイコン画像が表示されないバグを修正してみよう
Next.jsでプロフィール専用ページを作成してみよう
プロフィール取得用APIを構築してみよう
APIを叩いてプロフィール情報を表示してみよう
アイコンをクリックしたらそのユーザーのプロフィールページに遷移させてみよう
閲覧しているユーザーのプロフィールの投稿内容だけを取得するAPIを構築してみよう
閲覧ユーザーが投稿している投稿内容をプロフィール画面で出力してみよう
今までのセクションのまとめ
Vercelとrenderサービスを使ってフロントとバックエンドをデプロイして運用する手法を学べます
デプロイするためにGithubのリポジトリを作成しよう
フロントエンドのNext.jsをVercelへデプロイしてみよう
バックエンドのNode.jsをrenderへデプロイしてみよう
Next.js側でAPIを叩くbaseURLを変更してみよう
今後どのようにプログラムを学べば良いのか、その方法が分かります
最後まで受講いただいた方へ
ボーナスレクチャー

Good to know

Know what's good
, what to watch for
, and possible dealbreakers
適応して初めて学べる基礎となる知識が不足していると、理解するのが難しいかもしれない
React、Next.jsなどの基本技術を学んだだけでは物足りないと考える人向け
フルスタック技術を使ってSNS開発をしてみたい人向け
プリズマのORMを使ったデータベース操作に関心がある人向け
すぱべーすのBaasを使ってデータベース管理をしてみたい人向け
デプロイしてSNSアプリを運用してみたい人向け

Save this course

Save 【Next.js/Node.js/Prisma/Supabase】本格的なSNSアプリをフルスタック構築するマスター講座 to your list so you can find it easily later:
Save

Activities

Be better prepared before your course. Deepen your understanding during and after it. Supplement your coursework and achieve mastery of the topics covered in 【Next.js/Node.js/Prisma/Supabase】本格的なSNSアプリをフルスタック構築するマスター講座 with these activities:
開発者コミュニティに参加する
他の開発者とつながり、情報を交換することで、新しい視点やヒントを得られます。
Show steps
  • オンラインフォーラムに参加する
  • ミートアップやカンファレンスに出席する
  • ソーシャルメディアで開発者とつながる
メンターを見つける
経験豊富なメンターから指導を受けると、より早く進歩し、より多くの知識を得ることができます。
Show steps
  • メンター候補を探す
  • 連絡を取る
  • 定期的に会う
TailwindCSSの基本
本講座ではフロントエンド用のCSSフレームワークとしてTailwindCSSを採用しております。TailwindCSSは非常に使いやすく洗練されたCSSフレームワークです。基礎を身に着けることで、後々のCSS作業を効率化してみましょう。
Browse courses on TailwindCSS
Show steps
  • 公式ドキュメントやチュートリアルを読んで、TailwindCSSに慣れよう
  • TailwindCSSが実際にどのように動作するかを実験してみよう
  • サンプルプロジェクトでTailwindCSSを使ってみよう
Eight other activities
Expand to see all activities and additional details
Show all 11 activities
デプロイメントに関するチュートリアルを完了する
専門家のガイダンスに従ってデプロイメントを実行し、その手順をより深く理解しましょう。
Show steps
  • Vercelの公式ドキュメントを確認する
  • renderの公式ドキュメントを確認する
  • UdemyやCourseraなどのオンラインコースを利用する
SNS開発に関するワークショップに参加する
実践的なワークショップに参加することで、新しいスキルを身に付け、専門家から直接指導を受けられます。
Show steps
  • ワークショップを探す
  • 参加登録する
  • ワークショップに参加する
  • 学んだことを適用する
APIでCRUD操作を練習する
CRUD操作を繰り返し行うことで、API操作をより深く理解できます。
Show steps
  • ユーザー新規登録APIを作成する
  • ログインAPIを作成する
  • 投稿APIを作成する
  • 最新投稿を取得するAPIを作成する
  • プロフィールページにユーザー情報を表示するAPIを作成する
ハッカソンに参加する
ハッカソンで競うことで、プレッシャーの中でスキルをテストし、イノベーションを促進できます。
Show steps
  • ハッカソンを探す
  • チームに参加するまたはチームを結成する
  • アイデアをブレインストーミングする
  • プロジェクトを開発する
  • プロジェクトを提示する
追加機能を備えたSNSアプリを作成する
より複雑なSNSアプリケーションを作成することで、スキルを応用し、新たな課題に挑戦できます。
Show steps
  • 新しい機能を定義する
  • アーキテクチャを設計する
  • 必要な技術を調査する
  • 実装する
  • テストする
簡単なフルスタックアプリを構築してみよう
本講座で学んだことを実践し、簡単なフルスタックアプリを作成してみましょう。これにより、フルスタック開発の流れを身に着け、理解を深めることができます。
Show steps
  • アプリのアイデアを考えよう
  • アプリのアーキテクチャを設計しよう
  • データベースを作成しよう
  • バックエンドを作成しよう
  • フロントエンドを作成しよう
  • アプリをデプロイしよう
SNSアプリのチュートリアルを作成する
チュートリアルを作成することで、理解を深め、他の人にも知識を共有できます。
Show steps
  • チュートリアルのアウトラインを作成する
  • 具体的な手順を書き出す
  • スクリーンショットを撮る
  • 記事または動画を作成する
  • 共有する
SNSアプリを実際にデプロイしてみよう
実際のデプロイを通じて、知識を定着させ、スキルを応用しましょう。
Browse courses on NextJS
Show steps
  • Vercelとrenderサービスをセットアップする
  • フロントエンドをVercelにデプロイする
  • バックエンドをrenderにデプロイする
  • 両者をデプロイして公開する

Career center

Learners who complete 【Next.js/Node.js/Prisma/Supabase】本格的なSNSアプリをフルスタック構築するマスター講座 will develop knowledge and skills that may be useful to these careers:

Reading list

We haven't picked any books for this reading list yet.

Share

Help others find this course page by sharing it with your friends and followers:
Facebook
LinkedIn
Reddit
X
Link
Email

Similar courses

Here are nine courses similar to 【Next.js/Node.js/Prisma/Supabase】本格的なSNSアプリをフルスタック構築するマスター講座.
電子記事販売WebアプリケーションをNext.jsをフル活用して実践力を身に着けるWeb開発マスター講座
Most relevant
【猫背・巻き肩改善】デスクに座ったままでもできる！エクササイズ講座
Most relevant
知識ゼロからいきなり絵が上達する！絵画基礎マスタークラス
Most relevant
【Stripe決済実践】Next.jsとSupabaseで動画レッスン販売アプリを作りながらStripeを学ぶ実践講...
Most relevant
AIパーフェクトマスター講座 -Google Colaboratoryで隅々まで学ぶ実用的な人工知能/機械学習-
Most relevant
【フォーム開発実践】認証やお問い合わせフォームをNext.js/RHF/zod等のモダン技術を使って開発する実践講座
Most relevant
OpenAI API 完全マスターガイド: ChatGPTによるチャットボット開発や画像生成、音声認識を基礎から学ぶ
Most relevant
初めてのねりきり（基礎編）
Most relevant
TOEIC...
Most relevant
Course image
Effort
4.5 total hours
Via
Udemy
Instructor
Shin Code
Language
日本語
Good to know
適応して初めて学べる基礎となる知識が不足していると、理解するのが難しいかもしれない
React、Next.jsなどの基本技術を学んだだけでは物足りないと考える人向け
フルスタック技術を使ってSNS開発をしてみたい人向け
プリズマのORMを使ったデータベース操作に関心がある人向け
すぱべーすのBaasを使ってデータベース管理をしてみたい人向け
デプロイしてSNSアプリを運用してみたい人向け
Share and help others discover this course.
Facebook LinkedIn X Reddit Link Email
Don't miss out
Enroll today to gain access to this course
Enroll in this course
Our mission

OpenCourser helps millions of learners each year. People visit us to learn workspace skills, ace their exams, and nurture their curiosity.

Our extensive catalog contains over 50,000 courses and twice as many books. Browse by search, by topic, or even by career interests. We'll match you to the right resources quickly.

Find this site helpful? Tell a friend about us.

Affiliate disclosure

We're supported by our community of learners. When you purchase or subscribe to courses and programs or purchase books, we may earn a commission from our partners.

Your purchases help us maintain our catalog and keep our servers humming without ads.

Thank you for supporting OpenCourser.

© 2016 - 2024 OpenCourser