Vue JS入門決定版!jQuery を使わない Web 開発 - 導入からアプリケーション開発まで体系的に動画で学ぶ
4.3 (1,536 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,693 students enrolled

Vue JS入門決定版!jQuery を使わない Web 開発 - 導入からアプリケーション開発まで体系的に動画で学ぶ

Vue Router, Vue CLI 対応. Angular.js、React.jsに比べて学習コストが低い注目度抜群のJavaScriptフレームワーク Vue.js!高度化するWeb開発のフロントエンド開発の課題を解決。
4.3 (1,536 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,693 students enrolled
Current price: $35.99 Original price: $59.99 Discount: 40% off
2 days left at this price!
30-Day Money-Back Guarantee
This course includes
  • 8.5 hours on-demand video
  • 13 articles
  • 2 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を使うメリットがわかるようになります。
  • Vue JSの基本的な使い方を速習パートにより短時間で理解できるようになります。
  • TODO管理アプリ開発を通して、Vue JSによるアプリ制作の一連の流れを理解できるようになります。
  • Vue JSとBitcoin価格取得APIと連携した実践的な開発ができるようになります。
  • プログラミング関連記事検索APIを用いたリアルタイムサーチ開発を通して、実践的な開発ができるようになります。
  • Vue JSの詳細な機能についても理解できるようになります。
  • Vue Routerの基礎を学習してSPAを実装できるようになります。
  • Vue CLI3を使った開発ができるようになります。
Course content
Expand all 172 lectures 08:21:15
+ はじめに
7 lectures 15:53

このコースについて説明します。

  • Vue.jsの概要/面白さ

  • このコースで作るもの

  • 対象となる受講生

Preview 03:02
受講オリエンテーション
08:31
補足:受講オリエンテーション
00:31

コースカリキュラムについて説明します。

  • 速習パート

  • 詳細パート

  • 各パートの役割

Preview 01:14

学習環境について説明します。

  • コードの動作環境

  • パソコン(OS)について

  • テキストエディタ(Atom)について

Preview 01:33

学習環境について補足します。

  • テキストエディタについて

  • Webブラウザについて

  • Google Chrome利用の薦め

補足:学習環境について
00:28

サポートサイトについて説明します。

  • サンプルコードの掲載について

  • サポートサイトのご利用方法

  • 公開範囲について

サンプルコードについて
00:33
+ Vue.jsの基本的な使い方
28 lectures 01:44:55

このセクションについて説明します。

  • セクションの目的

  • 全体像の習得

  • 学習環境について

Preview 00:58

jsFiddleについて説明します。

  • サーバがダウンしている場合

  • 学習に影響をもたらす仕様変更が発生した場合

補足:jsFiddleについて
00:17

jsFiddleの画面について説明します。

  • テーマの変更

  • HTML/JavaScript/CSS欄について

  • Result欄の役割

JSFiddle 画面説明
02:59

Vue.jsの読み込みについて説明します。

  • Vue.jsの読み込み方法

  • CDNとは?

  • CDNでの読み込み方法

Preview 03:30

Vue.jsの開発バージョンと本番バージョンについて説明します。

  • 開発バージョンの特徴

  • 本番バージョンの特徴

  • 開発バージョンから本番バージョンへの切り替え方

Preview 02:57

Vueインスタンスの作成について説明します。

  • Vueインスタンス作成

  • 変数について

  • 変数化するメリット

Preview 02:22

データバインディングについて説明します。

  • データバインディングとは?

  • jQueryとVue.jsの比較

  • データバインディングの種類について

Preview 02:37

ルートのテンプレート作成について説明します。

  • テンプレートについて

  • テンプレートの作成

  • オプションについて

Preview 03:22

テキストのデータバインディングについて説明します。

  • リアクティブデータについて

  • データの作り方

  • プロパティの表示方法(Mustache構文)

Preview 06:38

dataオプションにオブジェクトや配列要素を設定する方法について説明します。

  • 複数のプロパティの作成方法

  • オブジェクトの作成方法

  • 配列の作成方法

Preview 04:55

jsFiddleの利用が便利になる設定について説明します。

  • Auto-run codeについて

  • jsFiddleへのログインについて

  • jsFiddleへの無料登録について

補足:jsFiddleの利用が便利になる設定
00:18

jsFiddleの利用が便利になる設定について説明します。

  • jsFiddleの設定の仕方

  • Auto-run codeの機能

  • Clear console on runについて

jsFiddleの利用が便利になる設定
03:40

jsFiddle ソースコードの保存・読み込みについて説明します。

  • jsFiddleの保存方法

  • ソースコードの共有方法

  • Public設定の際の注意点

jsFiddle ソースコードの保存・読み込み
05:09

エラーを自力で解決する方法について説明します。

  • デベロッパーツールの活用

  • エラーメッセージについて

  • エラーが出た際の解決手段の探索

エラーを自力で解決する方法
04:12

ディレクティブについて説明します。

  • ディレクティブの概要

  • ディレクティブの例

  • ディレクティブの使用方法

ディレクティブとは
01:20

属性のデータバインディング v-bindについて説明します。

  • 目的物の確認

  • v-bindの実践

  • 属性へのデータバインディングを書く際の注意

属性のデータバインディング v-bind
04:47

属性のデータバインディング v-bindについて補足します。

  • 以前に頂いた質問

  • マウントとは?

補足:属性のデータバインディング v-bind
00:19

条件分岐 v-ifディレクティブについて説明します。

  • 目的物の確認

  • v-ifの特徴

  • DOMも扱う際のコストについて

条件分岐 v-if
04:05

条件分岐 v-showについて説明します。

  • v-showの特徴

  • v-showでの動作確認

  • DOMツリーの確認

条件分岐 v-show
03:07

オブジェクトの繰り返しの描画をv-forで行う方法を説明します。

  • 目的物の確認

  • v-for構文

  • オブジェクトのキーを表示する方法

繰り返しの描画 v-for
04:44

オブジェクトの繰り返しをv-forで行う方法を説明します。

  • v-for構文

  • v-forの実践

  • 繰り返し処理の詳細説明

オブジェクトの繰り返し v-for
05:51

イベント処理の基本について説明します。

  • 目的物の確認

  • v-on構文

  • イベントハンドラの書き方

イベント処理の基本 v-on
05:05

双方向データバインディング v-modelについて説明します。

  • 双方向データバインディングとは?

  • 双方向データバインディング v-model

  • データオブジェクトの値の確認

双方向データーバインディング v-model
05:41

コンポーネントの基本について説明します。

  • コンポーネントとは?

  • 目的物の確認

  • Vue.component構文

コンポーネント
03:22

Vue.jsの基本的な使い方について演習形式で復習します。

  • このレクチャーの進め方

  • 復習内容

  • 演習

演習:Vue.jsの基本的な使い方のまとめ①
06:58

Vue.jsの基本的な使い方について演習形式で復習します。

  • これまでの復習

  • 演習

  • 各演習の回答

演習:Vue.jsの基本的な使い方のまとめ②
05:28

テキストエディタを使った開発について説明します。

  • jsFiddleを使わないケース

  • このコースの開発環境

  • Atom上での開発の実演

補足:テキストエディタを使った開発
09:52

Vue.jsを扱う際のJavaScriptのセミコロンについて説明します。

  • JavaScriptのセミコロンについて

  • Vue.jsの公式ドキュメント上の記載

  • セミコロンをつけるか否かについて

補足:JavaScriptのセミコロンについて
00:20
+ 実践演習:TODO管理アプリの開発
13 lectures 33:46

このセクションについて説明します。

  • TODO管理アプリについて

  • 目標物の確認

  • データの保存について

Preview 01:44

Vueインスタンスとルートテンプレートの作成の復習と入力です。

  • CDNでVue.jsの読み込み

  • ルートテンプレートの作成

Preview 02:11

主要な要素の配置をしていきます。

  • 見出しの設置

  • フォームの設置

  • ボタンの設置

Preview 01:03

追加ボタンのイベントハンドリングについて説明します。

  • v-on:clickの設定

  • addItemメソッドの作成

  • サブミットイベントを無効にする方法

追加ボタンのイベントハンドリング
03:10

inputのvalueを双方向バインディングする方法について説明します。

  • プロパティの作成

  • v-modelの設定

  • 入力内容の連動をチェック

inputのvalueを双方向データバインディング
02:06

タスクの追加について説明します。

  • 機能についての説明

  • データを入れる配列を設置

  • クリック時に配列にデータを追加するメソッド作成

タスクの追加
02:20

タスク追加後に文字列をクリアする方法について説明します。

  • 機能についての説明

  • クリアする処理の記述

  • 動作の確認

タスク追加後の文字列クリア
01:21

タスク入力欄が未入力なら追加しない方法について説明します。

  • 機能についての説明

  • 空のデータが追加されていることの確認

  • 未入力状態で処理を止める方法

未入力なら追加しない
02:08

配列のデータをリスト表示する方法について説明します。

  • v-forの使用

  • 配列を表示するリストの記述

  • 動作の確認

リスト表示
01:53

タスクの完了/未完了の管理について説明します。

  • チェックボックスの追加

  • todoオブジェクトで真為値判定(isDone)を行う

  • checkboxとisDoneの双方向バインディング

タスクの完了/未完了の管理
02:45

スタイルの設定について説明します。

  • リストマークを非表示にする。

  • 完了済みタスクに線を引く

  • クラス属性のデータバインディング

スタイルの設定
04:30

タスクの削除機能を追加します。

  • Deleteボタンの設置

  • deleteItemメソッドの作成

  • メソッドで各ボタンを見分ける方法

タスクの削除
06:31

全体を通して動作確認を行います。

  • タスクの追加

  • タスクの完了/未完了の切り替え

  • タスクの削除

全体を通して動作確認
02:04
+ 実践演習:Bitcoin価格表示アプリの開発 - API連携
13 lectures 23:35

このセクションについて説明します。

  • アプリについて

  • HTTPクライアントaxiosの使用について

  • 目標物の確認

Preview 00:51

利用するAPIの仕様について説明します。

  • APIについて

  • 仕様変更があった場合について

  • 利用するデータの説明

利用するAPIの仕様
01:57

データを格納するプロパティの作成について説明します。

  • プロパティの作成

  • 格納するデータの確認

  • 初期値の設定

データを格納するプロパティを作成
00:41

HTTPクライアントaxiosの導入について説明します。

  • APIとの通信タイミングについて

  • APIとの通信の実装方法(axios)

  • axiosのCDNでの読み込み方法

HTTPクライアント axiosの導入
02:40

Bitcoin価格をAPIから取得する方法について説明します。

  • mounted内でaxiosを使いデータを取得

  • 取得したデータの使用方法

  • Bitcoin価格の取得とプロパティへのデータ格納

Bitcoin価格をAPIから取得
03:13

1つ前のレクチャーにあったJavaScriptのbindについて説明します。

  • bind(this)の機能について

  • bind(this)がない場合

  • bind(this)がある場合

補足:JavaScriptの bindについて
01:45

通信エラーに対して処理を行います。

  • .catch

  • consoleにエラー出力

  • エラーメッセージの確認

通信エラーのキャッチ
01:02

Bitcoin価格の表示について実装します。

  • v-forディレクティブ

  • 繰り返し処理を使ったデータの表示

  • 出力の確認

Bitcoin価格の表示
01:52

この時点でのレクチャーのまとめです。

  • ここまでのレクチャーについて

  • ここからのレクチャーについて

  • API

中間まとめ
00:11

小数点以下の桁数調整方法について説明します。

  • filtersの実装

  • toFixedメソッドについて

  • テンプレート側の記述

小数点以下の桁数調整
01:22

チラつき防止について説明します。

  • ページ表示時の問題

  • v-cloakディレクティブ実装

  • 動作の確認

チラツキ防止
01:11

通信エラーハンドリングについての実装です。

  • 通信エラー時に画面に出力する方法

  • catch呼び出し時の真為値の変更

  • テンプレート側の実装(v-if/v-else)

通信エラーハンドリング
03:16

ローディング表示の実装です。

  • ローディング確認用プロパティ作成

  • テンプレート側の実装(v-if/v-else+Loading..の表示)

  • 動作の確認

ローディング表示
03:33
+ テンプレート構文
14 lectures 45:17

このセクションについて説明します。

  • 一部の復習的内容について

  • 学習内容について

イントロダクション - テンプレート構文
00:35

様々なテンプレート制御ディレクティブについて説明します。

  • テンプレート制御ディレクティブの種類

  • v-once/v-pre/v-html

  • v-cloak/v-text

様々なテンプレート制御ディレクティブ
00:28

v-onceディレクティブについて説明します。

  • 実現したいことについて

  • ボタンでメッセージを変更する設定

  • v-onceディレクティブの追加と機能の確認

v-once ディレクティブ
04:11

v-preディレクティブについて説明します。

  • 実現したいことについて

  • v-preディレクティブの追加と機能の確認

  • v-preディレクティブの使用用途について

v-pre ディレクティブ
01:57

v-htmlディレクティブについて説明します。

  • 実現したいことについて

  • v-htmlの機能の確認

  • v-htmlのコードを書いて学習

v-htmlディレクティブ
03:19

v-cloakディレクティブについて説明します。

  • 実現したいことについて

  • v-cloakの機能の確認

  • v-cloakのコードを書いて学習

v-cloakディレクティブ
05:11

v-textディレクティブについて説明します。

  • 実現したいことについて

  • v-textの機能の確認

  • v-textのコードを書いて学習

v-text ディレクティブ
02:54

バインディング式について説明します。

  • バインディング式とは

  • バインディング式の種類

バインディング式
00:32

JavaScript式について説明します。

  • JavaScript式の使用について

  • 今までとの違い

  • JavaScript式のコードを書いて学習

JavaScript 式
06:07

フィルタ(ローカルフィルタ)について説明します。

  • 例題で学習

  • 式の終わりに任意のフィルタ追加

  • ローカルフィルタのコードを書いて学習

フィルタ(ローカルフィルタ)
04:36

フィルタ(グローバルフィルタ)について説明します。

  • 例題で学習

  • グローバルフィルタの構文

  • グローバルフィルタのコードを書いて学習

フィルタ(グローバルフィルタ)
02:14

フィルタの連結について説明します。

  • 例題で学習

  • フィルタの複数使用について

  • 複数のフィルタを実装して学習

フィルタの連結
04:51

フィルタの引数について説明します。

  • 例題で学習

  • 引数の使用について

  • 引数を実装して学習

フィルタの引数
04:46

v-bind省略記法について説明します。

  • 省略記法がある理由について

  • 省略記法の例

  • 省略記法を書いて学習

v-bind 省略記法
03:36
+ 算出プロパティ
5 lectures 20:50

このセクションについて説明します。

  • セクションの概要

  • 主な学習内容について

  • 算出プロパティ

イントロダクション
00:37

算出プロパティの基本について説明します。

  • 算出プロパティ computedとは?

  • 算出プロパティを書いて学習

  • 算出プロパティの必要性について

算出プロパティの基本
03:29

算出プロパティとメソッドの違いについて説明します。

  • プロパティとメソッド

  • getter/setter

  • キャッシュ

算出プロパティとメソッドの比較
03:32

算出プロパティのgetter,setterについて説明します。

  • getterとsetterについて

  • 例題で学習

  • getterとsetterのコードを書いて学習

算出プロパティのgetterとsetter
06:59

算出プロパティのキャッシュについて説明します。

  • メソッドとプロパティ

  • メソッドとプロパティでコードを記述

  • キャッシュされる/されないの違い

算出プロパティのキャッシュ
06:13
+ 監視プロパティ(ウォッチャ)
8 lectures 32:59

このセクションについて説明します。

  • セクションの概要

  • 監視プロパティとは?

  • 主な事例

イントロダクション
00:53

監視プロパティの基本について説明します。

  • 例題で学習

  • 目標物の動作確認

  • 監視プロパティをコードを書いて学習

監視プロパティの基本
05:23

例題として単位変換アプリを開発します。

  • 例題で学習

  • 目標物の確認

  • コードを書いて実践学習

例題:単位変換アプリ
06:43

算出プロパティと監視プロパティの比較について説明します。

  • どちらも実装できる場合

  • 例題で学習

  • 算出プロパティのコードのクリーンさについて

算出プロパティと監視プロパティの比較
06:39

監視プロパティのオプションについて説明します。

  • 監視プロパティのオプション

  • deep

  • immediate

監視プロパティのオプション
00:26

deepオプションについて説明します。

  • deepの用途

  • ネストされた値の変更

  • deepオプションのtrue/falseでの動作確認

オプション deep ①
07:06

deepオプションについて説明します。

  • deepの補足/注意

  • 実際にコードを書いて内容の把握

  • 回避について

オプション deep ②
03:25

immediateオプションについて

  • immediateの用途

  • コードを書いて実践学習

  • immediateのtrue/falseでの動作確認

オプション immediate
02:24
+ 実践演習:APIを用いたリアルタイムサーチ - 監視プロパティの理解を深める
9 lectures 27:49

このセクションについて説明します。

  • セクションの概要

  • 演習のテーマ

  • 目標物の確認

Preview 02:21

利用するAPIについて説明します。

  • 使用するAPI

  • 注意事項について

  • リクエスト回数制限について

利用するAPIについて
02:02

開発の準備について説明します。

  • 開発準備について

  • 開発準備の実演

  • ファイルの内容確認

開発の準備
01:45

空のオプションの用意をします。

  • 空のオプションを作成

  • created/mounted

  • DOMにアクセスする必要がない場合

空のオプションの用意
01:04

dataオプションにプロパティを用意します。

  • items

  • keyword

  • message

dataオプション
00:53

APIからデータを取得するコードの実装をします。

  • keywordプロパティのチェック

  • axiosでAPIをたたく

  • コードを書いて動作の確認

APIからデータを取得
06:58

テンプレート側の実装を行います。

  • キーワード入力欄の作成

  • メッセージ表示欄の作成

  • 検索結果の表示欄の作成

テンプレート側の実装
06:04

フォームの監視を実装します。

  • キーワードの値を監視

  • 監視プロパティの使用

  • debounce関数の使用

フォームの監視
04:09

動作確認を行います。

  • 文字の入力

  • 検索ワードの追加

  • 訂正

動作確認
02:33
+ クラスとスタイルのバインディング
9 lectures 25:53

このセクションについて説明します。

  • セクションの概要

  • Webページの動的な動き

  • 学習内容について

イントロダクション
00:40

クラスのデータバインディングの基本について説明します。

  • 目標物の確認

  • クラスを動的に変更

  • 静的な適用との比較

クラスのデータバインディングの基本
03:48

複数のクラスを動的に切り替える方法について説明します。

  • CSSにクラスを追加

  • hasErrorプロパティ

  • v-bindの複数クラス指定

複数のクラスを動的に切り替える
02:22

v-bind:classがプレーンなクラス属性と組み合わせられることについて説明します。

  • 目標物の確認

  • クラスの複数指定

  • クラス指定の優先順位について

プレーンなクラス属性と共存
03:24

配列構文によるクラスのデータバインディングについて説明します。

  • 下準備

  • v-bindクラスへ配列を渡す。

  • 配列構文のデータバインディングによる動作の確認

配列構文によるクラスのデータバインディング
02:13

オブジェクトデータの利用について説明します。

  • データオプションにオブジェクトを定義

  • 定義したオブジェクトをクラスに渡す。

  • 動作の確認

オブジェクトデータの利用
02:45

クラスの条件に三項演算子を使ってクラスを切り替える方法を説明します。

  • 三項演算子の補足

  • 三項演算子をv-bind:classに記述

  • 動作の確認

クラスの条件に三項演算子を使う
05:03

インラインスタイルのデータバインディングについて説明します。

  • v-bind:styleについて

  • 目標物の確認

  • v-bind:classのコードを書いて学習

インラインスタイルのデータバインディング
03:13

インラインスタイルのデータバインディングにオブジェクトデータを渡す説明をします。

  • レクチャーの目的

  • 目標物の確認

  • インラインスタイルのデータバインディングにオブジェクトデータを渡す。

インラインスタイルのデータバインディングにオブジェクトデータ
02:25
+ 条件付きレンダリング
5 lectures 11:59

このセクションについて説明します。

  • セクションの概要

  • 学習内容について

  • 条件付きレンダリング

イントロダクション
00:32

v-ifとv-elseについて説明します。

  • v-if

  • v-else

  • 表示と非表示の切り替え

v-ifとv-else
03:24

v-else-ifについて説明します。

  • v-else-if

  • elseifに相当

  • 例題で学習

v-else-if
03:48

v-showについて説明します。

  • v-show

  • CSSプロパティを切り替える

  • 例題で学習

v-show
03:00

v-ifとv-showの違いについて説明します。

  • v-ifの特徴

  • v-showにの特徴

  • 適切な条件

v-if とv-showの違い
01:15
Requirements
  • HTMLの基礎知識
  • CSSの基礎知識
  • JavaScriptの基礎知識(ES5, 一部ES2015)
  • Google Chrome
  • テキストエディタ
  • macOS または Windows PCが必要です
Description

このコースでは、人気急上昇中のJavaScriptフレームワークVue.js(ビュージェイエス)を、Webアプリケーション開発に役立つスキルとして学びます。


はじめてVue.jsを学ぶ方をターゲットにしています。

jQueryだけでは限界を感じていてステップアップしたい、Webエンジニア・Webデザイナーにおすすめです。


このコースでは、Vue.jsだけを体系的に、効率的に学習することができます。

JavaScriptを使った高度なUIのWebアプリケーションが増えるにしたがって、jQueryでの開発はメンテナンスが非常に難しい課題に直面しています。JavaScriptフレームワークの導入は必須となっています。

JavaScriptフレームワークといえば、React.js, Angular.jsがまず思い浮かぶ方が多いのではないでしょうか。

しかしながら、大規模なアプリケーション開発ではない場合、オーバースペックとなりメリットが活かしきれず、熟練したメンバーが揃えられないプロジェクトチームでは、その学習コストの高さから、開発スピードが低下してしまう懸念があります。

私は、React.jsは複数案件経験しているのですが、プロジェクトによっては相当苦労しました。限られた予算内で、サービスリリースを優先するために、泣く泣くReact.jsで書いたコードを捨てる苦い経験もしました。

そんな中で、Vue.jsは、

  • 学習コストが低い

  • 柔軟性がある

  • 高性能

といった、特徴を持っている、注目のJavaScriptフレームワークです。


Vue.jsのGItHubでのスター数は、よく比較に出されるフレームワーク、Angular.js, React.jsを抜きました。

Vue.jsは、ファイルを読み込むだけで、コードを書き始めることができますので、とても手軽に導入できます。

この導入の手軽さは、jQueryに近い感覚です。


Vue.jsのコードは書いていて、とても楽しいです。

この楽しさは理屈では説明が難しいので、まずはコードを書いて体感してください。


詳細は無料プレビュー動画を30分用意しましたので、ぜひご覧ください! 


それでは、皆さんとコースの中でお会いできることを楽しみにしています。


利用するソフトウェア 等:

「Vue.js」

  • Vue.js 2.5.16  ・・・ 無料

  • Google Chrome   ・・・ 無料

  • jsFiddle (Webブラウザで便利にJavaScriptの学習ができるWebサービス) ・・・  無料

  • テキストエディタ Atom(収録時期により、一部レクチャーでVisual Studio Code使用) ・・・  無料

  • パソコン (macOS または Windows 7, 8.1, 10)

「Vue Router」

  • Vue.js 2.6.10  ・・・ 無料

  • Vue Router 3.0.6 ・・・ 無料

  • Google Chrome   ・・・ 無料

  • Visual Studio Code ・・・  無料

  • パソコン (macOS または Windows 7, 8.1, 10)

「Vue Router」

  • Vue CLI 3・・・無料

  • Google Chrome   ・・・ 無料

  • Visual Studio Code ・・・  無料

  • パソコン (macOS または Windows 7, 8.1, 10)

Who this course is for:
  • Vue JSは気になっているけどまだ試していない
  • jQueryからステップアップしたいWebエンジニア
  • jQueryからステップアップしたいWebデザイナー
  • HTML/CSS/JavaScriptの基礎知識はある
  • 多少のお金を支払うことで学習時間を短縮したい
  • 他の教材で学習をはじめたが挫折した
  • ★★すでにVue JSを使って開発している方は対象としていません★★