エンジニア・Web技術フロントエンド講座HTMLからJavaScriptやReactなどのフロントエンド技術を習得

フロントエンド講座では、HTML/CSSからJavaScriptの基本、ReactやVueなどのJavaScriptフレームワークを学習。WebサイトやWebアプリ開発の演習も行います。

期待できる効果
  • SEOを考慮したマークアップが可能になる
  • SPA開発への理解が深まることでディレクターの企画・設計力が高まる

研修前

  • 新人Webフロントエンドエンジニアに対して、先輩社員が教育に時間を割くうえでの負担が大きかった
  • JavaScriptフレームワークの知識が足りずにサイト制作・更新していたため、UIや機能が不十分だった

研修後

  • 研修で新人フロントエンドエンジニアの技術理解が進んだことで社内教育の負担が軽減された
  • JavaScriptフレームワークを用いて機能の実装ができるようになりUIが改善された
デジタル人材育成・研修について相談する

カリキュラム

フロントエンド講座

HTML/CSSやJavaScript、ReactやVueなどのJavaScriptフレームワークを学習します。学習するJavaScriptフレームワークや学習テーマは貴社の環境に合わせて選択できます。

学習する技術の例
  • HTML/CSS/JavaScript
  • React
  • Vue
  • Nuxt
  • TypeScript

対象者

  • フロントエンドエンジニアの業務を担当する方
  • UIの優れたアプリケーション開発を行いたい方

研修の目的

  • 自社のフロントエンドエンジニアのスキルを高めることで開発力を強化したい
  • ディレクター職がフロントエンド技術への理解を深めることで円滑な開発ができるようにしたい
デジタル人材育成・研修について相談する

※以下の目次から、貴社にあった言語を選択できます。

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プラグインの利用
JavaScript応用
項目 内容
開発環境の設定と最新の記法
  • Visual Studio Code のインストールと操作方法
  • ECMAScript5,6(ES5, ES6)の記法
  • 【開発演習】 最新のJS記法へ書きかえ
デバッグとオブジェクト
  • バグの直し方
  • ビルトインオブジェクト
  • ブラウザオブジェクト
  • 【開発演習】 宿泊サイト料金計算アプリ
制御構文・正規表現・例外処理
  • 制御構文を使った複雑な処理
  • 表現
  • 例外処理
  • 【開発演習】 フォームの入力内容を確かめる
  • 【開発演習】 占い風アプリを作る
イベント・JavaScriptのクラスとオブジェクト
  • イベント
  • 配列とオブジェクト
  • クラス
  • 【開発演習】 簡易的なRPGの戦闘処理
jQueryによるアニメーション作成
  • クラスの切りかえによる動き
  • パララックスを作る
  • ローディングアニメーションの作成
Ajaxの基本
  • Ajaxとはなにか
  • JSONとJSONP
  • AjaxとPromise
  • 【開発演習】 OpenWetherAPIを用いた固定の気象情報の取得
制作実践２
  • 制作実践２
  • 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の操作
