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 Mindfulness Personal Development 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 Freelancing Blogging 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 アプリケーション開発入門

RESTful APIサーバと連携する実践的なCRUDアプリケーション開発手法を学び、今後のフロントエンドWeb開発の標準になり得るReact・Reduxアプリケーション開発をマスターし、もう一段階上のJavsScriptエンジニアになろう
Bestseller
Rating: 4.0 out of 54.0 (1,603 ratings)
8,030 students
Created by はむさん リーマンショックのリストラから這い上がったウェブ系エンジニア
Last updated 11/2020
Japanese
30-Day Money-Back Guarantee

What you'll learn

  • 実践的かつモダンなフロントエンド開発手法を学ぶことができる
  • CRUDが実行できる動的なReact・Reduxアプリケーションの実装方法を学ぶことができる
  • 外部のRESTful APIと連携するReactアプリケーションの開発手順及び開発方法を体得することができる
  • Material-UIを使用した美しいUIの実装ができるようになる
  • ES2017を利用した可読性の高いコードの書き方が身に付く
Curated for the Udemy for Business collection

Course content

8 sections • 48 lectures • 7h 15m total length

  • Preview05:54
  • 本コースの全ソースコードはこちら
    02:48

  • レクチャーを始める前にお読みください
    00:32
  • Preview06:05
  • エディターの紹介
    00:41
  • Yarnのインストール
    01:06
  • GitHubのリポジトリ作成
    01:33
  • create-react-appのインストール
    07:14
  • 自分専用のboilerplateを作成しよう
    07:05

  • Reactの概要について
    01:59
  • JSX
    06:24
  • Preview14:29
  • トランスパイラー
    05:01
  • webpack
    03:34
  • Component
    05:20
  • props
    11:16
  • prop-types
    09:01
  • State
    21:26

  • Reduxイントロダクション
    00:57
  • Action
    09:59
  • Reducer
    12:03
  • Preview07:45
  • connectでstateとactionsとの関連付けを行う
    14:57

  • イントロダクション
    01:24
  • Preview05:28
  • React CRUDアプリケーションの仕様
    04:23
  • ReactアプリケーションとAPIサーバ間のネットワーク上のデータの流れ - 全データ取得時
    06:35
  • ReactアプリケーションとAPIサーバ間のネットワーク上のデータの流れ - 特定のデータ取得時、データ更新時
    07:51
  • ReactアプリケーションとAPIサーバ間のネットワーク上のデータの流れ - データ作成時、データ削除時
    07:08
  • APIサーバの仕様をcurlで確認する
    07:22
  • アクションでイベント一覧を取得する
    20:00
  • イベント一覧を画面に表示する
    16:55
  • イベント新規作成画面への画面遷移を実装する
    11:28
  • イベント新規作成画面のコンポーネントをreduxFormでdecorateする
    19:54
  • APIサーバにイベント新規作成要求を送信する
    21:39
  • 送信ボタンのdisabled状態を調整する
    06:57
  • Redux DevToolsを導入しデバッグし易い環境を整える
    07:23
  • イベント更新画面用のコンポーネントを作成する
    10:12
  • イベント削除機能を実装する
    16:24
  • イベントの詳細情報を更新画面に表示する
    14:16
  • イベント更新機能を実装する
    17:32
  • Material-UI概説
    03:29
  • 【注意喚起】material-uiのインストール時、動画内で使用しているバージョンと同じものを必ず指定してください
    00:37
  • Material-UIの適用(一覧画面)
    18:11
  • Material-UIの適用(新規作成画面、編集画面)
    13:45

  • React v16.3 Context API
    25:12

  • 質問 #5994878 - redux-formのenableReinitializeについて
    12:16

  • おわりのご挨拶
    01:37

Requirements

  • HTML、CSS、JavaScriptの基礎知識
  • gitの基礎知識及び基本操作
  • macOSあるいはLinux
  • ブラウザ、Google Chromeの最新版を推奨
  • テキストエディタ(Visual Studio Code、Atom、vim等お好みのもの)
  • 動画で紹介する手順の通りにならない場合でも、諦めることなく質問して解決しようとする意欲や積極性
  • Nodeのバージョンはv8.9.4が推奨です。

Description

