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

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

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

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

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

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

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

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

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

本講義では、React + YouTube APIを使ってYouTube クローン アプリを実装しながら体系的に、

そして楽しくReact, React Hooks, Context API, CSS Moduleを使ったモダン開発を学習していきます。

本講義に含まれる内容

• Functional Component中心のReact開発方法

• Layoutの作成方法

• React Router Domによるページ遷移

• useHistory, useLocationの使い方

• useStateを使ったLocal State管理

• useReducer + ContextAPI + useContextを使ったGlobal State管理

• CSS Moduleパターンを使ったスタイリング手法  (CSSの細かい説明は割愛)

• Youtube APIの登録利用方法

• Textに含まれるURLをaタグに変換して表示する方法

• 縦横比(アスペクト比)を保持したレスポンシブル対応

• Promise.allによる最適化

  
  

一緒にYoutube クローンアプリケーションを実装し実践力を身につけていきましょう！

本講義は、中級者向けのコースになります。

講義内では、最新のreact開発手法である、react hooksを使用しています。

react hooksを初めて触る方は、
最短・最速で学ぶ React Hooks 完全ガイド！基礎〜応用編 最新のReact開発+ステート管理をマスターしよう!
を先に受講することをおすすめします。

本コースでは、今後のReact開発の最新トレンド技術 React Hooks + Redux ToolKit + TypeScriptを使って、COVID 19(コロナウイルス)のオリジナルLIVEダッシュボードを制作します!

⭐️  本コースの学習テーマ

• 最新トレンド"React Hooks + Redux ToolKit + TypeScript"を使ったWebアプリ開発

• 外部APIサービスとの連携(COVID 19 API)

• Material UI と React版Chart.jsの使い方

• Firebase Hosting ディプロイ

⭐️  本コースの構成

Section 2 : (基礎)React Chart.js

Section 3 : (基礎)Material UI

Section 4 : (実践)COVID-19 Liveダッシュボードアプリ作成(グローバル時系列API)

Section 5 : (実践)COVID-19 Liveダッシュボードアプリ作成(国別時系列API) + Firebase

2018/12/02 追記

カスタムアイコンフォント関して、レッスン 54 - 58 を再収録しました。
最新のバージョンに更新されています。

———————-

2018/11/23 追記

Expo 使った開発環境の構築セクション7ー8を、最新のバージョンに更新しました！

———————-

React Native の登場によって、今までウェブ開発に使われていた技術の組み合わで、iOS / Android ネイティブアプリ開発が可能になりました。この講座は、アプリ開発を、スケッチ・構造化・スタイリング・プログラミング・リリースに分けて、それぞれの工程を行き来しながら、リリースまでの全行程を一気に学習できるような構成77にしています。

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

また、開発環境の構築とリリース作業は、初学者がつまづきやすいステップの代表例です。
この講座では、最小限の手間で、iOS / Android の開発が進めるられるように Expo のセクションも設けました。Expo 使うと開発&確認が容易になり、リリース用のアプリも書き出せるので、とても便利です。

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

この講座でできる成果物

• メモの作成・保存・編集ができるシンプルなモバイルアプリ

• メモアプリは高機能ではありませんが、メンバー登録、ログイン、メモ作成・編集・閲覧といった基本機能が実装されています

主に使用する技術

• React Native

• Expo

• HTML

• CSS

• Javascript

• Firebase

• Cloud Firestore

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

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

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

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

~~2020年10月20日更新~~

【講座内容】

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

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

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

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

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

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

・コンポーネントの設計

・API通信

・Hooksの利用

・Reduxによる状態管理

・画面遷移

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

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

【この講座の対象者】

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

・エンジニア入門者

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

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

・JavaScriptの基本的な文法

・React Native熟練者向けの内容

【更新情報】

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