レバテックフリーランスのサイトに当サイトが紹介されました!

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

こちらでは、UdemyのReact講座を、おすすめ、セール情報とともに紹介していきまっす。

Udemy講座の特徴

udemy

具体的な講座を見る前に、Udemyについてざっと整理しておきましょう。

Udemyは動画ベースの学習サービス、以下のような特徴があります。

Udemyの特徴

  • 買い切り型で継続コストがない
  • その上、内容更新あり、質問可能
  • スマホ対応、流し聴き学習も可能
  • 30日間返金が可能
  • セールで頻繁に80%以上割引

なんといっても、買い切り型なので購入後は継続コスト等が一切不要なのが安心。

その上で、講座の内容がアップデートされたり、質問も可能なので、買い切りなのに利用できるサポートが手厚いです。

講座の内容も10時間以上に登るものも多く、1本で基礎から応用まで学習可能

ユーザー評価や、動画プレビューあり、さらには30日間の返金保証もあるので、まず失敗しない購入が可能

購入時に絶対に抑えておきたいのがセール。毎回80~90%OFFの割引されます。

基本月1回は必ずセールが開催されているので、そこで購入するようにしましょう。また、新規ユーザーは1本目は大概セール価格で購入可能です。

 

UdemyのReact講座 人気ランキング(セール情報付き)

以下がUdemyで学習できるReactの最新の人気講座ランキング(日本語のもの)です。

セール価格情報も載せています。上述したとおりUdemyのセールは大きいので逃さずゲットしてください。

人気
Rank
学習コース評価
1
(4.6)
総評価数 6165件
2
【2024年最新】React(v18)完全入門ガイド|Hooks、Next14、Redux、TypeScript...
発売日 2022/03/29
受講者 20,387人
通常 10,000円
現在 1,500円
(4.6)
総評価数 2559件
3
(4.7)
総評価数 820件
4
(4.8)
総評価数 2590件
5
(4.5)
総評価数 274件
6
(4.5)
総評価数 903件
7
【Discordクローン開発】React/Redux/Typescript/Firebaseで作るアプリ開発実践講座...
発売日 2022/11/20
受講者 2,029人
通常 27,800円
現在 1,500円
(4.6)
総評価数 232件
8
Echo/Go + Reactで始めるモダンWebアプリケーション開発
発売日 2023/03/20
受講者 2,032人
通常 27,800円
現在 1,800円
(4.5)
総評価数 215件
9
React Native, Firebase, Expo でアプリ開発をゼロから始めよう!
発売日 2017/10/10
受講者 10,494人
通常 27,800円
現在 1,800円
(4.7)
総評価数 1224件
10
(4.6)
総評価数 317件
11
最速で学ぶFirebase + React Hooks (TypeScript)
発売日 2020/09/15
受講者 6,740人
無料講座
(4.4)
総評価数 390件
12
(4.6)
総評価数 61件
13
(4.4)
総評価数 22件
14
【2023年最新版】React Native入門:ニュースアプリを作りながら覚えよう...
発売日 2019/04/27
受講者 5,479人
通常 12,800円
現在 1,500円
(4.8)
総評価数 786件
15
ReactでTrelloクローンアプリケーションを作ってReactをマスターしよう!...
発売日 2021/08/22
受講者 2,331人
通常 21,800円
現在 1,800円
(4.6)
総評価数 329件
16
[基礎編]React Hooks + Django REST Framework API でフルスタックWeb開発...
発売日 2020/04/30
受講者 4,092人
通常 20,000円
現在 1,800円
(4.6)
総評価数 671件
17
(4.4)
総評価数 13件
18
NestJS × Reactで学ぶフルスタックGraphQLアプリケーション開発
発売日 2022/11/21
受講者 875人
通常 10,000円
現在 1,500円
(4.6)
総評価数 78件
19
(4.6)
総評価数 291件
20
React/Reduxで複雑なデータ構造を扱う実践的なアプリケーション開発...
発売日 2018/04/11
受講者 165人
通常 4,800円
現在 2,000円
(3.8)
総評価数 15件
21
【入門編】React Native & Expo でアプリ開発のスキルを身につける!...
発売日 2022/01/31
受講者 140人
通常 2,600円
現在 1,500円
(4.5)
総評価数 15件
22
(5)
総評価数 10件
23
最短・最速で作る Youtube クローンアプリ React・React Hooks編
発売日 2020/05/21
受講者 1,541人
通常 21,800円
現在 2,400円
(3.7)
総評価数 267件
24
ゼロからReact入門!逆算式で最速マスター
発売日 2023/11/02
受講者 70人
通常 6,200円
現在 1,500円
(4.1)
総評価数 15件
25
React + Redux を使用したモダンフロントエンド開発
発売日 2018/03/05
受講者 1,276人
通常 2,600円
現在 2,600円
(4.1)
総評価数 323件
26
最短で学ぶReactとReduxの基礎から実践まで
発売日 2017/05/29
受講者 2,978人
通常 27,800円
現在 2,000円
(3.6)
総評価数 556件
27
ReactとFirebase とWebRTCで P2P ビデオ会議システムを開発しよう!...
発売日 2020/10/13
受講者 1,285人
通常 2,400円
現在 1,600円
(4.1)
総評価数 77件
28
Web開発ソフトウェアテスト徹底攻略 (React Hooks/Redux + Django REST API)...
発売日 2020/11/17
受講者 759人
通常 27,800円
現在 2,000円
(4.7)
総評価数 41件
29
[Redux編] Redux Tool KitとReact HooksによるモダンReact フロントエンド開発...
発売日 2020/06/23
受講者 2,037人
通常 21,800円
現在 1,800円
(4.5)
総評価数 248件
30
手を動かして学ぶ React を使ったアニメーション(react-spring)...
発売日 2020/08/04
受講者 120人
通常 4,900円
現在 1,840円
(3.9)
総評価数 16件
31
(3.2)
総評価数 22件
32
初心者がReactとfirebaseで作るモバイル対応PWAアプリケーション...
発売日 2021/05/15
受講者 1,162人
通常 27,800円
現在 1,500円
(4.5)
総評価数 176件
33
(3.9)
総評価数 83件
34
Reactソフトウェアテスト(Hooks+ReduxToolKit時代のモダンテスト手法)...
発売日 2020/08/07
受講者 2,672人
通常 21,800円
現在 1,800円
(4.2)
総評価数 278件
35
すぐできる!動かす React JS サンプル講座
発売日 2016/10/27
受講者 361人
通常 4,800円
現在 1,800円
(3.1)
総評価数 69件
36
[SNS編] React Hooks + Django RestFramework API でフルスタックWeb開発
発売日 2020/05/23
受講者 1,107人
通常 27,800円
現在 1,800円
(4.4)
総評価数 109件
37
(3.4)
総評価数 282件
38
[Youtube編] React Hooks + Django RestFramework API でフルスタックWeb
発売日 2020/05/31
受講者 1,012人
通常 21,800円
現在 1,800円
(4.2)
総評価数 89件
39
(4.5)
総評価数 250件
40
[JIRA編]React Hooks/TypeScript + Django REST APIで作るオリジナルJIRA
発売日 2020/09/09
受講者 1,236人
通常 21,800円
現在 1,800円
(4.3)
総評価数 113件
41
[COVID 19アプリ編] Reactで作るコロナウイルス Live ダッシュボード...
発売日 2020/07/03
受講者 1,757人
通常 21,800円
現在 1,800円
(4.2)
総評価数 242件
42
FastAPI + React によるフルスタック Web開発
発売日 2021/10/23
受講者 1,648人
通常 27,800円
現在 1,800円
(4.4)
総評価数 137件
43
(4.2)
総評価数 170件
44
Firebase + React Hooks(TypeScript)によるWebアプリ開発
発売日 2020/10/18
受講者 3,624人
通常 21,800円
現在 1,800円
(4.3)
総評価数 457件
45
最短・最速で学ぶ GraphQL Fullstack 実践入門 - Node & React編
発売日 2020/04/15
受講者 722人
通常 3,600円
現在 1,800円
(3.4)
総評価数 139件
46
GraphQL SNS機能開発 (React + Graphene-django)
発売日 2020/12/06
受講者 498人
通常 27,800円
現在 1,800円
(4.7)
総評価数 27件
47
GraphQL フルスタックWeb開発入門 (Django + React/Apollo Client)
発売日 2020/11/04
受講者 1,250人
通常 21,800円
現在 1,800円
(4.4)
総評価数 110件
48
フロントエンドエンジニアのためのGraphQL with React 入門 2018年版...
発売日 2018/06/06
受講者 3,022人
通常 2,600円
現在 1,500円
(3.4)
総評価数 351件
49
High Performance React Web 開発
発売日 2021/05/14
受講者 1,556人
通常 27,800円
現在 1,800円
(4.6)
総評価数 158件
50
[Instagramクローン編] React Hooks + Django Restframework
発売日 2020/07/28
受講者 1,896人
通常 21,800円
現在 1,800円
(4.5)
総評価数 200件
51
Mantine UI (React コンポーネントライブラリ) The Complete Guide
発売日 2022/05/09
受講者 619人
通常 27,800円
現在 2,000円
(3.7)
総評価数 67件
52
React Native(Expo)によるiOSアプリ開発
発売日 2021/09/14
受講者 657人
通常 27,800円
現在 1,500円
(4.1)
総評価数 52件
53
[テスト編] Nextjs + React-testing-libraryでモダンReactソフトウェアテスト...
発売日 2021/01/03
受講者 2,345人
通常 27,800円
現在 27,800円
(4.1)
総評価数 154件
54
Nextjs + Tailwind CSS + Django REST Framework で学ぶモダンReact開発
発売日 2020/12/23
受講者 4,432人
通常 27,800円
現在 1,800円
(3.3)
総評価数 564件
55
Python 実践編 / ゼロから作る株価予想可視化AI / React + Django + Pytorch...
発売日 2020/11/10
受講者 403人
通常 19,800円
現在 1,800円
(3.3)
総評価数 29件
56
(4.2)
総評価数 1973件
57
(4.2)
総評価数 91件
58
(3.7)
総評価数 318件
59
(3.5)
総評価数 128件
60
(4.4)
総評価数 1166件
61
[2022年決定版] ゼロから学ぶReact.js
発売日 2021/12/10
受講者 199人
通常 2,600円
現在 1,800円
(3.8)
総評価数 36件
62
[TensorFlow/React/Django]機械学習webアプリケーション作成入門
発売日 2021/01/14
受講者 86人
通常 20,000円
現在 1,800円
(3.3)
総評価数 9件
63
React Nativeのアニメーションを極める
発売日 2023/04/01
受講者 118人
通常 6,200円
現在 1,500円
(4.8)
総評価数 9件
64
(5)
総評価数 5件
65
チャート式問題集の用に学ぶ React・Next.js・TypeScript・Tailwind CSS...
発売日 2024/03/17
受講者 7人
通常 6,200円
現在 1,500円
(5)
総評価数 1件
 

