はじめてのVue.js 3入門
Angular.js、React.jsに比べて学習コストが低い注目度抜群のJavaScriptフレームワーク Vue.js!高度化するウェブ開発のフロントエンド開発の課題を解決。
合計時間:01:01:59
コース紹介動画
学習内容
- Vue.jsを使うメリットがわかるようになります。
- Vue.jsの基本的な使い方を速習パートにより短時間で理解できるようになります。
■ 講座内容
このコースでは、人気急上昇中のJavaScriptフレームワークVue.js(ビュージェイエス)を、Webアプリケーション開発に役立つスキルとして学びます。
- 学習コストが低い
- 柔軟性がある
- 高性能
Vue.jsのGItHubでのスター数は、よく比較に出されるフレームワーク、Angular.js, React.jsを抜きました。
- HTMLの基礎知識
- CSSの基礎知識
- JavaScriptの基礎知識(ES2015以降)
- Google Chrome
- macOS または Windows PCが必要です
■ このコースのターゲット
- Vue.jsは気になっているけどまだ試していない
- Vue.jsの知識0から初級者を目指したい方
- jQueryからステップアップしたいWebエンジニア
- jQueryからステップアップしたいWebデザイナー
- HTML/CSS/JavaScriptの基礎知識はある
■受講をおすすめしない方
- すでにVue.jsの利用経験があり、中級者向け、上級者向けの教材を探している方
- 公式ドキュメントを読めば理解できるので、入門教材は不要なレベルの方
- Vue.jsの設計思想やフレームワークの内部的な実装について探求したい方
- 「Vue.js」
- Vue.js 3.1.5 ・・・ 無料
- Google Chrome 最新版・・・ 無料
- CodePen (ウェブブラウザで便利にJavaScriptの学習ができるウェブサービス) ・・・ 無料
- (テキストエディタ Visual Studio Code ・・・ 無料)
レクチャー一覧
- Vue.jsの基本的な使い方を学ぼう
-
1. イントロダクション - Vue.jsの基本的な使い方を学ぼう01:23 無料プレビュー
- セクションの目的
- 全体像の習得
- 学習環境について
-
2. CodePenの使い方を知ろう05:21
- CodePenとは?
- メンテナンスや障害発生時の対処方法
- Visual Studio Code等の利用について
-
3. Vue.jsを読み込もう03:56
- Vue.jsの読み込み方法の選択肢
- CDNとは?
- CDNを使った読み込み方法
-
4. Vueインスタンスを作成しよう02:46
- Vueインスタンス作成方法について
- 変数化について
- 行末のセミコロンについて
-
5. ルートのテンプレートを作成しよう03:26
- テンプレートとは
- テンプレートの作成方法
- マウントする方法
-
6. データバインディングとは01:57
- データバインディングとは?
- データバインディングのメリット
- Vue.jsとjQueryとの比較
-
7. テキストのデータバインディングをしよう05:50
- リアクティブデータについて
- dataオプションの実装方法
- プロパティの表示方法(Mustache構文)
-
8. dataオプションにオブジェクトや配列要素を設定しよう04:01
- 複数のプロパティの作成方法
- オブジェクトの利用について
- 配列の利用について
-
9. エラーを自力で解決できるようになろう05:29
- デベロッパーツールの活用
- エラーメッセージの活用
- エラーが出た際の解決手段の探索
-
10. ディレクティブとは00:55
- ディレクティブの概要
- ディレクティブの例
- ディレクティブの使用方法
-
11. 属性のデータバインディングを使おう v-bind03:44
- 属性のデータバインディングv-bindとは
- v-bindの実装例
- 属性へのデータバインディングを書く際の注意点
-
12. 条件分岐 v-ifを使おう02:01
- 条件分岐v-ifの概要
- v-ifの実装例
- v-ifを使うメリット
-
13. 繰り返しの描画 v-forを使おう04:23
- v-forの概要
- v-forの実装例
- 変数名について
-
14. オブジェクトの繰り返し描画をしよう v-for04:29
- v-forの概要
- v-forでオブジェクトを扱う
- オブジェクトのkeyを取得して利用する方法
-
15. イベント処理の基本を理解しよう v-on05:20
- v-onの概要
- v-onの実装例
- イベントハンドラについて
-
16. 双方向データバインディングを使おう v-model03:48
- 双方向データバインディングとは?
- v-model概要
- v-modelの実装例
-
17. コンポーネントを利用しよう03:10
- コンポーネントとは?
- なぜコンポーネントを使うのか?
- コンポーネントの使いまわし
- Visual Studio Codeを導入しよう
-
18. イントロダクション - Visual Studio Codeを導入しよう
- テキストエディタ Visual Studio Codeを使って、html, js, cssのファイルを作成、編集して、開発する方法
- CodePen を使わないケース
-
19. Visual Studio Codeをインストールしよう
- VS Codeのインストールについて
-
20. 拡張機能をインストールしよう
- Extensions(拡張機能)のインストールについて
- Extensions(拡張機能)をインストールする際の注意点
-
21. Hello Worldプログラムを書いてみよう
- テキストエディタ Visual Studio Code を使った Hello World プログラムの書き方
- ファイル構成について
-
22. 実行方法に関する補足
- 実行方法に関する補足について
- ウェブページの自動更新の書き方について
- 実践演習:タスク管理アプリの開発をしよう
-
23. イントロダクション - 実践演習:タスク管理アプリの開発をしよう
- Vue.jsを使ったタスク管理アプリの制作の概要
-
24. ファイルの準備をしよう
- 学習に使うファイルの準備について
- 過去の練習で使用したコードについての補足
- ファイル構成に関する補足
-
25. 主要な要素を配置しよう
- 見出しの配置について
- テキスト入力欄の配置について
- 追加ボタンの配置について
-
26. 追加ボタンのイベントハンドリングをしよう
- 追加ボタンのイベントハンドリングについて
- submit イベントの無効化について
-
27. データバインディングをしよう
- データバインディングの実装について
- データバインディングの動作確認について
-
28. タスクを追加しよう
- タスクの追加について
- タスクの追加の動作確認について
-
29. タスク追加後の文字列をクリアしよう
- タスク追加後の文字列を削除する方法について
- 文字列の削除の動作確認について
-
30. 未入力なら追加しない処理を実装しよう
- タスク入力欄が未入力だった場合、配列にデータを追加しないようにする処理の実装
-
31. リスト表示をしよう
- 配列のデータのリスト表示について
-
32. タスクの完了/未完了の管理をしよう
- タスクの 完了/未完了 を管理する機能の追加について
-
33. スタイルを設定しよう
- CSS を使ったスタイルの設定について
- class 属性のデータバインディングについて
- CSS セレクタについて
-
34. タスクの削除をしよう
- 登録したタスクを1件ずつ削除する機能についての実装
- タスクの削除の動作確認について
-
35. 全体的な動作確認をしよう
- タスクの追加について
- タスクの 完了/未完了 の切り替えについて
- データの削除について
- テンプレート構文を使えるようになろう
-
36. イントロダクション - テンプレート構文を使えるようになろう
- テンプレート構文について
- JavaScript 式の使い方について
- v-bind の省略記法について
-
37. 様々なテンプレート制御ディレクティブを使おう
- ディレクティブについて
- テンプレート制御ディレクティブの一覧
-
38. v-once ディレクティブを使おう
- v-once ディレクティブ について
- どのようなときに v-once ディレクティブを利用するのか
- v-once ディレクティブについての補足
-
39. v-pre ディレクティブを使おう
- v-pre ディレクティブ について
- どのようなときに v-pre ディレクティブを利用するのか
-
40. v-htmlディレクティブを使おう
- v-html ディレクティブ について
- どのようなときに v-html ディレクティブを利用するのか
- v-html ディレクティブについての注意点
-
41. v-cloakディレクティブを使おう
- v-cloak (クローク)ディレクティブ について
- どのようなときに v-cloak (クローク)ディレクティブを利用するのか
- v-cloak を使ったチラツキの防止について
-
42. v-textディレクティブを使おう
- v-text ディレクティブ について
- どのようなときに v-text ディレクティブを利用するのか
- v-text ディレクティブのよくあるご質問
-
43. JavaScript 式を使おう
- JavaScript 式 について
- JavaScript 式 についての注意点
-
44. v-bindの省略記法も使えるようになろう
- v-bind の省略記法 について
- v-bind の省略記法 のよくあるご質問
- 算出プロパティを使えるようになろう
-
45. イントロダクション - 算出プロパティを使えるようになろう
- 算出プロパティについての主な学習内容
-
46. 算出プロパティの基本を知ろう
- 算出プロパティ computed とは
- 算出プロパティ computed に関する補足
- 算出プロパティ computed のメリットについて
-
47. 算出プロパティとメソッドの比較をしよう
- 算出プロパティとメソッドの違いについて
- 算出プロパティに関する補足
- 算出プロパティに関するまとめ
-
48. 算出プロパティのgetterとsetterを使おう
- 算出プロパティの getter と setter について
- 算出プロパティの getter と setter 関する補足
-
49. 算出プロパティのキャッシュ 動作を確認しよう
- 算出プロパティのキャッシュ動作について
- 算出プロパティのキャッシュ動作についての補足
- 監視プロパティ(ウォッチャ)を使えるようになろう
-
50. イントロダクション - 監視プロパティ(ウォッチャ)を使えるようになろう
- 監視プロパティについての概要
- 監視プロパティの実装例について
-
51. 監視プロパティの基本を知ろう
- 監視プロパティの基本について
- 監視プロパティに関する補足
-
52. 例題:単位変換アプリを作ろう
- 単位変換アプリの作り方の例題
-
53. 算出プロパティと監視プロパティの比較をしよう
- 算出プロパティと監視プロパティの比較について
- 算出プロパティの例題
- 監視プロパティの例題
-
54. オプション deepを使おう
- 監視プロパティの deep オプションの設定について
- deep オプションとは
- deep オプションについての補足
- 実践演習:APIを用いたリアルタイムサーチ - 監視プロパティの理解を深めよう
-
55. イントロダクション - 実践演習:APIを用いたリアルタイムサーチ - 監視プロパティの理解を深めよう
- API を用いたリアルタイムサーチの制作について
- Vue.js の監視プロパティ(ウォッチャ)の使い方について
- Qiita api の利用方法について
-
56. 利用するAPIについて知ろう
- API について
- API の注意事項について
- API のリクエスト回数制限について
-
57. 開発の準備 をしよう
- テキストエディタの使用について
- 雛形ファイルのダウンロードについて
- 雛形ファイルの開き方について
-
58. 空のオプションを用意しよう
- 空のオプションの準備について
-
59. dataオプションを実装しよう
- dataオプションで使用する3つのプロパティについて
-
60. APIからデータを取得しよう
- keyword プロパティの確認
- ローディング中のメッセージの出し方について
- APIからデータ取得できることの確認について
-
61. テンプレート側の実装をしよう
- キーワード入力欄の作成について
- メッセージ表示欄の作成について
- 検索結果の表示欄の作成について
-
62. フォームの監視をしよう
- 検索キーワードの入力フォームの値の変更を監視した、APIを叩く処理の実装について
-
63. 動作確認をしよう
- 監視プロパティを使用した全体的な動作確認について
- クラスとスタイルのバインディングを使おう
-
64. イントロダクション - クラスとスタイルのバインディングを使おう
- クラスやスタイルをデータバインディングによって操作する方法についての概要
- クラスやスタイルをデータバインディングの主な学習内容
-
65. クラスのデータバインディングの基本を知ろう
- HTML の Class のデータバインディングについて
- HTML の Class のデータバインディングの動作確認
- HTML の Class のデータバインディングに関する補足
-
66. 複数のクラスを動的に切り替えよう
- v-bind:class クラスの複数指定の切り替えについて
- v-bind:class クラスの複数指定の切り替えで用意するプロパティについて
- v-bind:class クラスの複数指定の切り替えに関する注意点
-
67. プレーンなクラス属性と共存させよう
- v-bind:class ディレクティブのプレーンな class 属性との組み合わせについて
-
68. 配列構文によるクラスのデータバインディングをしよう
- v-bind:class の配列構文について
- v-bind:class の配列構文のデータオプションについて
-
69. オブジェクトデータを利用しよう
- dataオプションにオブジェクトを定義して、v-bind:class に渡す方法について
-
70. クラスの条件に三項演算子を使おう
- クラスの条件に三項演算子を使う方法について
- クラスの条件に三項演算子を使う方法についての補足
- クラスの条件に三項演算子を使う方法のクラスオブジェクトについて
-
71. インラインスタイルのデータバインディングを使おう
- インラインスタイルのデータバインディングについて
- インラインスタイルのデータバインディングについての注意点
-
72. インラインスタイルのデータバインディングにオブジェクトデータを使おう
- インラインスタイルのデータバインディングにオブジェクトデータを渡す場合について
- オブジェクトデータの作成について
- 条件付きレンダリングを使おう
-
73. イントロダクション - 条件付きレンダリングを使おう
- 条件付きレンダリングについての概要
- 条件付きレンダリングについての主な学習内容
-
74. v-ifとv-elseを使おう
- v-if と v-else について
- v-if と v-else の動作確認について
- v-if と v-else についての注意点
-
75. v-else-ifを使おう
- v-else-if ディレクティブについて
- v-else-if ディレクティブに関する補足
- v-else-if の組み合わせの注意
-
76. v-showを使おう
- v-show ディレクティブについて
- v-show に関する補足
-
77. v-if とv-showの違いを知ろう
- v-if と v-showの違いについて
- v-if ディレクティブ とは
- v-show ディレクティブとは
- イベントハンドリングを使おう
-
78. イントロダクション - イベントハンドリングを使おう
- イベントハンドリングについての概要
- イベントハンドリングについての主な学習内容
-
79. インラインメソッドハンドラを使おう
- インラインメソッドハンドラについて
- イベントハンドラに関する補足
- ボタンの属性について
-
80. メソッドイベントハンドラを使おう
- メソッドイベントハンドラについて
- インラインメソッド記述を、ソッドイベントハンドラで記述するには
- メソッドイベントハンドラの動作確認
-
81. イベントオブジェクトを参照しよう
- イベントオブジェクトの参照について
- イベントオブジェクトの取得方法について
- イベントオブジェクトの取得方法に関するまとめ
-
82. イベントハンドラに引数を渡そう
- イベントハンドラに値を渡す方法について
- イベントハンドラに値を渡す方法の動作確認
-
83. $event を使おう
- $event(ドルマーク イベント) の使い方について
- イベントオブジェクトの参照について
- $event(ドルマーク イベント) の使い方についての補足
-
84. イベント修飾子の概要を知ろう
- イベント修飾子について
- イベント修飾子の種類について
-
85. イベント修飾子の利用例を知ろう .once
- イベント修飾子の利用例について
- .once について
- メッセージプロパティの設定について
-
86. v-on 省略記法を使おう
- v-on ディレクティブの省略記法について
- 完全な構文と省略記法
- v-on ディレクティブの省略記法についての補足
- フォーム入力バインディングを使おう
-
87. イントロダクション - フォーム入力バインディングを使おう
- フォーム入力バインディングについての概要
- フォーム入力バインディングについての主な学習内容
-
88. フォーム入力バインディングの基本を知ろう
- テキストのフォーム入力バインディングに関する補足
- v-modelディレクティブについて
- IMEについての補足
-
89. v-model利用時は、属性は無視されることを知ろう
- v-model 利用時の属性について
-
90. 複数行テキストについて
- 複数行テキスト textarea 要素について
-
91. チェックボックス について
- 単体のチェックボックスについて
- 複数のチェックボックスについて
-
92. チェックボックス 単体
- 単体のチェックボックスに関する補足
-
93. チェックボックス 複数
- 複数のチェックボックスに関する補足
-
94. ラジオボタンについて
- ラジオボタンについて
- ラジオボタンに関するまとめ
-
95. セレクトボックス 単体の選択
- セレクトボックスの単体選択について
-
96. セレクトボックス 複数の選択
- セレクトボックスの複数選択について
-
97. v-model 修飾子の種類
- 修飾子の種類について
-
98. 修飾子 .lazy
- 修飾子 .lazy レイジーについての補足
- 修飾子 .lazy レイジーに関するまとめ
-
99. 修飾子 .trim
- 修飾子 .trimについての補足
- 修飾子 .trimに関するまとめ
-
100. 修飾子 .number
- 修飾子 .numberに関する補足
- 修飾子 .numberに関するまとめ
- コンポーネントを使おう
-
101. イントロダクション - コンポーネントを使おう
- コンポーネントについて
- コンポーネントの特徴について
- コンポーネントについての主な学習内容
-
102. コンポーネントの定義 グローバル
- コンポーネント定義の基本について
- コンポーネントに関する補足
-
103. コンポーネントの定義 ローカル
- コンポーネントのローカル登録について
- グローバル登録していたコードのローカル登録書き換えについて
-
104. コンポーネント名について
- コンポーネント名について
- ハイフンを1つ以上含むケバブケースを利用する必要性について
-
105. コンポーネントで動的な処理を行う
- コンポーネントでJSを扱う事例について
- トランジションの基本を知ろう
-
106. トランジションの基本を知ろう
- トランジションの基本について
- トランジションクラスについて