超Vue.js 完全パック - もう他の教材は買わなくてOK! (Vue Router, Vuex含む)
4.4 (1,663 ratings)
Course Ratings are calculated from individual students’ ratings and a variety of other signals, like age of rating and reliability, to ensure that they reflect course quality fairly and accurately.
7,136 students enrolled

超Vue.js 完全パック - もう他の教材は買わなくてOK! (Vue Router, Vuex含む)

Vue.jsを、基礎から、Vue CLI、Vue Router、Vuex、Firebaseを使った実践的な内容まで網羅的に学びますので、ぜひこの講座で学んでみてください。ReactやAngularエンジニアの方もぜひ!
Bestseller
4.4 (1,663 ratings)
Course Ratings are calculated from individual students’ ratings and a variety of other signals, like age of rating and reliability, to ensure that they reflect course quality fairly and accurately.
7,136 students enrolled
Last updated 6/2020
Japanese
Japanese [Auto]
Current price: $103.99 Original price: $159.99 Discount: 35% off
7 hours left at this price!
30-Day Money-Back Guarantee
This course includes
  • 17.5 hours on-demand video
  • 5 articles
  • 12 downloadable resources
  • Full lifetime access
  • Access on mobile and TV
  • Certificate of Completion
Training 5 or more people?

Get your team access to 4,000+ top Udemy courses anytime, anywhere.

Try Udemy for Business
What you'll learn
  • Vue JSの基礎から、仮想DOM、リアクティブシステム、カスタムディレクティブやミックスインなどの応用的な機能
  • Vue CLIを使った実務で使える実践的な開発方法、コンポーネントの詳細、アニメーション、http通信、ログイン認証
  • Vue Router、Vuexを使用した大規模なシングルページアプリケーション(SPA)の作成と、それらを世界中に公開する方法