UdemyのReact 人気・おすすめの5講座

以下が今人気のおすすめの講座の詳細です。

Udemy講座では、1つのコースで基礎から応用まで幅広く学べるものが多く、コスパ高く学習可能。

自分にあったコースをセールでゲットして効率よく学習しましょう。

【最新ver対応済】モダンJavaScriptの基礎から始める挫折しないためのReact入門

【最新ver対応済】モダンJavaScriptの基礎から始める挫折しないためのReact入門
発売日 2020/08/27
(4.6)

7 total hours
【フルリニューアルしました!】Reactの習得に苦戦する理由は「JavaScript」への理解不足です。このコースではスムーズにReact開発のスタート地点に立てるように、モダンJavaScriptの動作の仕組みや概念、機能から解説します。

これから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を使用し仕事をしているエンジニアです(フリーランス→会社設立)

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

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

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



↓全て表示↑少なく表示
 
Users Voice
WEBアプリケーションの経験はなく、勉強はいつも挫折していました。 WEBアプリケーションで挫折する理由も自覚があり、「憶えることが多い」+「進化の速度が早い」だと思っています。 このコースはとても分かりやすく解説して下さっているので、最後まで受講することが出来ました。 ただこのままではどんどん忘れていってしまう為、ここからはコードを書いて憶える自分自身の努力が大切かなと思いました。もう少し体に染み付いたら、ステップアップコースも受講予定です。 (参考:Udemy)

↓全て表示 ↑少なく表示
初学者に理解できる言葉選びで説明してくださっているので、非常にスムーズに学習できました! (参考:Udemy)

↓全て表示 ↑少なく表示
 
レクチャー内容
  1. はじめに
    • 講師自己紹介
    • コース全体像
    • なぜこのコースが必要なのか
    • このコースを受けたらできるようになること
    • 質問の仕方
  2. このコースで用いる環境について
    • [追加]CodeSandboxの変更点
    • [追加]StackBlitzの紹介
    • CodeSandboxの紹介
    • CodeSandboxの機能説明
    • 雑談(情報処理の単位が取れずに留年しかけてました)
  3. ReactやVue等を使うために知っておきたいJavaScriptの基本
    • このセクションで伝えたいこと
    • JavaScriptって何?なぜオススメ?
    • DOMや仮想DOMってなんなんだ
    • npmやyarn等のパッケージマネージャーの意義を知る
    • ECMAScriptとは。近代JavaScriptの転換期について
    • モジュールバンドラーやトランスパイラの概念
    • SPAとは?従来のWebシステムとの違い
    • 雑談(フリーランスって一言に言っても...)
  4. モダンJavaScriptの機能に触れる
    • CodeSandboxのURL
    • このセクションで取り組むこと
    • const、let等の変数宣言
    • テンプレート文字列 ``
    • アロー関数 =>
    • 分割代入 {} []
    • デフォルト値 =
    • オブジェクトの省略記法
    • スプレッド構文 ...
    • mapやfilterを使った配列の処理
    • 三項演算子 ? :
    • 論理演算子の本当の意味を知ろう
    • 雑談(伸びる人、伸びない人)
  5. 素のJavaScriptだけでTODOアプリを作成してみよう
    • CodeSandboxのURL
    • TODOアプリ作成の準備
    • HTMLで構造を作成
    • CSSでスタイリング
    • タスクの追加機能(テキスト)
    • タスクの追加機能(ボタン)
    • タスクの削除機能
    • タスクの完了機能
    • タスクの戻す機能
    • セクションまとめ
    • 雑談(コンポーネントって何だ?)
  6. Reactの基本を学ぶ
    • Reactを学ぶ準備
    • JSX記法のルールを知る
    • コンポーネントの使い方を知る
    • Reactでのイベントやスタイルの扱い方を知る
    • Propsを知る
    • Stateを知る
    • 再レンダリングと副作用を知る(useEffect)
    • default exportとnamed export
    • 雑談(ライブラリの選定)
  7. React使ってTODOアプリを作成してみよう
    • CodeSandboxのURL
    • TODOアプリ作成の準備
    • JSXで構造を作成
    • CSSでスタイリング
    • Reactでの実装を意識したモックに変更
    • タスクの追加機能
    • タスクの削除機能
    • タスクの完了機能
    • タスクの戻す機能
    • カイゼン(コンポーネント化)
    • カイゼン(コンポーネント内でのスタイル定義)
    • カイゼン(TODOの上限設定)
  8. さいごにとこれから
    • 雑談(このコースの次にするべきこと)
    • ボーナスレクチャー:さいごにとこれから
   

【2024年最新】React(v18)完全入門ガイド|Hooks、Next14、Redux、TypeScript

【2024年最新】React(v18)完全入門ガイド|Hooks、Next14、Redux、TypeScript
発売日 2022/03/29
(4.6)

