デジタルスキル標準フロントエンドエンジニア育成研修ベーシック
- フロントエンドの開発ができるようになる
- UXを考慮したインターフェース実装ができる
- 開発の実践力が身につく
「フロントエンドエンジニア育成研修ベーシック」では、デジタルスキル標準で策定されているDX人材「フロントエンドエンジニア」を育成します。
本研修では、「フロントエンドエンジニア」のスキル基準Aで定義されている項目を中心に学習します。HTMLやJavaScript、React、UXなどを演習を交えながら身につけます。
フロントエンドエンジニア育成研修について相談する
フロントエンドエンジニア育成研修の特徴
-
特徴1Web標準の正確な技術が学べる
インターネット・アカデミーはWeb技術の標準化団体W3Cの、日本の教育業界唯一のメンバースクール。標準に沿った正確な技術を学べます。
-
特徴2実務に直結するスキルが身につく
知識をインプットするのはもちろん、豊富な開発実践の演習を通じて、実務に直結するスキルを身につけます。
-
特徴3研修の成果を可視化できる
学習管理システム(LMS)での進捗管理はもちろん、日報、理解度テストの結果、開発した成果物など、様々な角度から研修効果を測定できます。
研修カリキュラム
DX人材「フロントエンドエンジニア」は、Webサービス・アプリケーションなどのインターフェース部分の開発・実装を担う役割として定義されています。フロントエンドの技術は高い水準が求められ、バックエンドやサーバーなどについても一定のスキルが必要とされています。
「フロントエンドエンジニア育成研修」では、HTML/CSS、JavaScript、React（Vue）など、フロントエンド実装に関する技術の習得と、UXへの理解を深めます。研修では、Webサイトやシステムを作成する演習や、UXのディスカッションなどの演習を通じて実践的なスキルを習得します。
- HTML/CSS
- Web制作実践
- UX
- JavaScript
- React ※Vueへの変更も可能です
- 開発演習
| 項目 | 内容 |
|---|---|
| Web概論・HTML基礎 |
|
| ハイパーリンクとマルチメディア |
|
| フォーム |
|
| セマンティックコーディングとWeb制作フロー |
|
| CSS基礎 |
|
| CSSレイアウト |
|
| HTML構築（Dreamweaver/VSCode） |
|
| CSS構築（Dreamweaver/VSCode） |
|
| メディアクエリ・Webフォント・CSSアニメーション |
|
| JavaScript基礎1 |
|
| JavaScript基礎2 |
|
| jQuery |
|
| 項目 | 内容 |
|---|---|
| 企画・デザインカンプの作成 |
|
| モバイルサイトの企画・設計 |
|
| モバイルサイトの構築方法と高速化 |
|
| レスポンシブWebデザイン1 |
|
| レスポンシブWebデザイン2 |
|
| 制作実践１ |
|
| 制作実践２ |
|
| ソースコードの検証とモバイル最新技術 |
|
| 項目 | 内容 |
|---|---|
| UXデザインの考え方を身につける |
|
| ユーザー体験と価値を設計する |
|
| UIを設計する |
|
| UXを継続的に向上させる |
|
| 項目 | 内容 |
|---|---|
| 開発環境の設定と最新の記法 |
|
| デバッグとオブジェクト |
|
| 制御構文・正規表現・例外処理 |
|
| イベント・JavaScriptのクラスとオブジェクト |
|
| jQueryによるアニメーション作成 |
|
| Ajaxの基本 |
|
| 制作実践２ |
|
| jQueryを用いたAjax |
|
| HTML5とCanvas |
|
| 講座 | 内容 | 詳細 |
|---|---|---|
| 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の操作 |
| 項目 | 内容 |
|---|---|
| 開発演習の流れ |
|
※ReactはVueへの変更や、両方を学習することもできます。
フロントエンドエンジニア育成研修について相談する
時間数・日程
97時間
※日数・時間は目安となります。ご利用いただくサービス形式によって変動します。
料金体系
受講者数や受講形式に応じて変動します。
受講人数が増えると1人当たりの費用に割引がかかります。詳しくはお問い合わせください。
受講形式
インターネット・アカデミーの研修は、さまざまな形式に対応しています。「基礎はeラーニングで演習は集合研修」「講師派遣とリモートを組み合わせる」など、複数の形式の併用もできますので、お気軽にご相談ください。
リモート集合研修 
実地での集合研修 
講師派遣 
eラーニング
Web開発会社の開発・マネジメントのノウハウをカリキュラム化現場の実務が研修で学べる
インターネット・アカデミーのグループ会社ではWeb開発・Saasサービスを手掛けています。実務で用いられている開発ノウハウをカリキュラム化し、研修で還元しています。
理解度チェック・アセスメントなど学習効果を可視化できる学習管理システム（LMS）
インターネット・アカデミーの学習管理システム（LMS）では「研修後の知識定着度を可視化したい」「社内報告のためのアセスメントがほしい」など、研修担当者の悩みにこたえる機能を搭載。学習の進捗管理から、さまざまな角度からの研修効果測定が行えます。
研修テーマごとに受講した社員の理解度をダッシュボードで確認できます。 
テストの結果を元に社員ごとのスコアをグラフで可視化。社内の平均スコアとの比較もできます。 
受講態度や理解度といった講師からのフィードバックによる定性評価にも対応しています。
デジタル人材育成の研修をした企業のコメント
受講者からは、「Webの開発技術に幅広く触れることができた」という意見や、「講師と受講者、担当者間のコミュニケーション手段が簡便で対応しやすかった」との感想がありました。フルリモートでの受講でしたが、受講管理システムのLMSをはじめ、SlackやZoomなどのWebツールを通じて、質疑応答などのコミュニケーションをとることで学びを深めることができたようです。
インタビューをみる
研修で第一に求めた点はフロントエンド、バックエンドともに基礎だけでなくトレンドを踏まえたプログラミング言語を組み入れられるかという点と、研修中も随時新入社員たちの成長具合を共有できるなどフォローにも対応していただけるかという点です。研修終了後１カ月程度で、一定のレベルに達した10数人はすでにプロジェクトで業務を始めました。さらに10人ほども間もなくデビューする予定です。
インタビューをみる
研修を通して、最新技術を身に着け、エンジニアの就業支援を行うという弊社の要望をかなえていただき、大変満足しています。毎回充実した研修内容を提供してくださっているので、実は、すでに次のIT研修もお願いしています。今後の実務での可能性を考慮した、各受講者の強みやアピールポイントをインストラクターの方から丁寧にフィードバックをしてもらえたということがとてもよかったです。
インタビューをみるについて相談する
IT人材育成に活用できる助成金制度
インターネット・アカデミーのIT研修では、要件を満たすと厚生労働省の人材開発支援助成金が利用できます。
貴社の実際の業務をテーマにした演習を行うため、研修内容をそのまま業務に活かすことができます。
-
DX人材育成で使える高い助成率の制度事業展開等リスキリング支援コース最大支給額：1億円
経費助成 ：最大75%
賃金助成 ：最大960円(1人1hあたり)DX化のための人材育成を行うIT研修で利用できます。支給額が他の制度よりも高いのが特徴です。
-
さまざまな雇用形態・目的で利用できる使いやすい制度人材育成支援コース最大支給額：1000万円
経費助成：最大60%
賃金助成：最大760円(1人1hあたり)正規・非正規など雇用形態を問わずに利用でき、利用要件も他の制度に比べると緩和されているのが特徴です。
-
高度デジタル人材訓練に使える人への投資促進コース最大支給額：1500万円
経費助成：最大75%
賃金助成：最大960円(1人1hあたり)情報通信業やDX事業計画を策定している企業が対象の制度で、高い専門性を身につける場合に活用できます。
「助成金の制度がややこしくてわからない」「自社で検討している研修が対象になるのか知りたい」「申請書作成が大変なので何とかしたい」など、助成金についてのお悩みがありましたら、お気軽にご相談ください。
助成金について相談するIT研修・DX人材育成についてのご相談
IT人材育成に精通したコンサルタントに無料でさまざまな相談をしていただけます。お気軽にご相談ください。
- 人材育成計画を立てるために人材育成の事例などをとりあえず聞きたい
- 助成金の使い方や、支給額のシミュレーションを知りたい
- 自社の業務や受講者のレベルにあったカリキュラムを提案してほしい
