「Reactってよく聞くけど、なんだか難しそう。。」
「HTML、CSS、JSは触ったことあるけど、Reactには壁を感じる。。」
「興味はあるけど自分には早いんじゃないか。。」
本コースはReactに興味があるけど、できるか自信がないフロントエンド入門者の方に向けて作成しました。
まず、皆さんにお伝えしたいのはReactは決して扱うのが難しいライブラリではないということです。
ただ、使いこなせるようになるためにはいくつか知っておくべきことがあります。
本コースではReactを使うにあたって知っておいてほしい基礎の部分を体系的、かつ網羅的に説明しています。
■ 知っておくべきこと１ | JavaScriptの挙動
JavaScriptの挙動自体が曖昧（あいまい）な場合、Reactを使いこなすことは難しいでしょう。
ReactはJavaScriptのライブラリですので、当然JavaScriptで記述することになります。
そのため、Reactに感じる複雑性の多くはJavaScript言語自体の独特の記法からくるものです。
Read more
「Reactってよく聞くけど、なんだか難しそう。。」
「HTML、CSS、JSは触ったことあるけど、Reactには壁を感じる。。」
「興味はあるけど自分には早いんじゃないか。。」
本コースはReactに興味があるけど、できるか自信がないフロントエンド入門者の方に向けて作成しました。
まず、皆さんにお伝えしたいのはReactは決して扱うのが難しいライブラリではないということです。
ただ、使いこなせるようになるためにはいくつか知っておくべきことがあります。
本コースではReactを使うにあたって知っておいてほしい基礎の部分を体系的、かつ網羅的に説明しています。
■ 知っておくべきこと１ | JavaScriptの挙動
JavaScriptの挙動自体が曖昧（あいまい）な場合、Reactを使いこなすことは難しいでしょう。
ReactはJavaScriptのライブラリですので、当然JavaScriptで記述することになります。
そのため、Reactに感じる複雑性の多くはJavaScript言語自体の独特の記法からくるものです。
「Reactってよく聞くけど、なんだか難しそう。。」
「HTML、CSS、JSは触ったことあるけど、Reactには壁を感じる。。」
「興味はあるけど自分には早いんじゃないか。。」
本コースはReactに興味があるけど、できるか自信がないフロントエンド入門者の方に向けて作成しました。
まず、皆さんにお伝えしたいのはReactは決して扱うのが難しいライブラリではないということです。
ただ、使いこなせるようになるためにはいくつか知っておくべきことがあります。
本コースではReactを使うにあたって知っておいてほしい基礎の部分を体系的、かつ網羅的に説明しています。
■ 知っておくべきこと１ | JavaScriptの挙動
JavaScriptの挙動自体が曖昧（あいまい）な場合、Reactを使いこなすことは難しいでしょう。
ReactはJavaScriptのライブラリですので、当然JavaScriptで記述することになります。
そのため、Reactに感じる複雑性の多くはJavaScript言語自体の独特の記法からくるものです。
また、Reactのコードを記述する際は分割代入やスプレッド演算子、配列の高階関数、await/asyncなどの比較的最新の記法を多用します。
そのため、十分なJavaScriptへの理解がない状態でReactを使うと、Reactが分かっていないのか、JavaScriptが分かっていないのかが切り分けられず、問題の解決が困難になります。
これがReactが難しいと思われる大きな原因の一つであると私は感じています。
本コースではReactの書き方だけではなくJavaScriptの記述で複雑に感じるであろう部分についても適宜説明しています。
これによって、JavaScriptへの十分な理解がなくてもコースを受講していただけるようにしています。
■ 知っておくべきこと２ | Reactが持つ独特の記述ポリシー
また、Reactを使いこなすためにはReactのポリシー（書き方）についても知る必要があります。
プログラミング入門者はプログラミング経験自体が浅いため、新しい言語やライブラリに出会った際に過去の経験に当てはめて最適な記述方法を考察することができません。
そのようなことを教えてくれる先輩がいればラッキーですが、多くの人はそのような恵まれた環境ではないと思います。そのため、「これで合ってるのかな？」と何となくモヤモヤした気持ちで学習をしていることと思います。
繰り返しになりますが、Reactのコードを記述する際は独特のポリシーが存在します。
そのため、そのポリシーを学べば、どのようにしてReactを記述すればよいかが自（おの）ずとわかってきます。
一つ例を見てみましょう。
例えば、本コースでは関数型プログラミングというプログラミング手法からみたReactについて触れています。関数型プログラミングというのはクラスを使わず、関数によってプログラムの保守性、拡張性、再利用性、テスト性を高めようというプログラミング言語の書き方です。
React 16.8のReact Hooksの導入からReactのポリシーはクラスを用いたオブジェクト指向型プログラミングから関数型プログラミングに完全に移行しました。そのため、関数型プログラミングがどういったプログラミング手法なのかを知ることはReactを知る上で大変重要な事になってきます。
本コースではそういったReactの背景にある思想なども交えながら、体系的にReactというライブラリについて学んでいきます。
■ 知っておくべきこと３ | Reactを取り巻く周辺知識
上で挙げた２つを学べばReact単体については使いこなせるようになるでしょう。しかし、Reactを実際のアプリで使用しようとするとReactだけを学べばよいということではないことがわかってきます。
実際にはどのようにしてサーバーとの通信をすればよいのか、どのようにReact上でデータを管理すればよいのか、どのようにしてページ管理をしていけばいいのかといった問題にぶち当たることになります。
そういった問題を解決するために本コースではReactのみに留（とど）まらず様々なRest API、Redux、Next.jsなどの周辺知識についても学んでいくことになります。ここで、それらについて全て挙げることはできませんので、興味のある方はレクチャー一覧を一度見てみてください。
■ なぜ本コースなのか？
既存の動画教材では、一本でReactとその周辺知識について体系的に、かつ網羅的に学べる教材がないように感じています。
ただ、初心者の頃は自分自身で断片的な知識をつなぎ合わせることは困難です。（そもそも、どの情報を学ぶべきで、どの情報は必要ないのかを取捨選択することも困難でしょう。）そのため、体系的、かつ網羅的に学べる教材は初心者の方にとってきっと大きな力になってくれると思います。
本コースではReactにおける確固たる基礎とその周辺の学ぶ必要のある知識にフォーカスし、Reactを最短で習得することを目的としています。
最短でReactについての基礎を固めたい方は是非本コースを試してみてください。
■ 最後に
私は「なぜこのように書くのか？」「なぜそのような挙動になるのか？」を知ることがプログラミングの上達には極めて重要だと感じています。プログラミング言語やライブラリは日々進化し続けます。そのため、暗記した知識は時代とともに使い物にならなくなってしまいます。
また、プログラムの書き方はグーグルで検索すればいくらでも確認する事ができますが、それを自分の状況に合わせて使うためには動作を理解する必要があります。そのため、プログラミングの上達においては「覚えること」よりも「理解すること」が大切になってきます。
これは本コースで学ぶReactにおいても変わりません。ただ書き方を暗記するのではなく、「なぜそのように書くのか？」「なぜそのような挙動となるのか？」それを知ることによって応用の効く技術を習得することができます。
本コースを終えた方が「Reactってそんな難しくないじゃん！」と思っていただければ、大変嬉しく思います。
■ 各種バージョン情報
React: 18.1.0
Redux: 4.2.0
Next.js: 14.1.3
TypeScript: 4.6.4
Node.js: 18.17.0
What's inside
Learning objectives
- Reactで頻出するjavascriptの記法を学びます。
- Reactとreact hooksについて深く学びます。
- Reactにおけるスタイリングの方法について学びます。
- Reactと関数型プログラミングの関係ついて学びます。
- Reactでdomを操作する方法について学びます。
- Reactでパフォーマンスを最適化する方法について学びます。
- Reduxで状態をグローバルに管理する方法を学びます。
- クラスコンポーネントについて学びます。
- Reactでのrest apiを使ったサーバーとの通信方法について学びます。
- Next .jsについて学びます。
- Ssr, sg, csr, isrの違いについて学びます。
- Reactでのテスト方法について学びます。
- Typescriptを使ってreactを開発する手法について学びます。
- Reactの基礎から実践までの知識を身につけることができます。
- Reactで高速でインタラクティブなwebアプリを作成して公開することができます。
- Reactのデバッグの仕方について学びます。
- Npmのコマンドの使い方やパッケージの管理方法について学びます。
- Show more
- Show less
- Reactで頻出するjavascriptの記法を学びます。
- Reactとreact hooksについて深く学びます。
- Reactにおけるスタイリングの方法について学びます。
- Reactと関数型プログラミングの関係ついて学びます。
- Reactでdomを操作する方法について学びます。
- Reactでパフォーマンスを最適化する方法について学びます。
- Reduxで状態をグローバルに管理する方法を学びます。
- クラスコンポーネントについて学びます。
- Reactでのrest apiを使ったサーバーとの通信方法について学びます。
- Next .jsについて学びます。
- Ssr, sg, csr, isrの違いについて学びます。
- Reactでのテスト方法について学びます。
- Typescriptを使ってreactを開発する手法について学びます。
- Reactの基礎から実践までの知識を身につけることができます。
- Reactで高速でインタラクティブなwebアプリを作成して公開することができます。
- Reactのデバッグの仕方について学びます。
- Npmのコマンドの使い方やパッケージの管理方法について学びます。
- Show more
- Show less
Syllabus
はじめに
なぜReactなのか？
コース概要
コースの進め方
Read more
Syllabus
Traffic lights
Save this course
Save
Reviews summary
React基礎からモダン開発まで網羅
Todoアプリなど具体例が良い。
2024年版でバージョンが新しい。
基礎から周辺技術まで広く学べる。
JSの前提知識もフォローされる。
Activities
JavaScriptの基礎を復習する
Show steps
コースで頻出するJavaScriptの記法を理解するために、事前にJavaScriptの基礎を復習します。これにより、Reactの学習がスムーズに進みます。
Browse courses on
JavaScript
Show steps
-
JavaScriptの基本的な構文（変数、関数、条件分岐、ループ）を復習する
-
ES6以降の新しい記法（アロー関数、分割代入、スプレッド構文）を重点的に確認する
-
Promiseとasync/awaitを使った非同期処理について理解を深める
TypeScriptの理解を深める
Show steps
TypeScriptを使ってReactを開発する手法を学ぶために、TypeScriptの理解を深めます。この本は、コースの内容を補完し、より高度なReact開発スキルを習得するのに役立ちます。
View
Programming TypeScript
on Amazon
Show steps
-
書籍「プログラミングTypeScript」を購入または図書館で借りる
-
書籍全体を読み、TypeScriptの基本的な概念と型システムを理解する
-
書籍で紹介されているサンプルコードを実際に試してみる
Reactのベストプラクティスを学ぶ
Show steps
Reactのベストプラクティスを学び、より効率的で保守性の高いコードを書けるようにします。この本は、コースの内容を補完し、より深い理解を促します。
View
The Road to React: The React.js with Hooks in...
on Amazon
Show steps
-
書籍「Reactの道」を購入または図書館で借りる
-
書籍全体を読み、Reactの基本的な概念とベストプラクティスを理解する
-
書籍で紹介されているサンプルコードを実際に試してみる
Three other activities
Expand to see all activities and additional details
Show all six activities
簡単なTodoアプリを作成する
Show steps
コースで学んだ知識を実践するために、簡単なTodoアプリを作成します。これにより、コンポーネントの作成、状態管理、イベント処理などの基本的なスキルを習得できます。
Show steps
-
Reactプロジェクトを新規作成する
-
Todoアイテムを表示するためのコンポーネントを作成する
-
Todoアイテムを追加、削除、完了するための機能を追加する
-
作成したTodoアプリにスタイルを適用する
React学習のブログ記事を書く
Show steps
Reactの学習内容をブログ記事としてまとめることで、知識の定着を促し、理解を深めます。また、アウトプットを通じて、他の学習者との交流を深めることができます。
Show steps
-
Reactの学習内容からテーマを選ぶ
-
選んだテーマについて調査し、情報を整理する
-
ブログ記事を執筆し、図やコード例を交えて分かりやすく説明する
-
ブログ記事を公開し、SNSなどで共有する
Reactのオープンソースプロジェクトに貢献する
Show steps
Reactのオープンソースプロジェクトに貢献することで、実践的な開発経験を積み、コミュニティとの交流を深めます。これにより、Reactの理解を深め、より高度なスキルを習得できます。
Show steps
-
GitHubでReactのオープンソースプロジェクトを探す
-
プロジェクトのIssueを調べ、貢献できるものを見つける
-
コードを修正し、Pull Requestを送信する
-
レビューを受け、修正を重ねてPull Requestをマージしてもらう
JavaScriptの基礎を復習する
Show steps
コースで頻出するJavaScriptの記法を理解するために、事前にJavaScriptの基礎を復習します。これにより、Reactの学習がスムーズに進みます。
Browse courses on
JavaScript
Show steps
- JavaScriptの基本的な構文（変数、関数、条件分岐、ループ）を復習する
- ES6以降の新しい記法（アロー関数、分割代入、スプレッド構文）を重点的に確認する
- Promiseとasync/awaitを使った非同期処理について理解を深める
TypeScriptの理解を深める
Show steps
TypeScriptを使ってReactを開発する手法を学ぶために、TypeScriptの理解を深めます。この本は、コースの内容を補完し、より高度なReact開発スキルを習得するのに役立ちます。
View
Programming TypeScript
on Amazon
Show steps
- 書籍「プログラミングTypeScript」を購入または図書館で借りる
- 書籍全体を読み、TypeScriptの基本的な概念と型システムを理解する
- 書籍で紹介されているサンプルコードを実際に試してみる
Reactのベストプラクティスを学ぶ
Show steps
Reactのベストプラクティスを学び、より効率的で保守性の高いコードを書けるようにします。この本は、コースの内容を補完し、より深い理解を促します。
View
The Road to React: The React.js with Hooks in...
on Amazon
Show steps
- 書籍「Reactの道」を購入または図書館で借りる
- 書籍全体を読み、Reactの基本的な概念とベストプラクティスを理解する
- 書籍で紹介されているサンプルコードを実際に試してみる
簡単なTodoアプリを作成する
Show steps
コースで学んだ知識を実践するために、簡単なTodoアプリを作成します。これにより、コンポーネントの作成、状態管理、イベント処理などの基本的なスキルを習得できます。
Show steps
- Reactプロジェクトを新規作成する
- Todoアイテムを表示するためのコンポーネントを作成する
- Todoアイテムを追加、削除、完了するための機能を追加する
- 作成したTodoアプリにスタイルを適用する
React学習のブログ記事を書く
Show steps
Reactの学習内容をブログ記事としてまとめることで、知識の定着を促し、理解を深めます。また、アウトプットを通じて、他の学習者との交流を深めることができます。
Show steps
- Reactの学習内容からテーマを選ぶ
- 選んだテーマについて調査し、情報を整理する
- ブログ記事を執筆し、図やコード例を交えて分かりやすく説明する
- ブログ記事を公開し、SNSなどで共有する
Reactのオープンソースプロジェクトに貢献する
Show steps
Reactのオープンソースプロジェクトに貢献することで、実践的な開発経験を積み、コミュニティとの交流を深めます。これにより、Reactの理解を深め、より高度なスキルを習得できます。
Show steps
- GitHubでReactのオープンソースプロジェクトを探す
- プロジェクトのIssueを調べ、貢献できるものを見つける
- コードを修正し、Pull Requestを送信する
- レビューを受け、修正を重ねてPull Requestをマージしてもらう
Career center
フロントエンドエンジニア
データビジュアライゼーションエンジニア
フロントエンドアーキテクト
ウェブデベロッパー
UIコンポーネントライブラリ開発者
UI/UXエンジニア
ヘッドレスコマース開発者
フルスタックエンジニア
ウェブアクセシビリティエンジニア
JavaScriptエンジニア
モバイルアプリケーション開発者
品質保証エンジニア
テクニカルライター
ウェブデザイナー
プロジェクトマネージャー
Reading list
Share
Similar courses
OpenCourser helps millions of learners each year. People visit us to learn workspace skills, ace their exams, and nurture their curiosity.
Our extensive catalog contains over 50,000 courses and twice as many books. Browse by search, by topic, or even by career interests. We'll match you to the right resources quickly.
Find this site helpful? Tell a friend about us.
We're supported by our community of learners. When you purchase or subscribe to courses and programs or purchase books, we may earn a commission from our partners.
Your purchases help us maintain our catalog and keep our servers humming without ads.
Thank you for supporting OpenCourser.