27 total hours
HTML、CSS、JavaScriptの基礎を終えた方に最適!React入門の決定版!Reactについて知っておくべき基礎知識について体系的、かつ網羅的に学習して、最短でReactをマスターしよう!

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

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

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


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


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

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


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



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

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

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


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

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


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


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


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

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



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

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

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


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


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

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


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


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


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


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



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

上で挙げた2つを学べば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: 14.1.3

TypeScript: 4.6.4

Node.js: 18.17.0



↓全て表示↑少なく表示
 
Users Voice
ReactからNEXT.JSまでフォローされていて、これ一つでReactの基礎が学べると思います。ロジックの説明も詳しくされていておすすめです。 (参考:Udemy)

↓全て表示 ↑少なく表示
めちゃくちゃ詳しいかつ、わかりやすく解説されていて大満足です。 今後この講座を超えるReact講座が生まれることはないでしょう。 (参考:Udemy)

↓全て表示 ↑少なく表示
 
レクチャー内容
  1. はじめに
    • なぜReactなのか?
    • コース概要
  2. コースの進め方
    • Udemyでの学習の進め方
    • ★重要★資材のダウンロード & 受講準備
    • ★重要★コースで使用するVSCodeの拡張機能を準備しよう
    • VSCodeのショートカットの使い方について学ぼう
    • ChatGPTで疑問を解決しよう!!
  3. 【スキップ可】Reactで頻出のJavaScriptの記法
    • セクション紹介
    • npmコマンドの使い方
    • 本セクションのコードの実行方法
    • アロー関数の記法について学ぼう
    • ESModuleのExport/Importについて学ぼう
    • コールバック関数の挙動について学ぼう
    • DOMとイベントリスナについて学ぼう
    • 配列のmap、filterメソッドについて学ぼう
    • 分割代入について学ぼう
    • スプレッド演算子と残余引数について学ぼう
    • 三項演算子について学ぼう
    • truthyな値、falsyな値について学ぼう
    • Promiseについて学ぼう
    • await/asyncの使い方について学ぼう
  4. まずはReactに触れてみよう
    • Reactを動かしてみよう
    • Reactコンポーネントって何?コンポーネントを定義してみよう
    • 【2024/04/01追記】create-react-appからviteにプロジェクトの雛形を変更
    • Reactのプロジェクトの作成方法(create-react-appの使い方)
    • ★重要★本コースで使用するプロジェクトの使い方
    • コンポーネントにスタイルを当ててみよう
    • コンポーネントの分割方法
    • 【練習】コンポーネントの分割方法
    • 不要なタグを出力しないFragmentの使い方
    • JSX内でJSコードを実行してみよう
    • 【TIPS】式と文の違い
    • 【練習】JSX内で式を使ってみよう
    • propsでコンポーネントに値を渡してみよう
    • propsに色々な値を渡してみよう
    • 【練習&解答】propsで値を渡してみよう
    • 特別なプロパティ ~ props.children
    • propsの重要なルール
    • JSXの正体
    • React要素ツリーとコンポーネントツリー
    • セクションまとめ
  5. イベントリスナと状態管理(State)
    • セクション紹介
    • イベントに合わせて関数を実行してみよう
    • 開発でよく利用するイベントタイプ
    • イベントに合わせて画面表示を更新してみよう
    • 【重要】ステートとは?
    • 【重要】ステートとレンダリングの仕組み
    • 【複数のステート】ステート使用時の注意点!
    • 【更新は即時ではない】ステート使用上の注意点!
    • 【練習】ステートの処理を自分で記述してみよう
    • オブジェクト型のステートを使う際の注意点!
    • 【重要】オブジェクトのステートは新しいオブジェクトを設定する!
    • 【練習】オブジェクトのステートを更新
    • 配列のステートを使う際の注意点!
    • ステートとコンポーネントの関係
    • ステートを複数のコンポーネントで管理しよう!
    • 【練習】ステートの受け渡し
    • セクションまとめ
  6. 制御構文とフォームの制御
    • セクション紹介
    • 配列をリスト表示
    • 【重要】リストには必ずキーを設定
    • 【練習】リストにキーを設定してみよう
    • 配列のフィルターメソッドの使い方
    • 【練習】フィルターメソッドの使い方を練習してみよう
    • 条件分岐を設ける方法まとめ
    • コンポーネントのリファクタリング
    • 【Form】inputとtextareaの作成方法
    • 【Form】ラジオボタンの作成方法
    • 【Form】チェックボックスの作成方法
    • 【Form】複数選択チェックボックスの作成方法
    • 【Form】プルダウンの作成方法
    • Todoアプリを作ってみよう
  7. スタイリング
    • セクション紹介
    • インラインスタイルの使い方!
    • インラインスタイルの注意点!
    • 外部CSSのimportを使ったスタイリング
    • CSS Modulesを使ったスタイリング
    • 【styled-components】CSS-in-JSを使ったスタイリング
    • 【styled-components】【発展】CSS-in-JSを使ったスタイリング
    • 【練習&解答】styled-components
    • 【まとめ】Reactでのスタイルの適用方法
    • 【付録】ReactでのCSSフレームワーク【Part.1】
    • 【付録】ChakraUIを使ってみよう【Part.2】
    • 【付録】ChakraUIを使ってみよう【Part.3】
  8. ReactでDOM操作を行う方法
    • セクション紹介
    • 【createPortal】モーダルの作り方
    • 【Bubbling】Portalを使う際の注意点!
    • 【練習&解答】createPortalでトーストを作成してみよう
    • 【useRef】refでDOMを直接操作してみよう
    • 【useRef】refで動画プレイヤーを作成してみよう
    • 【useRef】refとは?refとstateの違い
    • 【forwardRef】他のコンポーネントのDOMにアクセスする方法
    • 【useImperativeHandle】refへのアクセスを限定する方法
    • 【練習&解答】refの使い方
    • セクションまとめ
  9. 【スキップ可】問題への対処法
    • セクション紹介
    • エラーの解消方法
    • デバッガーを使ってみよう
    • React Developer Toolsの使い方
    • Google検索の仕方
  10. 【発展】関数型プログラミング
    • セクション紹介
    • 関数型プログラミングとは?
    • 状態と処理の分離
    • 純粋関数
    • 不変性(immutability)【Part.1】
    • 不変性(immutability)【Part.2】
    • Reactと純粋関数
    • Reactにおける状態と処理の分離
    • Reactにおける不変性
    • 【まとめ】関数型プログラミング
    • JavaScriptコードと見比べてみよう
  11. 【React Hooks】様々な状態管理の方法
    • セクション紹介
    • useReducerを使ってみよう
    • useReducerとuseStateの違い
    • useReducerとuseStateの違い(関数型プログラミング視点)
    • 【練習&解答】useReducer
    • useContextでグローバルな値を管理しよう
    • useContextでstateを管理してみよう
    • useContextのリファクタリングをしてみよう
    • useContextを使う際の注意点!
    • useContextとuseReducerを組み合わせて使ってみよう
    • 【練習&解答】useContextとuseReducer
    • 【練習】useContextとuseReducer
    • 【解答】useContextとuseReducer
    • 【解答続き】useContextとuseReducer
  12. 【React Hooks】useEffectとカスタムフック
    • セクション紹介
    • useEffectとは?タイマーを作りながら学んでみよう
    • useEffectの依存配列の使い方
    • 【練習&解答】useEffect
    • useEffectのクリーンアップ処理の使い方
    • useEffectの実行タイミングをおさらいしよう
    • useLayoutEffectって何?useEffectとの違いについて学ぼう
    • useEffectの実行順を意識して実装してみよう
    • 独自のフックを作成してみよう
    • 【練習&解答】Custom Hook
    • 【発展】関数型プログラミングから見たuseEffectの使用ケース
  13. 【発展】ReduxとRedux Toolkit
    • セクション紹介
    • Reduxとグローバルな状態管理
    • ★本セクションのサンプルコードの実行方法
    • Reduxを使ってみよう
    • Reduxの状態管理方法について学ぼう
    • 複数のReducerを使う方法
    • Action CreatorでActionを定義してみよう
    • Redux ToolkitでReduxを書き換えてみよう
    • Redux Toolkitにおけるミュータブルな値の変更
    • Immerを使ったミュータブルな値の変更
    • Redux Thunkとは?Redux Middlewareとの関係
    • Redux Thunkで非同期処理を記述してみよう
    • 非同期処理のステータスを画面に表示してみよう
    • Redux Middlewareを作成してみよう
    • セクションまとめ
  14. 【スキップ可】クラスコンポーネント
    • セクション紹介
    • クラスコンポーネントとは?
    • クラスコンポーネントを定義してみよう
    • クラスコンポーネントでの状態管理
    • ライフサイクルメソッドとは?
    • Error Boundaryの実装方法
  15. 【発展】パフォーマンスの最適化
    • セクション紹介
    • 【レンダリング】画面が更新されるまで
    • Stateの比較処理(Object.is)
    • 【TIPS】StrictModeとは?
    • 子コンポーネントの不要なレンダリング
    • React.memoを使った不要なレンダリングの防止
    • useCallbackを使った関数のメモ化
    • useCallbackの依存配列の使い方
    • useMemoを使った値のメモ化
    • セクションまとめ
    • 【React18】useTransitionでUIのパフォーマンス改善
    • 【React18】useDeferredValueでUIのパフォーマンス改善
  16. Rest APIを使ったサーバーとの通信
    • セクション紹介
    • REST APIとは?
    • JSONとは?
    • JSON ServerでモックアップAPIを作成
    • Axiosを使ってサーバーからデータを取得しよう
    • 取得したデータを画面に反映してみよう
    • GUIでリクエストの状態を確認しよう
    • 更新リクエストをサーバーに送信してみよう
    • リクエストと画面処理を統合しよう
    • 【発展】ダイナミックインポートとは?
    • 【発展】コンポーネントのダイナミックインポート
  17. Next.js 14(App Router)を使ったアプリの構築方法
    • Next.jsについて学ぼう
    • Next12(Page Router)を学びたい方へ
    • Next.jsとは?Next.jsの概要を学ぼう
 