Course content
Expand all 255 lectures 17:28:38
+ これがVue.jsの基礎、テンプレート構文だ
28 lectures 01:24:02
+ 「条件付きレンダリング」と「リストレンダリング」
15 lectures 36:49
v-ifディレクティブを使って、条件に応じて描画する処理を書く
01:34
v-elseを使って、v-ifがfalseの場合の処理を書く
01:37
v-else-ifを使って、複雑な条件式を作る
01:57
templateタグを使用して、不必要な要素を加えずにv-ifを複数の要素に適応させる
03:06
v-showを使って、頻繁に何かを切り替える処理のパフォーマンスを高める
05:11
v-forディレクティブを使用して、配列に基づいてリストを描画する
02:42
2つ目の引数に配列のインデックスを取ってv-forを使用する
01:34
オブジェクトに対してv-forディレクティブを使用する
01:44
オブジェクトのv-forには、第2引数と第3引数にキーとインデックスを取る
01:06
templateタグを使用して、不必要な要素を加えずにv-forを複数の要素に適応させる
02:01
n in 10 のように、整数値に対してv-forを適用する
00:59
inの代わりにofを使用してJavaScriptのイテレータ構文に近い書き方をする
01:02
key属性をつける必要性を学び、予期せぬバグを起こさないv-forを作る
11:22
まとめ
00:29
+ Vueインスタンスとその内部構造はこうなっている
16 lectures 01:20:18
Vue インスタンスは複数作ることができる
03:02
外側からVue インスタンスにアクセスする方法
05:43
リアクティブシステム(getter、setter、Watcher)がどのように動いているかを確認し、プロパティを後から追加できないことを理解する
11:00
Vueインスタンスプロパティの$dataの紹介
05:41
内側からVueインスタンスのプロパティやメソッドにアクセスする
01:12
VueのAPI一覧はここに載っています。
00:57
$mountメソッドを使用して、elプロパティの代わりにする
01:36
templateプロパティを使って、文字列のみでテンプレートを書く
04:57
render(描画)関数を使用して、仮想ノードを作ってDOMの描画を行う
12:22
仮想DOMと、その必要性を理解する
09:46
仮想DOMを図で理解する
00:04
Vue インスタンスライフサイクルの全体像を見て、Vueがどのように動いているかを理解する
08:18
ライフサイクルフックのタイミングを実際にコードで確かめる
09:39
コンポーネントを使用して、同じようなインスタンスを使い回す
04:58
まとめ
00:29
+ Vue CLIを使った実践的な開発をはじめる方法
7 lectures 45:44
なぜVue CLIを使う必要があるのか
05:42
Vue CLIのインストールと初期設定を行う
10:32
Vue CLIが作成したそれぞれのファイルの説明
13:05
.vueファイル(単一ファイルコンポーネント)とmain.jsの解説
09:32
デプロイ時の本番環境のためのbuildをしてみる
06:06
まとめ
00:17
+ ゼロから始めるコンポーネント
13 lectures 01:01:16
コンポーネントを使用して、再利用可能なVueインスタンスを作る
06:20
dataはなぜコンポーネントにおいて関数である必要があるのか
06:36
コンポーネントにおける、ローカル登録とグローバル登録の違いを理解する
04:43
「 import App from ‘./App.vue'」の意味を理解する
09:59
単一ファイルコンポーネント(.vueファイル)の基礎的な使い方
02:18
実際に単一ファイルコンポーネントを作成してグローバル登録する
03:48
templateはルート要素を1つにしなければならないことに注意する
01:58
シングルファイルコンポーネントをローカル登録する
05:01
componentsフォルダを作成して、綺麗なフォルダ構造を作る
01:52
コンポーネントの名前はケバブケースかパスカルケースにする
09:55
スコープ付きCSSと、Vue.jsがそれをどのように実装しているのかを理解する
07:51
まとめ
00:29
+ コンポーネント間でデータを受け渡す方法
12 lectures 45:15
親子間のデータの受け渡しの必要性を理解する
07:17
propsを使用して、親から子にデータを渡す
02:18
propsの名前はJavaScriptではキャメルケース、HTML内ではケバブケースにすることをお勧めします
02:41
コンポーネント内でpropsを扱う時はdataのように使用する
01:21
バリデーションを使用して、プロパティに意図しない値が渡されるのを防ぐ
05:26
複数のpropsをつける方法
02:34
$emitメソッドを使って、子から親にデータを渡す
12:24
なぜ$emitはpropsと違ってこんなに複雑なのか
05:16
propsで配列とオブジェクトを渡す時は、参照渡しになるので注意する
01:55
$emitで作るカスタムイベント名はケバブケース(kebab-case)にする
03:20
まとめ
00:31
+ コンポーネントの高度な機能はこう書く
19 lectures 01:07:24
htmlのコードを子コンポーネントに渡すとき、propsでは限界がある
03:42
slotを使うことで、子コンポーネントにhtmlのコードを渡すことができる
02:30
slotは親と子のどちらのスコープにアクセスできるのか
05:09
<slot></slot>の中にフォールバックコンテンツを入れると、デフォルトのコンテンツになる
01:50
【名前付きスロット】v-slotを使用すれば、複数のslotを使用して複雑なデータを渡すことができる
07:01
デフォルトのスロットを名前付きスロットの中に置く
06:43
v-slot使用時にtemplate以外を使用するとエラーが出る
00:46
「スロットプロパティ」を使って、子コンポーネントのデータにアクセスする
07:56
スロットプロパティにおける、デフォルトスロットしかない場合の省略記法
06:37
デフォルトスロットに対する省略記法は、名前つきスロットと混在させることができない点に注意する
04:05
動的なスロット名
01:05
名前つきスロットは#に置き換えることができる
01:29
スロットのまとめ
01:15
動的に複数のコンポーネントを切り替えるために、componentタグと、is属性を使用する
08:49
動的コンポーネントは切り替えるごとにdestroyedされる挙動となることを理解する
03:39
keep-aliveを使って動的コンポーネントの状態を保持する
02:11
ライフサイクルフックのactivatedとdeactivatedを使用する
01:57
まとめ
00:23
+ こうすればVue.jsでフォームが簡単に作れる
13 lectures 43:27
v-modelを使用して、input要素に双方向データバインディングを作成する
03:54
.lazy修飾子でchangeイベント後にデータと入力を同期する
02:25
.number修飾子でユーザの入力を数値として自動的に型変換する
01:48
.trim修飾子を使用して、ユーザの入力から空白を自動的に取り除く
02:58
textareaにv-modelを使用して複数行テキストに双方向データバインディングを作成する
03:02
単体のチェックボックスに双方向データバインディングを作成する
02:14
複数のチェックボックスに双方向データバインディングを作成する
03:46
ラジオボタンに双方向データバインディングを作成する
03:30
セレクトボックスに双方向データバインディングを作成する
05:11
v-modelの中身がどうなっているのかを理解する
04:02
コンポーネントでv-modelを使う方法
09:46
まとめ
00:26
+ カスタムディレクティブで自由にディレクティブを作る方法
13 lectures 29:55
カスタムディレクティブを使ってコードを抽象化、そして再利用する
01:32
グローバルにカスタムディレクティブを登録する
02:20
ディレクティブはどのように動くのか。フック関数を理解する
05:46
関数による省略記法を使って、bindとupdateを1つのコードにする
02:32
elを使ってDOMを直接操作し、シンプルなカスタムディレクティブを作成する
03:11
カスタムディレクティブに、binding.valueを使ってデータを渡す
01:57
複数の値を必要とするカスタムディレクティブにはオブジェクトを渡す
01:38
引数をカスタムディレクティブに渡す方法
02:21
修飾子をカスタムディレクティブに対して使えるようにする
03:52
directivesオプションを使って、ローカルにカスタムディレクティブを登録する
02:21
カスタムディレクティブではthisは使えないことに注意する
01:28
まとめ
00:27
Requirements
  • JavaScriptの基礎的な知識が必要です。
  • 講座内ではES6の文法を使いますが、必ずしも理解しておく必要はありません。
  • HTML、CSSの基礎的な知識がある前提で講座を作成しています。
  • テキストエディタ、ターミナルについての使用方法を知っている前提で講座を作成しています。
Description

エンジニアのみなさん!

