inflearn logo
inflearn logo

フルスタックリアクトライブコーディング - シンプルなショッピングモールを作る

開発から配布まで! 一つのサービスを完成するための険しい旅をろ過なくお見せします。 初めて使ってみる技術を盛り込んで左衝ウドルウダン湯湯ながらもなんとか迷っていくことができますよ!

難易度 初級

受講期間 無制限

React
React
GraphQL
GraphQL
Firebase
Firebase
React
React
GraphQL
GraphQL
Firebase
Firebase

学習した受講者のレビュー

学習した受講者のレビュー

4.8

5.0

Lyn

31% 受講後に作成

リアクト川の高級版のようなのでいいですね。

5.0

Yoon Geon-ung

63% 受講後に作成

今やっと1日目までしか受講していませんが、とても面白くて学んだことが多くておしゃべりしたいと思います。既存のクローンコーディングや講座はとても面白くなくて退屈で眠りに落ちるまでしていましたが、勉強する感じのチョン・ジェナムの講義はとても面白いですね!カンチュガンチュして次に機会になれば初級から中級に進められていないジュニアのためのこれと似たスタディ型講座一つ作っていただきたいと思います。

5.0

0S

100% 受講後に作成

いよいよ頑張りました! まず、講師の声がとても良いです。 声自体が魅力があり、講義になるように惹かれます。 そして…思った以上の講義です。 最初に目指したよりも多くを学びます!

受講後に得られること

  • リアクトウェブサービス開発

  • GraphQL

  • React-Query

  • Firebase

鮮やかに臨場感が感じられる講義を聞いて
ランダムコーディングをはじめ、ショッピングモールサービス制作まで! 🩳

一つのサービス
完成するまでの旅 🚢

本講義は受講生と共にライブで行われた講義で、すぐに必要な内容だけを素早く見つけて適用します。
開発過程で行われる様々な問題状況を悩み、解決していく過程をろ過なくお見せします。

このレッスンで、無作為のコーディングを始めても何とか完成できることをお見せしたいと思います。
これにより、何かを作るのに苦労している就学者やジュニアの方々に勇気をあげたいと思います。
完全なコードは羽毛に公開されていますので参考にしてください!

「リアクト学習はしたが、いざ単独でプロジェクトを進行しようとするので、やっぱりです。
他人はどのように開発勉強をしているのか気になります」
-フロントエンド就職準備生-

「バックエンド側の知識が全くなく、開発を考えるだけでも幕を閉じ、
プロジェクトの進行に限界を感じます。」

-ジュニアフロントエンド開発者-

「コーディングして詰まったときにどのように処理すべきかわからない。
さらに、GraphQLとBFFを練習してみたいです
。」
-フロントエンド開発者-


ライブコーディングで
毎日一つずつ学びます🎥

1日目

  • クライアント環境設定(vite)、ルーター処理
  • 商品リストおよび詳細ページの作成
  • React Query キャッシュポリシー
  • GNBの作成

2日目

  • Mock Service Workerの導入
  • 商品リストとカートmock APIを書く
  • カートのページを書く

3日目

  • カートAPIの適用
  • invalidateQueries vs.楽観的な更新
  • ショッピングカートの削除と選択機能の実装

4日目

  • カートの状態管理(recoil)
  • お支払いページ

5日目

  • モノレポ導入(yarn workspace)
  • サーバー環境設定
  • スキーマとリゾルバの定義

6日目

  • json DBの作成
  • サーバーの変更クライアントに反映

7日目

  • 無限スクロール - サーバー操作
  • useInfiniteQuery
  • intersectionObserver

8日目

  • Admin APIの作成
  • アドミンページ - リスト、商品追加、編集、削除機能の実装

9日目

  • Firebaseの適用

10日目

  • Firebase 適用の仕上げとデプロイ

🔔10日間直接ぶつかり、学ぶコーディングでショッピングモールサービスを作りましょう。


講義を聞いた後
受講生の様子😎

自分でプロジェクトを進めるのに十分な知識を身につけることができます。
プロジェクト進行過程で出会う様々な問題状況を解決する力が生じます。

実務経歴9年目の様々なノウハウを惜しみなく分かち合います。
無作為プロジェクトを始めて問題状況に遭遇するたびに
検索、デバッグ、いろいろな推測を総動員して何とか解決していく方法をお知らせします。

