JavaScriptReact.js研修
React.jsは「Facebook」や「Twitter」「Instagram」などの代表的なSNSや、「Yahoo!」「Netflix」「Slack」「Uber」などのWebサービスでも利用されている、世界的に人気のJavaScriptライブラリです。特にWebアプリケーション開発でよく使用され、導入の手軽さやコーディングの手間を抑えられる、パーツの管理や改修がしやすいなどもReact.jsならではの特長です。
React.js研修では、実際にWebアプリケーションを開発しながらReact.jsの機能や他フレームワーク、Web APIとの連携方法など実務で必要な技術を習得することができます。
React.js研修について相談する期待できる効果
- React.jsを用いてSPAの開発ができるようになる
- データベースと連携した、より高度な機能のアプリケーション開発ができるようになる
- SPA開発への理解が深まることでディレクターの企画・設計力が高まる
- 新人エンジニアに対して、先輩社員が教育に時間を割くうえでの負担が大きかった
- Reactの知識が足りずに開発していたため、UIや機能が不十分だった
- 新人エンジニアの技術理解が進み、開発業務が円滑になり社内教育の負担も軽減された
- Reactによる機能実装でUIが改善されサイトのパフォーマンスが改善された
React.js研修の特徴
-
特徴1実務に直結するスキルが身につく
研修では、実際にReact.jsを利用した基本的な開発演習をするので、研修後も実務に活用することができます。
-
特徴2研修のカスタマイズができる
貴社の業務上の課題感や目的に合わせて、カリキュラムや研修スケジュールを柔軟にカスタマイズできます。お気軽にご相談ください。
-
特徴3研修の成果を可視化できる
学習管理システム(LMS)での進捗管理はもちろん、日報、理解度テストの結果、開発した成果物など、様々な角度から研修効果を測定できます。
研修カリキュラム
React.js研修では、JavaScriptの知識がある方に向けてReactの基本から、Next.jsを利用した機能の拡張、API連携、Firebaseとの連携まで行います。
React.jsでの開発を行うためのNode.jsのインストールや設定方法から、コンポーネントやフックなどの基本的な機能について、SPA(Single Page Application)の開発演習を通じて学習していきます。また、Next.jsを使ってアプリケーションの機能を拡張したり、Firebaseを用いてデータベースを利用するアプリケーションの開発を行うことで、実践的なスキルを身につけることができます。
JavaScriptの知識がない方は、JavaScript研修とセットでの受講をお勧めしています。
- JavaScriptの基礎知識がある方
- フロントエンドエンジニアの業務を担当する方
- UIの優れたアプリケーション開発を行いたい方
- 自社のフロントエンドエンジニアのスキルを高めることで開発力を強化したい
- ディレクター職がReact.jsへの理解を深めることで円滑な開発ができるようにしたい
| 講座 | 内容 | 詳細 |
|---|---|---|
| React 第1回 | React開発の全体像を理解する |
フロントエンド開発とReact、Reactによる表示作成の仕組み、Node.jsとnpm
|
| 開発環境とプロジェクト構造 | Vite(ヴィート)を使用したReactアプリケーションの作成、プロジェクト全体の構成 | |
| コンポーネントの基本 | cJSXの構文的利用、関数コンポーネントの基本、propsによる属性の利用、イベントの利用 | |
| React 第2回 | 画面を動かすState管理 |
ステートを利用、ステートフック（useState）、配列データの表示
|
| 副作用とフォーム処理 | 副作用フック（useEffect）、フォーム入力とステート管理 | |
| ロジックの再利用 | 独自フック | |
| ローカル状態でのアプリ作成 | メッセージ管理アプリの作成（ローカル状態） | |
| React 第3回 | SPAとルーティングの基礎 |
React Routerの導入、コンポーネントを利用する（ページ分割）、共通部分のレイアウト作成
|
| パラメータと画面遷移 | パラメータを利用する、画面遷移の実践 | |
| React 第4回 | Next.jsの導入 |
Next.jsプロジェクトを作成する、ファイルシステムルーティング、React Routerとの違い
|
| Next.jsの構造理解 | スタイルシートの利用（CSS Modules）、Reactとの違い(ルーティング、レイアウト等) | |
| React 第5回 | フロントエンドとバックエンドの連携 |
REST APIとは
|
| バックエンド(REST API)との接続 | Next.jsからバックエンド(REST API)へ接続、useEffectを用いたデータ取得、JSONデータの表示 | |
| データ登録処理 | POSTメソッドでの登録、エラー処理とローディング、CORSの理解 | |
| React 第5回 | CRUD処理の完成 |
DELETEメソッドでの削除、PUTメソッドでの更新、1つにまとめたアプリ画面の作成
|
| 【補足】外部サービスとの連携 | Google Firestoreの操作 |
時間数・日程
12時間
※カリキュラム内容や時間数のカスタマイズができますので、お気軽にご相談ください。
※開催日程は貴社のご要望をお伺いしご提案いたします。
料金体系
受講者数や時間数に応じて変動します。また、カリキュラム内容のカスタマイズや講師派遣などのご要望に応じて変動いたします。ご予算にあわせてのご提案もできますので、お気軽にお問い合わせください。
React.js研修について相談する受講形式
インターネット・アカデミーの研修は、さまざまな形式に対応しています。「基礎はeラーニングで演習は集合研修」「講師派遣とリモートを組み合わせる」など、複数の形式の併用もできますので、お気軽にご相談ください。
リモート集合研修 
実地での集合研修 
講師派遣 
eラーニング
Web開発会社の開発・マネジメントのノウハウをカリキュラム化現場の実務が研修で学べる
インターネット・アカデミーのグループ会社ではWeb開発・Saasサービスを手掛けています。実務で用いられている開発ノウハウをカリキュラム化し、研修で還元しています。
理解度チェック・アセスメントなど学習効果を可視化できる学習管理システム（LMS）
インターネット・アカデミーの学習管理システム（LMS）では「研修後の知識定着度を可視化したい」「社内報告のためのアセスメントがほしい」など、研修担当者の悩みにこたえる機能を搭載。学習の進捗管理から、さまざまな角度からの研修効果測定が行えます。
研修テーマごとに受講した社員の理解度をダッシュボードで確認できます。 
テストの結果を元に社員ごとのスコアをグラフで可視化。社内の平均スコアとの比較もできます。 
受講態度や理解度といった講師からのフィードバックによる定性評価にも対応しています。
JavaScript系の研修を受けた企業からのコメント
研修の進め方として、実際にReactを使ったハンズオンを積極的に行ってくださったことや各受講者のスキルや理解度に応じてカリキュラムを進めてくださることがとてもよかったです。またスキルだけでなく、受講者それぞれの性格も考慮して研修してくださっていたので、質の高い研修でした。
インタビューを見る
研修を経てWeb独自の制作の流れを理解することができたので、現在では明確に役割分担をして、制作の精度を高めつつ、チーム全体のスピードアップを図ることまでできるようになりました。これまで社内の企画担当者の希望に近づけること優先でコンテンツ作成していたのが、Webに対する知識が増えたことで、より良いものを素早く作るための提案やリードができるようになりました。
インタビューを見る
研修費用を最大75％削減できる助成金
インターネット・アカデミーのIT研修では、要件を満たすことで厚生労働省の人材開発支援助成金が利用できます。研修費用に対する経費助成と、受講中の賃金に対する賃金助成の両方が支給されます。
この助成金制度ではいくつかのコースが用意されており、研修目的に合わせて使用できる制度をご提案いたします。
| 経費助成 | 賃金助成 | |
|---|---|---|
| 中小企業 | 75% | 1000円（1人1時間） |
| 大企業 | 60% | 500円（1人1時間） |
※経済産業省のDX認定を取得している企業は、研修テーマを問わず「人への投資促進コース」が利用できます。
助成金を使った研修の事例紹介や、貴社が研修を行った場合に支給される助成額シミュレーションも承っています。お気軽にご相談ください。
助成金について相談する
React.js研修についてのご相談
IT人材育成に精通したコンサルタントに無料でさまざまな相談をしていただけます。お気軽にご相談ください。
- 人材育成計画を立てるために人材育成の事例などをとりあえず聞きたい
- 助成金の使い方や、支給額のシミュレーションを知りたい
- 自社の業務や受講者のレベルにあったカリキュラムを提案してほしい
