inflearn logo
inflearn logo

作りながら学ぶReact: コンポーネント設計とリファクタリング

実務で最も多く使われているReactフレームワーク、簡単で速く楽しく学んでみましょう!ToDoアプリを作りながらReactの動作原理、コンポーネント設計、リファクタリング方法を学びます。

難易度 初級

受講期間 無制限

React
React
JavaScript
JavaScript
Refactoring
Refactoring
React
React
JavaScript
JavaScript
Refactoring
Refactoring
날개 달린 동전

講座 を紹介して、成長と収益を得ましょう!

날개 달린 동전

マーケティングパートナーズ

講座 を紹介して、成長と収益を得ましょう!

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

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

4.9

5.0

장 서운

61% 受講後に作成

キャプテン板橋ファイティング

5.0

곰코드

100% 受講後に作成

キャプテン板橋の講義は初めて聞いた内容が好きで2日で頑張りましたㅎㅎ 講義ごとに短くて太いですが、初心者に気をつけて説明してくれてありがとう。 私は基本的なリアクトの知識を持っていますが、講義で言った内容と板教様の蜂蜜のヒントを学びたいと聞きましたが、結果的に非常に満足しています。 早く中高級講義が出てくることを切に願っていますㅎㅎㅎ これだけ私は先生の次の講義を聞きに行きます。

5.0

송수지

100% 受講後に作成

リアクトの基本原理を簡単明瞭に説明していただき、勉強に多くのお役に立ちましたありがとうございます!

受講後に得られること

  • リアクト

  • JavaScript

  • React

  • Vite

  • NPM

  • Node.js

  • Netlify

実務で最も多く使用されているReactフレームワーク、
簡単で速く楽しく学んでみましょう!

概念から一歩ずつ、
簡単に分かりやすく

初心者の目線で簡単な題材を一つ選定し、一緒に作ってみます。一緒に作りながら概念を一つ一つ易しく短く説明します。講義経歴8年の輝かしい専門講師の講義スキルを信じてみてください。

シニア開発者のノウハウを
すぐ隣で

実習比重80%以上の飽きる暇がない講義。シニアフロントエンド開発者のコード作成のコツと知っておくと良いFE知識をどんどん共有します。

こんな方におすすめです!👨‍💻

就職活動中ですが、実務でReactをどのように使用するのか気になります。実務能力はどのように身につけられるでしょうか? and curious about how React is used in actual work. How can I develop practical skills?

Reactの基礎文法は分かったけど..じゃあ何を作ればいいですか?実務者はどうやって学ぶのか気になります。

会社ですぐにプロジェクトをしなければならないのにリアクトをやったことがありません。本は一冊見ましたが…ピンと来ません。

受講後には

  • Reactの動作原理を一緒に目で確認します。なぜなら、わざとエラーを出して一緒に直すからです。

  • コンポーネントをなぜ複数に分けて作らなければならないのか、コンポーネントが分かれた時の利点は何なのかを直接目で見て体得します。

  • 実務経験が豊富な開発者はどのようにコーディングするのか?効果的かつ効率的にコーディングする方法に関するすべてのコツを盗み見ます。

  • 自分が作った成果物はデプロイして他の人に自慢できます。


こんな内容を学びます

セクション (1) 開発環境構成のコツ

授業に必要な開発環境を構成します。コード編集ツールと実務でよく使われるReact関連のVSCodeプラグイン、React開発者ツール、GitHub、Prettierなどをご案内します。

セクション (2) プロジェクト作成 - フォルダ、ファイル構造、設定ファイルの案内

Reactプロジェクトを作成する方法を学び、最新のフロントエンドビルドツールであるViteでプロジェクトを生成します。

NPM、ESLint、プロジェクトライブラリ管理方法、カスタムコマンドについて学び、プロジェクト構成全般の理解度を高めます。

セクション (3) ToDoアプリを素早く作る

Reactの状態、イベントハンドラーのような基本文法でToDoアプリの主要機能を素早く実装します。

実装しながらコードを正確かつ迅速に作成できるコーディング方法。生産性を高めるコードショートカットキーなどを、Mac、Windowsユーザーの両方のためにお伝えします。

セクション (4) リファクタリングで学ぶコンポーネント設計と状態定義

コンポーネントをUIの役割ごとに分離する際に生じる問題点を見ていきます。複数のコンポーネント間でデータを受け渡す方法。propsとstateをどのように定義すべきか、そしてコンポーネント間で有機的に連携できるかを見ていきます。

エラーを目で見て、直接一緒に解決しながら動作原理を共に学びましょう。

セクション (5) アプリケーションのデプロイ

シンプルで可愛いアプリケーションですが、自分が作ったものを自慢できるようにサイトにデプロイしてみます。自動デプロイ方法と簡単なビルドコマンドを学びます。

この講座を作った人 👨‍💻

キャプテンパンギョ

"インフランが出会った人" インタビュー

気になることはありますか?

Q. フロントエンド開発の初心者です。この講義を受講しても大丈夫でしょうか?

HTML、JavaScriptの基本文法をご存知の方であればすぐに受講していただいて大丈夫です。もう少しReactを深く理解したい場合は、下記の学習ロードマップでご案内している作りながら学ぶReact:基礎を先に受講されることをお勧めします🙂

Q. この講座のレベルは初級ですか?中級ですか?タイトルに難しい用語があるので、難易度が高いのではないかと心配です。

この講義は初中級を対象とした講義です。ReactのuseState()の宣言方法とJavaScriptの配列宣言方法程度をご存知であれば、問題なく受講できます。講義で作成するアプリケーションも、入門者の観点から最小限の機能で簡単に実装できるように準備しました。

授業についていくうちに、自然と実務者の視点での考え方をたくさん学ぶことができると思います :)