Preview Video
   

【Reactアプリ開発】3種類のReactアプリケーションを構築して、Reactの理解をさらに深めるステップアップ講座

【Reactアプリ開発】3種類のReactアプリケーションを構築して、Reactの理解をさらに深めるステップアップ講座
発売日 2022/06/25
(4.7)

5 total hours
Reactを使って「ポケモン図鑑」「ブログ」「ノートメモアプリ」の3種類のアプリを構築する講座です。Reactの基礎は学び終えたからもっと実践的なアプリケーションを作りたい!応用が効くアプリ開発力を鍛えたい!という方は必見の講座内容です。

Reactの基礎を学び終え、3種類のアプリ開発をすることで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記法等)


↓全て表示↑少なく表示
 
Users Voice
タイムパフォーマンスの良い内容でした。 プログラミングの面白いところが詰まっている内容なのでやっていて楽しいです。 説明不足に感じることもありますが、いちいち説明が入るより、テンポが良くていいです。分からないことはQ&AやChatGPTで自己解決できる内容だったので、自分にはちょうどよいレベルの講座でした。 (参考:Udemy)

↓全て表示 ↑少なく表示
3つのアプリケーションでReactの基礎を網羅的に学ぶことができました。 Firebaseを使った連携も講座に含まれており満足しています! (参考:Udemy)

↓全て表示 ↑少なく表示
 
レクチャー内容
  1. はじめに
    • 本講座で学ぶこと・デモ
    • 本講座を学習する流れ
  2. React開発をする上で必要なセットアップ
    • VSCodeをインストールしよう
    • Node.jsって何?
    • Node.jsをインストールしよう
    • React開発効率を爆上げするセットアップ
  3. 【アプリ①】ポケモン図鑑アプリケーションを構築してみよう
    • 【ポケモン図鑑】完成品のデモから
    • Reactの環境開発構築からはじめよう
    • ポケモンAPIってなに?
    • 実際にポケモンのデータを取得してみよう
    • データ読み込み時のローディング設定をしよう
    • 詳細なポケモンデータを取得する準備をしよう
    • ポケモンの詳細なデータを取得してみよう
    • Cardコンポーネントを作成しよう
    • ポケモンデータを実際のページに出力してみよう
    • ポケモン達をグリッドで表示してみよう
    • CardコンポーネントをCSSでスタイリングしよう
    • 簡単にナビゲーションバーを作成しよう
    • 次のページのポケモンを検索するボタンを作成しよう:その1
    • 次のページのポケモンを検索するボタンを作成しよう:その2
    • 前のページのポケモンを検索するボタンを作成しよう
    • ページをめくるボタンをCSSでスタイリングしよう
  4. 【アプリ②】ReactとFirebaseでブログを構築してみよう
    • 【ブログ】完成品のデモから
    • Reactの環境開発構築からはじめよう
    • Firebaseのセットアップをはじめよう
    • FirebaseとReactを連携させる準備をしよう
    • Reactにおけるルーティング設定をしてみよう
    • ナビゲーションバーの雛形を作成しよう
    • CSSでナビゲーションバーをスタイリングしよう
    • fontawesomeでReactでアイコンを利用する方法
    • Googleログイン機能を実装してみよう
    • 認証状態を保存する変数をローカルストレージに保存してみよう
    • Googleログアウト機能を実装してみよう
    • ログインとログアウトボタンを切替えてみよう
    • ブログ記事投稿ページを作成しよう
    • ブログ記事投稿にCSSを適用させよう
    • タイトルと記事内容の文字列を取得してみよう
    • Cloud Firestoreにデータを格納してみよう
    • Firestoreにデータ書き込みができるようにルールを変更しよう
    • Homeコンポーネントを作成しよう
    • HomeコンポーネントにCSSを適用してみよう
    • Could Firestoreからブログデータを取得してみよう
    • map関数でブログデータを1つずつ取り出して表示しよう
    • ログインしていないのに記事が書けるバグを修正しよう
    • ブログ記事を削除する関数を作成しよう
    • 誰でも記事が削除できてしまうバグを修正しよう
    • 【追加】ログインしていない時にホームに行くとエラーになるバグの修正
    • リロードしても自動的にログインするように修正しよう
  5. 【アプリ③】ノートアプリを構築してみよう
    • 【ノートアプリ】完成品のデモから
    • React環境開発から整えよう
    • ノートメモアプリに必要なコンポーネントを用意しよう
    • Sidebarコンポーネントから作成しよう
    • SidebarをCSSでスタイリングしよう
    • 新しいノートを追加する関数を作ってみよう
    • map関数でノートを全て出力してみよう
    • react-uuidを利用してkeyを一意に決定しよう
    • 指定したノートを削除する関数を作成しよう
    • ノートを選択したらハイライトされる仕組みを作ろう
    • Mainコンポーネントを作成しよう
    • MainコンポーネントをCSSでスタイリングしよう
    • 選択したノートをプレビューに出力してみよう
    • ノートを編集する機能を実装しよう:その1
    • ノートを編集する機能を実装しよう:その2
    • ノート編集の流れをもう一度おさらいしよう
    • マークダウンエディタを実装してみよう
    • 修正日が新しい順にノートを並び替えよう
    • ノート内容をローカルストレージに保存してみよう
    • ページを開くとノートの1番目が選択された状態にしよう
  6. ボーナスレクチャー
    • 最後まで受講していただいた方へのお礼
    • ボーナスレクチャー
 
Preview Video
   

Reactに入門した人のためのもっとReactが楽しくなるステップアップコース完全版

Reactに入門した人のためのもっとReactが楽しくなるステップアップコース完全版
発売日 2021/02/08
(4.8)

