更新日：2026年01月09日

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

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

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

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

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

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

期待できる効果

高品質なコードでWebサイトが構築できるようになる
Vue.jsとNuxt.jsを組み合わせて、高品質なUIやWebアプリケーションの実装ができるようになる
SEOの観点でのソースコードの品質管理ができるようになる

研修前

SEOを考慮しないコーディングしており、ソースコードの質が低かった
Webサイトの更新や機能実装を外注に依存しており費用や時間がかかっていた
JavaScriptフレームワークを活用した機能の実装ができなかった

研修後

SEOやモバイルでの高速表示を考慮したコードが書けるようになった
自社内でWebサイトの更新やJavaScriptなどの機能実装が素早くできるようになった
Vue.jsやNuxt.jsを活用した機能実装できるようになりUIの質が上がった

さまざまな企業から選ばれています

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

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

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

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

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

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

研修カリキュラム

フロントエンドエンジニア研修(Vue.js)では、Web標準に沿った正しいHTML/CSSを学習するのはもちろん、実際にWebサイトの設計やコーディングの演習を通じて実勢的なスキルを身につけます。また、本研修ではVue.jsや、API処理などをはじめとしたアプリケーション開発に必須の機能を提供するNuxt.jsについても学習し、UIに優れたWebアプリケーション実装についても学習します。

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

その後、Vue.jsの基本と、Vue.jsと組み合わせて活用されることが多いNuxt.jsについて学習。Webアプリケーションの開発で求められるスキルを身につけます。

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

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

対象者

Webサイトのコーディングを担当する方
自社サイトの更新を担当する方
ディレクターとしてWebサイトの品質管理を行う方

研修の目的

Webサイトの更新を担当する社員にWeb標準のコーディングスキルを学ばせたい
SEOに強くUIにも優れたWebサイトを構築することでユーザーの満足度を高めたい
コーディングを外注する際の品質管理や、日々の更新がスムーズにできるようになりたい

フロントエンドエンジニア研修(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コーディング
制作実践１	画像アセット制作実践１
制作実践２	制作実践２ JavaScriptのプラグイン
ソースコードの検証とモバイル最新技術	ソースコードの検証 AMP PWA

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アプリを作る

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アプリの開発

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 第2回	マージ	マージとは、マージ(問題が起きないパターン)、マージ(問題が起こるパターン)
Git 第3回	リモートリポジトリ	Git管理の基本構成、リモートリポジトリ、プッシュとプルの概要
	GitHubの利用	GitHubとは、アカウント登録とSSH接続、クローン、プッシュとプルを試す、フェッチとプルの違い
	プルリクエスト	プルリクエストの流れ、プルリクエストの実践
	Gitを使った開発フロー	Gitを使った開発フロー、Git FlowとGitHub Flow
Git 第4回	プルリクエスト(却下されたとき)の対応	プルリクエスト(却下されたとき)の対応
Git 第4回	Git Flowのhotfix対応	Git Flowのhotfix対応

時間数・日程

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

料金体系

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

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

受講形式

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

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

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

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

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

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

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

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

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

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

株式会社堀内カラー