デジタルスキル標準フロントエンドエンジニア育成研修ベーシックシステムのフロントエンド実装ができるようになる

期待できる効果
  • フロントエンドの開発ができるようになる
  • UXを考慮したインターフェース実装ができる
  • 開発の実践力が身につく

「フロントエンドエンジニア育成研修ベーシック」では、デジタルスキル標準で策定されているDX人材「フロントエンドエンジニア」を育成します。

本研修では、「フロントエンドエンジニア」のスキル基準Aで定義されている項目を中心に学習します。HTMLやJavaScript、React、UXなどを演習を交えながら身につけます。

さまざまな企業から選ばれています
フロントエンドエンジニア育成研修
について相談する

フロントエンドエンジニア育成研修の特徴

  • 特徴1Web標準の正確な技術が学べる
    Web標準の正確な技術が学べる

    インターネット・アカデミーはWeb技術の標準化団体W3Cの、日本の教育業界唯一のメンバースクール。標準に沿った正確な技術を学べます。

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

    知識をインプットするのはもちろん、豊富な開発実践の演習を通じて、実務に直結するスキルを身につけます。

  • 特徴3研修の成果が確認できる

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

研修カリキュラム

デジタルスキル標準 フロントエンドエンジニア育成研修ベーシック

DX人材「フロントエンドエンジニア」は、Webサービス・アプリケーションなどのインターフェース部分の開発・実装を担う役割として定義されています。フロントエンドの技術は高い水準が求められ、バックエンドやサーバーなどについても一定のスキルが必要とされています。

「フロントエンドエンジニア育成研修」では、HTML/CSS、JavaScript、React(Vue)など、フロントエンド実装に関する技術の習得と、UXへの理解を深めます。研修では、Webサイトやシステムを作成する演習や、UXのディスカッションなどの演習を通じて実践的なスキルを習得します。

学習テーマ
  • HTML/CSS
  • Web制作実践
  • UX
  • JavaScript
  • React ※Vueへの変更も可能です
  • 開発演習
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
UX
項目 内容
UXデザインの考え方を身につける
  • UXデザインとは
  • UXデザイン的アプローチの基本的なワークフロー
  • 要件定義
  • 情報設計
  • デザイン・実装
  • UXにおけるUIの役割
  • インタラクション
  • ユーザビリティ
  • レイアウト
  • アクセシビリティ
  • 情報設計(構造・構成)
ユーザー体験と価値を設計する
  • ペルソナを設定する
  • ユーザーの課題とニーズを仮説としてまとめる
  • ペルソナの全体的な行動を可視化しよう
  • ユーザーシナリオ
  • CJM(カスタマージャーニーマップ)
  • タッチポイントの考え方
UIを設計する
  • 情報設計
  • ユーザー要件
  • データ要件
  • 機能要件
  • 情報をオブジェクトとして構造化する
  • OOUIで観察する
  • ワイヤーフレームの設計
  • スタイリングルールを定義する
UXを継続的に向上させる
  • UXデザインを継続的に取り組む
  • UXのデザインプロセスを繰り返す
  • UXデザインを共通認識にする
  • UXを継続かつ向上させる理由
  • ペルソナを解説する
  • ワイヤーフレームを解説する
  • ディスカッションする
  • 中間成果物の有用性
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の基本を理解する
  • フロントエンド開発とReact
  • CDNでReactを使う
  • SPAとREST API
  • 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の利用
  • 認証ユーザーのみアクセスを許可する
  • ユーザー認証を使ったメッセージボード
開発演習
項目 内容
開発演習の流れ
  • システム開発のワークフロー
  • ユーザーインターフェース作成
  • データベースの構築・環境確認
  • 開発実践

※ReactはVueへの変更や、両方を学習することもできます。

フロントエンドエンジニア育成研修
について相談する

時間数・日程

97時間
※日数・時間は目安となります。ご利用いただくサービス形式によって変動します。

料金体系

受講者数や受講形式に応じて変動します。
受講人数が増えると1人当たりの費用に割引がかかります。詳しくはお問い合わせください。

受講形式

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

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

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

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

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

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

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

デジタル人材育成の研修をした企業のコメント

株式会社グリームオーブ

受講者からは、「Webの開発技術に幅広く触れることができた」という意見や、「講師と受講者、担当者間のコミュニケーション手段が簡便で対応しやすかった」との感想がありました。フルリモートでの受講でしたが、受講管理システムのLMSをはじめ、SlackやZoomなどのWebツールを通じて、質疑応答などのコミュニケーションをとることで学びを深めることができたようです。

インタビューをみる
株式会社ドリームキャリア

研修で第一に求めた点はフロントエンド、バックエンドともに基礎だけでなくトレンドを踏まえたプログラミング言語を組み入れられるかという点と、研修中も随時新入社員たちの成長具合を共有できるなどフォローにも対応していただけるかという点です。研修終了後1カ月程度で、一定のレベルに達した10数人はすでにプロジェクトで業務を始めました。さらに10人ほども間もなくデビューする予定です。

インタビューをみる
パーソルテクノロジースタッフ株式会社

研修を通して、最新技術を身に着け、エンジニアの就業支援を行うという弊社の要望をかなえていただき、大変満足しています。毎回充実した研修内容を提供してくださっているので、実は、すでに次のIT研修もお願いしています。今後の実務での可能性を考慮した、各受講者の強みやアピールポイントをインストラクターの方から丁寧にフィードバックをしてもらえたということがとてもよかったです。

インタビューをみる
フロントエンドエンジニア育成研修
について相談する

IT人材育成に活用できる助成金制度

インターネット・アカデミーのIT研修では、要件を満たすと厚生労働省の人材開発支援助成金が利用できます。

貴社の実際の業務をテーマにした演習を行うため、研修内容をそのまま業務に活かすことができます。

経費助成+賃金助成
※eラーニングの場合、賃金助成は支給されません。
  • DX人材育成で使える高い助成率の制度事業展開等リスキリング支援コース
    最大支給額:1億円
    経費助成 :最大75%
    賃金助成 :最大960円(1人1hあたり)

    DX化のための人材育成を行うIT研修で利用できます。支給額が他の制度よりも高いのが特徴です。

  • さまざまな雇用形態・目的で利用できる使いやすい制度人材育成支援コース
    最大支給額:1000万円
    経費助成:最大60%
    賃金助成:最大760円(1人1hあたり)

    正規・非正規など雇用形態を問わずに利用でき、利用要件も他の制度に比べると緩和されているのが特徴です。

  • 高度デジタル人材訓練に使える人への投資促進コース
    最大支給額:1500万円
    経費助成:最大75%
    賃金助成:最大960円(1人1hあたり)

    情報通信業やDX事業計画を策定している企業が対象の制度で、高い専門性を身につける場合に活用できます。

「助成金の制度がややこしくてわからない」「自社で検討している研修が対象になるのか知りたい」「申請書作成が大変なので何とかしたい」など、助成金についてのお悩みがありましたら、お気軽にご相談ください。

助成金について相談する

IT研修・DX人材育成についてのご相談

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

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

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

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

このページの上へ