Q. この講義を受講した後は、どれを受講するのが良いでしょうか?

この講義を受講した後は、以下のロードマップに沿って次の講義を受講してみることをお勧めします🙂 今後、React実践講義、React + TypeScript講義、Next.js講義など、様々な講義が追加で制作される予定です。良いコンテンツですぐにお会いしましょう❤

受講前の参考事項

実習環境

  • オペレーティングシステムおよびバージョン(OS): 講義ではMacを使用しますが、Windows関連のショートカットキーもすべて説明します。

  • 使用ツール:VSCode


学習資料

  • GitHubで完成したソースコードが提供されます。

  • 講義動画ごとに追加で学習できる教育資料と教育動画(私が作った動画がたくさんあります ^^)を多数提供します。


위즈 띠배너 모음
도라 띠배너 모음 (3)

こんな方に
おすすめです

学習対象は
誰でしょう?

  • React初心者

  • フロントエンド開発者

  • 就職活動中の人

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

  • ジャバスクリプト

  • Reactの基礎

こんにちは
captainです。

49,310

受講生

4,860

受講レビュー

3,816

回答

4.9

講座評価

19

講座

Inflearnで8年目、知識を共有しています。 🏠 技術ブログ, 📣 Twitter, 💻 GitHub

📗 Do it! Vue.js入門簡単に始めるTypeScript など 書籍3冊を執筆
📖 Cracking Vue.jsTypeScriptハンドブックWebpackハンドブック オンライン無料ガイドブック3冊を執筆
👨‍💻 キャプテン板橋のフロントエンド開発YouTubeチャンネル 運営 - 就活生、ジュニア開発者の悩みが聞ける場所
🥤 キャプテン板橋のカカオトークオープンチャット 運営 - フロントエンド開発の最新情報と業界の仲間の考えや悩みを聞ける場所

もっと見る

カリキュラム

全体

33件 ∙ (3時間 20分)

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

受講レビュー

全体

41件

4.9

41件の受講レビュー

  • winzzone2님의 프로필 이미지
    winzzone2

    受講レビュー 5

    平均評価 5.0

    5

    100% 受講後に作成

    キャプテン板橋の講義は初めて聞いた内容が好きで2日で頑張りましたㅎㅎ 講義ごとに短くて太いですが、初心者に気をつけて説明してくれてありがとう。 私は基本的なリアクトの知識を持っていますが、講義で言った内容と板教様の蜂蜜のヒントを学びたいと聞きましたが、結果的に非常に満足しています。 早く中高級講義が出てくることを切に願っていますㅎㅎㅎ これだけ私は先生の次の講義を聞きに行きます。

    • captain
      知識共有者

      蜂蜜のヒントが気に入ったのは幸いですね。入門者に配慮したポイントもよくお会いいただきありがとうございます:) Next 講義も楽しく聞いてください! 😁

  • seeeun님의 프로필 이미지
    seeeun

    受講レビュー 10

    平均評価 4.5

    5

    61% 受講後に作成

    キャプテン板橋ファイティング

    • namdong98978492님의 프로필 이미지
      namdong98978492

      受講レビュー 4

      平均評価 4.3

      4

      12% 受講後に作成

      • mily921558님의 프로필 이미지
        mily921558

        受講レビュー 1

        平均評価 5.0

        5

        100% 受講後に作成

        リアクトの基本原理を簡単明瞭に説明していただき、勉強に多くのお役に立ちましたありがとうございます!

        • captain
          知識共有者

          ありがとう、スジ様:)

      • yjh0155님의 프로필 이미지
        yjh0155

        受講レビュー 2

        平均評価 4.5

        4

        100% 受講後に作成

        こんにちは。カムテン板橋様リアクト川のよく聞きました。 1. 講義頑強な立場でおすすめ対象 -リアクトをやってみたところ、コンポーネントの分離について基本的な悩み - リアクトにあるpackageのようなファイルの意味を知らない。 2. 良かった点 - 一度講義の準備をとてもよくしてくれて聞きやすかった。 - 講義資料へのリンクが添付されていて役に立ちました。 - ややもちょうど進むだけの、エクステンションセッティングのような部分も序盤講義に入っていて知らなかった人には蜂蜜チップになるようです。 - 適度な講義の時間に充実した内容(一日で頑張りました) 3. 残念な点 - 講義自体に残念だというより…私は少し中級講義をしたかったようです。私の基準では、簡単な内容が多すぎて残念でした。 全体:準備が整った講義だと感じました。今、リアクトを始める初心者だったとき、私がこのレッスンを聞いたらとても良かったようです。 今後中級講義が出たらぜひ受講したい気持ちがあります。 [私だけ4点なので追加的にコメントするなら] 1. キャプパン様の講義力 Good 2.リアクトを学びましたが、何が何なのかわからず、ついてだけ打ったら無条件に聞いてください 3. どうやって見ると、講義の難易度を一人で高く考え、受講した私の間違いかもしれません。

        • captain
          知識共有者

          こんにちはyjhさん、率直な受講評を残していただきありがとうございます :) 私も実は要講の設計時に適切な難易度探しがちょっと難しかったのにおっしゃったように中級レベルの講義ではないようです。 講義紹介ページに案内されたように初級、そして初級に近い小中級で見ていただきたいと思います。 ) https://react.dev/learn/managing-state それでも教えてくれたように、私ももう初めてリアクト講義を出したんですから。

        • [私だけ4点なので追加的にコメントするなら] 1. キャプパン様の講義力 Good 2.リアクトを学びましたが、何が何なのか分からなくてただ打ったら無条件に聞いてください 3. どうやって見ると、講義の難易度を一人で高く考え、受講した私の間違いかもしれません。

      captainの他の講座

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

      似ている講座

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

      ¥5,472