エンジニア・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制作フロー |
|
| CSS基礎 |
|
| CSSレイアウト |
|
| HTML構築（Dreamweaver/VSCode） |
|
| CSS構築（Dreamweaver/VSCode） |
|
| メディアクエリ・Webフォント・CSSアニメーション |
|
| JavaScript基礎1 |
|
| JavaScript基礎2 |
|
| jQuery |
|
JavaScript応用
| 項目 | 内容 |
|---|---|
| 開発環境の設定と最新の記法 |
|
| デバッグとオブジェクト |
|
| 制御構文・正規表現・例外処理 |
|
| イベント・JavaScriptのクラスとオブジェクト |
|
| jQueryによるアニメーション作成 |
|
| Ajaxの基本 |
|
| 制作実践２ |
|
| jQueryを用いたAjax |
|
| HTML5とCanvas |
|
React.js
| 項目 | 内容 |
|---|---|
| Reactの基本を理解する |
|
| クラスコンポーネントとJSX |
|
| 関数コンポーネントとフック |
|
| Next.jsによる機能拡張 |
|
| API利用とネットワークアクセス |
|
| Firebaseとの連携 |
|
Vue.js
| 講座 | 内容 | 詳細 |
|---|---|---|
| Vue.js 第1回 | Vue.jsとは |
Vue.jsとは、Vue.jsでの開発方法、Vue.jsの役割(MVCモデルのVを担当)、SPAとREST API
|
| Vue.js (バージョン３)の基本文法 | マスタッシュ(Mustache)構文の基本、data()、v-bind、v-if、v-show、v-for、v-on、v-model | |
| Vue.js 第2回 | create-vue によるアプリケーション作成 |
Node.jsを用いたアプリケーション作成
|
| アプリケーションの実行とフォルダ構成 | 主なフォルダ・ファイル、表示の仕組み、親から子コンポーネントにデータを渡す | |
| 外部ファイル(画像とCSS)の読み込み | 画像の表示、CSSファイルの読み込み | |
| 別ページへの遷移(Vue Router) | Vue Router(ビュールーター)とは、VueRouterを利用した別ページへの遷移、複数コンポーネントの利用 | |
| Vue.js 第3回 | reactiveの利用 |
reactive関数(reactiveとref)、refの使用例
|
| axiosの利用 | axiosのインストール | |
| JSON Placeholderを使ったREST APIからの情報取得 | JSON Placeholderとは、JSON Placeholderから情報取得 | |
| Fetch APIを使った場合の書き方 | Ferch APIとは、Fetch APIを使ってJSON Placeholderから情報取得 | |
| Firebase(Cloud Firestore)の利用設定 | FirebaseとCloud Firestore、Firebaseの管理画面での操作 | |
| Vue.js 第4回 | Cloud FirestoreのREST API形式での情報取得(get) |
Vueアプリケーションの用意、Cloud Firestoreから情報取得
|
| CCloud FirestoreのREST API形式での情報登録(post) | 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 |
|
| TypeScript2 |
|
| TypeScript3 |
|
| TypeScript4 |
|
受講形式
インターネット・アカデミーの研修は、さまざまな形式に対応しています。「基礎はeラーニングで演習は集合研修」「講師派遣とリモートを組み合わせる」など、複数の形式の併用もできますので、お気軽にご相談ください。
リモート集合研修 
実地での集合研修 
講師派遣 
eラーニング
Web開発会社の開発・マネジメントのノウハウをカリキュラム化現場の実務が研修で学べる
インターネット・アカデミーのグループ会社ではWeb開発・Saasサービスを手掛けています。実務で用いられている開発ノウハウをカリキュラム化し、研修で還元しています。
理解度チェック・アセスメントなど学習効果を可視化できる学習管理システム（LMS）
インターネット・アカデミーの学習管理システム（LMS）では「研修後の知識定着度を可視化したい」「社内報告のためのアセスメントがほしい」など、研修担当者の悩みにこたえる機能を搭載。学習の進捗管理から、さまざまな角度からの研修効果測定が行えます。
研修テーマごとに受講した社員の理解度をダッシュボードで確認できます。 
テストの結果を元に社員ごとのスコアをグラフで可視化。社内の平均スコアとの比較もできます。 
受講態度や理解度といった講師からのフィードバックによる定性評価にも対応しています。
フロントエンド系の研修を受けた企業からのコメント
パーソルクロステクノロジー株式会社
研修の進め方として、実際にReactを使ったハンズオンを積極的に行ってくださったことや各受講者のスキルや理解度に応じてカリキュラムを進めてくださることがとてもよかったです。またスキルだけでなく、受講者それぞれの性格も考慮して研修してくださっていたので、質の高い研修でした。
インタビューを見る
株式会社ドリームキャリア
選択したいカリキュラムはたくさんありましたが、研修期間は2カ月間。どれを選択するかで悩みました。最終的にフロントエンドはReactをメインに、バックエンドは、PHPやRubyも案件が多くなっているので特に悩みましたが、Javaを選びました。
インタビューを見る
研修費用を最大75％削減できる助成金
インターネット・アカデミーのIT研修では、要件を満たすことで厚生労働省の人材開発支援助成金が利用できます。研修費用に対する経費助成と、受講中の賃金に対する賃金助成の両方が支給されます。
この助成金制度ではいくつかのコースが用意されており、研修目的に合わせて使用できる制度をご提案いたします。
| 経費助成 | 賃金助成 | |
|---|---|---|
| 中小企業 | 75% | 1000円（1人1時間） |
| 大企業 | 60% | 500円（1人1時間） |
※経済産業省のDX認定を取得している企業は、研修テーマを問わず「人への投資促進コース」が利用できます。
助成金を使った研修の事例紹介や、貴社が研修を行った場合に支給される助成額シミュレーションも承っています。お気軽にご相談ください。
助成金について相談する認定校・パートナー
DX伴走支援サービス・DX人材育成についてのご相談
法人サービスの電話お問合せ窓口
03-3341-3781
受付時間(平日・土日) 10時-21時
IT人材育成に精通したコンサルタントに無料でさまざまな相談をしていただけます。お気軽にご相談ください。
たとえばこんな相談ができます
- DX伴走支援サービスについて、とりあえず話を聞きたい
- 人材育成の事例を詳しく知りたい
- 助成金の使い方や、支給額のシミュレーションを知りたい