本コースでは、フロントエンドUser Interface開発のためJavaScriptのライブラとして多くの開発者に支持されているReactを題材にし、実際にコーディングを進めながらReactプログラミング技術を習得するという内容になっています。 また、よくReactとセットで用いられる状態管理のためのライブラリであるReduxについても学んで頂けるコースとなっています。

プログラミング習得のための最大の近道は、「とにかく書いて動かすこと!」というのが私の信念です。ReactとReduxの習得の学習コストは高いと言われていますが、 とにかく、コードを書いて、その挙動を目で確認しながら、まるでゲームをしているかのごとく体得してもらうことが最も効率的だと私は考えており、このコースの内容もその信念に基づいて設計しています。

本コースの中では受講生の皆様に外部サーバと連携するアプリケーションを開発して頂きます。それはいわゆるCRUDアプリケーションで自在に外部のRESTful APIサーバと連携しながらデータを外部サーバに永続化できる実用的なアプリケーションで現実世界にもよく見かける形態の一つですので、実際の業務にも応用できる技術と言えます。

こんなアプリケーションの実装について興味を持たれた方は是非本コースをご受講ください。

また、何か問題が起きた場合もご安心ください。UdemyではQ&Aを通じて講師と共にその問題を解決しながらコースに取り組んで頂ける仕組みがあります。是非この仕組も十分に活用頂き本コースを通じて皆様の成長のために貢献できるよう頑張ります!

では、本コースでお会いできるのを楽しみにしております!

Who this course is for:

  • モダンなフロントエンド開発の知識を身に付けたい方
  • jQueryの使用経験はあるがReactの使用経験はなく、Reactを使用してみたいとお考えの方
  • Reduxによる状態の管理の方法を学びたいとお考えの方
  • Reactを使用したウェブアプリケーションの開発経験はあるが複雑なUIの実装経験は無い方

Instructor

はむさん リーマンショックのリストラから這い上がったウェブ系エンジニア
Senior Software Developer, Udemy Instructor
はむさん リーマンショックのリストラから這い上がったウェブ系エンジニア
  • 4.3 Instructor Rating
  • 3,557 Reviews
  • 11,884 Students
  • 8 Courses

みなさん、こんにちは!世界最大、オンライン教育プラットフォームUdemyへようこそ!

はむさん、と申します。

僕は大学卒業後、就職氷河期となる2000年よりソフトウェア開発者としてのキャリアを歩んできました。組み込みのファームウェア開発、MVNOのサーバ開発、RTBのDSP開発、ウェブアプリケーション開発と、様々なレイヤのプロダクトを作ってきました。

そんな経験を活かし、現在、シリコンバレー発のオンライン教育プラットフォームUdemyでプログラミング講師として動画シナリオ作成/収録/編集/配信/サポートを行っております。

さて、もう10年以上も前のことですが、僕は過去にリーマンショックの影響によりリストラにあった経験があります。社会から放り出され、多くの会社を訪問するも、不採用の連続、会社とハローワークとの往復にどん底まで疲弊し、完全に生きる自信を失った時期もあります。

「エンジニアとしてのスキルをなぜもっと磨いておかなかったのか?」「短期的、効率的にスキルを身につける方法ないのか?」僕は当時そんな悩みを抱えていました。

あれから10数年、クラウドが浸透し、今まで以上に個人が個人に価値を提供しやすい時代になってきました。その1つがこのUdemyです。

僕は今、人生で一番苦しかった時期に抱えていたような悩みを抱えている人を救済したい!というモチベーションでこのUdemyで活動しています。

ところで、僕が一番エンジニアに対してバリューを感じること、それは、「アイデアを形にできる力があること」です。これは「要件をコードで表現できること」と言えるかもしれません。ソフトウェアエンジニアにとって一番説得力があること、それは、「コードが書けること」になります。成果物はすなわちコードです。

僕のコースでは、パワーポイントによる概念的な説明にはあまり時間を割かず、少しでも多くのコードが書けるようになってもらいたいという願いを込め、とにかくコードを書くことに主眼をおいています。なぜなら、世の中のサービスは誰かしらが汗水流して書いたコードが動いているからです。逆に、コードを書かずして価値の提供は達成できません。

僕のコースを通じて自信を持ってコードが書ける人が一人でも多く誕生してくれたらこんなに嬉しいことはありません。


はむさん

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