Udemy
  •  
  •  
  •  
  •  
  •  
  •  
  •  
  •  
  •  
  •  
  •  
  •  
  •  
Development
Web Development Data Science Mobile Development Programming Languages Game Development Database Design & Development Software Testing Software Engineering Development Tools No-Code Development
Business
Entrepreneurship Communications Management Sales Business Strategy Operations Project Management Business Law Business Analytics & Intelligence Human Resources Industry E-Commerce Media Real Estate Other Business
Finance & Accounting
Accounting & Bookkeeping Compliance Cryptocurrency & Blockchain Economics Finance Finance Cert & Exam Prep Financial Modeling & Analysis Investing & Trading Money Management Tools Taxes Other Finance & Accounting
IT & Software
IT Certification Network & Security Hardware Operating Systems Other IT & Software
Office Productivity
Microsoft Apple Google SAP Oracle Other Office Productivity
Personal Development
Personal Transformation Personal Productivity Leadership Career Development Parenting & Relationships Happiness Esoteric Practices Religion & Spirituality Personal Brand Building Creativity Influence Self Esteem & Confidence Stress Management Memory & Study Skills Motivation Other Personal Development
Design
Web Design Graphic Design & Illustration Design Tools User Experience Design Game Design Design Thinking 3D & Animation Fashion Design Architectural Design Interior Design Other Design
Marketing
Digital Marketing Search Engine Optimization Social Media Marketing Branding Marketing Fundamentals Marketing Analytics & Automation Public Relations Advertising Video & Mobile Marketing Content Marketing Growth Hacking Affiliate Marketing Product Marketing Other Marketing
Lifestyle
Arts & Crafts Beauty & Makeup Esoteric Practices Food & Beverage Gaming Home Improvement Pet Care & Training Travel Other Lifestyle
Photography & Video
Digital Photography Photography Portrait Photography Photography Tools Commercial Photography Video Design Other Photography & Video
Health & Fitness
Fitness General Health Sports Nutrition Yoga Mental Health Dieting Self Defense Safety & First Aid Dance Meditation Other Health & Fitness
Music
Instruments Music Production Music Fundamentals Vocal Music Techniques Music Software Other Music
Teaching & Academics
Engineering Humanities Math Science Online Education Social Science Language Teacher Training Test Prep Other Teaching & Academics
AWS Certification Microsoft Certification AWS Certified Solutions Architect - Associate AWS Certified Cloud Practitioner CompTIA A+ Cisco CCNA Amazon AWS CompTIA Security+ AWS Certified Developer - Associate
Graphic Design Photoshop Adobe Illustrator Drawing Digital Painting InDesign Character Design Canva Figure Drawing
Life Coach Training Neuro-Linguistic Programming Personal Development Mindfulness Meditation Personal Transformation Life Purpose Emotional Intelligence Neuroscience
Web Development JavaScript React CSS Angular PHP WordPress Node.Js Python
Google Flutter Android Development iOS Development Swift React Native Dart Programming Language Mobile Development Kotlin SwiftUI
Digital Marketing Google Ads (Adwords) Social Media Marketing Google Ads (AdWords) Certification Marketing Strategy Internet Marketing YouTube Marketing Email Marketing Google Analytics
SQL Microsoft Power BI Tableau Business Analysis Business Intelligence MySQL Data Modeling Data Analysis Big Data
Business Fundamentals Entrepreneurship Fundamentals Business Strategy Online Business Business Plan Startup Blogging Freelancing Home Business
Unity Game Development Fundamentals Unreal Engine C# 3D Game Development C++ 2D Game Development Unreal Engine Blueprints Blender
30-Day Money-Back Guarantee
Development Web Development React

React + Redux を使用したモダンフロントエンド開発

React + Redux + Redux-thunk + Ajax を用いた実践的なアプリケーションを作成します。React 開発を通して、ES2015+ や 非同期処理などモダンフロントエンド開発に必要な基礎知識も身につけられます。
Rating: 4.2 out of 54.2 (273 ratings)
873 students
Created by Nakanishi Yusuke
Last updated 3/2019
Japanese
30-Day Money-Back Guarantee

What you'll learn

  • React と Redux を使用したシングルページアプリケーションを作成します
  • ES2015+ 等を使用したモダンなフロントエンド開発へ移行しましょう
  • ブラウザ上で動く IDE である CodeSandbox を使用するので、開発環境の構築でつまづくことなく、React の開発を学ぶことができます
  • 各レクチャーは、小さくモジュール化してあるので、着実に学習を進めることができます
