【動画で学習】UdemyのReact 人気／おすすめ講座【セールでお得】

これからReactを勉強する全ての人におくるReact入門コース決定版！

Reactの勉強に苦戦する多くの人と話してきました。

そこで感じたのは苦戦する多くの人は学習の順序を間違えているということです。

JavaScriptへの理解なくしてReactの習得はなし得ません。

そこでJavaScript→Reactの理解の架け橋となる本コースを作成しました。

■2023年11月 フルリニューアルしました！

ありがたいことにコース公開から3年で24000人もの方に受講いただきました。

3年でReactのバージョン等大きく変わりましたし、皆さんからのレビュー内容を反映したい気持ちもあり、全て再収録・再編集し直しました！

↓リニューアル内容例

• 最新のReact v18への対応

• 昨今の状況を加味した解説等の追加

• 一部新規レクチャー

• 誤っていた箇所の修正

• レビューいただいた内容の反映（音質改善や完成版コードの共有等）

これから先もReact入門コースの代名詞として選ばれ続けるよう皆さんの声を反映していきます！

■本コースでは以下の流れで学習を進めます。

1. モダンJavaScriptを取り巻く周辺知識や仕組みの概念を知る

   SPAとは？仮想DOMとは？パッケージマネージャとは？等

   React開発に関わる事柄について説明することでまず概念を理解し学習を進め易くします。

2. React開発で使用するモダンJavaScriptの機能を知る

   ReactはJavaScriptの機能をふんだんに使って開発していきます。そのためまずは良く使うモダンなJavaScriptの機能を先に理解することで後でReactの学習に集中することができます。

3. プレーンなJavaScriptのみでアプリケーションを開発する

   Reactを使用することでどういう恩恵があるか、従来との違いは何なのか？を知るためにまずはReactを使わずJavaScriptのみでアプリケーションを開発します。

   このステップを挟むことでよりReactへの理解が深まります。

4. Reactの基本やルールを知る

   ここからReact特有のルールや文法、機能についてフォーカスして学んでいきます。

5. JavaScriptだけで作成したアプリケーションと同じものをReactで開発する

   学んできたReactを使用し実際にアプリケーションを開発することでより理解を深めます。

   実務ではどのような書き方をするか、抑えるべきポイントも合わせて説明していきますのでイメージが深まるかと思います。

   更にプレーンなJavaScriptで作成したものと同じものを作成するので、近代JavaScriptの転換を体感することができます。

■それ以外の本コースの特徴

• 私自身、複数プロジェクトでReactを使用し仕事をしているエンジニアです(フリーランス→会社設立)

• 学習には息抜きも必要なのでセクションの合間に私の経験やフロントエンド周りの雑談も含まれたりしています

• コード入力時は画面を拡大する等、編集も工夫しているためスマホでもストレスなく閲覧できます

• 収録音声にも気をつかっているのでイヤホン等で視聴しても不快ではないです(声の好みは分かりませんが...)

  
  

「Reactってよく聞くけど、なんだか難しそう。。」

「HTML、CSS、JSは触ったことあるけど、Reactには壁を感じる。。」

「興味はあるけど自分には早いんじゃないか。。」

本コースはReactに興味があるけど、できるか自信がないフロントエンド入門者の方に向けて作成しました。

まず、皆さんにお伝えしたいのはReactは決して扱うのが難しいライブラリではないということです。

ただ、使いこなせるようになるためにはいくつか知っておくべきことがあります。

本コースではReactを使うにあたって知っておいてほしい基礎の部分を体系的、かつ網羅的に説明しています。

■ 知っておくべきこと１ | JavaScriptの挙動

JavaScriptの挙動自体が曖昧（あいまい）な場合、Reactを使いこなすことは難しいでしょう。

ReactはJavaScriptのライブラリですので、当然JavaScriptで記述することになります。

そのため、Reactに感じる複雑性の多くはJavaScript言語自体の独特の記法からくるものです。

また、Reactのコードを記述する際は分割代入やスプレッド演算子、配列の高階関数、await/asyncなどの比較的最新の記法を多用します。

そのため、十分なJavaScriptへの理解がない状態でReactを使うと、Reactが分かっていないのか、JavaScriptが分かっていないのかが切り分けられず、問題の解決が困難になります。

