世界を変える「人」を育てる。IT研修・ビジネス研修ならトレノケート。


形態必須

開催日数

開催時期

価格(税込)

その他の条件

キーワード

この条件で検索
ホーム > Vue.js 3によるフロントエンド開発入門 ~作って理解するSPA(TypeScript 対応)~

Vue.js 3によるフロントエンド開発入門 ~作って理解するSPA(TypeScript 対応)~


期間  2日間 時間  9:30~17:30
価格(税込)  121,000円(税込) 主催  トレノケート
形式  講義+実機演習 コースコード  WSC0134G

対応チケット/ポイント等

  • Select6
    Select6
コース日程が決定次第、ご案内いたします。マイページ会員様は「お気に入り」にご登録いただければ、日程が公開された際にメールで通知が届きます。

重要なご連絡・ご確認事項

【本コースはオンライン対応です】

会場が「オンラインLive」または「教室Live配信」の日程は、オンラインでご参加いただけます。

  • オンラインLive:受講者の方はオンラインのみとなります。
  • 教室Live配信:教室・オンラインから受講される方が混在します。

★オンラインLiveトレーニングの詳細はこちら


本コースでは、オンライン演習環境(RemoteView)を使用します。

オンラインで参加する際、ブラウザはGoogle Chromeを推奨します。

↑ページの先頭へ戻る

対象者情報

対象者
・モダンなWebアプリケーション開発を学び始めたい方
・Vue.jsを使用してフロントエンドWebアプリケーション開発を担当する方
・バックエンド(Java, Spring, Node 等)の知識があるが、SPAを体系的に学びたい方
前提条件
□HTMLおよびCSSを利用して簡単なWebページを作成できる方
□JavaScriptやTypeScriptを利用して基本的なアプリケーションを開発できる方

学習内容の詳細

コース概要
本コースは、最新のフロントエンド技術 Vue 3(ヴュー・スリー) を用いて、モダンなWebアプリケーション開発を基礎から実践まで体系的に学ぶ入門コースです。
Vue 3は、シンプルな構文と柔軟な設計を特徴とし、世界中の企業で採用が進む次世代フロントエンドフレームワークです。開発速度や保守性の高さから、ReactやAngularと並び、近年の企業開発における標準技術の一つとなっています。
本コースでは、Viteを使った開発環境構築から、データの操作、画面間の遷移(ルーティング)までを段階的に学習します。単なる文法解説にとどまらず、各章で手を動かすハンズオン演習を通して、「理解」だけでなく「実装できる力」を身につけることを目的としています。
実践型構成にすることで、初学者でも確実に定着できるよう設計されています。
学習目標
● Viteを用いたVue3プロジェクト環境を構築できる
● Vue3の基本構文(v-bind, v-for, v-model, v-on, 条件分岐など)を理解する
● props/emit を用いたコンポーネント間通信を実装できる
● Vue Router によるページ遷移・パラメータ処理を行える
学習内容
1. Vue3環境構築(Vite)
  - 開発環境の準備
  - Viteでプロジェクト作成
  - 依存ライブラリ導入
  - 開発サーバーの起動と動作確認
  - フォルダと主要ファイルの役割

2. Vue3の基礎知識
  - Vueとは
  - Vueコンポーネントの基本
  - リアクティブなデータ管理
  - ディレクティブ構文
  - イベント処理(v-on)
  - 双方向バインディング(v-model)

3. コンポーネント分割とデータの受け渡し
  - コンポーネントの分割
  - 親から子へ値を渡す(props)
  - 子から親へイベントを送る(emit)
  - 複数の子コンポーネントを配置する

4. ルーティングとSPA
  - Vue Routerの導入
  - ページ(ルート)とコンポーネントの違い
  - ルート設定によるページ切り替え
  - ナビゲーションメニューの作成
  - provideとinjectによるデータ共有
  - パラメータ付きルート

実習/演習内容詳細

ソフトウェア
ハードウェア
Windows OS
Visual Studio Code

↑ページの先頭へ戻る