Curated for the Udemy for Business collection

Course content

11 sections • 73 lectures • 6h 12m total length

  • Preview01:13

  • Preview03:16
  • Preview02:28
  • Preview03:58
  • Preview02:02
  • Preview01:35

  • Preview07:06
  • Preview05:57
  • Preview04:54
  • Preview09:22
  • Preview06:57
  • Preview06:42
  • Preview08:56
  • Preview02:54
  • Preview03:29

  • Preview03:23
  • ES2015 の class 構文
    06:48
  • React Class Component の書き方
    04:22
  • click された時に setState で state を変更する
    06:08
  • 実践1: H20 Component1
    06:00
  • 実践1: H20 Component2
    02:28
  • 実践1: H20 Component3
    05:32
  • 実践1: H20 Component4
    02:41
  • map
    05:15
  • filter
    05:29
  • map と filter の実践 1
    05:34
  • map と filter の実践 2
    03:48

  • TodoApp の概要
    03:47
  • TodoApp のコンポーネントを配置する
    06:28
  • state を与え、List コンポーネントに渡す
    05:19
  • AddTodo コンポーネントを作り込む
    09:11
  • state を変更するメソッドを作成し、子コンポーネントに渡す
    06:59
  • todo を削除するメソッドを作成し、子コンポーネントに渡す
    05:47
  • リファクタリング
    04:01

  • HTTP プロトコルと AJAX
    05:13
  • Axios を使った Ajax のデモ
    03:37
  • 非同期処理と Promise
    08:13
  • JSON を非同期に取得しレンダリングする React App
    04:12
  • Preview03:37
  • 実践1: JSON を取得する
    03:02
  • 実践2: state を取得した JSON で変更し、レンダーする
    08:36

  • Preview00:58
  • Giphy API を叩く
    05:58
  • React に組み込む
    08:07
  • img 要素を state を元にレンダリングする
    03:39
  • 検索用窓の追加
    08:27
  • CSS でスタイリング
    03:31

  • Redux の概要
    04:58
  • Redux のコードの概要
    15:00
  • createStore で store を作る
    08:58
  • reducer を別ファイルに切り出し、また payload も活用する
    04:05
  • Provider を使って store を React で使用する準備をする
    05:00
  • connect で state と dispatch をコンポーネントに紐づける
    11:08
  • Redux の全体像の確認
    04:27
  • Container Component と Presentational Component
    08:53
  • Action Creator
    04:34
  • Combine reducer
    06:48

  • Redux-thunk で非同期にアクションを発行する
    09:40
  • Promise を Redux-thunk 上で活用する
    10:15

  • Store の作成
    03:20
  • Reducer の作成
    03:30
  • コンポーネントに store を connect する
    06:27
  • サーチコンポーネントの作成
    02:41
  • GiphyAPI を叩くメソッドの作成
    04:12
  • redux-thunk を適用する
    01:24
  • Action を作る
    05:51
  • Search コンポーネントにメソッドを connect する
    04:06
  • 小さな修正
    01:11
  • ロード状況をボタンに表示する
    05:04
  • CSS でスタイリングをする
    02:44

Requirements

  • HTML, CSS の十分な知識
  • JavaScript の基礎的な知識 (簡単な学習者レベルのアプリの作成経験があれば OK です)
  • [不必要] : Git の知識、 Node の開発環境の知識、ES2015+ の高度な理解

Description

昨今、ウェブ制作の環境は 10 年前とは大きく変わりました。特に JavaScript の変化が大きく、ちょっとしたアニメーションを実装するための存在だった JavaScript は、今やフロントエンドの主役として、インタラクティブな UI を提供するための中心的な役割を果たしています。

具体的には本講義で取り上げる React 等の JavaScript によるビューライブラリが盛んに使用されるようになりました。


- React アプリケーション開発の難しさについて

React 自体は JavaScript で書かれた「ライブラリ/フレームワーク」であって、React のために書くコードも React 特有の文法はほぼなく、JavaScript がわかれば React は理解できるものではあります。

しかし、そこで必要な JavaScript の知識は、純粋なウェブサイトの作成では必ずしも必要となるものではないため、ウェブサイト制作の業務から React を用いたウェブアプリケーションの作成に移行する際に、JavaScript の知識が壁となって React への参入が難しくなっているものだと思われます。

実際私はそうでした。ランディングページやシンプルな企業サイトにおいては、HTML と CSS の知識が中心的に必要なものであり、JavaScript は jQeury を使ったアニメーションやトグルやスライドを実装する際に少し必要というレベル感であって、この JavaScript の知識では React に取り組むには足りませんでした。