これがReactが難しいと思われる大きな原因の一つであると私は感じています。

本コースではReactの書き方だけではなくJavaScriptの記述で複雑に感じるであろう部分についても適宜説明しています。

これによって、JavaScriptへの十分な理解がなくてもコースを受講していただけるようにしています。

■ 知っておくべきこと２ | Reactが持つ独特の記述ポリシー

また、Reactを使いこなすためにはReactのポリシー（書き方）についても知る必要があります。

プログラミング入門者はプログラミング経験自体が浅いため、新しい言語やライブラリに出会った際に過去の経験に当てはめて最適な記述方法を考察することができません。

そのようなことを教えてくれる先輩がいればラッキーですが、多くの人はそのような恵まれた環境ではないと思います。そのため、「これで合ってるのかな？」と何となくモヤモヤした気持ちで学習をしていることと思います。

繰り返しになりますが、Reactのコードを記述する際は独特のポリシーが存在します。

そのため、そのポリシーを学べば、どのようにしてReactを記述すればよいかが自（おの）ずとわかってきます。

一つ例を見てみましょう。

例えば、本コースでは関数型プログラミングというプログラミング手法からみたReactについて触れています。関数型プログラミングというのはクラスを使わず、関数によってプログラムの保守性、拡張性、再利用性、テスト性を高めようというプログラミング言語の書き方です。

React 16.8のReact Hooksの導入からReactのポリシーはクラスを用いたオブジェクト指向型プログラミングから関数型プログラミングに完全に移行しました。そのため、関数型プログラミングがどういったプログラミング手法なのかを知ることはReactを知る上で大変重要な事になってきます。

本コースではそういったReactの背景にある思想なども交えながら、体系的にReactというライブラリについて学んでいきます。

■ 知っておくべきこと３ | Reactを取り巻く周辺知識

上で挙げた２つを学べばReact単体については使いこなせるようになるでしょう。しかし、Reactを実際のアプリで使用しようとするとReactだけを学べばよいということではないことがわかってきます。

実際にはどのようにしてサーバーとの通信をすればよいのか、どのようにReact上でデータを管理すればよいのか、どのようにしてページ管理をしていけばいいのかといった問題にぶち当たることになります。

そういった問題を解決するために本コースではReactのみに留（とど）まらず様々なRest API、Redux、Next.jsなどの周辺知識についても学んでいくことになります。ここで、それらについて全て挙げることはできませんので、興味のある方はレクチャー一覧を一度見てみてください。

■ なぜ本コースなのか？

既存の動画教材では、一本でReactとその周辺知識について体系的に、かつ網羅的に学べる教材がないように感じています。

ただ、初心者の頃は自分自身で断片的な知識をつなぎ合わせることは困難です。（そもそも、どの情報を学ぶべきで、どの情報は必要ないのかを取捨選択することも困難でしょう。）そのため、体系的、かつ網羅的に学べる教材は初心者の方にとってきっと大きな力になってくれると思います。

本コースではReactにおける確固たる基礎とその周辺の学ぶ必要のある知識にフォーカスし、Reactを最短で習得することを目的としています。

最短でReactについての基礎を固めたい方は是非本コースを試してみてください。

■ 最後に

私は「なぜこのように書くのか？」「なぜそのような挙動になるのか？」を知ることがプログラミングの上達には極めて重要だと感じています。プログラミング言語やライブラリは日々進化し続けます。そのため、暗記した知識は時代とともに使い物にならなくなってしまいます。

また、プログラムの書き方はグーグルで検索すればいくらでも確認する事ができますが、それを自分の状況に合わせて使うためには動作を理解する必要があります。そのため、プログラミングの上達においては「覚えること」よりも「理解すること」が大切になってきます。

これは本コースで学ぶReactにおいても変わりません。ただ書き方を暗記するのではなく、「なぜそのように書くのか？」「なぜそのような挙動となるのか？」それを知ることによって応用の効く技術を習得することができます。

本コースを終えた方が「Reactってそんな難しくないじゃん！」と思っていただければ、大変嬉しく思います。

■ 各種バージョン情報