このコースを修了する頃には、Vue JS の多くを熟知し、Vue JSを使ったWebサービスを世界中に公開しているでしょう。


受講者の声

  • 一つ一つの動画が短くまとめられてたことや、コードを書くたびに解説を細かく挟んでいるので、わかりやすかった。

  • ちょうどこれからVue.jsに挑戦したいと思ってたときにこの教材に出会いました。この1講座だけでVue.jsのHello World!から公開に至るまで実践を踏まえたコース内容で大変満足です。 また、コース紹介でもありましたが、飽きない話し方を工夫されているようで、他の講座にはないテンポの良い進め方で楽しく学ぶことができました! 学んだVue.jsを使って色々なWebサービス開発をしていきます!

  • 出てくる単語一つ一つに詳しい説明が付け加えられていたので、見ていてスッと理解することができて良かったです。


このコースがあなたの職業生活や私生活にどのように役立つか。

  • jQueryやRuby on Railsの経験がある人にとっては、新しいWeb開発の手法が身につきますので、今すぐこの講座を購入してください。この講座に投資することで得られるスキルセットは、あなたの市場価値を高めるでしょう。

  • Angularや、Reactなど、他のJavaScriptフレームワークの経験がある方にとっても、Vueはそれら両方の良いところを利用しているので、この講座に投資する価値があります。その人気を数字で見てみましょう。2019年7月5日時点で、それぞれのGithubのスター数は、Reactが132,096、Angularが49,404のところ、Vueは142,928と最も高く、さらにGithub全リポジトリ3,326,993個の中で、3番目にスター数が多いリポジトリとなっています。あなたが常に自分の市場価値を高めたいと思う場合は、この講座でVue.jsの実践的な内容が学べますので、この機会をお見逃しなく!


登録前に抱くかもしれない質問

  • この講座で何が学べるのか?

    この講座は、Vue.jsの完全パックになっています。あなたは、Vue.jsに関する基礎的な知識から、Vue CLI 3を使った、実務で使える実践的な開発方法、Vue.jsの背景的な知識、カスタムディレクティブやアニメーションといったVue.jsが持つ応用的な機能、Vue Router、Vuex、Firebaseを使用した大規模なシングルページアプリケーション(SPA)の作成、そしてそれらを世界中に公開する方法を網羅的に学ぶことができます。ここまで詳しくVue.jsを解説した日本語のUdemy講座は他に無いので、ぜひこの講座で学んでみてください。

  • Vue.jsを使ったことがない場合、購入するべきではないのか?

    この講座の主なターゲットは、Vue.jsを使ったことのない方ですので、購入する躊躇はいりません。今すぐ一緒にVue.jsを勉強しましょう。もちろん、Vue.jsを使ったことのある方も大歓迎です。Vue CLI3やVue Router、Vuexを使った大規模な開発方法や、カスタムディレクティブ、ミックスインなどのVue.jsの応用的な使い方を知らないという方にとってこの講座はぴったりなので、ぜひ購入してみてください。

  • 思っていた講座と違った場合、どうすれば良いのか?

    間違えて購入してしまった場合も問題ありません。Udemyでは30日間の全額返金保証を行なっております。講座の内容には自信がありますが、もし万が一講座に満足いただけなかったとしても心配ありませんので、ご安心ください。

このコースがどのような問題、ニーズ、希望に応えるか

  • Vue.jsのドキュメントを読んだが、あまりよくわからなかった

  • 本だと退屈で時間がかかるので短期間で動画で学びたい

  • 応用的な内容までまとまった動画教材がないので困っている。

このように感じているならば、この講座は以下のようにしてこれらの問題に応えているので、ぜひ購入を検討してみてください。

  • ドキュメントの内容を噛み砕いてわかりやすく解説

  • あなたが退屈と感じ、飽きないよう、そして、短期間で多くの情報が得られるよう、テンポの良い説明

  • Vue CLI3や、Vue Router、Vuexなど実務で使える実践的な内容を収録


この講座の内容リスト

  • Vue.jsの基礎テンプレート構文

  • 条件付きレンダリング」と「リストレンダリング

  • Vueインスタンスとその内部構造

  • Vue CLIを使った実践的な開発をはじめる方法

  • コンポーネントの知識

  • Vue.jsを使ったフォームの作成方法

  • カスタムディレクティブで自由にディレクティブを作る方法

  • フィルター」と「ミックスイン

  • トランジション」と「アニメーション

  • Vue Routerシングルページアプリケーション(SPA)を作成

  • Vuexを使って大規模なプロジェクトに備える

  • Netlifyを使ってデプロイする方法

  • ボーナス:axiosを使ってサーバーにhttp通信をする方法

  • ボーナス:SPA上でのログイン認証の方法

Who this course is for:
  • モダンなJavaScriptフレームワークに興味があるフロントエンドエンジニア
  • AngularやReactの経験があり、Vueにも興味がある方
  • Progateを一通り終え、実際に実務で使える技術を学びたい方
  • 本で学ぶよりも動画で学ぶ方が好きな方
  • jQueryやRuby on Rails以外のWebアプリケーション開発の方法を学びたい方
  • 新しいことを学ぶのが好きな方