inflearn logo
知識共有
inflearn logo

はじめてのReact:パブリッシャーのための実践ガイド

パブリッシャーのためのReact第一歩! 基礎文法からレスポンシブ対応のショッピングモールサイトの制作・デプロイまで、一度に学習します。 断片的なReactの例題をまとめるのではなく、実際のウェブページ制作に必要な核心的な文法を学び、適用します。

難易度 初級

受講期間 無制限

HTML/CSS
HTML/CSS
Responsive Web
Responsive Web
json-parsing
json-parsing
react.js
react.js
HTML/CSS
HTML/CSS
Responsive Web
Responsive Web
json-parsing
json-parsing
react.js
react.js

受講後に得られること

  • Reactの核心概念(コンポーネント、Props、State、イベント)の確実な理解

  • カードリスト中心のショッピングモールウェブサイト完成

  • JSON APIデータ連携の経験およびContext APIの基礎習得

  • 完成したプロジェクトをVercelにデプロイして、実際のサービスURLを取得する

  • カテゴリー、ブランド、価格帯フィルタリング

  • ページネーション

講義の特徴 ✨

  • パブリッシャーに優しい解説: 従来のHTML・CSSの考え方から自然にReactの概念を連結

  • 実践プロジェクト中心: ショッピングモールのUIを直接作りながらReactを体得

  • ポートフォリオの完成:就職活動にそのまま活用できる成果物を提供

ショッピングモールのデザイン例

カリキュラムの要約 📝

第1部. オリエンテーション

Reactを学ぶ理由と学習準備環境を理解する。
パブリッシャーの視点からReactが必要な理由を明確に把握する。

主な内容
Reactの学習目的、開発ツールの準備、パブリッシャーからフロントエンドへの転換の観点


第2部. Reactの基本기

React開発のための核心的な文法と概念を学習します。
コンポーネントベースの考え方に慣れることを目標とします。

主な内容
Vite + React環境設定、JSX構文、コンポーネント構造、Props、State、イベント処理


第3部。パブリッシャーフレンドリーな文法

パブリッシャーが実務で頻繁に使用するレンダリングパターンを中心に学習します。
HTML/CSSの経験をReactに自然に繋げます。

主な内容
条件付きレンダリング、リストレンダリング(map)、keyの概念、CSS適用方式(CSS Moduleなど)


第4部。ショッピングモールミニプロジェクト

Reactの基本を実際のUI実装に適用する。
ショッピングモールの構造を通じて、実務の流れを経験する。

主な内容
Header/GNB構成、商品カードリスト、買い物かごボタン、カテゴリーフィルタリング、レスポンシブUI
Vercelを利用したデプロイ体験


第5部. 締めくくり

完成したプロジェクトを基準に学習内容を整理する。
その後、フロントエンドの学習の方向性を提示する。

核心内容
プロジェクトレビュー、コード整理のポイント、フロントエンド拡張ロードマップの案内

最終成果物 🛒

  • カードリスト中心のショッピングモールウェブサイト

  • レスポンシブ対応 (PC / Mobile)

  • ショッピングカートボタン、カテゴリーフィルター機能の実装

  • API連携で実際のデータを読み込む

  • デプロイ完了済みのポートフォリオプロジェクト



  • 最終配布版のプレビュー:https://ez-shop-three.vercel.app/

受講前の準備事項 🛠

  • HTML / CSS / JavaScript 基礎

  • Node.js & VS Code のインストール

  • GitHub アカウント(デプロイ用)

主な学習内容および特徴📚

実務スタイルでの講義進行 📘

単にReactの文法だけを学習するのではなく、実際のプロジェクトのようにウェブサイトのメインページをすべて実装します。プロジェクトを実装しながら、デザインを参照してプロジェクト実装に必要なHTML構造を作成するノウハウ、デザインと一致するようにCSSを作成するスタイルノウハウ、機能に応じてスクリプトを作成するノウハウを学習する順序で進めます。


デザインを参照してプロジェクトを実装します。

React プロジェクトの生成および実装 📘

Reactを活用してプロジェクトを生成し、HTML、CSS、React(JavaScript)を活用してプロジェクトを実装します。

VS Codeでの開発

Filtering, sortingの実装📘

React基礎パートで学習した内容をもとに商品情報を照会し、リストレンダリング(map)を通じて商品を出力します。出力された商品一覧から、条件に応じてfiltering、sortingを実装します。

フィルタリング、ソート

ページネーションの実装 📘

表示された商品リストから条件に応じて指定された商品を表示し、ボタンをクリックすると該当ページの商品の表示を切り替えます。

ページネーション

レスポンシブの実装 📘

メディアクエリを活用して、多様なデバイスに合わせて商品の表示数を調節します。

レスポンシブ

よくある質問