React: 18.1.0

Redux: 4.2.0

Next.js: 12.1.6

TypeScript: 4.6.4

Node.js: 16

React力を更に高めたい全ての人におくるステップアップコース完全版！

「stateやprops、useStateやuseEffectの使い方は何となく分かったけど次どうしたら良いか分からない」

「もっと実務で必要となるレベルの解説を知りたい」

といったReactでもっとステップアップしていきたい人のために本コースを作成しました。

■本コースでは以下の内容を取り扱います

1. 再レンダリングの仕組みを知りレンダリングを最適化する

   どんな時に再レンダリングは起きるのか、またそれを最適化する方法を知ることで規模が大きくなってもサクサク動く快適なアプリケーションを作ることができるようになります。

2. 様々なCSSのあてかたに触れる

   いざ自分でアプリケーション作ろうと思うとCSSについては絶対迷うと思います。

   選択肢を増やすために主要なCSSライブラリについて使い方を紹介します。

3. ルーティングのテクニックを学ぶ(React Router)

   Reactで画面遷移を伴うアプリケーションを作る場合ルーティング周り知識は不可欠です。

   ReactRouterの使い方や具体的なテクニックを知ることでアプリケーション開発に生かせるかと思います。

4. コンポーネントの分割方法を学ぶ（Atomic Design）

   コンポーネント分割として有名なAtomic Designというデザインシステムを紹介します。

   概念の部分や、Reactでの使い方を知ることでコンポーネント分割への意識が変わります。

5. グローバルなstate管理を知る

   実際のアプリケーションではコンポーネントを横断して使用できるグローバルなstateの知識は必須です。

   React標準のContextの使い方やテクニックと、Recoilというライブラリについても軽く紹介しています。

6. React × TypeScriptで開発できるようになる

   これからReactで開発していく場合、TypeScriptの使用はほぼ必須と言っても過言ではありません。

   基礎、応用と順番にTypeScriptについて解説していくので、今後はTypeScriptを用いたReact開発に取り組んでいけるようになるかと思います。

7. カスタムフックを使えるようになる

   コンポーネントとロジックを分離するカスタムフック について実際に使い方を学ぶことで更にステップアップしたReactのコードを書けるようになります。

8. Chakra UIを使った実践アプリ作成

   これまでの内容を全て取り込んで実際にCSSフレームワークを使いながらアプリケーションを作っていく流れを体験することで、より学習した内容の生かし方がイメージできるようにしています。

■それ以外の本コースの特徴

• 私自身、複数プロジェクトでReactを使用し仕事をしているエンジニアです(フリーランス→会社設立)

• コード入力時は画面を拡大する等、編集も工夫しているためスマホでもストレスなく閲覧できます

• 収録音声にも気をつかっているのでイヤホン等で視聴しても不快ではないです(声の好みは分かりませんが...)

  
  

Reactの基礎を学び終え、３種類のアプリ開発をすることでReactの理解をさらに深める講座内容となっています。

■ 本コースの対象者

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

・Reactでどんなアプリが作れるのかハンズオン形式で学んでみたい

・ReactでAPIの叩き方(Promiseを使ったデータフェッチング)を学んでみたい

・ReactとFirebaseで権限付きの簡単なブログ(掲示板)を構築したい

・Googleログイン機能を実装してみたい

・モダンJavascriptで使われるmap, filter, find, sort関数を使ってCRUD操作を学びたい

・ローカルストレージに保存できるノートアプリ(Evernoteクローン)を構築したい

・etc...

Reactは学んだけど、作りたいWebアプリが思いつかないから学習が捗らない・・・

実際にプロジェクトを作ることでプログラミングの理解は深まります。

Reactの基礎は理解し「次に進んでみたい」「ステップアップしたい」という方におすすめの

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

また、ReactだけでなくFirebase(Cloud Firestore, Google Authentication)を使ったDBの取り扱いや

Googleログイン機能、ローカルストレージの取り扱い、Promiseオブジェクトの利用法などを付随して学ぶことできます。

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

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

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

Reactフレームワークの「Next.js」を初めて触る人に向けたコース構成になっています。