8 total hours
「React何となく分かったけど次どうしたら良いか分からない」という人がステップアップするために知っておくべきことを順序立ててハンズオン形式で詰め込みました。本コースを終える頃にはもっとReactのことを好きになっていると思います。

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を使用し仕事をしているエンジニアです(フリーランス→会社設立)

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

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



↓全て表示↑少なく表示
 
Users Voice
普段ほとんどレビューはしませんが、大変良かったためレビューさせていただきます。 普段はバックエンド開発を担当しているため、フロントの知識は皆無でした。本コースを受講したおかげでReactに対する不安が軽減され、むしろフロントの方が楽しいなと感じました笑 入門コースと合わせて受講しましたが、ここまで完走できたのは初めてです。必ず〇〇を使うとこういう課題が解決できるという説明があるので、よりイメージがしやすかったです。 素晴らしい教材を作っていただきありがとうございました。 (参考:Udemy)

↓全て表示 ↑少なく表示
入門編に続いて受講しました。どちらも良く練られたカリキュラムで分かりやすいと思いました。ステップアップコースの方は内容が盛りだくさんで、動画を見ながらハンズオンを進めただけでは業務で使えるほど十分な理解はできませんでしたが、重要なポイントはインプットできたと思います。何よりReactの勉強をしたいと感じることができたのはよかったです。今後は自分なりに実践を積みながら勉強を続けていきたいと思います。 (参考:Udemy)

↓全て表示 ↑少なく表示
 
レクチャー内容
  1. はじめに
    • 講師挨拶
    • 本コース受講の前提条件
    • コース全体像
  2. CodeSandboxについて
    • [追加]CodeSandboxの変更についてとStackBlitzの紹介
  3. 再レンダリングの仕組みを知りレンダリングを最適化する
    • 注意事項(Reactのバージョン)
    • 理解度の確認
    • レンダリング確認用のコーディング
    • 模擬的にレンダリングコストの高いコンポーネントを作成
    • 再レンダリングが起きる条件
    • レンダリング最適化1(memo)
    • レンダリング最適化2(useCallback)
    • おまけ(useMemo)
  4. 様々なCSSのあてかたに触れる
    • Inline Styles
    • CSS Modules
    • Styled JSX
    • styled components
    • Emotion
  5. ルーティングの基礎(React Router)
    • React Routerバージョンの注意点
    • React Router導入&事前準備
    • 基本的なページ遷移
    • ネストされたページ遷移
    • ルート定義の分割
    • URLパラメータを扱う
    • クエリパラメータを扱う
    • stateを渡すページ遷移
    • Linkを使わないページ遷移
    • 404ページを用意する
  6. コンポーネントの分割方法(Atomic Design)
    • Atomic Design概要
    • Atomの作成
    • Moleculeの作成
    • Organismの作成1
    • Organismの作成2
    • Templateの作成
    • Pageの作成
    • Atomic Designに取り組む上でのポイント
  7. グローバルなstate管理を知る
    • グローバルなstate管理がなぜ必要か
    • ツラい例を実装してみる
    • Contextでのstate管理(基本的な使い方)
    • Contextでのstate管理(ユーザー情報の設定と参照)
    • Contextでのstate管理(再レンダリングの最適化)
    • Recoilでのstate管理(Recoilの紹介)
    • Recoilでのstate管理実践
  8. JSONPlaceholderでのデータ取得解説
    • JSONPlaceholderとは
    • JSONPlaceholderからaxiosでデータを取得してみる
  9. React × TypeScript(基礎編)
    • TypeScriptとは
    • 基本的な型
    • 引数の型指定
    • 返却値の型指定
    • 変数の型指定
    • 設定ファイル(tsconfig)をいじってみる
  10. React × TypeScript(実践編)
    • React × TypeScriptの準備
    • 型がないせいでバグっているアプリの例
    • 取得データの型を定義しバグを防ぐ
    • propsに型を定義しよう
    • 型定義を効率的に管理しよう
    • コンポーネント自体の型定義
    • オプショナルチェイニングでnull安全なコードを書く
    • 補足(ライブラリの型定義について)
  11. カスタムフック
    • カスタムフックとは
    • カスタムフックを使わないデータ取得例
    • カスタムフック作成
    • カスタムフックを呼び出す
  12. 実践アプリ作成(Chakra UI)
    • ソースコードのリポジトリ
    • 注意事項
    • 総まとめとして作成するアプリ
    • Chakra UIバージョンの注意点
    • Chakra UIの紹介
    • Globalなスタイルを設定する
    • ルーティングの作成
    • ヘッダーの作成
    • ヘッダーの作成(コンポーネント分割)
    • ヘッダーの作成(ルーティング機能実装)
    • ログイン画面の作成
    • ログイン画面の作成(コンポーネント分割)
    • ログイン機能の実装
    • メッセージ表示機能の実装
    • ユーザー一覧画面の作成
    • ユーザー一覧取得機能の実装
    • ユーザー詳細モーダル画面の作成
    • ユーザー詳細モーダル機能の実装
    • ログインユーザー情報をContextに保持してみる
    • 管理者ユーザーを想定してフラグをcontextに保持してみる
    • 管理者ユーザーのみユーザー情報を編集できる導線の作成
  13. さいごにとこれから
    • さいごにとこれからのアドバイスと小話
    • ボーナスレクチャー
   

【Web3.0アプリ開発入門】ReactとSolidity言語で簡単ブロックチェーンWebアプリ開発を体験してみよう!

【Web3.0アプリ開発入門】ReactとSolidity言語で簡単ブロックチェーンWebアプリ開発を体験してみよう!
発売日 2022/03/29
(4.5)

3.5 total hours
React×SolidityでDappsと呼ばれるブロックチェーンWebアプリケーションを開発します。Web3.0の基礎用語から丁寧に解説し、仮想通貨やメタマスク、スマートコントラクトの概念を網羅的に学べるWeb3.0完全入門パック

Dappsと呼ばれる分散型ブロックチェーンアプリを開発します。

2022~2024年にかけてはメタバース(Web3.0)全盛期と言われています。

ひと昔前のインターネット黎明期みたいなものです。


過去のインターネット時代を制した者は早い段階で情報に触れ、学習して発信していた。

ということは異論はないでしょう。


今の時代の黎明期がまさに「Web3.0」です。仮想通貨やメタマスクはもちろん、ブロックチェーンやスマートコントラクトと呼ばれる小難しい概念をいち早く理解し、学習と発信をしましょう。


ブロックチェーンエンジニアってどんなことをプログラムしているのか?

そのブラックボックス化している中身をハンズオン形式で体験したい方は必見の内容です。


・Web3.0に興味がある

・ブロックチェーンエンジニアに興味がある

・Solidity言語で簡単なDappsを作ってみたい

・最新のWeb3.0技術をキャッチアップしておきたい

・ブロックチェーンやスマートコントラクトの知識を常識として知っておきたい


Web3.0の知識0でも大丈夫です。

図解で丁寧に解説しています。最後にはメタマスク間でのイーサ(仮想通貨)のやり取りを

Reactとスマートコントラクトでハンズオンで実装します。


↓全て表示↑少なく表示
 
Users Voice
基本的にはわかりやすく良かったです. ただ、最後の成果物においては、スマートコントラクトの方では送金は実施していないという旨(metamask の送金機能を利用している)を説明した方が混乱しないかなと思いました. (私はここで混乱してしまいました) (参考:Udemy)

↓全て表示 ↑少なく表示
Solidityの文法を全体的に眺めたことがありました。 改めて、セクション4「【練習】スマートコントラクトを実装してみよう」でこれまで見てきた文法が整理されました。 大変良かったです。 (参考:Udemy)

↓全て表示 ↑少なく表示
 
