Reactエンジニアコース
最新のReactを用いた実務的なUI開発を学び、効率的かつ拡張性あるシステム構築を支援します。
このような課題を抱えていませんか?
スキルがなくて、
案件にアサインできない…
社員が自発的に学習をしてくれない…
ロースキルで契約更新ができない…
基礎から現場ベースのカリキュラムを通して
実務に確実に結びつく研修をご案内します。
カリキュラム概要
Reactの基礎から実務開発までを体験できる研修
TypeScript：型定義、安全性の高い実装
React：コンポーネント設計、状態管理、イベント処理、API連携
React Hooks：useState / useEffect などの基本フック
開発手法：再利用性・保守性を意識した設計
アプリケーション開発の実践課題を通して、即戦力のフロントエンドエンジニアを育成します。
この研修がおすすめな方
マークアップ領域からスキルアップしたい
フロントエンドエンジニアとして、現場で即戦力として活躍したい
チーム開発やコードレビューに対応できる力を伸ばしたい
基礎的な内容からアプリケーション開発までを順番に取り組むため、着実に実装力を身につけることができます。
取り扱う言語・技術
TypeScript
TypeScriptの基礎を学びます。JavaScriptの課題をベースに行うため、効率よく学習を進めることが可能です。
React.js
TypeScriptを用いて、React.jsを学びます。簡易的なWebアプリケーションをいくつも作成することでより実践的な知識を身につけます。
Git
Gitを使ってソースコードのバージョン管理を学びます。基本操作から、開発フロー、pull request によるコードレビューまで、チーム開発を想定した実践的なGitの使い方を身につけます。
講義内容
TypeScript入門
TypeScriptの基本と型の使い方を学ぶ
関数とAPI連携
関数の宣言に使える型とAPI連携の基本を理解する
実践演習
ここまで学んだことを活かし、穴埋め形式の課題に取り組む
Vite環境構築とJSXの基本
Reactの基本概念とJSX構文を理解し、環境構築を行う
コンポーネント分割とPropsの受け渡し
コンポーネント分割とPropsを用いたデータ受け渡しを学ぶ
4つのスタイリング手法を学ぶ
CSS適用方法を比較し、Reactに最適なスタイル管理を理解する
イベント処理と状態管理
useStateによる状態管理とprops連携、オブジェクト更新を習得する
useEffectと副作用・ライフサイクル
useEffectを使った副作用処理とライフサイクルを理解する
カスタムフックでロジックを共通化
カスタムフックを用いて処理の再利用と保守性を高める
ToDoアプリ制作（localStorage）
Todoアプリ作成を通じて、学んだ機能を実装・保存処理を行う
ページ遷移と動的ルーティング
React Routerを使って、静的・動的ルーティングの設定を学ぶ
Redux Toolkitを使った状態管理
Fluxアーキテクチャの理解とReduxによる状態管理を習得する
FirestoreとRedux Thunkの基礎
Firebaseの設定やデータ構造を理解し、非同期データの基本操作を学ぶ
Firebase認証とログイン機能
Firebase Authenticationを使った認証の仕組みとログイン処理を理解する
記事作成機能と認証によるアクセス制御
Firebase関連の機能を統合し、実践的なアウトプットを行う
json-serverを使ったREST API連携
REST APIと非同期通信の仕組みを理解し、データ取得を学ぶ
最終課題
Reactを活用して実践的なWebアプリケーションを開発する
講義内容
TypeScript入門
TypeScriptの基本と型の使い方を学ぶ
関数とAPI連携
関数の宣言に使える型とAPI連携の基本を理解する
実践演習
ここまで学んだことを活かし、穴埋め形式の課題に取り組む
Vite環境構築とJSXの基本
Reactの基本概念とJSX構文を理解し、環境構築を行う
コンポーネント分割とPropsの受け渡し
コンポーネント分割とPropsを用いたデータ受け渡しを学ぶ
4つのスタイリング手法を学ぶ
CSS適用方法を比較し、Reactに最適なスタイル管理を理解する
イベント処理と状態管理
useStateによる状態管理とprops連携、オブジェクト更新を習得する
useEffectと副作用・ライフサイクル
useEffectを使った副作用処理とライフサイクルを理解する
カスタムフックでロジックを共通化
カスタムフックを用いて処理の再利用と保守性を高める
ToDoアプリ制作（localStorage）
Todoアプリ作成を通じて、学んだ機能を実装・保存処理を行う
ページ遷移と動的ルーティング
React Routerを使って、静的・動的ルーティングの設定を学ぶ
Redux Toolkitを使った状態管理
Fluxアーキテクチャの理解とReduxによる状態管理を習得する
FirestoreとRedux Thunkの基礎
Firebaseの設定やデータ構造を理解し、非同期データの基本操作を学ぶ
Firebase認証とログイン機能
Firebase Authenticationを使った認証の仕組みとログイン処理を理解する
記事作成機能と認証によるアクセス制御
Firebase関連の機能を統合し、実践的なアウトプットを行う
json-serverを使ったREST API連携
REST APIと非同期通信の仕組みを理解し、データ取得を学ぶ
最終課題
Reactを活用して実践的なWebアプリケーションを開発する
成果物の例
POINT
現場を想定したフローでwebアプリケーションを開発
01 要件定義書を確認
開発の前段階として要件定義書、画面設計書、API仕様書を確認します
02 Figmaでデザインを確認
Figmaでレイアウトを確認し、画像の書き出しなどを行います
03 学んだことを活かして開発
デザインを基に、React.jsとTypeScriptを用いて実装します
04 テスト
開発したアプリケーションが要件通りに漏れなく動くか自身でテストを行います
研修の進み方
STEP01
現在の案件やスキルをベースに、目標を設定します。Web開発やアプリケーション開発に精通した現役エンジニアの講師と一緒に考え、具体的な目標の設定を行います。
STEP02
学習進捗に合わせて、課題のレビューをハンズオン形式で行います。受講者がコーディングしたデータを画面共有しながらレビューすることで、問題点をすぐに改善することが可能です。
料金形態
パーソナルコース
講師が個々の習熟度に合わせて行う個別学習コースです。講師とマンツーマンで実施するため、疑問点を細かく解消でき、理解度を高めながら効率的にスキルを習得できます。
料金
372,000 円（税抜）
講義回数
31 回
グループコース
同一内容を複数名で受講する集合型の学習コースです。講師の解説だけでなく、他受講者との質疑応答を通して理解を深め、実務への応用力を養います。※受講人数3名〜
料金（3名）
781,200 円（税抜）
講義回数
31 回
MATERIAL
資料ダウンロード
提供サービスの内容や実績/事例についてご紹介します。
CONTACT
お問い合わせ
まずはお気軽にご相談ください。