- React 学習の困難さを減らすための本講義

そしてこのギャップを埋めるためには自学自習するしかないのですが、そのためのちょうどいい資料が日本語ではないと感じていました。特に公式のドキュメントやチュートリアルが日本語では提供されていないことが大きな壁です。幸い私は英語のドキュメントを読むことができたので、学習を進めつつ、その資料の日本語訳をおこないました。

この資料はそういった学習を通して得た知識の日本語へのトランスコンパイルであり、さらに手を動かしてコードを書きやすいように整理したものでもあります。単に知識を羅列するのではなく、初学者が順番にコードを書きながら、順番に知識をつけていくことができることを目的としています。


- 充実した基本的なシンタックスの説明

import, export, class, map, arrow-function といった ES2015+ のシンタックスの説明にもかなりの分量を割き、コードを読んでいく上でつまづかないようにしました。


- CodeSandbox で動くコードを確認できる

動画で説明をされただけでは、なかなか理解できないと思います。そこで、ブラウザ上で提供される CodeSandbox というサービスを使い、全てのコードを動く状態で確認することができるようにしました。

テキストに付属されたリンクをクリックするだけですぐに現状のソースと挙動を確認することができます。


- テキスト

動画に加えて、テキストにも力を入れました。該当レクチャーのテキストに軽く目を通してから、動画を確認し、復習の際にはテキストを見る、というフローになるようにしています。どこが変更されたのか、最終的にまとめて確認できることが、学習を進める上で重要だと考えたからです。


- Webpack, Babel, loader 等の設定の難しさについて

React 開発における難しさのもう一つの側面は開発環境の構築です。React の開発のためには、一般的に Webpack, Babel, Webpack の loder の知識、それからこれらに先行する Node,npm の知識が必要です。

もちろん最近のウェブ制作においては Sass を Gulp を使ってトランスコンパイルする等々、こういった開発環境を用いた開発は浸透していますが、しかし使用することはできても、本質的な意味は理解していない、苦手だという方は多いと思われます。

そのためこういった環境構築は React そのものよりも難しいとさえいえると思われます。

今回の講義では、こういった環境構築の難しさをスキップして、全ての環境が整った CodeSandbox を使用することで React 学習のハードを下げることとしました。


- React エンジニアへの道筋

ですので、まずは CodeSandbox を用いて、動的に変化する要素の少ないコーディングを学習した上で、次に state を動的に変化させる TodoList 的なアプリケーションを開発し、最後に Webpack 等の開発環境を身に付けるのが良いと思います。

その後に Redux 等の state 管理用のフレームワークを身につけ、そして一つの壁である AJAX 通信等の非同期処理をできるようになると、SPA シングルページアプリケーションのエンジニアの入り口に立てるのではないかなと思います。本講義はここまでスムーズに導くことを目標としています。

もちろんこれだけの知識では実務エンジニアになるためには足りません。膨大な知識が必要であって、私も日々吸収するために頑張っています。ただ、それでも一旦 React エンジニアへの道筋がつけば、きっとうまくいくはずです!

Who this course is for:

  • HTML, CSS, jQuery を使ったサイト構築に慣れている方で、React を使ったモダンなフロントエンド開発に興味がある方
  • ゴリゴリ React を書くことはないが、部分的にコーディングをする必要があるデザイナーの方
  • 話題の React を、とにかく自分で書きたいという方
  • バックエンドエンジニアで、フロントエンドの基礎を習得したい方

Instructor

Nakanishi Yusuke
Front-end engineer
Nakanishi Yusuke
  • 4.1 Instructor Rating
  • 298 Reviews
  • 909 Students
  • 2 Courses

フリーのフロントエンドエンジニアとして活動しています。React 公式チュートリアル、Redux ドキュメント等の翻訳や、 React ハンズオンも開催しています。直近の大きな OSS の成果として React 公式日本語ドキュメントのトップページを担当致しました。

様々なレベルの人が取り組みやすいコースを目指して、基礎的な情報を丁寧に説明するように心がけています。

React, Vue, ES2015+, TypeScript, Node.js, Express, MongoDB, WebStorm, Gatsby.js, CSS in JS, Emotion

  • Udemy for Business
  • Teach on Udemy
  • Get the app
  • About us
  • Contact us
  • Careers
  • Blog
  • Help and Support
  • Affiliate
  • Impressum Kontakt
  • Terms
  • Privacy policy
  • Cookie settings
  • Sitemap
  • Featured courses
Udemy
© 2021 Udemy, Inc.