JavaScriptフロントエンドエンジニア研修(React)

UIの優れたアプリケーションの実装スキルが身につく

フロントエンドエンジニア研修では、Webサイトのコーディングに必要なHTML/CSSとJavaScriptについて学習するフロントエンドエンジニア基礎研修の内容に加え、JavaScriptライブラリのひとつであるReact.jsや、ソースコード管理を行うGitの活用方法を学習。UIの優れたWebサイトやWebアプリケーションの構築ができるようになります。

フロントエンドエンジニアとして必要なスキルを一通り身につけることができるため、自社サイトのコーディングやディレクションを担当する方が本研修を受けることで、WebサイトやWebアプリケーションの品質を高めることができます。

※Vue.jsを中心に学習したい方は「フロントエンドエンジニア研修(Vue)」をご覧ください。

フロントエンドエンジニア研修(React)
について相談する

期待できる効果

  • 高品質なコードでWebサイトが構築できるようになる
  • React.jsによる高品質なUIやWebアプリケーションの実装ができるようになる
  • SEOの観点でのソースコードの品質管理ができるようになる
研修前
  • SEOを考慮しないコーディングしており、ソースコードの質が低かった
  • Webサイトの更新や機能実装を外注に依存しており費用や時間がかかっていた
  • JavaScriptフレームワークを活用した機能の実装ができなかった
研修後
  • SEOやモバイルでの高速表示を考慮したコードが書けるようになった
  • 自社内でWebサイトの更新やJavaScriptなどの機能実装が素早くできるようになった
  • React.jsやNext.jsを活用した機能実装できるようになりUIの質が上がった
さまざまな企業から選ばれています
フロントエンドエンジニア研修(React)
について相談する

フロントエンドエンジニア研修(React)の特徴

  • 特徴1実務に直結するスキルが身につく
    実務に直結するスキルが身につく

    研修では、実際にWebサイトの設計やコーディングの演習をするので、研修後も実務に活用することができます。

  • 特徴2研修のカスタマイズができる

    貴社の業務上の課題感や目的に合わせて、カリキュラムや研修スケジュールを柔軟にカスタマイズできます。お気軽にご相談ください。

  • 特徴3研修の成果を可視化できる

    学習管理システム(LMS)での進捗管理はもちろん、日報、理解度テストの結果、開発した成果物など、様々な角度から研修効果を測定できます。

研修カリキュラム

Webサイト制作研修

フロントエンドエンジニア研修(React.js)では、Web標準に沿った正しいHTML/CSSを学習するのはもちろん、実際にWebサイトの設計やコーディングの演習を通じて実践的なスキルを身につけます。また、本研修ではReact.jsや関連技術であるNext.js、Firebaseとの連携についても学習し、UIに優れたWebアプリケーション実装についても学習します。

制作演習を通じて、正しい文書構造でコードを記述するセマンティックコーディングやモバイルファーストを考慮した軽量なコーディングを学び、SEOにも強いWebページ構築スキルから習得します。

その後、React.jsについて学習。開発環境の準備からSPA(Single Page Application)の開発演習、Next.jsによるアプリケーションの機能拡張、Firebaseを用いたデータベースとの連携方法まで学習し、開発の実践で求められるスキルを身につけます。

また、Gitによるソースコードの管理についても学びますので、フロントエンドエンジニアとしての実務はもちろん、ディレクターが外注先のエンジニアとのやり取りする際にスムーズなプロジェクト進行ができるようになります。

対象者
  • Webサイトのコーディングを担当する方
  • 自社サイトの更新を担当する方
  • ディレクターとしてWebサイトの品質管理を行う方
研修の目的
  • Webサイトの更新を担当する社員にWeb標準のコーディングスキルを学ばせたい
  • SEOに強くUIにも優れたWebサイトを構築することでユーザーの満足度を高めたい
  • コーディングを外注する際の品質管理や、日々の更新がスムーズにできるようになりたい
フロントエンドエンジニア研修(React)
について相談する
HTML/CSS/JavaScript基礎
項目 内容
Web概論・HTML基礎
  • Webの概要
  • ホームページの概要
  • HTMLの基本的なタグ
  • テーブル(表)
ハイパーリンクとマルチメディア
  • ハイパーリンク
  • 画像とWebにおける色指定
  • 動画
  • 音声
フォーム
  • フォームとは
  • フォームのパーツ(基本)
  • フォームのパーツ(応用)
セマンティックコーディングとWeb制作フロー
  • HTMLの変遷
  • セマンティック・コーディング
  • Web制作フロー
  • 画像の書き出し
  • HTMLのコードチェック
CSS基礎
  • CSSとは
  • CSSのルール
  • セレクター
  • フォント、テキストのスタイリング
  • 疑似クラス
CSSレイアウト
  • CSSレイアウト1
  • CSSレイアウト2
  • デザインのプロパティ
  • 背景とボーダー画像
  • その他スタイル指定