Q&A 💬

Q. 講義受講が可能な水準が気になります。

本講義ではリアクトやタイプスクリプトについての基本知識は別途取り上げないので、ある程度学習がされている状態でなければ円滑な受講が可能だと思います。しかし、他の知識まで要求されるほどではありません。

Q. 理論も講義内容の中に含まれていますか?

中間中間プロジェクトの進行に必要なほどの知識をお知らせしたり、映像撮影時に参加していたメンバーの質問にリアルタイムで回答を差し上げる内容が含まれています。それ以上の詳細な理論の説明はありませんので参考にしてください!

Q. この講義の内容はポートフォリオに適していますか?

スタイリングを最小限に抑えて開発だけに集中したいので、本講義の内容だけではポートフォリオにするほどのクオリティを得るのは難しいです。ただし、本講義を通じて新たなプロジェクトを進行するのに十分なノウハウを得ることができると思います。

Q. 特別に準備しなければならない実践環境はありますか?

講義ではMacOSに基づいて作業を進めましたが、OSの場合、Windows環境で発生する問題についてもある程度対応策の紹介をしておきました。そしてIDEはVSCodeを使っていましたが、他の開発ツールを使っても全く問題ありません。


知識共有者の
他の講義が気になったら? 💁‍♂️

コアJavaScript (クリック)

Javascript ES6+を正しく学ぶ - 初心者 (クリック)

Javascript ES6+を正しく学ぶ - 中級(クリック)

Javascript ES6+を正しく学ぶ - ボーナス(クリック)

こんな方に
おすすめです

学習対象は
誰でしょう?

  • 私はリアクト学習をしましたが、いざ単独でプロジェクトを進めようとしたら、幕末のフロントエンドの取材

  • バックエンド側の知識が全くなく、プロジェクト進行に限界を感じるジュニアフロントエンド開発者

  • GraphQL / BFFを練習したいフロントエンド開発者と就学者

前提知識、
必要でしょうか?

  • ReactJS

  • Typescript

こんにちは
jaenamです。

33,084

受講生

693

受講レビュー

395

回答

4.8

講座評価

11

講座

こんにちは、シニアフロントエンドエンジニアのチョン・ジェナムです。
互いに助け合い、共に発展する健全な共有文化を目指して、さまざまな活動を行っています。

著書: コア・JavaScript

YouTubeチャンネル: FEジェナム

記事およびインタビュー動画:

もっと見る

カリキュラム

全体

48件 ∙ (8時間 1分)

講座掲載日: 
最終更新日: 

受講レビュー

全体

17件

4.8

17件の受講レビュー

  • ucopy님의 프로필 이미지
    ucopy

    受講レビュー 5

    平均評価 5.0

    5

    94% 受講後に作成

    実用的な講義ですね。

    • 0s님의 프로필 이미지
      0s

      受講レビュー 8

      平均評価 5.0

      5

      100% 受講後に作成

      いよいよ頑張りました! まず、講師の声がとても良いです。 声自体が魅力があり、講義になるように惹かれます。 そして…思った以上の講義です。 最初に目指したよりも多くを学びます!

      • khh23028104님의 프로필 이미지
        khh23028104

        受講レビュー 9

        平均評価 5.0

        5

        27% 受講後に作成

        良い講義もとてもよく聞きました。特にライブで鮮やかに説明してくれるのに印象深かったです。

        • yoongeonung님의 프로필 이미지
          yoongeonung

          受講レビュー 12

          平均評価 5.0

          5

          63% 受講後に作成

          今やっと1日目までしか受講していませんが、とても面白くて学んだことが多くておしゃべりしたいと思います。既存のクローンコーディングや講座はとても面白くなくて退屈で眠りに落ちるまでしていましたが、勉強する感じのチョン・ジェナムの講義はとても面白いですね!カンチュガンチュして次に機会になれば初級から中級に進められていないジュニアのためのこれと似たスタディ型講座一つ作っていただきたいと思います。

          • whe19150746님의 프로필 이미지
            whe19150746

            受講レビュー 8

            平均評価 4.8

            5

            31% 受講後に作成

            リアクト川の高級版のようなのでいいですね。

            jaenamの他の講座

            知識共有者の他の講座を見てみましょう!

            似ている講座

            同じ分野の他の講座を見てみましょう!

            ¥2,830