React Hooks 入門 - HooksとReduxを組み合わせて最新のフロントエンド状態管理手法を習得
What you'll learn
- React Hooks (useEffect、useReducer、useContext、useState等)の導入方法と利用例
- クラスコンポーネントに依存せず、ファンクションコンポーネント内で状態管理やコールバックを行う方法
- React Hooksとの今後の付き合い方
- ReactにTwitter Bootstrapを適用する方法
- メンテナンス性の高いコードの書き方
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の基礎技術が分かる方
Instructor
こんにちは!
私は、プログラマーとしての経験を活かし、オンラインスクール「はむさんのオンラインスクール」を立ち上げ、プログラミング初心者の方々に最高の学習体験を提供することを使命としています。
私は、プログラミング初学者の方々が抱える困難を知っています。私自身が、初めてプログラミングを学んだときには、多くの苦労と挫折がありました。しかし、私はそれらを乗り越え、今日のキャリアを築くことができました。私の経験から、私は皆さんが最短経路で成長できるよう、自分のプログラミングの知識やノウハウを駆使して、全力でサポートできると自負しています。
そんな私ですが「プログラミングを学ぶ人々が幸せな生活を送れるようにすること」を目的に、今のオンラインスクールを立ち上げました。プログラミングを学ぶことで、自分自身の成長や自己実現を実感し、人生を変えることができると私は信じています。私は、皆さんが同じような成功体験を得ることができるよう、最新のテクノロジーを駆使し、常に新しいコンテンツの制作に励んでいます。
また、私は常に皆さんの疑問や質問に的確に対応し、皆さんがプログラミングに没頭できるように全力でサポートします。私と一緒に学び、成長し、素晴らしいプログラマーになりましょう! プログラミングは、自分自身を発見し、自分自身の可能性を広げるための素晴らしい方法です。私は、皆さんがプログラミングを通じて、自分自身を発見し、自分自身の可能性を広げ、未来を切り拓くことを願っています。
一緒に学び、成長し、素晴らしいプログラミングの世界を創り上げましょう!
皆さんとの出会いに感謝を申し上げます。
はむさん