React Hooks 入門 - Hooksと Redux を組み合わせて最新のフロントエンド状態管理手法を習得しよう!
4.5 (452 ratings)
Course Ratings are calculated from individual students’ ratings and a variety of other signals, like age of rating and reliability, to ensure that they reflect course quality fairly and accurately.
2,346 students enrolled

React Hooks 入門 - Hooksと Redux を組み合わせて最新のフロントエンド状態管理手法を習得しよう!

Vue.js Firebase Docker Gatsby などを抑え、なんと受講生の37.2%が次に学びたいと注目度の高い React Hooks 。複雑な状態管理をシンプルに且つ美しく実装するためのフロントエンド開発手法を身につけよう!
Bestseller
4.5 (452 ratings)
Course Ratings are calculated from individual students’ ratings and a variety of other signals, like age of rating and reliability, to ensure that they reflect course quality fairly and accurately.
2,346 students enrolled
Last updated 7/2019
Japanese
Current price: $129.99 Original price: $199.99 Discount: 35% off
7 hours left at this price!
30-Day Money-Back Guarantee
This course includes
  • 9 hours on-demand video
  • 1 article
  • Full lifetime access
  • Access on mobile and TV
  • Certificate of Completion
Training 5 or more people?

Get your team access to 4,000+ top Udemy courses anytime, anywhere.

Try Udemy for Business
What you'll learn
  • React Hooks (useEffect、useReducer、useContext、useState等)の導入方法と利用例
  • クラスコンポーネントに依存せず、ファンクションコンポーネント内で状態管理やコールバックを行う方法
  • React Hooksとの今後の付き合い方
  • ReactにTwitter Bootstrapを適用する方法
  • メンテナンス性の高いコードの書き方
Course content
Expand all 32 lectures 08:53:33
+ はじめに
4 lectures 32:19
GitHubリポジトリのURL
00:11
本コースで実装するソースコードを管理するGitHubリポジトリの紹介
13:00
+ 開発準備編
1 lecture 22:32
create-react-appでReactアプリケーションの雛形を作成しよう
22:32
+ 入門編
16 lectures 06:00:29
複数の状態を管理しよう
17:17
複数の状態を1つのオブジェクトに統合しよう
13:03
状態遷移とは何かを改めて考えてみよう
11:26
Bootstrapを導入しよう
30:48
イベントの状態遷移を管理するreducerを作成しよう
27:38
イベント一覧に作成したイベントを表示させよう
40:16
イベント一括削除処理を実装しよう
30:46
肥大化したコンポーネントを役割毎に分割しよう
35:30
アクションのタイプは定数がお好き
16:17
Prop Drilling問題とそれを解消するための手段の紹介
15:38
はじめてのReact Context
07:08
Providerのセットアップをしよう
17:13
+ 実践編
11 lectures 01:58:12
より複雑な状態を管理しよう
08:43
やっぱりreduxをインストールしよう
02:20
イベント用のreducerのリファクタリングをしよう
12:52
操作ログ用のreducerを作成しよう
15:45
正規化された時間を作ろう
05:54
操作ログを保存しよう
08:17
全ての操作ログを削除しよう
12:55
イベント削除時の操作ログも残そう
07:56
操作ログ一覧を表示させよう
18:46
localStorageの各種メソッドのおさらいをしよう
05:50
localStorageで状態の永続化をしよう
18:54
Requirements
  • GitHubのアカウント・・・公開中のソースコードをforkする場合等に必要です。
  • Hooks以前のReactの基礎知識(姉妹コース「フロントエンドエンジニアのための React ・ Redux アプリケーション開発入門」のReact基礎編相当)及び実装経験があると良いです。
  • gitの基礎知識及び基本操作・・・公開中のソースコードの取得にあると便利です。
  • ブラウザ・・・Google Chromeの最新版が推奨です。
  • テキストエディタ・・・Visual Studio Code、Atom、vim等お好みのものをお使いください。
  • Node・・・LTS (Long Term Support)最新版が推奨です。
  • 【重要】動画で紹介する手順の通りに行い期待通りの結果にならない場合でも、Q&Aを利用し、質問し解決しようとする意欲や積極性が必要です。
Description

こんにちは!Udemyのプログラミングおじさん、はむです。

