学習項目（【ライブ】Vue.jsによるSPA(シングルページアプリケーション)開発 ULA99R） : ITプロフェッショナル育成研修 - JISA ICTカレッジ

学習項目

学習項目は、予告なく変更される場合があります。あらかじめご了承ください。

【ライブ】Vue.jsによるSPA(シングルページアプリケーション)開発 (ULA99R)

第1章 SPA（シングルページアプリケーション）概要

1.1 Webフロントエンド開発の歴史
1.2 MPA(マルチページアプリケーション)とは
1.3 SPA(シングルページアプリケーション)とは
1.4 MPAとSPAの比較

第2章 Vue.js概要

2.1 Vue.jsとは
2.2 なぜフレームワークやライブラリーが必要なのか
2.3 コンポーネント指向とは
【参考】仮想DOMを使用した高速な画面描写-jQueryとの比較-
2.4 フレームワーク・ライブラリーの比較
2.5 Vueの利用
●ハンズオン2-1 VueをHTMLに直接ロードする開発方法の確認
●ハンズオン2-2 Vueプロジェクトを作成する開発方法の確認
2.6 Vueの開発環境
2.7 本講座の開発環境
【参考】本講座の開発環境の構築手順
【参考】npmを使用したライブラリー管理
【参考】Google Chromeの拡張

第3章 Vue.jsの基本構文

3.1 Vueプロジェクトのフォルダー構成
3.2 単一ファイルコンポーネント
3.3 リアクティブ変数
3.4 テンプレート構文
3.5 マスタッシュ構文とデータバインディング
3.6 ディレクティブ
3.7 条件分岐のディレクティブ v-if
3.8 条件分岐のディレクティブ応用 v-else-if v-else
3.9 条件分岐のディレクティブ v-show
3.10 繰り返しのディレクティブ v-for
●ハンズオン3-1 要素を繰り返して表示
3.11 属性にデータバインディング v-bind
【参考】v-bind
3.12 双方向データバインディング v-model
【参考】初期表示のちらつき防止 v-cloak
●ハンズオン3-2 双方向データバインディング

第4章 コンポーネント定義

4.1 コンポーネント
4.2 リアクティビティー（ref、reactive）
4.3 算出プロパティ computed
4.4 イベント処理
【参考】主なイベント
4.5 監視プロパティ watch
●ハンズオン4-1 リアクティビティーとイベント処理の復習

第5章 Web APIとの非同期通信処理

5.1 Web APIとは
5.2 開発環境
●ハンズオン5-1 Web APIの確認
【参考】Web APIの仕様
5.3 axiosの実装
5.4 例題アプリケーション
●ハンズオン5-2 axiosを使用した非同期通信処理の実装

第6章 Viteによるコンポーネント指向開発

6.1 Viteとは
●ハンズオン6-1 Vueプロジェクトの作成
6.2 Vueプロジェクトのフォルダー構成
6.3 Vueプロジェクトの基本構成
6.4 コンポーネントの呼出し
6.5 Props
●ハンズオン6-2 コンポーネント作成とコンポーネント呼出し
【参考】Vue CLIとは

第7章 SPA開発

7.1 SPA開発の課題
7.2 Vue Router
【参考】Vue Routerの登録
7.3 Vue Routerを使用した開発手順
●ハンズオン7-1 Vueによるルーティング制御
【参考】 動的ルーティング
7.4 Pinia
【参考】Piniaの登録
7.5 Piniaを使用した開発手順
●ハンズオン7-2 Piniaを使用したデータ管理の実装
【参考】Vuetify
【参考】Vuetifyの使用手順