【Vue.js2&Vue.js3対応】基礎から【Vuetify】を使った応用まで! 超初心者から最短距離でレベルアップ

サンプル豊富で実践で使える知識をたっぷり身につけていきます。Vue.js2 初歩の初歩からVueRouter, Vuexまで。Vuetifyを使ってデザインも意識したアプリサンプルあり。Vue.js3のCompositionAPIも追加!

3.76 (798 reviews)
Udemy
platform
日本語
language
Programming Languages
category
6,102
students
16 hours
content
Sep 2022
last update
$49.99
regular price

What you will learn

VueJsを基礎からわかりやすく

ES6の文法をメインに

ディレクティブ・オプションAPI・リアクティブの使い方

VueCLIやVueRouterを使ったモダン開発の方法

Vuetifyを使ったマテリアルデザインの構築方法

Vuexの考え方、よく使う記法

VueJs3の扱い方

CompositionAPIの扱い方

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


Content

Vue.jsの基本

講座の紹介
Udemyで受講する簡単な説明
Vue.jsの概要
JavaScriptのおさらい
Vue2 インストール
API elとdata
仮想DOM
Vue.js DevTools
タグに属性をつける(直接DOM操作の場合)
v-bind と :
v-bind その2 オブジェクト
v-bind その3 style/class
ディレクティブ v-show
v-if v-else v-else-if
v-for その1
v-for その2
v-text と v-html
v-cloak
v-on と @
v-on その2 イベントオブジェクト 修飾子
v-on その3 preventDefault
computed
thisとアロー関数
watch
リアクティブシステム
ライフサイクルフック created とmounted

トランジションなど

CSS Sass/Scss BEM (JS講座と同じ)
サンプル1: タブメニュー
transition トランジション
サンプル2: モーダルウィンドウ
transition-group トランジション複数
Array.splice
サンプル3: カルーセル
カスタムクラスのトランジション(animate.css)

フォームと非同期通信(Ajax)

フォーム HTMLのおさらい(JS講座と同じ)
双方向データバインディング(v-bindとv-on)
v-model
v-model 修飾子
@submitとmethods
computed(get/set)
フォームバリデーションの補足
サンプル4: Todoリスト(フィルターつき)
web通信のおさらい
簡易サーバーとNetwork
Promise/async/await/fetch
表示時・クリック時のAjax
lodashのdebounce/throttle
watch + Ajax

コンポーネント

コンポーネントについて
グローバルコンポーネント
ローカルコンポーネント
props サンプル UIフレームワーク
props 直接書いてみる
propsとv-bind
propsで配列を渡す
propsの補足
$emit カスタムイベント
コンポーネント間のフォーム
イベントバス
Atomic Design
slot
名前付きslot
スコープ付きslot

Vuetify (CDN)

クイックスタート
レイアウト周り Grid/Flex
スタイル Spacingなど
UIコンポーネント を使ってみる
スロット(activator, item)
サンプルを読む テーブルCRUD
サンプル5: DogApi
Vuetifyの補足 (カスタムディレクティブなど)

SFC (SingleFileComponent)

VueCLIの前に
VueCLIのインストール方法
Vuterのインストール・設定
ファイル・フォルダの構成
import/export
render と $mount
SFC (SingleFileComponent)
Scoped CSS
publicPath (vue.config.js)
補足1 SCSS (グローバル設定含む)
補足2 マルチページモード

VueRouter SPA

Vue Routerを使ってみる (CDN)
Vue Routerインストール (npm)
ファイル・フォルダの構成
router-linkのprops
$router と $route
動的パラメータ+props その1
動的パラメータ+props その2
動的パラメータ+props 補足
動的パラメータの補足 watch
リダイレクトと404ページ
ネストされたルート
名前付きrouter-view
トランジションを含めたルート
ナビゲーションガード
historyモードの補足

補足

Node.jsのインストール方法
コマンドプロンプト(win)の使い方
fontAwesomeの登録設定方法
VSCodeインストール方法 その1
VSCodeインストール方法 その2
講座内で扱った資料

Screenshots