※Next.js13の最新バージョンには対応しておりませんのでご了承くださいませ。Next.js13以前のNext.jsを学ぶことができます。

■ 本コースの対象者

・Reactは一通り学んだから次のステップとしてNext.jsを学びたい方

・Next.js完全初心者の方

・Next.jsを学んでReactの違いを明確に理解しておきたい方

・Next.jsの公式ドキュメントを読んでもイマイチ理解が深まらない方

・公式ドキュメントよりも動画でサクッと理解したい方

・CSRではない最新のレンダリング手法のSSG・SSRを学んでみたい方

Reactよりも最適化されたアプリやサイトを構築できます。

Next.jsフレームワークを学べば高速化されたWeb開発が可能に。

モダンなフロントエンド技術に乗り遅れたくない方は必見の内容です。

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

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

・Next.jsの公式ドキュメントに沿った内容で講座を構成しています。

・Next.js13の最新バージョンには対応しておりません。

・すでにNext.jsの公式ドキュメントを読み終えて理解済みの方は、

この講座では新しい学びがないので受講しないようにしてください。

・ISRについては取り扱っておりません。

本コースでは、はじめてWebアプリケーションを勉強される方向けに、簡単にバックエンドの機能を利用できるFirebaseを使っていきます。Firebaseによるバックエンド、Reactによるフロントエンドとの連携、ディプロイの流れを通じて小さなWebアプリを公開していきます。

*本コースでは、TypeScriptを使用するので無料コースの"最速で学ぶTypeScript"を事前に受講しておいてください。

*React Hooksを徹底理解したい方は、"[基礎編]React Hooks + Django REST Framework API でフルスタックWeb開発"コースがおすすめです。

Firebaseのデータベース(Cloud Firestore)、認証機能を使って簡単なToDoアプリをハンズオンで作成します。

フロントエンドは、React Hooks/TypeScript/Material UIを使っていきます。

Firebaseは、Nativeアプリ(iOS, Android)開発のバックエンドとして採用されることが多く、近年のクロスプラットフォームフレームワーク(Flutterなど)とも非常に相性が良いです。NativeアプリとWebアプリ(React)でデータベースを共有したい場合やFirebaseのリッチな認証機能をReactに取り入れたいケースにFirebaseとReactを連携させるスキルが必要になります。本コースでは、ToDoアプリを通じて基礎的な連携方法について学んでいきます。

News: React Hooks + ContextAPIを使ったグローバルステート管理のレクチャーを追加しました。

今回のコースでは、Firebaseを使ってReactアプリケーションをデプロイし

公開することをゴールとしています。

そして、Firebaseホスティングについて学んだ後、

実際に、最新のReact開発手法である functionコンポーネントとReact Hooks + ContextAPIを使って
Todoリストを作成・公開します。
本講義では、ローカルステートを利用した開発方法を学んだ後、React16.8より導入されたuseContextとContextAPIを使用してRedux無しでのグローバルステート管理についても学んでいきます。

このコースを受講後には、バックエンドやインフラの知識がなくても

Reactで作成したwebサイトやwebアプリケーションを10分以内で公開できるようになります。

Firebaseとはgoogleが提供するBaaSサービスになります。

このBaaSとはBackend as a serviceの略称で

バックエンドの機能を提供してくれるサービスになります。

例えば、Facebookやgoogleでの認証処理であったり、

チャットアプリのようにリアルタイムでのデータのやり取りなど

様々なサービスを提供してくれています。

とても便利なサービスなので一緒に学習し活用していきましょう！

React Native は、Web技術の組み合わで、iOS / Android ネイティブアプリを同時に開発することができます。初学者にも分かりやすい開発手法にも関わらず、本格的なアプリをつくることができます。

この講座は、アプリ開発を以下の工程に分割して進行します。

• 1. Plan（計画）

• 2. Design（デザイン）

• 3. Markup（構造化）

• 4. Styling（装飾）

• 5. Programming（機能）

• 6. Release（ストアに並べる）

  
  

最初は、HTML / CSS / Javascript を中心に学習し、最終的にはすべてを Javascript で書いていきます。
初めてアプリ開発に挑戦する人向けに進めて行きますので、まったく知識がなくても大丈夫です。

