JavaScriptJavaScriptフレームワーク研修JavaScriptフレームワークでの開発力を高める

JavaScriptフレームワーク研修では、jQuery、React.js＋Next.js、Vue.js＋Nuxt.jsなどのJavaScriptライブラリやフレームワークを学習し、UIに優れたWebサイトやWebアプリ開発を行うためのスキルを身につけます。

本研修では、HTMLやCSSの基本的な知識を有している前提で学習を進めるため、初心者の方はHTML・CSS・JavaScript研修とセットでの受講をお勧めしています。

期待できる効果

React.jsやVue.jsを用いてSPAの開発ができるようになる
JavaScriptフレームワークを活用し、UIに優れたWebアプリケーションの実装ができるようになる
SPA開発への理解が深まることでディレクターの企画・設計力が高まる

研修前

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

研修後

新人エンジニアの技術理解が進み、開発業務が円滑になり社内教育の負担も軽減された
開発スキルが向上したことでUIが改善されサイトのパフォーマンスが改善された

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

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

JavaScriptフレームワーク研修の特徴

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

研修では、実際にJavaScriptのフレームワークを利用した開発演習をするので、研修後も実務に活用することができます。
特徴2研修のカスタマイズができる

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

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

研修カリキュラム

JavaScriptフレームワーク研修では、jQueryを用いてWebサイトに様々な機能を実装する方法や、React.jsとNext.js、Vue.jsとNuxt.jsを組み合わせてWebアプリを開発する演習を通じて、JavaScriptとフレームワークへの理解を深めます。

React.jsとNext.jsでは、SPA(Single Page Application)の開発はもちろん、ページ遷移を伴うアプリケーションや、Firebaseを用いてデータベースを利用するアプリケーションの開発を行います。Vue.jsとNuxt.jsでも同様に、Webアプリケーション開発で必要な機能の実装方法について学習します。

対象者

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

研修の目的

自社のフロントエンドエンジニアのスキルを高めることで、開発力を強化したい
JavaScriptのライブラリやフレームワークを使いこなし、開発効率を高めたい
ディレクター職がJavaScript関連技術への理解を深めることで、円滑な開発ができるようにしたい

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

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の基本を理解する	フロントエンド開発と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の利用認証ユーザーのみアクセスを許可するユーザー認証を使ったメッセージボード

Vue.js

項目	内容
Vue.jsの基礎知識	フレームワークの基礎知識 Vue.jsの特徴 Vue.jsを支える技術はじめの一歩
データの登録と更新	Vueオブジェクト基本構文イベントとフォーム入力の受け取り
データの監視と加工	データの監視データの加工 Vuex
コンポーネントでUI部品を作る	コンポ―ネントの基礎 Vueコンポーネントの定義コンポーネントの設計
トランジションとアニメーション	基本構文使い方例
より大規模な開発に向けて	概要 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 バージョン２と３の書き方の違い
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サーバーへの問い合わせ取得データの表示(データ検索)
更新処理	更新画面の表示更新処理の実行更新の確認

時間数・日程

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

料金体系

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

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

受講形式

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

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

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

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

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

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

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

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

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

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

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

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

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