レクチャー内容
  1. はじめに
    • 本講座で学ぶこと
    • 本講座の学習の流れ
  2. ブロックチェーン基礎入門
    • ブロックチェーンって何?
    • ブロックチェーンの仕組み
    • なぜブロックチェーンが必要なのか
    • ブロックチェーンと仮想通貨の関係
  3. Solidity入門
    • Solidity言語とスマートコントラクト
    • Remix IDEでコントラクト開発環境を構築しよう
    • Solidityでスマートコントラクトを構築してみよう
    • Solidityで関数を宣言してみよう
    • コンパイルとデプロイをしてガス代を確認してみよう
    • Solidityにおけるローカル変数を知ろう
    • ステート変数と基本的な型を知ろう
    • Struct型の意味を知ろう
  4. 【練習】スマートコントラクトを実装してみよう
    • ホテル予約のスマートコントラクト実装を開始しよう
    • ホテルを予約する関数を作ってみよう
    • 満室かもしくはETHが足りない場合の条件分岐を実装しよう
    • 実際にデプロイしてホテルを予約してみよう
    • modifierを使ってリファクタリングしてみよう
    • eventを使ってSolidityでログを出力してみよう
  5. 【実践】ブロックチェーンWebアプリを開発してみよう(レイアウト作成編)
    • 完成品のデモ
    • 開発用プロジェクトを準備しよう
    • Reactの中身を整理しよう
    • ナビゲーションバーを作成しよう
    • Mainコンポーネントを作成しよう
  6. 【実践】ブロックチェーンWebアプリを開発してみよう(スマートコントラクト編)
    • hardhatでスマートコントラクト開発環境を構築しよう
    • Solidity言語でコントラクトを記述してみよう
    • ブロックチェーンにトランザクションを追加する関数を作成しよう
    • 実際に仮想通貨の送金と受け取りができるイベントを作成しよう
    • コントラクトをデプロイするファイルを作成しよう
    • メタマスクをインストールしよう
    • Alchemyでテストネットワークを構築しよう
    • hardhat.config.jsを修正してAlchemyと連携してみよう
    • 疑似的なETHをメタマスクに追加してみよう
    • スマートコントラクトをデプロイしてみよう
  7. 【実践】ブロックチェーンWebアプリを開発してみよう(Reactとコントラクト連携編)
    • ethers.jsをインストールしてみよう
    • 自作したスマートコントラクトを取得する関数を作ろう
    • トランザクションを全てのコンポーネントに提供しよう
    • メタマスクが連携されているか確認する関数を作ろう
    • メタマスクウォレットを連携する関数を作ってみよう
    • 取引データ(トランザクションデータ)のやり取りをする関数を作っておこう
    • フォームで打ち込んだ文字列を取得してみよう
    • フォームのバリデーションチェックをしてみよう
    • メタマスク間で通貨のやりとりをするロジックを作成しよう
    • スマートコントラクトで作成したブロックチェーン追加の関数を利用しよう
    • 実際に送金者と受信者で通貨のやり取りをしてみよう
  8. ボーナスレクチャー
    • 最後まで受講いただいた方へ
    • ボーナスレクチャー
 
Preview Video
   

Udemyで無料で学べるReact講座一覧

以下の講座は無料で学習が可能。

無料コースでは、質問ができない、学習した証の修了証書が発行されない、といった違いがありますが、動画コンテンツはすべて利用可能。

有料講座ほどの内容の幅はないですが、動画学習の取っ掛かりとしてまずこちらを試してみるのもおすすめです。

最速で学ぶFirebase + React Hooks (TypeScript)

最速で学ぶFirebase + React Hooks (TypeScript)
発売日 2020/09/15
(4.4)

1.5 total hours
FirebaseのCloud Firestore,Authentication,Hosting機能とReact Hooks/TypeScriptを使ってToDoアプリのハンズオン

本コースでは、はじめて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アプリを通じて基礎的な連携方法について学んでいきます。



↓全て表示↑少なく表示
 
Users Voice
現在はReact18であるため環境構築の順番が大切でした。React18 + TypeScript + Firebase8 + ReactRouter5 + MateialUI4の順番で環境構築して成功。教材動画の環境を再現することができました。$ npx create-react-app . --template typescript $ npm i firebase@8.10.0 $ npm i react-router-dom@5.3.0 @types/react-router-dom@5.3.1 $ npm i @material-ui/core --legacy-peer-deps $ npm i @material-ui/icons --legacy-peer-deps (参考:Udemy)

↓全て表示 ↑少なく表示
サクッとデプロイまで学べる無料コンテンツとして質が高いコースだと思います。 1点、コードを記載する際に、動画上では講師が元々用意しているコードをコピペしていくため、受講者はコードを打つセクションのたびに一時停止して講師がコピペしたコードを打つ必要がある場面が多々あるため、その点のみ考慮して星4とさせていただきました。 しかし、上記を考慮しても質の高いコースには間違いありません。 (参考:Udemy)

↓全て表示 ↑少なく表示
 
レクチャー内容
  1. はじめに
    • はじめに
    • TypeScript無料コース
    • コースに必要なツールのインストール
    • 本コースのSource code
    • 2022年版 React学習ロードマップ
  2. ToDo アプリのハンズオン (Firebase + React Hooks/TypeScript)
    • firebase version
    • [注意] react-router-dom ver6.0以降 + "--legacy-peer-deps"オプション
    • Reactプロジェクト作成
    • vs-icons 設定
    • Firebaseのアカウント
    • databaseURL
    • [注意点] firebase import文
    • FirebaseとReactの連携
    • Firebaseデータベース
    • FirebaseのデータをReactでレンダリング
    • タスク作成機能
    • TaskItemコンポーネント
    • [更新]justify -> justifyContent
    • CRUD
    • CSS
    • React-Router-DOM
    • try catch
    • Firebase認証機能(Login)
    • Firebase認証機能(Log out)
    • Deploy
  3. 更に学びたい人向け
    • Firebase ver 9.0〜 対応
    • ボーナスレクチャー
 
Preview Video
   

最短・最速で学ぶ Firebase Hosting + React Todoアプリ実装編 (React Hooks)

最短・最速で学ぶ Firebase Hosting + React Todoアプリ実装編 (React Hooks)
発売日 2020/02/18
(4.2)

1 total hour
話題のFirebaseを使ってWebアプリケーションを公開しよう & Todoリスト実装 with (React, React Hooks, ContextAPI, Function Component)


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での認証処理であったり、

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

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

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



↓全て表示↑少なく表示
 
Users Voice
内容はシンプルなのですが、全くの初めての人はコードの内容を理解しずらいのかとおもいました。 (参考:Udemy)

↓全て表示 ↑少なく表示
感想はVueの無料講座と同じです。チュートリアルとして、閲覧しました。 (参考:Udemy)

↓全て表示 ↑少なく表示
 
レクチャー内容
  1. はじめに
    • はじめに
  2. Firebase Hostingを学ぶ
    • 第2回 NodeJSのインストール
    • 第3回 Reactアプリの作成
    • 第4回 FIrebaseへデプロイ
  3. Todoリストの作成
    • 第5回 Todoリスト概要
    • 第6回 Bootstrapのインストール
    • 第7回 Formの作成
    • 第8回 リスト表示 + 削除ボタンの追加
    • 第9回 完了・未完了 変更処理の追加
    • 第10回 Firebaseへデプロイ
  4. グローバルステート管理
    • 第11回 Todoリスト コンポーネント化
    • 第12回 ContextAPIを使ったグローバルステート管理
   

React Nativeの講座 2つ

ReactはWebフロントエンドだけでなく、スマホネイティブアプリ開発向けのReact Nativeとしても展開されていますね。

Android、iOSアプリを共通コードで開発可能で、効率的なマルチプラットフォームアプリ開発として最近注目度も上がっています。

以下がReact Nativeの講座の詳細です。

React Native, Firebase, Expo でアプリ開発をゼロから始めよう!

React Native, Firebase, Expo でアプリ開発をゼロから始めよう!
発売日 2017/10/10
(4.7)

