Udemy
    •  
    •  
    •  
    •  
    •  
    •  
    •  
    •  
Turn what you know into an opportunity and reach millions around the world.
Learn More
Your cart is empty.
Keep shopping
React Hooks 入門 - HooksとReduxを組み合わせて最新のフロントエンド状態管理手法を習得
Rating: 4.3 out of 5(1,176 ratings)
6,470 students

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

Vue.js Firebase Docker Gatsby などを抑え、なんと受講生の37.2%が次に学びたいと注目度の高い React Hooks 。複雑な状態管理をシンプルに且つ美しく実装するためのフロントエンド開発手法を身につけよう!
Last updated 5/2026
Japanese

What you'll learn

  • React Hooks (useEffect、useReducer、useContext、useState等)の導入方法と利用例
  • クラスコンポーネントに依存せず、ファンクションコンポーネント内で状態管理やコールバックを行う方法
  • React Hooksとの今後の付き合い方
  • ReactにTwitter Bootstrapを適用する方法
  • メンテナンス性の高いコードの書き方

Course content

6 sections34 lectures9h 10m total length
  • 講師自己紹介、React Hooksの紹介、なぜこのタイミングでコースリリースとなったのか?5:07
  • 本コースの概要のご説明14:01
  • GitHubリポジトリのURL0:11
  • 本コースで実装するソースコードを管理するGitHubリポジトリの紹介13:00

Requirements

  • GitHubのアカウント・・・公開中のソースコードをforkする場合等に必要です。
  • Hooks以前のReactの基礎知識(姉妹コース「フロントエンドエンジニアのための React ・ Redux アプリケーション開発入門」のReact基礎編相当)及び実装経験があると良いです。
  • gitの基礎知識及び基本操作・・・公開中のソースコードの取得にあると便利です。
  • ブラウザ・・・Google Chromeの最新版が推奨です。
  • テキストエディタ・・・Visual Studio Code、Atom、vim等お好みのものをお使いください。
  • Node・・・動画内ではv10.15.3を使用しています。同バージョンが推奨です。
  • 【重要】動画で紹介する手順の通りに行い期待通りの結果にならない場合でも、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の基礎技術が分かる方