優れたUI構築と
Webアプリケーション開発を行うReact講座

Facebook社が開発した人気のJavaScriptライブラリ。さまざまなUIパーツの構築ができ、優れたインターフェースを効率よく作成することができます。実際にWebアプリを開発しながらReactの機能や他フレームワーク、Web APIとの連携方法など実務で必要な技術を習得します。

こんな方にオススメ

フロントエンドとバックエンド間のデータの受け渡し方法に悩んでいる方
転職やキャリアアップのために市場価値の高いフロントエンドエンジニアを目指す方
Reactを導入し、Webページの表示速度の改善をしたいと考えている方

React講座で
身につく具体的なスキル

Reactの基本理解

Reactで実現できる機能の確認や、環境開発に関する知識が身に付きます。環境構築をした上で簡単な機能を作成することでReactによる開発の基本を学びます。
クラスコンポーネントとJSX

クラスコンポーネントを活用した機能の開発を行います。JSX構文やpropsによる属性の利用、ステート、イベントについて学習します。
関数コンポーネントとフック

関数コンポーネントの利用方法や、Reactの独自機能であるフックについて学習し、それらを利用したメッセージ管理アプリの開発を学びます。
Next.jsによる拡張機能

Reactを拡張するソフトウェアであるNext.jsについて学習し、ルーティングの概念を学習します。このような拡張機能が豊富にあるのがReactの特徴の一つです。
アドレス検索アプリの開発

Web APIを利用する方法や、Next.jsの独自フックであるSWAを利用した開発方法を学習し、簡単なアドレス検索アプリを作れるようになります
Firebaseとの連携

データベースと連携したアプリケーションを開発し、Googleが提供するFirebaseと連携、ユーザー認証機能つきのメッセージボードのアプリの開発を学びます。

React講座
講座内容

Reactの基本を理解する
- フロントエンド開発とReact
- CDNでReactを使う
- Reactによる表示作成の仕組み
- Node.jsとnpm
- Npmを使用したReactアプリケーションを作成する
- npmプロジェクトの仕組み
クラスコンポーネントとJSX
- クラスコンポーネントの基本
- コンポーネントクラスの定義
- コンポーネントを利用する
- propsによる属性の利用
- ステートを利用
- イベントの利用
- JSXの構文的利用
関数コンポーネントとフック
- 関数コンポーネントの基本
- ステートフック
- 副作用フック
- 独自フッ
- メッセージ管理アプリの作成
Next.jsによる機能拡張
- Reactの機能を拡張する
- Next.jsプロジェクトを作成する
- ファイルシステムルーティング
- スタイルシートの利用
- styled-jsxの利用
- スター付きメッセージ管理アプリの作成
API利用とネットワークアクセス
- APIルートについて
- Web APIとは
- Fetch APIを使用する
- SWRとは
- パラメータを利用する
- SWRを使ったテキスト出力
- POST・PUT・DELETEメソッドへの対応
- アドレス検索アプリを作る
Firebaseとの連携
- データベース
- Firestoreデータベースの利用
- データベースとコレクション
- Authとユーザー認証
- Authenticationの利用
- 認証ユーザーのみアクセスを許可する
- ユーザー認証を使ったメッセージボード