Figma を使ったUIデザインの基本も盛り込みました。
まさにアプリ開発のオールインワン講座となっています。

この講座では Expo を使用します。
Expo を採用することで、開発環境の構築とリリース作業が大幅に簡略化されました。
開発環境の構築とリリース作業は、初学者がつまづきやすいステップの代表例ですので、特に丁寧に解説しています。

また、開発現場には欠かせない Git や Github も取り入れ、実際の開発プロセスに近付けていますので、
これから開発の仕事に関わりたいと思っている方にも最適です。
　　

主な機能

シンプルながら、基本的な機能を網羅したメモアプリを作成します。
メモはクラウド上に保存され、端末を変更してもアプリ利用を継続することができます。

• 会員登録（メールアドレスとパスワードで登録）

• ログイン・ログアウト

• リアルタイムデータベース（作成、編集、削除、一覧、詳細）

• ナビゲーション（画面から画面への移動）

主に使用する技術

• React, React Native

• React Hooks, Function Component

• React Navigation

• Expo

• Javascript

• ESLint

• Firebase Authentication

• Cloud Firestore

• Figma (UI Design)

必要になる可能性がある費用

• USD $99/year（App Store にアプリを公開するために Apple に毎年支払う）

• USD $25（Play Store にアプリを公開するために Google に1度だけ支払う）

• リリースは最終セクションにまとめていますので、公開しない方は、特に費用はかかりません。
  

ーーーーーーー

この講座は全編再収録を行い、2021年にリニューアルリリースしました。
コース後半にはリニューアル前の動画が残っています。リニューアル公開時に受講されていた方が困らないための措置ですが、コース紹介ページには、収録時間が合計して表示されています。

リニューアル前のコース収録時間は13時間程度、リニューアル後は17時間程度と大幅に拡張されています。合計は30時間強となっておりますますが、リニューアル前後の動画が含まれていますことを予めご了承下さい。

~~2023年2月 全編アップデート~~

最新のReact Native環境に合わせて全動画をアップデートしました。

【講座内容】

React Native + Expoを用いたスマホアプリ開発を、環境構築〜ストアへのリリースまで一通り習得することを目指します。

ソフトウェア開発の醍醐味は「自分の描いたサービスを実現できたとき」だと思います。

React Nativeを使うと、そのアイデア着想〜実現までが非常にスムーズになります。

この講座を通して、そんな体験をしていただければと思っています。

コーディングでは実際に「ニュース閲覧アプリ」を作りながら学びます。

シンプルなアプリですが、その中に、

・コンポーネントの設計

・API通信

・Hooksの利用

・Reduxによる状態管理

・画面遷移

などReact Nativeのエッセンスをギュッと濃縮しました。

アプリを開発しながら楽しく学びましょう！

【この講座の対象者】

・Webの開発経験はあるけどアプリの経験はない人

・エンジニア入門者

・React Nativeでの開発を経験してみたい人

【この講座では扱わないこと】

・JavaScriptの基本的な文法

・React Native熟練者向けの内容

【更新情報】

2023/2/5 全動画を最新版にアップデート

2022/8/22 Expoの開発環境構築を更新

2021/7/11 Screenのコードを修正

2021/4/24 付録にページング(スクロールすると次のページを読み込む)を追加しました

2020/10/20 付録にFunctionコンポーネントの色々な書き方、を追加しました

2020/9/27 各レクチャー毎のソースコード(L7~8)を掲載しました

2020/9/24 各レクチャー毎のソースコード(L4~6)を掲載しました

2020/8/16 環境構築のトラブルシュートを追加しました

2020/4/26 News APIの画像が表示されない場合の対応を追加

2020/4/11 TypeScript版のサンプルコードを掲載しました

2020/3/8   React Navigation v5対応のためセクション7を大幅に更新しました

2020/3/8   ReduxのHooks対応のためセクション8の一部を更新しました

2020/2/15 レクチャー39にエラー処理を追記しました

2020/2/11 レクチャー44にreact-navigationのバージョンに関する注意点を追加しました

2020/2/7   レクチャー4にExpoの最新版での注釈を追加しました

2020/2/3   レクチャー46にてHomeScreenの説明が漏れていたので修正しました