【Vue.js2&Vue.js3対応】基礎から【Vuetify】を使った応用まで! 超初心者から最短距離でレベルアップ
What you'll learn
- VueJsを基礎からわかりやすく
- ES6の文法をメインに
- ディレクティブ・オプションAPI・リアクティブの使い方
- VueCLIやVueRouterを使ったモダン開発の方法
- Vuetifyを使ったマテリアルデザインの構築方法
- Vuexの考え方、よく使う記法
- VueJs3の扱い方
- CompositionAPIの扱い方
Requirements
- HTML/CSSの基本を知っている
- javascriptの基本を知っている
- インターネット接続可能なパソコン
- わからない事があったら遠慮なく質問する主体性
Description
『Vue.js』はプログレッシブ(段階的)フレームワークと呼ばれ、
はじめは小規模から、機能を追加することで大規模まで対応できるというつくりになっているのですが、
いきなり小規模〜大規模を覚えようとすると、覚えることが多すぎて、
『結局なにをどうすればいいのさ・・・』となってしまいがちです。
そんな実体験もありこの講座では、
はじめはちょっとずつ、
jQueryでもできることから取り組んで、
『できる!』と思えるように時間をかけて進めるような構成にしています。
初心者の視点で、
ちょっとでも『ん?』と思う箇所はできるだけ掘り下げ、
スッキリした状態で先へ進めるように解説しています。
簡単でもいいのでできるだけ手を動かしてアプリをつくりつつ、
知識だけでなく実際に使えるようになるような構成を意識しております。
Vue.js2の方が初心者向けということもあり、
セクション1~9まではVue.js2でレクチャーし、
セクション10以降でVue.js3を解説しています。
■更新情報
2022/7 Vue.js3.2 script setupを追加しました。
■講座内のサンプル
タブメニュー
モーダルウィンドウ
カルーセル(スライドショー)
フォーム
ボタンクリックでAjax画像取得(Vuetify)
フォーム(Ajax + API)
簡易読書管理アプリ(GoogleBooksAPI + VueCLI + VueRouter + Vuetify)
■講座で扱っている内容
ディレクティブ(v-if/v-show/v-for/v-bind/v-on/v-cloak/v-text/v-html)
オプションAPI(data/methods/computed/watch)
リアクティブシステム(get/set)
ライフサイクルフック(created/mounted)
トランジション(transition/transition-group)
双方向データバインディング(v-model)
Ajax(fetch/async/await)
Lodash
フォーム(v-model/computed(get/set)
コンポーネント間通信(props down/event up)
スロット(名前付き、スコープ付き)(v-slot)
Vuetify(CDN/NPM)
VueCLI(SFC/MPA)
VueRouter(SPA)
Vuex
Vue.js3対応(Provide/Inject, Teleport, CompositionAPI、合成関数)
Vue.js3.2 対応 script setup
■収録時のバージョン
・セクション1~9
Vue.js 2.6.11
Lodash 4.17.20
Vuetify 2.3.10
Material design font 5.5.55
VueCLI 4.5.6
Node.js 12.16.2
Vuex 3.4.0
・セクション10
Vue.js 3.0.0
GoogleChrome拡張機能 Vue.js Devtools ver6.0.0 beta 15
VueRouter 4.x
Vuex 4.x
・セクション11
Vue.js 3.2
Who this course is for:
- プログラミングに少しでも興味がある方
- ホームページにVueJsも含めたいと思っている方
- 本やWebで勉強したけれどいまいち身につかないと感じている方
- モダンなフロントエンドに触れたい方
Instructor
生成AI術士/システムエンジニア/キュレーター/Webマーケッター/
(要はなんでも屋)
子ども向けSTEAM教育から、法人新人向け教育まで。
難しいことをわかりやすく伝える事が生きがいです。
次世代の教育に関心あり。
プログラミング講座の作成にあたり、
プログラミング初心者だった頃の自分に向けるよう、
できるだけ専門用語を減らし、
イメージ重視で少しでもわかりやすくなるよう
画像や図を使い、
抽象的な表現から具体的に落とし込むようにしています。
■生成AI
ChatGPT (GPT-4)
Midjourney
■フロントエンド
HTML/CSS/Tailwindcss
JavaScript/TypeScript
Vue.js/Nuxt.js
React.js
P5.js
■バックエンド
PHP/Laravel
Python/Django
■インフラ
Git/Docker/AWS
■オフィスワーク
GAS/ExcelVBA
■データサイエンス
基礎数学/統計学
などなど