41.5 total hours
React NativeとExpoを使ったモバイルアプリ開発のオールインワン講座。UIデザイン・開発・リリースまで、アプリ開発の全行程を一気に身につけましょう!<React Hooks 対応 / Git も学べる>

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年と2023年に再収録のリニューアルを実施しています。
そのため、コース後半にはリニューアル前の動画が残っています。リニューアル公開時に受講されていた方が困らないための措置ですが、コース紹介ページには収録時間が合計して表示されていること予めご了承下さい。



↓全て表示↑少なく表示
 
Users Voice
ボリュームが多い分、デザインを行うところからリリースまでを一通り手を動かしながらしっかりできるので、モバイルの開発をこれから行う人にとってとても良い経験になります。iOSとAndroidの両方に触れられるところもとても良いです。 (参考:Udemy)

↓全て表示 ↑少なく表示
react初心者でしたが、分かりやすく、基礎的な内容を理解することができました。ハンズオンのレベルもちょうど良かったです。 (参考:Udemy)

↓全て表示 ↑少なく表示
 
レクチャー内容
  1. イントロダクション
    • アプリ開発の6の工程
    • このコースを修了したら作れるアプリ
  2. プランニング
    • コンセプトとワイヤーフレーム
  3. UIデザイン
    • Figmaをインストール
    • Figmaの基本
    • ヘッダーのUIデザイン
    • メモ一覧のUIデザイン
    • コンポーネントでデザイン作業を効率化する
    • プロトタイプを作成する
    • ボタンのUIデザイン
    • UIデザインのまとめ
  4. マークアップの練習
    • VSCode のインストール
    • まずはHTMLで構造化を学ぶ
    • マークアップを始める
    • メモ一覧のマークアップ練習
  5. スタイリングの練習
    • スタイルシートの基本
    • HTML要素をスタイリングする
    • 複雑なスタイリング
    • ボタンのスタイリング
  6. プログラミングの練習
    • プログラミングの基本
    • 関数の基本
    • 演算子の基本
    • 条件分岐
    • 繰り返し処理
    • 練習
  7. Git と Github
    • GitとGithubのメリット
    • GitのインストールとGithubのアカウント作成
    • Windows / TerminalとGitのインストール
    • Windowsのコマンド
    • ターミナルでの操作
    • Gitの初期化
    • Gitの設定を変更する
    • Gitで変更履歴を追加してみる
    • SSH Key に関する注意事項
    • SSHを使ったGithubとの連携
    • SSHパスフレーズを省略せずにGithubと連携する
    • Windows / Gitの初初期化からGithubとの連携まで
    • テキスト版教材
  8. ★アプリ開発の環境構築
    • Expoとは
    • NVS と Node.js
    • Xcode と iOS Simulator
    • Android Studio と Emulator
    • emulatorコマンド(Windowsの場合)
    • Watchman のインストール(Mac)
  9. ★ React Native アプリ開発の基本
    • Expo で作る初めてのアプリ
    • Expo のファイル構成
    • Git と Github で変更履歴を追跡
    • ESLint の導入
    • Typescript とは
    • React Native と Expo の関係性
  10. ★ 初めてのコンポーネント
    • コンポーネントを作成して表示する
    • プロパティを受け渡す(children)
    • プロパティを受け渡す(boolean)
    • プロパティを受け渡す(TextStyle)
  11. ★ マークアップとスタイリング
    • Expo Router で画面を表示する
    • メモの一覧画面をマークアップ
    • ヘッダーのスタイリング
    • メモリストのスタイリング
    • ボタンのスタイリング
    • UIをコンポーネントに切り出す
    • リダイレクトの設定
    • メモの詳細画面をマークアップ
    • メモの詳細画面をスタイリング
    • アイコンを表示する
    • アイコンフォントを組み込む
    • アイコンの表示を変更可能にする
    • メモの編集画面の構造化とスタイリング
    • KeyboardAvoidingView でUIバグを修正
    • メモの作成画面
    • ログイン画面のマークアップ
    • ログイン画面のスタイリング
    • 会員登録画面とボタンコンポーネント
  12. ★ インタラクションとナビゲーション
    • ボタンをインタラクティブにする
    • そのほかのインタラクション
    • ログインと会員登録を切り替える
    • メモの一覧画面へ遷移する
    • すべての画面をつなぐ
    • Stackナビゲーションの導入
    • ヘッダーのカスタマイズ
    • 履歴を残さない画面遷移とログアウトボタン
    • useEffectで副作用を入れ込む
    • React Hooks とは
    • useState で値を保持する
    • Eメールとパスワード入力を改善
  13. ★ 機能の実装
    • Firebase を始める
    • 認証サービスとデータベースとの初期化
    • envファイルで環境変数を管理する
    • 会員登録を実装する
    • ログインを実装する
    • ログイン状態を監視する
    • ログアウトボタンの追加
    • Firestore を始める
    • Firestore にデータを追加する
    • ユーザーごとにデータを保存する
    • バグ修正(KeyboardAvoidingView)
    • データの取得と監視
    • データの型を定義する
    • 取得したデータを表示する
    • FlatList を使ったリストの最適化
    • 画面遷移時にパラメータを渡す
    • メモの詳細画面を実装する
    • メモの編集画面を実装する
    • バグ修正
    • メモの削除機能を実装する
    • Firestore のルールでデータを保護する
    • ラップアップ
  14. ★ リリース
    • 画像の準備とビルド設定
    • EASを利用したビルド
    • ストアの設定と審査提出(iOS)
    • ストアの設定と審査提出(Android)
  15. ーーー 2023年10月以前の内容 ーーー
    • こちらは古いコンテンツです
  16. <旧>アプリ開発の環境構築
    • Expoとは
    • M1 Mac をお使いの方へ
    • Node.js のインストール
    • Expo のインストール
    • Xcode のインストール
    • M1 Mac での Android Emulator
    • Android Studio のインストール
    • emulatorコマンド(Windowsの場合)
  17. <旧>React Native アプリ開発の基本
    • Expo プロジェクトの新規作成
    • Expo でアプリを共有する
    • Expo の基本的なファイル構成
    • Git でファイルの変更履歴を追跡
    • ESLint airbnb 設定ファイルのバグ
    • ESLint のインストール
    • Expo における Git のデフォルトブランチ
    • コンポーネントの基本
    • コンポーネントを作成する
    • React Props の仕組み
    • props で値を受け渡す
    • コンポーネントのスタイルを上書きする
  18. <旧>アプリ開発・構造化とスタイリング
    • メモの一覧をマークアップ
    • ヘッダー(AppBar)のスタイリング
    • メモのリストアイテムをスタイリング
    • ボタンのスタイリング
    • コードをコンポーネントとして抽出する
    • コードをスクリーンとして抽出する
    • メモの詳細画面をマークアップ
    • メモの詳細画面をスタイリング
    • アイコンを表示する
    • いろいろなアイコンを表示する
    • カスタムアイコンを作成する
    • メモの編集画面の構造化とスタイリング
    • KeyboardAvoidingView でテキスト領域を調整
    • メモの作成画面を作成する
    • KeyboardAvoidingView のバグ
    • ログイン画面のマークアップ
    • ログイン画面のスタイリング
    • サインアップ画面を作成する
    • ユーザーのアクションを受け取る
  19. <旧>アプリ開発・ナビゲーションの実装
    • React Navigation のバージョン
    • React Navigation をインストール
    • ナビゲーションを導入して画面をつなぐ
    • iOS Simulator リロードのショートカットについて
    • すべてのスクリーンを登録する
    • ボタンをタップして画面を移動する
    • 履歴をリセットしながら画面を移動する
    • iOS と Android のアニメーションを統一する
    • React Hooks
    • useState を使って状態を保存する
    • TextInput のオプション
  20. <旧>アプリ開発・機能の実装
    • Firebase を始める
    • 会員登録を実装する
    • ログインを実装する
    • ログイン状態を監視する
    • ログアウトを実装する
    • データベースにデータを保存する
    • ユーザーごとにメモを保存する
    • データベースからデータを取得する
    • データをメモの一覧として表示する
    • 効率的なリストのレンダリング
    • メモの詳細画面でデータを取得する
    • メモの詳細画面でデータを監視する
    • メモの編集画面を実装する
    • メモが0件の場合のUX
    • ローディング状態の表示
    • ローディングコンポーネントでUX改善
    • メモの削除を実装する
    • エラーメッセージを翻訳する
    • Firestore のルール設定でデータ保護
   