【Vue.js2&Vue.js3対応】基礎から【Vuetify】を使った応用まで! 超初心者から最短距離でレベルアップ - Screenshot_01【Vue.js2&Vue.js3対応】基礎から【Vuetify】を使った応用まで! 超初心者から最短距離でレベルアップ - Screenshot_02【Vue.js2&Vue.js3対応】基礎から【Vuetify】を使った応用まで! 超初心者から最短距離でレベルアップ - Screenshot_03【Vue.js2&Vue.js3対応】基礎から【Vuetify】を使った応用まで! 超初心者から最短距離でレベルアップ - Screenshot_04

Reviews

Yoshiyasu
October 15, 2023
Vue.js 2.xの基礎から学べて3.xへの移行についても語られているのでVue.js入門としては一通り学習できて満足です。 Vue.js 3.xからはTypeScriptのサポートについて強化されていると思うのでそこについてもう少し言及されててもよかったかなとは思います。
K
September 23, 2023
「【CRM(顧客管理システム)】をつくってみよう」を先に受講しましたがVueの知識が無いため、順序が逆になりましたが当セミナーを受講しました。 大変参考になりましたが・・・・とにかく、総時間が長かった。 変遷期だから仕方ないかもしれませんが、年内でサポートの切れるvue2から始まり、Vueの公式サイトも今見るとComposition API ありきの説明に変わっていたり、肝心のscript setupのセクションまで辿り着く頃には、お腹いっぱい状態で消化不良気味になりました。 おそらく、Inertia(Laravel)で実装するには不要な箇所も多いと思います。 年内に、内容を入れ替え予定とのことなので、見直したいと思います。内容を絞っていただくとありがたいです。
Taro
September 17, 2023
ユーデミー上には、Reactの講座はたくさんあるのですが、Vue.jsに関する講座は少ないです。そんな中、この講座はめちゃくちゃおすすめです!!超基本からかなり応用まで対応しており、最新のバージョンにも対応しています。質問をしてもすぐに回答を返して下さります!!JavaScriptの基本をマスターし、Vue.jsの学習を始めたい人は是非!
M.A
July 28, 2023
最初の実業務が少し慣れたくらいに学習すると効率よく学べる。何となく知っている状態から学習することで、より深く知ることができる。 ただ、セクション7以降の環境構築には苦労しました。 バージョンアップが多いが故、既存の方法ではうまく動かなく、環境構築のコードをいじったり、git bashで権限変更したりで何とか環境構築できた。
Cocoa
July 21, 2023
説明だけではわかりにくいところも実際にプログラムを書いて説明してくれるのでわかりやすいです。ただあとは公式見てねがちょっと多い印象でした。 できればsection8とは別のvue3でのサンプル作成も追加してもらえるとありがたいです。
Stratos
June 29, 2023
すばらしいコースでした。 vue2から始まる事に最初は不安を覚えましたが、vue3はvue2に機能を足したようなものなので、2023年現在でもこのコースはそのまま役に立ちます。 現在はコンポーネントの名前をパスカルケースにする事を推奨されているらしく、エラー内容などに少し違いは出てきはしますがググればすぐ分かる程度の変更なので安心して購入できると思います。 私の場合はcompotiton apiの辺りでなんでイチイチreturnしないといけないんだろう・・・などと辛くなりましたが、template内で使える変数が何か分かりやすくなるなど利点はちゃんとあるので、最後まで投げずに学習する事をおすすめします。 難易度が上がってくる部分は講師の方がより丁寧に進めてくれるし、コードの作成手順に規則性を持たせて次に何をすれば良いか予想が立つような仕組みになっているようで、くじけそうになってもコースの前後を行ったり来たりすればいつの間にか理解できるようになると思います。 これでやっとVue + Laravel の学習に進められます!
関根諒
June 15, 2023
<セクション1終了時レビュー> 基本的なことから始まり、疑問に思ったこともどこかに資料化してあるので、今のところ評価に値する。 <折り返し地点レビュー> 進むにつれてどんどん駆け足になり、ソースをなぞるだけで精一杯になる。 講師のタイピングが早いのもあるが、 実装⇒起動確認などの間に時間がないので、毎回動画の停止が必須。
TakahiroYamazaki
December 12, 2022
他のVueのコースを利用したことがないので比較はできませんが私はブラックフライデーの時にセールで購入しました。セール中だとどの商品も同じくらいの値段となり、16時間とボリュームがあるこのコースはお得なのではと思い購入した形となります。ボリュームがある半面続けていくのは大変だと思います。しかし、フロントエンド初心者の私でも特別難しいと思う説明はなくホームページの改修に早速Vueを取り入れていきたいと思います。 1点直してほしいところがあり、routerでSCSSをWin11環境で利用するとpythonがないとだめだよと怒られたときがあったのでそこの対処方法があるといいなと思いました。
山本篤志
November 18, 2022
Vueについて一連の流れが良く理解できました。 また新しく出たVue3とVue2について非常にコンパクトで分かり易い説明だったかと思います。今度はFirebaseとの連携でアプリ開発等の講座があると実践的なものが出来て良いかなと感じました。宜しくお願い致します。
K
October 1, 2022
SPAサンプルが実践向けで良いですね。 その他のサンプルも、プラグインなしでVueで簡潔に実装できるということがわかります。 また、質問の返答が早くアフターケアをしてくれるので、モチベーション維持につながります。 星を減らした理由としては、前半のセクションで「マニュアル読んでください」で出てくるコードがサラッと後半のセクションで出てくるので「?」となることが何回かあったことです。 これは「自分で調べた方が力になる」と言われれば終わりなんですが、私の場合Vue.jsを短期で学ぶ必要がある案件があったので、こうなりました。
勝間田
August 8, 2022
vue.js初心者にもまずはCDNで諸々の技術を学習、その後Vue CLIでより実践的に学べるのは良かった。 HTMLやJavaScriptについてはある程度知っている前提のところもあるので、そこも初心者の人は随時不明点は自分でWeb検索しながらが良いと思われる。
吉田一貴
May 30, 2022
<良かった点> ・Vueの基本的な内容をスライドを用いて解説していただけるので、 本などの学習と比べても理解しやすかったです。 ・セクション毎に簡単なサンプルアプリケーションを作成するため、実際の利用方法なども想像しやすかったです。ボリュームも多く、自分で手を動かしながら進めることができました。 ・Vue、Vue Router、Vuetify、Vuexなどの公式ドキュメントについても講座の中で触れられており、自分で調べる際の指針になりそうだと感じました。 ・動画の記述で動かない場合もありますが、過去の質問で同じような事象のQAがあり、基本的には詰まらずに最後まで進められると思います。 ・タイポや言葉の説明で誤りがあった際にはテロップで正しい内容を表示していただけているので、変なタイミングでのコードの修正が無く良かったです。 <注意> あくまでVue.jsの講座であり、JavaScriptの基本文法や、フロントエンドの環境構築については付録程度になっています。 <細かい点> ・基本はPrettierなどのフォーマッターに任せる点ではありますが、{}でオブジェクトを書く箇所の半角スペースを入れたり入れなかったりする点は気になりました。 ・英単語の読み方で引っ掛かるものが多々あるので、気になる人は気になると思います。(fontawesomeやwidthなど)
SHU
April 16, 2022
vue2からvue3まで大ボリュームで大変満足でした。 講師のタイピングが早く、あこがれる一方、ついていけず所々一時停止していました。もう少しスピードがゆっくりだと、説明もリアルタイムに頭に入ってくるかと思います。
ジョンジョン
March 30, 2022
レッスンありがとうございました。 vuejsを利用した実践的なプロジェクト開発のレッスンの計画がございましたら、受講したいです。Backend(例:laravel)と連携したレッスンもできたら学習したいです。 誠にありがとうございました。
たきゅ
March 9, 2022
html, css, javascriptを学んだ後のフレームワークとして学ばさせていただきました。 公式ドキュメントに沿った説明で調べ方などがとてもよくわかりました。 引き続き、laravelなど学ばさせていただきたいと思っています。

Charts

Price

【Vue.js2&Vue.js3対応】基礎から【Vuetify】を使った応用まで! 超初心者から最短距離でレベルアップ - Price chart

Rating

【Vue.js2&Vue.js3対応】基礎から【Vuetify】を使った応用まで! 超初心者から最短距離でレベルアップ - Ratings chart

Enrollment distribution

【Vue.js2&Vue.js3対応】基礎から【Vuetify】を使った応用まで! 超初心者から最短距離でレベルアップ - Distribution chart

Related Topics

3412518
udemy ID
8/12/2020
course created date
9/28/2020
course indexed date
Bot
course submited by