JavaScriptフロントエンドエンジニア研修(Vue.js)UIの優れたアプリケーションの実装スキルを習得

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

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

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

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

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

Before

  • SEOへの理解が浅い状態でコーディングしており、レイアウトはできるもののソースコードの質が低かった
  • Webサイトの更新やJavaScriptなどの機能実装が自社内でできず外注に依頼しており費用や時間がかかっていた
  • JavaScriptフレームワークを活用した機能の実装ができなかった

After

  • SEOやモバイルでの高速表示を考慮したコードが書けるようになった
  • 自社内でWebサイトの更新やJavaScriptなどの機能実装が素早くできるようになった
  • Vue.jsやNuxt.jsを活用した機能の実装ができるようになりWebサイトのUIの質が上がった
デジタル人材育成・研修について相談する

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

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

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

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

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

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

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

研修カリキュラム

Webサイト制作研修

フロントエンドエンジニア研修(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サイトを構築することでユーザーの満足度を高めたい
  • コーディングを外注する際の品質管理や、日々の更新がスムーズにできるようになりたい
デジタル人材育成・研修について相談する
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アプリを作る
Vue.js
項目 内容
Vue.jsの基礎知識
  • フレームワークの基礎知識
  • Vue.jsの特徴
  • Vue.jsを支える技術
  • はじめの一歩
データの登録と更新
  • Vueオブジェクト
  • 基本構文
  • イベントとフォーム入力の受け取り
データの監視と加工
  • データの監視
  • データの加工
  • Vuex
コンポーネントでUI部品を作る
  • コンポ―ネントの基礎
  • Vueコンポーネントの定義
  • コンポーネントの設計
ERPを知る
  • ERPの分類、知っておくべきERP
トランジションとアニメーション
  • 基本構文
  • 使い方例
より大規模な開発に向けて
  • 概要
  • Vuex
  • Vue Router
  • SPAの構築する
Nuxt.js
項目 内容
Vue.jsの文法
  • Nuxt.jsとは
  • Vue.jsとは
  • SPAとREST API
  • Vue.jsのインストール方法
  • 基本文法
  • マスタッシュ構文
  • JSONデータの扱い
  • v-bind
  • v-if
  • v-for
  • v-on
  • v-model
  • バージョン2と3の書き方の違い
Nuxt.jsの基本文法
  • Node.jsのインストール
  • Nuxt.jsのインストール
  • Nuxt.jsのアプリケーション作成と実行
  • フォルダ構成と基本文法
  • 文法エラー時の対処(ESLintの利用)
非同期通信
  • 非同期通信とは
  • JSON Placeholder
  • axios
特別な役目を持つファイル
  • 外部ファイルの利用(画像、CSS)
  • 外部サービスの利用(GoogleフォントとFont Awesome)
  • テンプレートとなるvueコンポーネント(components)
  • エラーページの設置
Vuex概要
  • Vuexとは
  • アクション、ミューテーション、ステート
  • commitとdispatch
登録処理
  • 入力画面からのデータ受け取り
  • APIサーバーへの送付(データ登録)
検索処理
  • APIサーバーへの問い合わせ
  • 取得データの表示(データ検索)
削除処理
  • APIサーバーへの問い合わせ
  • 取得データの表示(データ検索)
更新処理
  • 更新画面の表示
  • 更新処理の実行
  • 更新の確認
Git
項目 内容
Gitの概念と初期設定
  • Gitとは
  • Gitの歴史
  • GitHubとは
  • Git、SourceTreeのインストール
  • Gitの初期設定
  • よく使うOSのコマンド
  • Gitの基本的な仕組み
  • Gitの操作の流れ
  • Gitのデータ管理の仕組み
  • Gitの使い方
Gitの基本操作
  • 変更をステージへ追加
  • 変更の記録
  • 現在の状況を確認する
  • 変更履歴の確認
  • ファイル削除・移動の記録
  • バージョン管理しないファイル
  • ファイルへの変更の取り消し
  • ステージした変更の取り消し
  • 直前のコミットのやり直し
リモートリポジトリ
  • リモートリポジトリとは
  • GitHub上のリポジトリの利用
  • Backlog上のリポジトリの利用
  • リモートリポジトリの追加
  • リモートから取得(フェッチ編)
  • リモートから取得(プル編)
  • フェッチとプルの使い分け(プル編)
  • リモートから取得(リモートの情報の確認)
  • リモートを変更・削除(プル編)
ブランチ
  • ブランチとは
  • ブランチの仕組み
  • ブランチの作成、切り替え
  • 変更のマージ
コンフリクト
  • コンフリクトとは
  • コンフリクトの解決、防ぎ方
  • ブランチを変更・削除
  • ブランチを利用した開発の流れ
  • プルリクエストの流れ

時間数・日程

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

料金体系

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

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

受講形式

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

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

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

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

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

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

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

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

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

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

株式会社 堀内カラー

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

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

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

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

助成金で費用負担を軽減

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

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

経費助成+賃金助成
※eラーニングの場合、賃金助成は支給されません。
DX人材育成の研修で使える
事業展開等リスキリング支援コース
  経費助成 賃金助成 年間限度額
中小企業 75% 960(1人1時間) 1億
大企業 60% 480(1人1時間) 1億
新卒研修など幅広いテーマの研修で使える
人材育成支援コース
  経費助成 賃金助成 年間限度額
中小企業 45% 760(1人1時間) 1000万
大企業 30% 380(1人1時間) 1000万円

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

助成金について相談する

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

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

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

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

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

このページの上へ