本コースでは、React Hooksについて学びます。

導入方法ももちろんですし、実践的な使い方について、手を動かしながら学習します。僕のコースは基本パワーポイントとかでで概要とか概念の概略の説明などは一切しません。というのも、パワポの資料作成とそれによるプレゼンテーションは費用対効果が低いんですよね、なので、机上の理論よりも、簡単に口頭で概要をお伝えして、その後すぐ、エディターを開いて手を動かして目で動作を確認するというスタイルで進めていきます。僕に言わせると、プログラミングは、スポーツをやっているような感覚に近いです。まぁとにかくですね、手をガンガン動かしていくんで、楽しんでいきましょう!ということですね。

他にも、React Hooksとの今後の付き合い方について学びます。これはかなり抽象的に書いていますけれども、要するに、 Hooksを使うと、今までのクラスコンポーネントにあまり依存しないコンポーネントを実装することになります。何故かと言うと、今まではファンクショナルコンポーネントとクラスコンポーネントの2つがあったわけなんですけれどもその2つの違いの1つに、状態を持たせるかどうかというのがありました。Hooksが出てからはですね、今までのファンクショナルコンポーネントというのはファンクションコンポーネントという名前に変わりました。これ、名前が変わっただけじゃなくて何が起きたのかと言うと、状態がもてるようになったんですね。ということはどういうことかというと、ファンクションコンポーネントとクラスコンポーネントとの実質的な違いというのがなくなってきたんですよね。なので、コンポーネントを実装しょうとしたときに、どっちのコンポーネントで実装しようかと考えてきたと思いますけれども、今後は、hooksによって機能拡張がなされたことで、ファンクションコンポーネントを書く機会が増えると思います。本コースでもクラスコンポーネントは一切実装しません。クラスコンポーネントに依存しなくても状態を持つアプリケーションは十分に実装できるということを本コースで学んでいただければいいかなと思います。

メンテナンス性についても触れていきます。これは、Hooksだからということではないんですけれども、僕のコーディングスタイルは、動いたら終わり!というようなコーディンすは一切しません。みなさんが、コース終了後に、もっと大規模なアプリケーション開発をする際にきっと役に立つであろうコンポーネントの細分化だったり、定数の定義だったり、とにかく、性質の異なるものは、モジュールという単位で分割してコードの見通しを良くすると言ったプログラマに備わっている慣習について意識しながらコーディングを進めていきますのでまだ、現場でコードを書いたことがない!という方には是非この辺りのコーディングの慣習について学んで頂けたら良いんじゃないかなと思います。

最後に、これはまぁおまけみたいなものなんですが、Bootstrapですね。本コースはHooksのコースなのでスタイリングに時間をかけるつもりはないんですが、とはいえ、見た目も最低限は必要かなということでBootstrapを採用しています。  ReactアプリケーションへのBootstrapの適用についても解説していますので興味のある方はぜひ一緒にやっていきましょう。

次にソースコードについてですが、本コースで動画の中で実装したソースコードは、GitHubに完全公開していますので、自分の書いた内容と照合したいときなどに是非お使いいただければとおもいます。

もし、コースを進めていて、動画の通りにやってみたけれども、うまく行かない!という時には、Q&Aのページがありますので、遠慮なくご質問ください。僕の肌感では、どうも、質問をするのが恥ずかしいとか、周りに質問の内容をみられるのがいやだとか、あるいは、初歩的な質問になるから恐縮してしまうといったような受講生の方が非常に多いんじゃないかと感じています。僕のプロフィールページにも、書いていますが、「聞くは一時の恥聞かぬは一生の恥」ということですね。とにかく、遠慮しないでガンガンぶつかってきてください!そもそも、知らないことを学ぶためにコースを受講しているわけですし、受講料をお支払い頂いているわけですから、ちょっと遠慮するところが間違っていますよ!と僕は言いたいです。というわけで、Q&A、どんどん活用してください。

Who this course is for:
  • Reduxで挫折してしまった方
  • Reduxのような複雑なセットアップにうんざりした方
  • React Hooksの利用法について積極的に学習したい方
  • 先端のReact APIについてキャッチアップしたい方
  • フロントエンド開発における技術アンテナの感度をより高くしたい方
  • 従来のReactの基礎技術が分かる方