HTML構築(Dreamweaver/VSCode)
  • オーサリングツールとは
  • コーディングに入る前
  • HTMLコードの記述
CSS構築(Dreamweaver/VSCode)
  • CSSコーディング
  • 開発者ツール
  • CSS演習
  • サーバーへのアップロード
メディアクエリ・Webフォント・CSSアニメーション
  • メディアクエリ
  • Webフォント
  • 疑似要素
  • グラデーション
  • trasnsformプロパティー
  • トランジション・アニメーション
JavaScript基礎1
  • JavaScriptの概要と書式
  • JavaScriptの命令
  • 変数・演算子
  • 条件・ループ
  • 関数とイベント
JavaScript基礎2
  • DOMの仕様と要素ノードの操作
  • 属性ノードとテキストノード
  • Googleマップの導入
jQuery
  • jQueryの基本
  • jQueryにおけるイベント処理
  • jQueryの実践
  • jQueryプラグインの利用
Web制作実践
項目 内容
企画・デザインカンプの作成
  • Webサイト制作フロー
  • 企画
  • サイトの構成図の作成
  • ワイヤーフレーム
  • デザインカンプの下準備
  • ファイル管理
モバイルサイトの企画・設計
  • スマートフォンの特徴
  • 企画とワークフロー
  • ワイヤーフレーム
モバイルサイトの構築方法と高速化
  • Webサイトの高速化
  • モバイルサイト構築の方法
  • モバイル専用サイトの製作
レスポンシブWebデザイン1
  • レスポンシブWebデザインの基本
  • レスポンシブWebデザインのHTMLコーディング
レスポンシブWebデザイン2
  • レスポンシブWebデザインのCSSコーディング
制作実践1
  • 画像アセット
  • 制作実践1
制作実践2
  • 制作実践2
  • JavaScriptのプラグイン
ソースコードの検証とモバイル最新技術
  • ソースコードの検証
  • AMP
  • PWA
JavaScript応用
項目 内容
開発環境の設定と最新の記法
  • Visual Studio Code のインストールと操作方法
  • ECMAScript5,6(ES5, ES6)の記法
  • 【開発演習】 最新のJS記法へ書きかえ
デバッグとオブジェクト
  • バグの直し方
  • ビルトインオブジェクト
  • ブラウザオブジェクト
  • 【開発演習】 宿泊サイト料金計算アプリ
制御構文・正規表現・例外処理
  • 制御構文を使った複雑な処理
  • 表現
  • 例外処理
  • 【開発演習】 フォームの入力内容を確かめる
  • 【開発演習】 占い風アプリを作る
イベント・JavaScriptのクラスとオブジェクト
  • イベント
  • 配列とオブジェクト
  • クラス
  • 【開発演習】 簡易的なRPGの戦闘処理
jQueryによるアニメーション作成
  • クラスの切りかえによる動き
  • パララックスを作る
  • ローディングアニメーションの作成
Ajaxの基本
  • Ajaxとはなにか
  • JSONとJSONP
  • AjaxとPromise
  • 【開発演習】 OpenWetherAPIを用いた固定の気象情報の取得
制作実践2
  • 制作実践2
  • JavaScriptのプラグイン
jQueryを用いたAjax
  • Ajaxメソッド
  • 住所自動入力フォームの読解
  • 【開発演習】 ユーザーの入力に応じて気象情報を取得するアプリ
HTML5とCanvas
  • Canvas
  • 【開発演習】 背景アニメ
  • Webアプリを作る
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の操作
Git
講座 内容 詳細
Git 第1回 Gitのメリット
Gitのメリット、Git誕生の経緯
Githubとは GitHubとは、GitHubでできること
Gitの仕組み概要 Gitの勉強が難しいとされるポイント、Git管理の基本構成
Gitの基礎コマンドのイメージ解説 Gitの基礎コマンドのイメージ解説
Gitの基礎コマンド(グラフィカルな操作で確認) VSCodeの利用、VSCodeの拡張機能(Git Graph)、例題:コミットしてみる
Gitの基礎コマンド(コマンドで確認) Gitの基本コマンド、よく使うコマンド、例題:Gitの基本コマンド、元に戻すときのコマンド、.gitフォルダの削除
Git 第2回 ブランチ
ブランチとマージ、ブランチのメリット、ブランチ操作のGitコマンド、例題:ブランチ操作
マージ マージとは、マージ(問題が起きないパターン)、マージ(問題が起こるパターン)
Git 第3回 リモートリポジトリ
Git管理の基本構成、リモートリポジトリ、プッシュとプルの概要
GitHubの利用 GitHubとは、アカウント登録とSSH接続、クローン、プッシュとプルを試す、フェッチとプルの違い
プルリクエスト プルリクエストの流れ、プルリクエストの実践
Gitを使った開発フロー Gitを使った開発フロー、Git FlowとGitHub Flow
Git 第4回 プルリクエスト(却下されたとき)の対応
プルリクエスト(却下されたとき)の対応
Git Flowのhotfix対応 Git Flowのhotfix対応