【2023年最新版】React Native入門:ニュースアプリを作りながら覚えよう

【2023年最新版】React Native入門:ニュースアプリを作りながら覚えよう
発売日 2019/04/27
(4.8)

10 total hours
Webの開発経験はあるけどアプリの開発は初めてという方、エンジニアになりたての人にお薦めのReact Native入門講座。2019年に導入されたHooksの記法にも対応。React Native現場歴3年の講師が基礎から丁寧に解説します。

~~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の説明が漏れていたので修正しました


↓全て表示↑少なく表示
 
Users Voice
React Nativeの基本的な使い方について、分かりやすく学ぶことができた。解説も丁寧なので、初心者でも特につまづくことなくコースを進めていくことができると思う。 ただし、すでにReactを学んだことのある人にとっては、ほとんど内容が被ってしまうため、物足りなさを感じるかもしれない。 (参考:Udemy)

↓全て表示 ↑少なく表示
アプリ開発に興味があったので受講したが、説明とテンポがよくスムーズに学習することができた。少し、コードが動かない箇所があったが、Githubを参照しながら進めることで問題なく最後まで受講することができた。 (参考:Udemy)

↓全て表示 ↑少なく表示
 
レクチャー内容
  1. はじめに
    • 本コースの概要
    • 講師の自己紹介
    • React Nativeについて
    • Expoとは
  2. 環境構築をしてさっそく作ってみよう
    • 事前に必要なツールを用意する
    • Expo CLIを触ってみる
    • Expoの新規プロジェクトを作ってみる
    • シミュレーターで実行する
    • スマホ実機で実行する
    • Prettierでコードを自動整形する
    • まとめ
  3. UIコンポーネントを作ってみよう
    • スタイル調整の基礎 - boxを描いてみる
    • レイアウトの区画を整理する - flex-boxについて
    • Imageコンポーネントで画像を表示する
    • Textコンポーネントで文字を表示する
    • コンポーネント化してUIを再利用可能にする
    • (補足) export defaultについて
    • propsで親から子にデータを渡す
    • まとめ
    • 補足:flex boxについて
  4. リスト表示を作ってみよう
    • ダミーデータを読み込む
    • ScrollViewで一覧表示
    • FlatListで一覧表示
    • まとめ
  5. API経由でニュース記事を取得してみよう
    • stateとpropsの違い
    • useStateでstateを扱う
    • News APIを呼び出す
    • ConstantsにAPIキーを保存する
    • まとめ
  6. 画面遷移を作ってみよう
    • 本セクションの概要
    • React Navigationのインストール
    • アプリにReact Navigationを導入する
    • Stack Navigatorを用いて画面遷移する
    • 遷移元から遷移先にパラメータを渡す
    • Bottom Tab Navigatorで画面下にタブを表示する
    • タブにアイコンを表示する
    • まとめ
  7. Reduxで状態を管理する
    • Reduxについて
    • Redux Tool Kitのインストール
    • Storeを用意する
    • Sliceを作る
    • actionをdispatchする
    • storeの情報を表示する
    • クリップ一覧画面を作る
    • redux-persistでreduxの状態を永続化する
    • まとめ
  8. アプリをストアに公開してみよう
    • Expoでのストア用ビルドの手順
    • EASの初期設定
    • androidのビルド
    • iOSのビルド
    • まとめ
  9. おわりに
    • おわりの挨拶
  10. 【旧バージョン】環境を構築してさっそく作ってみよう
    • このセクションの概要
    • Expoのインストール(2022年8月更新)
    • シミュレーターで動かす
    • スマホ実機で動かす
    • コードを変更して確認する
    • Prettierでコードを自動整形する
    • まとめ
    • 参考資料
    • 環境構築のトラブルシュート
  11. 【旧バージョン】React Nativeの概要と使い所について
    • このセクションの概要
    • React Nativeの概要
    • Expoのメリット・デメリット
    • Expoで開発するときに気をつけること
    • 本セクションのまとめ
  12. 【旧バージョン】UIを作ってみよう
    • 本セクションの概要
    • これから作るアプリの完成イメージ
    • コンポーネントについて
    • 箱を描いてみる
    • Styleを整える
    • レイアウトの区画整理
    • 画像を表示する
    • テキストを表示する
    • レイアウトの調整
    • 本セクションのまとめ
    • 参考資料
  13. 【旧バージョン】コンポーネントを作ってみる
    • 本セクションの概要
    • コンポーネントに切り出す
    • props経由でデータを渡す
    • ニュース記事の一覧表示
    • FlatListで一覧を表示する
    • 本セクションのまとめ
    • 参考資料
  14. 【旧バージョン】API経由でデータを取得してみよう
    • 本セクションの概要
    • HooksのuseStateについて
    • HooksのuseEffectについて
    • News APIのアカウントを作る
    • Axiosを使ってAPIを実行する
    • 【補足】ニュースの画像が表示されない場合
    • Function componentとClass componentについて
    • 本セクションのまとめ
    • 参考資料
  15. 【旧バージョン】画面遷移を実装してみよう
    • 本セクションの概要
    • React Navigation v5のインストール
    • StackNavigatorの利用
    • 画面遷移を実装
    • ニュース記事を表示するためにWebviewを表示する
    • 画面遷移時にパラメータを渡す
    • 本セクションのまとめ
    • 参考資料
  16. 【旧バージョン】Reduxを使ってクリップ機能を作ろう
    • 本セクションの概要
    • Reduxについて
    • Reduxのインストール
    • Actionの実装
    • Reducerの実装
    • Storeの実装
    • デバッガーのインストール
    • ActionのDispatch
    • 画面の下にタブを表示する
    • タブにアイコンを表示する
    • Reduxから状態を取得して画面に表示する
    • クリップ一覧から記事詳細への画面遷移
    • クリップボタンにアイコンを表示する
    • Reduxを永続化して端末に保存する
    • 本セクションのまとめ
    • 参考資料
  17. 【旧バージョン】アプリの仕上げ
    • 本セクションの概要
    • スプラッシュスクリーン
    • アプリのアイコン
    • ローディング画面
    • 本セクションのまとめ
    • 参考資料
  18. 【旧バージョン】アプリをストアに公開しよう
    • 本セクションの概要
    • Expoでアプリを配布する方法
    • 社内や知人に向けて配布する
    • release-channelについて
    • iOSの申請用アプリをビルドする
    • iOSのipaファイルのアップロードとストア申請
    • Androidの申請用アプリをビルドする
    • Androidのapkファイルのアップロードとストア申請
    • 本セクションのまとめ
    • 参考資料
    • おわりの挨拶
  19. ボーナスレクチャー
    • Expo SDKのバージョンアップ
    • Functionコンポーネントの色々な書き方
    • パフォーマンス最適化
    • 無限スクロール(ページング)の実装
   

関連:Reactを本でも学ぼう

UdemyのReact講座は上述したとおり、Reactの基礎的な使い方からWebアプリ開発・スマホアプリ開発実用まで、幅広く学べる非常にパフォーマンスの高い学習法。

ただ、リファレンスとしては動画だと見返しづらい側面もありますので、書籍も併用しながら学習すると良いかと思います。

Reactの参考書は以下で紹介しています。合わせて参照ください。

いじょうでっす。

コメント

タイトルとURLをコピーしました