Udemy
  •  
  •  
  •  
  •  
  •  
  •  
  •  
  •  
  •  
  •  
  •  
  •  
  •  
Development
Web Development Data Science Mobile Development Programming Languages Game Development Database Design & Development Software Testing Software Engineering Software Development Tools No-Code Development
Business
Entrepreneurship Communication 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 Certifications Network & Security Hardware Operating Systems & Servers 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 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 Paid 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 & Gardening 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 & Diet Yoga Mental Health Martial Arts & 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 Learning Teacher Training Test Prep Other Teaching & Academics
Web Development JavaScript React Angular CSS Node.Js HTML5 PHP Vue JS
AWS Certification Microsoft Certification AWS Certified Solutions Architect - Associate AWS Certified Cloud Practitioner CompTIA A+ Amazon AWS Cisco CCNA Microsoft AZ-900 AWS Certified Developer - Associate
Microsoft Power BI SQL Tableau Data Modeling Business Analysis Business Intelligence MySQL Qlik Sense Blockchain
Unity Unreal Engine Game Development Fundamentals C# 3D Game Development C++ Unreal Engine Blueprints 2D Game Development Virtual Reality
Google Flutter Android Development iOS Development React Native Swift Dart (programming language) Mobile App Development Kotlin SwiftUI
Graphic Design Photoshop Adobe Illustrator Drawing Digital Painting Canva InDesign Character Design Procreate Digital Illustration App
Life Coach Training Neuro-Linguistic Programming Personal Development Personal Transformation Life Purpose Mindfulness Meditation CBT Cognitive Behavioral Therapy Sound Therapy
Entrepreneurship Fundamentals Business Fundamentals Freelancing Business Strategy Startup Business Plan Online Business Blogging Home Business
Digital Marketing Social Media Marketing Marketing Strategy Internet Marketing Google Analytics Copywriting Email Marketing YouTube Marketing Podcasting

DevelopmentWeb DevelopmentReact

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

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

What you'll learn

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

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.3 Instructor Rating
  • 332 Reviews
  • 1,145 Students
  • 2 Courses

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

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

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

Top companies choose Udemy Business to build in-demand career skills.
NasdaqVolkswagenBoxNetAppEventbrite
  • Udemy Business
  • Teach on Udemy
  • Get the app
  • About us
  • Contact us
  • Careers
  • Blog
  • Help and Support
  • Affiliate
  • Investors
  • Impressum Kontakt
  • Terms
  • Privacy policy
  • Cookie settings
  • Sitemap
  • Accessibility statement
Udemy
© 2022 Udemy, Inc.