JavaScriptフレームワーク研修人気の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の開発ができるようになる
  • フロントエンドエンジニアの業務を担当する方
  • UIの優れたアプリケーション開発を行いたい方

研修の目的

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

JavaScriptフレームワーク研修で学べること

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アプリケーション開発で必要な機能の実装方法について学習します。

到達目標

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

カリキュラム内容

目次
  • 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の利用
    • 認証ユーザーのみアクセスを許可する
    • ユーザー認証を使ったメッセージボード
  • 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サーバーへの問い合わせ
    • 取得データの表示(データ検索)
    更新処理
    • 更新画面の表示
    • 更新処理の実行
    • 更新の確認
※内容と研修費用は、企業様のご要望に応じてご提案致しますのでお問合せください。
時間数 48時間 (2時間×24回)
※「3か月間の長期で実施したい」「1週間の短期で実施したい」等、ご要望に応じて研修期間を調整することができます。
日程 随時開催可 (ご希望の日程でお問合せください)
お問い合わせ・ご相談

研修の料金体系

研修の基本料金は受講者数に応じて決まります。また、カリキュラム内容をカスタマイズする場合や講師派遣をする場合、その他、英語研修や制作物を公開させたい等のご要望に応じて変動いたします。詳しくはぜひお気軽にお問い合わせ・ご相談ください。

お問い合わせ・ご相談

助成金のご活用

人材開発支援助成金(旧キャリア形成促進助成金)は、労働者のキャリア形成を効果的に促進することを目的とした厚生労働省の制度です。この助成金を利用することで、研修費用のほか、受講時間などに対する賃金の助成を受けられる場合があります。

  • 助成額年内最大1,000万円

    年度内に最大1,000万円助成可能

  • 経費助成1人当たり最大50万円

    1人当たり最大50万円(大企業は1人当たり最大30万円)経費助成可能

  • 賃金助成1人1時間最大960円

    受講者1人1時間当たり960円(大企業は480円)賃金助成可能

※助成金利用には一定の条件がございます。詳しくは厚生労働省の人材開発支援助成金(旧キャリア形成促進助成金)のページをご確認ください。

助成金申請のアドバイスを致します

助成金の申請方法がわからない、面倒だ、といった理由で助成金活用をあきらめないで下さい。インターネット・アカデミーでは実績のある社会保険労務士事務所の指導のもと、申請のアドバイスをいたしますので、お気軽にご相談ください。

助成金活用のご相談

JavaScript系の研修の実施事例

トヨタファイナンス株式会社

デジタル推進部 デジタル推進G
グループマネージャー 安井友規様
デジタル推進部 デジタル推進G
UI/UXディレクター 大沢俊介様
研修前の課題
  • デジタル推進部は中途採用の人材が多いため、社内のWeb・ITに対する知見やレベルが揃っていない
  • デジタル領域を内製化する動きに対し、人材育成が間に合っていない
  • デジタル領域に関する社内研修のノウハウがない
実施したIT研修
  • HTML+CSS+JavaScript研修
研修事例の詳細をみる

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

カスタマー・エクスペリエンス 河野陽介様
ナレッジセンター 和田帆付様
研修前の課題
  • 登録型派遣エンジニアに提供する技術研修のノウハウが社内に無い
  • ReactやVue.jsといったJavaScriptフレームワーク・ライブラリスキルを持った人材需要が伸びており、市場価値が高いスキルを得られる機会をエンジニアに提供したい
実施したIT研修
  • フロントエンドエンジニアになるためのReact/Vue.js研修
研修事例の詳細をみる

インターネット・アカデミーならではのポイント

演習重視の研修で実践力が身につく

演習重視の研修
写真は演習用の機材を受講者に配布し、画面共有しながら行ったオンライン研修風景です。

インターネット・アカデミーでは、プログラミングやデザインの演習、ディスカッションなどアウトプットを重視した研修を行うため、実務で活かせるスキルが身につきます。オンライン研修でもコミュニケーションをはかれるインタラクティブな形式で演習を実施します。グループワークにも対応しているため、実地での研修と同様の教育効果が得られます。

御社に合わせたオーダーメイド研修

演習重視の研修

インターネット・アカデミーでは、御社の要望に合わせてカリキュラムのカスタマイズができます。JavaScriptフレームワーク研修のカリキュラムの調整はもちろん、御社の業務の状況に合わせてカリキュラムを組むこともできます。専門のITコンサルタントがご要望をお伺いしますので、お気軽にご相談ください。

学習管理システム(LSM)で研修効果をリアルタイムに測定

学習管理システム(LSM)

研修担当者の方が研修の管理や効果測定するための学習管理システム(LSM)をご利用いただけます。LSMにはさまざまな機能が備わっています。詳しくは学習管理システム(LMS)のページをご確認ください。

  • 課題ファイルの管理
    講師からの課題の提出状況を確認することができます。
  • 日報や評価の機能
    受講者の日報を確認したり、受講者毎のスキルや講師からのコメントをご確認いただけます。
  • 受講者のITレベルの測定
    ITリテラシーとITに対する意欲を測定するサービスを提供しています。分野ごとのレポートが確認できるため、受講者の方の得意分野・苦手分野の把握ができます。
  • スキルチェックテスト
    研修内容に合わせてオリジナルのテストを作成できます。研修前後の確認テストなどにも活用できます。
  • eラーニングとデジタルテキスト
    研修によっては、eラーニングやデジタルテキストを利用することもできます。

関連するIT研修

法人向けIT研修のご相談

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

御社のご要望に合わせて最適な研修プランを無料でご提案いたします。研修のご相談やお見積もり依頼等も承っておりますので、ぜひお気軽にお問い合わせください。

2022年春の研修はお席が埋まりやすいため、新卒研修・助成金利用をご検討の方はお早めにお問い合わせください。

  • 1.情報の入力
  • 2.内容の確認
  • 3.送信完了
会社名必須
部署名必須
お名前必須
ふりがな必須
電話番号必須
メールアドレス必須
受講人数
開始時期
対象者
       
お問い合わせ内容
個人情報の取扱いについて

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

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