Q1. JavaScriptをよく知らなくても受講できますか?

A. 基本的な文法(if、for、関数、配列、オブジェクト)に対する理解は必要です。

ただし、高度な文法やアルゴリズムレベルの知識は要求されず、Reactの学習に必ず必要なJavaScriptの概念を中心に説明する予定です。

以下の講義で基礎を学習してください。

https://inf.run/NC35Q

Q2. パブリッシャーですが、Reactを学んでも役に立ちますか?

はい、十分に役に立ちます。

本講義はHTML/CSS中心のパブリッシャーの視点からReactを理解できるように設計されており、フロントエンド開発者へと領域を広げるための良い出発点になります。

Q3. 関数型コンポーネントとHookが初めてなのですが、受講しても大丈夫でしょうか?

全く問題ありません。

Classコンポーネントは扱わず、関数型コンポーネントとuseState、useEffectなどの必須Hookを段階的に説明する予定です。

Q4. デザインや企画をあらかじめ準備しておく必要がありますか?

デザインを提供するため、準備するソースはありません。

講義で提供される例題と構造を基に進められ、UIの実装とReact構文の理解に集中できるように構成されています。

Q5. プロジェクトをポートフォリオとして活用できますか?

はい、活用可能です。

ショッピングモールミニプロジェクトは、コンポーネントの分離、状態管理、デプロイプロセスまで含まれており、ポートフォリオ用の例として使用するのに適しています。

Q6. 実際のデプロイ過程も扱いますか?

はい、扱います。

Vercelを活用してReactプロジェクトをデプロイする過程までご案内しており、実際のサービスデプロイの流れを体験することができます。

Q7. この講義を受講した後は、何を勉強すればいいですか?

Next.js、TypeScript、状態管理ライブラリ(Zustand、Redux)、API連携の順に学習することをお勧めします。

講義の最後のパートで、フロントエンドの学習ロードマップについても併せてご案内する予定です。

こんな方に
おすすめです

学習対象は
誰でしょう?

  • HTML/CSS/JSまでは学んだが、Reactには馴染みがないパブリッシャー

  • ポートフォリオにReactベースのプロジェクトを追加したい方

  • フロントエンドへのキャリア拡張を準備しているウェブデザイナー・ウェブパブリッシャー

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

  • HTML / CSS / JavaScript 基礎

  • Node.js & VS Code のインストール

  • GitHubアカウント(配信用)

こんにちは
ezwebです。

2,785

受講生

62

受講レビュー

4

回答

4.9

講座評価

13

講座

■ [現在] ESTSOFT KDT フロントエンド講師
■ グリーンコンピュータアート学院 ウェブパブリッシング、フロントエンド講師
■ ウェブパブリッシングYouTubeチャンネル「Rock's Easyweb」運営
■ ザ・ジョウンコンピュータアカデミー ウェブパブリッシング講師
■ ハンビッコンピュータアカデミー ウェブパブリッシング講師
■ フロントエンドパブリッシャー、フロントエンドパブリッシング専門講師
■ UI/UXウェブデザインポートフォリオ講義


[ 書籍 ]
2021.07.19 刊行 / ウェブデザイン&ウェブパブリッシングのためのFigma完璧活用書 / BJ Public

2022.08.25 出版 / コーディングは初めて with ウェブパブリッシング / ヨンジン出版社

2023.10 出刊 /2024 SDエデュ ユ・ソンベ ウェブデザイン技能士 実技 家庭教師ノート / 時代考試企画

2024.11 重版 /2025 SDエデュ ユーソンベ ウェブデザイン技能士 実技 家庭教師ノート / 時代考試企画

2025.11 重版 /2026 SDエデュ ユ先生のウェブデザイン技能士実技家庭教師ノート / 時代考試企画

 

[ 受賞歴 ]
2022.08 グリーンコンピュータアート学院 鐘路支店 - 優秀講師 2021.06 グリーンコンピュータアート学院 鐘路支店 - 優秀講師 2018.06 グリーンコンピュータアカデミー 新村支店 - 優秀講師 2017.05 グリーンコンピュータアカデミー 新村支店 - 優秀講師 2016.05 グリーンコンピュータアカデミー 新村支店 - 優秀講師 2015.10 グリーンコンピュータアカデミー 新村支店 - 優秀講師

 

 

 

もっと見る

カリキュラム

全体

33件 ∙ (9時間 28分)

講座資料(こうぎしりょう):

授業資料
講座掲載日: 
最終更新日: 

受講レビュー

全体

1件

5.0

1件の受講レビュー

  • qjagkrfn5041님의 프로필 이미지
    qjagkrfn5041

    受講レビュー 9

    平均評価 5.0

    5

    30% 受講後に作成

    ezwebの他の講座

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

    似ている講座

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

    ¥9,642