時間数・日程

76時間
※カリキュラム内容や時間数のカスタマイズができますので、お気軽にご相談ください。
※開催日程は貴社のご要望をお伺いしご提案いたします。

料金体系

受講者数や時間数に応じて変動します。また、カリキュラム内容のカスタマイズや講師派遣などのご要望に応じて変動いたします。ご予算にあわせてのご提案もできますので、お気軽にお問い合わせください。

フロントエンドエンジニア研修(React)
について相談する

受講形式

インターネット・アカデミーの研修は、さまざまな形式に対応しています。「基礎はeラーニングで演習は集合研修」「講師派遣とリモートを組み合わせる」など、複数の形式の併用もできますので、お気軽にご相談ください。

  • リモート集合研修
  • 実地での集合研修
  • 講師派遣
  • eラーニング

Web開発会社の開発・マネジメントのノウハウをカリキュラム化現場の実務が研修で学べる

インターネット・アカデミーのグループ会社ではWeb開発・Saasサービスを手掛けています。実務で用いられている開発ノウハウをカリキュラム化し、研修で還元しています。

理解度チェック・アセスメントなど学習効果を可視化できる学習管理システム(LMS)

インターネット・アカデミーの学習管理システム(LMS)では「研修後の知識定着度を可視化したい」「社内報告のためのアセスメントがほしい」など、研修担当者の悩みにこたえる機能を搭載。学習の進捗管理から、さまざまな角度からの研修効果測定が行えます。

  • 研修テーマごとに受講した社員の理解度をダッシュボードで確認できます。
  • テストの結果を元に社員ごとのスコアをグラフで可視化。社内の平均スコアとの比較もできます。
  • 受講態度や理解度といった講師からのフィードバックによる定性評価にも対応しています。

Web制作系の研修を受けた企業からのコメント

株式会社エイチ・アイ・エス

研修を経てWeb独自の制作の流れを理解することができたので、現在では明確に役割分担をして、制作の精度を高めつつ、チーム全体のスピードアップを図ることまでできるようになりました。それから、これまで社内の企画担当者の希望に近づけること優先でコンテンツ作成していたのが、Webに対する知識が増えたことで、より良いものを素早く作るための提案やリードができるようになりました。
インタビューを見る

株式会社 堀内カラー

研修とITコンサルティングの当面の成果目標としては、弊社のWebサイトを内製化し、リニューアル公開することにありました。まずはWebサイトの制作を行うプロジェクトチームメンバーが、業務を行う上で必要なスキルを身に着けるべくインターネット・アカデミーに通って講座を受講しました。
インタビューを見る

パーソルテクノロジースタッフ株式会社

実際にReactを使ったハンズオンを積極的に行ってくださったことや各受講者のスキルや理解度に応じてカリキュラムを進めてくださることがとてもよかったです。またスキルだけでなく、受講者それぞれの性格も考慮して研修してくださっていたので、質の高い研修でした。
インタビューを見る

フロントエンドエンジニア研修(React)
について相談する

研修費用を最大75%削減できる助成金

インターネット・アカデミーのIT研修では、要件を満たすことで厚生労働省の人材開発支援助成金が利用できます。研修費用に対する経費助成と、受講中の賃金に対する賃金助成の両方が支給されます。

この助成金制度ではいくつかのコースが用意されており、研修目的に合わせて使用できる制度をご提案いたします。

経費助成+賃金助成
※eラーニングの場合、賃金助成は支給されません。
DX人材育成の研修で使える
事業展開等リスキリング支援コース/人への投資促進コース
  経費助成 賃金助成
中小企業 75% 1000(1人1時間)
大企業 60% 500(1人1時間)

経済産業省のDX認定を取得している企業は、研修テーマを問わず「人への投資促進コース」が利用できます。

助成金を使った研修の事例紹介や、貴社が研修を行った場合に支給される助成額シミュレーションも承っています。お気軽にご相談ください。

助成金について相談する

フロントエンドエンジニア研修(React)についてのご相談

法人サービスの電話お問合せ窓口
03-3341-3781
受付時間(平日・土日) 10時-21時

IT人材育成に精通したコンサルタントに無料でさまざまな相談をしていただけます。お気軽にご相談ください。

たとえばこんな相談ができます
  • 人材育成計画を立てるために人材育成の事例などをとりあえず聞きたい
  • 助成金の使い方や、支給額のシミュレーションを知りたい
  • 自社の業務や受講者のレベルにあったカリキュラムを提案してほしい
会社名必須
部署名必須
お名前必須
電話番号必須
メールアドレス必須
受講人数
開始時期
対象者
       
ご相談内容
個人情報の取扱いについて

個人情報の利用目的についてご同意いただいた場合のみ、「同意して進む」を押してください。

このページの上へ