Vue.js
講座 内容 詳細
Vue.js 第1回 Vue.jsとは
Vue.jsとは、Vue.jsの役割(MVCモデルの観点から)、SPAとREST API
Vue.js (バージョン３)の基本文法 マスタッシュ(Mustache)構文の基本、data()、v-bind、v-if、v-show、v-for、v-on、v-model
リアクティブな変数を作る書き方 リアクティブが必要になる場面、refとreactive
基本文法の練習 Vue.jsの文法練習
Vue.js 第2回 create-vue によるアプリケーション作成
Node.jsを用いたアプリケーション作成、ウェルカムページの表示
アプリケーションの実行とフォルダ構成 主なフォルダ・ファイル、表示の仕組み、親から子コンポーネントにデータを渡す
外部ファイル(画像とCSS)の読み込み 画像の表示、CSSファイルの読み込み
別ページへの遷移(Vue Router) Vue Router(ビュールーター)とは、VueRouterを利用した別ページへの遷移
複数コンポーネントの利用 ヘッダーの作成
Vue.js 第3回 Vueアプリの作成と復習
Vueアプリ(基本構造、ページ遷移など)の復習
reactiveの利用 reactive関数(reactiveとref)、refの使用例
JSON Placeholderを使ったREST APIからの情報取得 JSON Placeholderとは、JSON Placeholderから情報取得
axiosの利用 axiosとは、axiosを使ってJSON Placeholderから情報取得
Fetch APIを使った場合の書き方 Ferch APIとは、Fetch APIを使ってJSON Placeholderから情報取得
Firebase(Cloud Firestore)の利用設定 FirebaseとCloud Firestore、Firebaseの管理画面での操作
Vue.js 第4回 REST APIとの接続
RESTにおけるHTTPメソッド、簡易的なAPIサーバーの起動(SpringBootのjarを利用)、REST APIとの接続(CRUD1つずつの処理)、REST APIとの接続(表形式の管理ページ)
【補足】Firebase(Cloud Firestore)の利用設定 FirebaseとCloud Firestore、Firebaseの管理画面での操作
【補足】Cloud Firestoreの操作(getとpost) Vueアプリケーションの用意、Cloud Firestoreから情報取得
Nuxt.js(SPA開発)
講座 内容 詳細
Nuxt.js 第1回 Nuxt.jsとは
Nuxt.jsとは、Nuxtアプリのインストールと実行
基本文法 フォルダ構造、pagesとcomponents、ページ遷移(nuxt-linkとrouter-linkの違い)
非同期通信 JSON Placeholderからの情報取得
Nuxt.js 第2回 assetsフォルダ(画像、CSSファイル)
Nuxtにおける画像表示とCSS利用
headの指定 nuxt.config.jsで設定、Googleフォント適用で実践
レイアウトのテンプレート layouts/default.vueの利用
エラーページの設置 error.vueの設置
Nuxt.js 第3回 エラーの扱い(非同期通信)
try-catchを用いたデータ取得失敗時のエラー処理
Pinia(状態管理) Pinia(状態管理)とは、状態管理をする必要性、簡単なカウンターの作成
別のページに遷移してもデータを残す方法 WebStrageとは、WebStrageを用いたデータ保持
Nuxt.js 第4回 CRUD処理１(登録)
Piniaストアを用いた登録処理
CRUD処理２(検索) Piniaストアを用いた登録処理
CRUD処理３(削除) Piniaストアを用いた登録処理
CRUD処理４(更新) Piniaストアを用いた登録処理
Nuxt.js 第5回 FireBase(Cloud Firestore)の利用設定
FireBaseの管理画面での操作
Nuxtアプリケーションの準備 Nuxtアプリのインストール、Nuxtアプリの基本設定やページ作成
Cloud FirestoreのREST API形式での情報取得(GET、POST) Cloud Firestoreから情報取得、Cloud Firestoreへ情報の登録
演習 ToDoアプリの開発
TypeScript
項目 内容
TypeScript1
  • TypeScriptの概要とメリット
  • TypeScript実行環境の用意
  • データ型1
TypeScript2
  • データ型2
  • functionで関数定義
  • 無名関数による関数定義
  • アロー関数(ラムダ式)による関数定義
  • 実践：JavaScriptのコードを書き換える
TypeScript3
  • クラスの基本構造の作成
  • コンストラクタ
  • アクセス修飾子
  • getter と setter
  • 静的メンバの定義
  • 実践：クラスを用いた簡単なRPGアプリを作成
TypeScript4
  • 継承
  • 抽象クラスと抽象メソッド
  • インターフェイス
  • ジェネリクス
  • 実践：継承を用いて簡単なRPGアプリを作成

受講形式

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

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

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

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

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

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

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

フロントエンド系の研修を受けた企業からのコメント

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

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

株式会社ドリームキャリア

選択したいカリキュラムはたくさんありましたが、研修期間は2カ月間。どれを選択するかで悩みました。最終的にフロントエンドはReactをメインに、バックエンドは、PHPやRubyも案件が多くなっているので特に悩みましたが、Javaを選びました。
インタビューを見る

デジタル人材育成・研修について相談する

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

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

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

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

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

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

助成金について相談する

DX伴走支援サービス・DX人材育成についてのご相談

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

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

たとえばこんな相談ができます
  • DX伴走支援サービスについて、とりあえず話を聞きたい
  • 人材育成の事例を詳しく知りたい
  • 助成金の使い方や、支給額のシミュレーションを知りたい
会社名必須
部署名必須
お名前必須
ふりがな必須
電話番号必須
メールアドレス必須
受講人数
開始時期
対象者
　 　 　 　
ご相談内容
個人情報の取扱いについて

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

プライバシー保護のため暗号化通信を使用しています。
このページの上へ