Vue.js のおすすめの教材8選！ 【 2023年3月 最新版】

Laravel講座第4弾になります。

今回は事前に受講者の方へアンケートをお願いしまして、

一番投票数の多かった、

「顧客管理システム」「Vue.js3 (CompositionAPI + script setup)」

という内容で構成しております。

LaravelでVue.jsを扱う方法はいろいろありますが、

Laravel BreezeにInertiaを選択するのがもっとも扱いやすいという事で、

開発環境の構築の負担をできるだけ下げて構成しております。

・講座前半

環境構築、Inertia、Vue.js3 (CompositionAPI + script setup)の

仕様や動作の確認。

・講座後半

簡易的な顧客管理システム(CRM)を構築しております。

クエリスコープやAPI通信などさまざまな方法を織り交ぜながら、

顧客情報の登録・検索・分析ができるようになっています。

デシル分析やRFM分析など、

実践でもよく使われる分析手法を取り扱っています。

フロントエンド、バックエンド、データ分析と、

幅広い知識をまるっとまとめて吸収できる講座になっています。

■更新情報

2023/2 Inertia 1.0 に伴う追加ライブラリの案内、参考ページURL情報追加

■フロントエンド Vue.js3

CompositionAPI + script setup

defineProps, defineEmits, ref, reactive, computed, onMounted

v-show, v-if, v-on, v-bind, v-for,

■ バックエンド Laravel

LaravelBreeze, Inertia, Ziggy, Link,

Sanctum (API)、クエリスコープ(ローカル、グローバル)、リレーション(1対多、多対多, attach, sync)、ページネーション、トランザクション、Inertiaミドルウェア、フラッシュメッセージ、バリデーション、カスタムリクエスト、Seeder、Faker、Factory、Carbon

■データ分析

期間指定、日別分析、月別分析、デシル分析、RFM分析 など

■その他

yubinbango-core2, micromodal.js, axios, vue-charts-3

■動画収録時の環境

PHP 8.0.8

Laravel 9.3.0

composer 2.2.4

vue 3.2.0

1. 紹介、環境構築
2. コース紹介
3. 講座の進め方、資料の場所など
4. 講座で扱っている資料・コード一覧
5. アンケートにご協力ありがとうございました。
6. 追記: windowsでのインストールコマンド
7. Laravel インストール
8. DB設定、マイグレート
9. Git/GitHubの設定
10. 初期設定 (タイムゾーン、言語、デバッグバー)
11. 初期設定: 言語ファイルの設定
12. Inertia、Vue3、script setup (compositionAPI)
13. Laravel Breeze (Inertia)のインストール
14. 追加: Inertia v1.0 に伴うpackage.jsonへの追加依頼 サイトURL変更について
15. 簡易サーバー動作確認 (npm run dev など)
16. ChromeやVSCodeの拡張機能・プラグイン
17. 補足：コンポーネント名の変更
18. 追加: Inertiaのバージョン変更・マニュアル変更について
19. 生成されたファイルの確認 ( Inertia::render)
20. aタグとLinkコンポーネントの違い
21. Link 名前付きルート
22. Link ルートパラメータ
23. Linkコンポーネントでstore保存 その1
24. Linkコンポーネントでstore保存 その2
25. Vue.js3の概要
26. フォーム (create) その1
27. フォーム (create) その2
28. バリデーション
29. CSRF対策( 実施済み)
30. フラッシュメッセージ
31. Indexにv-forを追加してみる
32. イベントコールバック ( onBefore) その1
33. イベントコールバック ( onBefore) その2
34. スロット・名前付きスロット
35. 他のコンポーネントを使ってみる
36. defineEmits
37. git push
38. CRM 商品関連
39. CRMの概要
40. 設計資料の紹介
41. アプリ名、ロゴ設定
42. Items 下準備1: マイグレーション
43. Item 下準備2: モデル・ルーティング
44. Item 下準備3 ユーザーシーダー、ログイン後のロゴ調整
45. ItemSeeder、ナビメニュー
46. Items (商品・サービス) index
47. Item indexの調整・補足
48. Items createへのリンク
49. Items create
50. Items store
51. 追加：ValidationErrorsコンポーネントがなくなった件の対策
52. 【old】Items バリデーション
53. Items フラッシュメッセージ
54. Item Show 商品詳細
55. JSで bl2br 改行対応
56. Item Edit 商品編集その1
57. Item Edit 商品編集その2
58. Item Update 更新対応
59. Item Delete 削除処理
60. CRM 顧客情報・利用登録
61. Customers 1000件ダミー登録
62. Customers ダミーデータ修正
63. Customers index 顧客一覧
64. Customer ページネーション 確認
65. ページネーション コンポーネントの作成
66. ページネーションをIndexに組み込む
67. Customer 検索機能 (Laravel側)
68. Customer 検索機能 (Vue.js側)
69. Customer 新規登録
70. Customer 保存処理
71. 郵便番号から住所取得
72. CRM 購入画面
73. Purchase モデル・マイグレーション・リレーション・ダミー
74. ItemPurchase マイグレーション・リレーション
75. 中間テーブルのダミーデータ作成
76. 購入画面の準備
77. 購入日の日付を取得 (JS Dateオブジェクト)
78. 顧客情報をv-forで表示
79. 商品情報をv-forで表示
80. 合計金額をcomputedで計算
81. 保存処理その1 POST通信
82. 保存処理その2 DBに保存
83. 保存処理その3 トランザクション追加
84. Purchase/Create.vueのレイアウト調整
85. micromodal.js
86. API通信の設定確認 (Sanctum, axios)
87. async-await も使って 顧客情報取得
88. 顧客情報をモーダルウィンドウに組み込む
89. defineEmitで子 -> 親 に情報をアップロード
90. CRM 購買履歴画面
91. ダミーデータ 3万件投入
92. joinで4つのテーブルを紐づけて合計金額を表示 (mysql版)
93. グローバルスコープ
94. 購買履歴の一覧画面 (index)
95. 購入日の表示変更 (dayjs)
96. 購買履歴の詳細画面 (show) (小計・合計)
97. 詳細画面 (ビュー側調整)
98. 購買履歴の編集画面 (edit)の準備
99. 購買履歴の編集用コード(Laravel側)
100. 購買履歴の編集画面 (Vue側)
101. 購入履歴の更新その1
102. 購入履歴の更新その2 (sync)
103. データ分析
104. Analysisページ追加
105. 期間を指定する
106. Analysis.vueにフォームを追加
107. Api通信(Ajax通信)の通信確認
108. 日別売上のクエリ作成・取得確認
109. 期間指定のクエリ修正 (Carbon
110. 日別売上のテーブル表示
111. vue-charts-3 インストール
112. 日別売上のグラフ表示
113. サービスへの切り離し
114. 月別・年別分析の追加
115. 補足: デシル分析 customer_nameでエラーがでたら
116. デシル分析1 会員毎にまとめて金額順にソートする
117. デシル分析2 連番を振り必要な変数を設定
118. デシル分析3 case文で10のグループに分ける準備
119. デシル分析4 平均、合計、構成比を算出する
120. ResultTableコンポーネントに分離する
121. API通信でデシル分析結果を取得
122. RFM分析1 概要 RFMそれぞれの情報を取得
123. RFM分析2 RFMランクをつけてみる
124. RFM分析3 RとFの2次元でデータ取得
125. RFM分析 描画前の準備
126. RFMランク用のテーブルをView側に追加
127. RFMServiceを作成し非同期で受け取れるところまで対応
128. RFM分析結果を表で表示
129. デバッグ(Log), 外部結合, ranksテーブル・ダミー作成
130. 外部結合し0も表示できるように対応

エンジニアのみなさん！

このコースを修了する頃には、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を使用した大規模なシングルページアプリケーション(SPA)の作成、そしてそれらを世界中に公開する方法を網羅的に学ぶことができます。ここまで詳しくVue.jsを解説した日本語のUdemy講座は他に無いので、ぜひこの講座で学んでみてください。

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

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

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

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

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

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

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

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

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

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

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

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

  
  

この講座の内容リスト

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

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

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

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

• コンポーネントの知識

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

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

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

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

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

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

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

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

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

1. はじめに
2. コースの紹介
3. Vue.jsでHello World !を表示させてみる
4. ボタンを押したら文字が反転する処理をVue.jsで行ってみる
5. このコースの流れ
6. 再生速度の変更とQ&Aの使い方について
7. ローカル環境でVue.jsを動かす方法
8. これがVue.jsの基礎、テンプレート構文だ
9. イントロダクション-セクション2
10. テンプレート構文とは何か
11. 二重中括弧を使ってデータを描画する
12. thisを理解して、methodから自分のdataにアクセスする
13. v-から始まる特別な属性であるディレクティブを理解する
14. 一度だけ描画するv-onceディレクティブを理解する
15. v-htmlを使って、データをHTMLとして出力する(XSS脆弱性に注意)
16. v-bindを使用して、属性の値をデータに対応づける
17. v-bindの応用的な使い方を学ぶ
18. v-onを用いて、クリックなどのイベント発生時に特定の処理をする
19. v-onの引数となるDOMイベント一覧
20. v-on使用時に、イベントオブジェクトを使ってイベントの情報を取得する
21. v-onに指定しているメソッドに引数を持たせる
22. .stopと.preventという２つの例を見ながら、頻繁に行われる処理を簡略化した、イベント修飾子を理解する
23. キー修飾子を使って、特定のキーボードを押した時にイベントを発火するようにする
24. v-onディレクティブの引数を[ ]を使って動的に表現する
25. @マークを使ってv-onを省略記法で書く
26. v-modelを使用して、双方向バインディングを作成する
27. computedプロパティを使って、動的なデータを表現する
28. computedとmethodの違いを理解し、算出プロパティのリアクティブな依存関係にもとづきキャッシュされるという性質を理解する
29. ウォッチャを使って、データが変わった時に特定の処理をする
30. 丸カッコ( )は、二重中括弧とv-onディレクティブにおいて、いつ必要なのか
31. クラスをデータにバインディング(紐付け)する方法その１。オブジェクトを渡し、真偽値を使って動的に適応させるクラスを切り替える
32. クラスをデータにバインディングする方法その2。配列を使って、適応させたいクラスを並べる
33. スタイル属性を、オブジェクトを用いて動的にバインディングする
34. スタイルオブジェクトをデータに書いて、コードを見やすくする
35. 複数のスタイルオブジェクトを配列構文を用いて適応させる
36. まとめ
37. 「条件付きレンダリング」と「リストレンダリング」
38. イントロダクション-セクション3
39. v-ifディレクティブを使って、条件に応じて描画する処理を書く
40. v-elseを使って、v-ifがfalseの場合の処理を書く
41. v-else-ifを使って、複雑な条件式を作る
42. templateタグを使用して、不必要な要素を加えずにv-ifを複数の要素に適応させる
43. v-showを使って、頻繁に何かを切り替える処理のパフォーマンスを高める
44. v-forディレクティブを使用して、配列に基づいてリストを描画する
45. ２つ目の引数に配列のインデックスを取ってv-forを使用する
46. オブジェクトに対してv-forディレクティブを使用する
47. オブジェクトのv-forには、第２引数と第３引数にキーとインデックスを取る
48. templateタグを使用して、不必要な要素を加えずにv-forを複数の要素に適応させる
49. n in 10 のように、整数値に対してv-forを適用する
50. inの代わりにofを使用してJavaScriptのイテレータ構文に近い書き方をする
51. key属性をつける必要性を学び、予期せぬバグを起こさないv-forを作る
52. まとめ
53. Vueインスタンスとその内部構造はこうなっている
54. イントロダクション-セクション4
55. Vue インスタンスは複数作ることができる
56. 外側からVue インスタンスにアクセスする方法
57. リアクティブシステム(getter、setter、Watcher)がどのように動いているかを確認し、プロパティを後から追加できないことを理解する
58. Vueインスタンスプロパティの$dataの紹介
59. 内側からVueインスタンスのプロパティやメソッドにアクセスする
60. VueのAPI一覧はここに載っています。
61. $mountメソッドを使用して、elプロパティの代わりにする
62. templateプロパティを使って、文字列のみでテンプレートを書く
63. render(描画)関数を使用して、仮想ノードを作ってDOMの描画を行う
64. 仮想DOMと、その必要性を理解する
65. 仮想DOMを図で理解する
66. Vue インスタンスライフサイクルの全体像を見て、Vueがどのように動いているかを理解する
67. ライフサイクルフックのタイミングを実際にコードで確かめる
68. コンポーネントを使用して、同じようなインスタンスを使い回す
69. まとめ
70. Vue CLIを使った実践的な開発をはじめる方法
71. イントロダクション-セクション5
72. なぜVue CLIを使う必要があるのか
73. Vue CLIのインストールと初期設定を行う
74. インストール時の補足
75. Vue CLIが作成したそれぞれのファイルの説明
76. .vueファイル(単一ファイルコンポーネント)とmain.jsの解説
77. デプロイ時の本番環境のためのbuildをしてみる
78. まとめ
79. ゼロから始めるコンポーネント
80. イントロダクション-セクション6
81. コンポーネントを使用して、再利用可能なVueインスタンスを作る
82. dataはなぜコンポーネントにおいて関数である必要があるのか
83. コンポーネントにおける、ローカル登録とグローバル登録の違いを理解する
84. 「 import App from ‘./App.vue'」の意味を理解する
85. 単一ファイルコンポーネント(.vueファイル)の基礎的な使い方
86. 実際に単一ファイルコンポーネントを作成してグローバル登録する
87. templateはルート要素を1つにしなければならないことに注意する
88. シングルファイルコンポーネントをローカル登録する
89. componentsフォルダを作成して、綺麗なフォルダ構造を作る
90. コンポーネントの名前はケバブケースかパスカルケースにする
91. スコープ付きCSSと、Vue.jsがそれをどのように実装しているのかを理解する
92. まとめ
93. コンポーネント間でデータを受け渡す方法
94. イントロダクション-セクション7
95. 親子間のデータの受け渡しの必要性を理解する
96. propsを使用して、親から子にデータを渡す
97. propsの名前はJavaScriptではキャメルケース、HTML内ではケバブケースにすることをお勧めします
98. コンポーネント内でpropsを扱う時はdataのように使用する
99. バリデーションを使用して、プロパティに意図しない値が渡されるのを防ぐ
100. 複数のpropsをつける方法
101. $emitメソッドを使って、子から親にデータを渡す
102. なぜ$emitはpropsと違ってこんなに複雑なのか
103. propsで配列とオブジェクトを渡す時は、参照渡しになるので注意する
104. $emitで作るカスタムイベント名はケバブケース(kebab-case)にする
105. まとめ
106. コンポーネントの高度な機能はこう書く
107. イントロダクション-セクション8
108. htmlのコードを子コンポーネントに渡すとき、propsでは限界がある
109. slotを使うことで、子コンポーネントにhtmlのコードを渡すことができる
110. slotは親と子のどちらのスコープにアクセスできるのか
111. の中にフォールバックコンテンツを入れると、デフォルトのコンテンツになる
112. 【名前付きスロット】v-slotを使用すれば、複数のslotを使用して複雑なデータを渡すことができる
113. デフォルトのスロットを名前付きスロットの中に置く
114. v-slot使用時にtemplate以外を使用するとエラーが出る
115. 「スロットプロパティ」を使って、子コンポーネントのデータにアクセスする
116. スロットプロパティにおける、デフォルトスロットしかない場合の省略記法
117. デフォルトスロットに対する省略記法は、名前つきスロットと混在させることができない点に注意する
118. 動的なスロット名
119. 名前つきスロットは#に置き換えることができる
120. スロットのまとめ
121. 動的に複数のコンポーネントを切り替えるために、componentタグと、is属性を使用する
122. ESLintのエラーに関する補足
123. 動的コンポーネントは切り替えるごとにdestroyedされる挙動となることを理解する
124. keep-aliveを使って動的コンポーネントの状態を保持する
125. ライフサイクルフックのactivatedとdeactivatedを使用する
126. まとめ
127. こうすればVue.jsでフォームが簡単に作れる
128. イントロダクション-セクション9
129. v-modelを使用して、input要素に双方向データバインディングを作成する
130. .lazy修飾子でchangeイベント後にデータと入力を同期する
131. .number修飾子でユーザの入力を数値として自動的に型変換する
132. .trim修飾子を使用して、ユーザの入力から空白を自動的に取り除く
133. textareaにv-modelを使用して複数行テキストに双方向データバインディングを作成する
134. 単体のチェックボックスに双方向データバインディングを作成する
135. 複数のチェックボックスに双方向データバインディングを作成する
136. ラジオボタンに双方向データバインディングを作成する
137. セレクトボックスに双方向データバインディングを作成する
138. v-modelの中身がどうなっているのかを理解する
139. コンポーネントでv-modelを使う方法
140. まとめ
141. カスタムディレクティブで自由にディレクティブを作る方法
142. イントロダクション-セクション10
143. カスタムディレクティブを使ってコードを抽象化、そして再利用する
144. グローバルにカスタムディレクティブを登録する
145. ディレクティブはどのように動くのか。フック関数を理解する
146. 関数による省略記法を使って、bindとupdateを１つのコードにする
147. elを使ってDOMを直接操作し、シンプルなカスタムディレクティブを作成する
148. カスタムディレクティブに、binding.valueを使ってデータを渡す
149. 複数の値を必要とするカスタムディレクティブにはオブジェクトを渡す
150. 引数をカスタムディレクティブに渡す方法
151. 修飾子をカスタムディレクティブに対して使えるようにする
152. directivesオプションを使って、ローカルにカスタムディレクティブを登録する
153. カスタムディレクティブではthisは使えないことに注意する
154. まとめ
155. 「フィルター」と「ミックスイン」
156. イントロダクション-セクション11
157. フィルターを使用して、一般的なテキストフォーマットを作成する
158. コンポーネントのオプション内でローカルフィルタを定義する
159. 複数のフィルタ関数を連結させる
160. フィルターでthisが使えないことに注意する
161. computedとフィルターのキャッシュに対する違いを理解する
162. 共有できるコードを全てミックスインにする
163. 実際にミックスインを作って、オプションをコンポーネント間で共有する
164. オプションが被ったときに、どのようにミックスインがマージされるのか
165. グローバルミックスインを作成する
166. まとめ
167. 「トランジション」と「アニメーション」
168. イントロダクション-セクション12
169. なぜVue.jsがトランジション効果を適用するための方法を提供しているかを考える
170. Vue.jsが提供するトランジション効果を適用する3つのパターン
171. ６つのトランジションクラスとtransitionコンポーネントを用意する
172. transitionコンポーネントにおける、6つのトランジションクラスの使い方を理解する
173. fadeするトランジション効果をCSSトランジションを使って実際に作成する
174. トランジションクラスがどのタイミングで追加/削除されているかを確認する
175. CSSアニメーションを使ってslideするトランジション効果を実際に作成する
176. transitionは単一の要素だけでしか利用できないことを確認する
177. CSSトランジションとCSSアニメーションを両方使用する時はtype属性をつける
178. apper属性を使って、最初の描画時にトランジションを適用する
179. カスタムトランジションクラスを使用して、Animate.cssを使う
180. 補足 Animate.cssのアップデートによる変更
181. name属性を動的に変更して、動的トランジションを作る
182. 複数の要素を切り替えるトランジションについて学ぶ
183. mode属性を使って、要素間のトランジションのタイミングをずらす
184. 動的コンポーネントに対してトランジションを使用する
185. JavaScriptを使ってアニメーションを作る
186. 8つのJavaScriptフックとその引数を理解する
187. トランジションクラスとJavaScriptフックが適応されるタイミングを知る
188. css属性にfalseを指定して、安全にJavaScriptのみのアニメーションを作る
189. 実際にJavaScriptフックを使用してアニメーションを作成する
190. transition-groupを使ってリストトランジションを作る
191. 5つのtransition-groupとtransitionで異なる重要な特徴
192. 7つ目のトランジションクラスであるv-moveクラスを使用する
193. トランジションの再利用する時はコンポーネントにする
194. まとめ
195. Vue Routerでルーティングできる仕組み
196. イントロダクション-セクション13
197. Vue Routerをインストールする際の補足
198. VueRouterとは何をするものなのか。実際にURLによって表示する内容を変える
199. シングルページアプリケーションとは何かを理解する
200. hashモードからhistoryモードに切り替えてURLを美しくする

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

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

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

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

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

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

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

そのような中で、Vue.jsは、

• 学習コストが低い

• 柔軟性がある

• 高性能

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

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

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

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

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

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

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

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

■ 利用するソフトウェア 等：

「Vue.js 3」

• Vue.js 3.1.5  ・・・ 無料

• Google Chrome   ・・・ 無料

• CodePen （Webブラウザで簡便にJavaScriptの学習ができるWebサービス） ・・・  無料

• テキストエディタ Visual Studio Code  ・・・  無料

• パソコン （macOS または Windows）

Q＆Aコーナーのご利用について

• 本コースの内容を超えるご質問にはお答えできませんので、予めご了承ください。

• ご意見・ご要望や、コンテンツのリクエストは、コース内で紹介する専用のフォームにてお知らせいただけると幸いです。

■【旧版】Vue.js2対応コンテンツについて：

コンテンツが古くメンテナンスが困難なため、公開停止しました。

■ 更新履歴

2021/10/13 Vue.js 3対応コンテンツを追加

1. はじめに
2. コース紹介
3. 受講オリエンテーション
4. Vue.jsの基本的な使い方を学ぼう
5. イントロダクション - Vue.jsの基本的な使い方を学ぼう
6. サンプルコードについて
7. CodePenの使い方を知ろう
8. Vue.jsを読み込もう
9. Vueインスタンスを作成しよう
10. ルートのテンプレートを作成しよう
11. データバインディングとは
12. テキストのデータバインディングをしよう
13. dataオプションにオブジェクトや配列要素を設定しよう
14. エラーを自力で解決できるようになろう
15. ディレクティブとは
16. 属性のデータバインディングを使おう v-bind
17. 条件分岐 v-ifを使おう
18. 繰り返しの描画 v-forを使おう
19. オブジェクトの繰り返し描画をしよう v-for
20. イベント処理の基本を理解しよう v-on
21. 双方向データバインディングを使おう v-model
22. コンポーネントを利用しよう
23. コンテンツリクエスト募集中！
24. Visual Studio Codeを導入しよう
25. イントロダクション - Visual Studio Codeを導入しよう
26. Visual Studio Codeをインストールしよう
27. 拡張機能をインストールしよう
28. Hello Worldプログラムを書いてみよう
29. 実行方法に関する補足
30. 実践演習：タスク管理アプリの開発をしよう
31. イントロダクション
32. ファイルの準備をしよう
33. 主要な要素を配置しよう
34. 追加ボタンのイベントハンドリングをしよう
35. データバインディングをしよう
36. 訂正情報
37. タスクを追加しよう
38. タスク追加後の文字列をクリアしよう
39. 未入力なら追加しない処理を実装しよう
40. リスト表示をしよう
41. タスクの完了/未完了の管理をしよう
42. スタイルを設定しよう
43. タスクの削除をしよう
44. 全体的な動作確認をしよう
45. テンプレート構文を使えるようになろう
46. イントロダクション
47. 様々なテンプレート制御ディレクティブを使おう
48. v-once ディレクティブを使おう
49. v-pre ディレクティブを使おう
50. v-htmlディレクティブを使おう
51. v-cloakディレクティブを使おう
52. v-textディレクティブを使おう
53. JavaScript 式を使おう
54. v-bindの省略記法も使えるようになろう
55. 算出プロパティを使えるようになろう
56. イントロダクション
57. 算出プロパティの基本を知ろう
58. 算出プロパティとメソッドの比較をしよう
59. 補足：算出プロパティのgetterとsetterを使おう
60. 算出プロパティのgetterとsetterを使おう
61. 算出プロパティのキャッシュ 動作を確認しよう
62. 監視プロパティ（ウォッチャ）を使えるようになろう
63. イントロダクション
64. 監視プロパティの基本を知ろう
65. 例題:単位変換アプリを作ろう
66. 算出プロパティと監視プロパティの比較をしよう
67. オプション deepを使おう
68. 実践演習：APIを用いたリアルタイムサーチ - 監視プロパティの理解を深めよう
69. イントロダクション
70. 利用するAPIについて知ろう
71. 開発の準備 をしよう
72. 空のオプションを用意しよう
73. dataオプションを実装しよう
74. APIからデータを取得しよう
75. テンプレート側の実装をしよう
76. フォームの監視をしよう
77. 動作確認をしよう
78. クラスとスタイルのバインディングを使おう
79. イントロダクション
80. クラスのデータバインディングの基本を知ろう
81. 複数のクラスを動的に切り替えよう
82. プレーンなクラス属性と共存させよう
83. 配列構文によるクラスのデータバインディングをしよう
84. オブジェクトデータを利用しよう
85. クラスの条件に三項演算子を使おう
86. インラインスタイルのデータバインディングを使おう
87. インラインスタイルのデータバインディングにオブジェクトデータを使おう
88. 条件付きレンダリングを使おう
89. イントロダクション
90. v-ifとv-elseを使おう
91. v-else-ifを使おう
92. v-showを使おう
93. v-if とv-showの違いを知ろう
94. イベントハンドリングを使おう
95. イントロダクション
96. インラインメソッドハンドラを使おう
97. メソッドイベントハンドラを使おう
98. イベントオブジェクトを参照しよう
99. イベントハンドラに引数を渡そう
100. $event を使おう
101. イベント修飾子の概要を知ろう
102. イベント修飾子の利用例を知ろう .once
103. v-on 省略記法を使おう
104. フォーム入力バインディングを使おう
105. イントロダクション - フォーム入力バインディング
106. フォーム入力バインディングの基本
107. v-model利用時は、属性は無視される。
108. 複数行テキストについて
109. チェックボックス について
110. チェックボックス 単体
111. チェックボックス 複数
112. ラジオボタンについて
113. セレクトボックス 単体の選択
114. セレクトボックス 複数の選択
115. v-model 修飾子の種類
116. 修飾子 .lazy
117. 修飾子 .trim
118. 修飾子 .number
119. コンポーネントを使おう
120. イントロダクション - コンポーネントを使おう
121. コンポーネントの定義 グローバル
122. コンポーネントの定義 ローカル
123. コンポーネント名について
124. コンポーネントで動的な処理を行う
125. トランジションの基本
126. トランジションの基本を知ろう
127. クロージング
128. クロージング
129. 謝辞
130. ボーナスレクチャー
131. ボーナスレクチャー

Vueの最新メジャーバージョンであるVue3を、ViteやTypescriptを使ったモダンな環境で学習していきます

コンポーネントとは何かの説明から始まって、最終的には認証やアニメーションなどを活用した実践的なアプリケーション作成を学びます

1. 紹介
2. 紹介
3. このコースの全体像
4. 開発環境の整備
5. [Optional] Javascriptを復習する
6. Javascriptとは何か
7. Javascriptはどのように実行されるか
8. 動的な型付けとは
9. 様々な実行環境
10. 変数・型・関数
11. Javascriptのコード構造
12. letとconst
13. Operator
14. 実際に変数と演算子を使う
15. 型 stringとnumber
16. 関数
17. 処理の順番
18. 関数の登録
19. 型の変換
20. javascriptの基礎的な型
21. Arrayを活用する
22. Objectを活用する
23. 型の特定
24. スプレッド構文とレスト構文
25. 高階関数
26. Typescriptと型
27. Vueの導入
28. 環境構築
29. viteで作られたアプリケーション
30. template, script, style
31. templateについて
32. scriptについて
33. styleについて
34. ComponentとCompositionAPI
35. コンポーネント指向について
36. 初めてのコンポーネント
37. v-bind データを埋め込む
38. v-on 処理を埋め込む
39. ネイティブイベントを扱う
40. 動的なアプリケーションへの入り口
41. RefとReactive
42. v-model 双方向バインド
43. Computed Property
44. watch
45. CompositionAPI と OptionAPI
46. script setup
47. ライフサイクルの扱い方
48. 動的なリスト
49. イントロダクション
50. 静的なリスト
51. 動的なリスト　要素の追加
52. 動的なリスト　要素の削除
53. v-if 条件付きレンダリング
54. まとめ
55. コンポーネント同士のコミュニケーション
56. イントロダクション
57. Props 親から子へ
58. Emits 子から親へ
59. (optional) コールバック関数とEmit
60. 初めてのアプリケーション実践
61. イントロダクション
62. 全体の構成を作る
63. 動的なスタイリング
64. 確認アラートを出す
65. まとめ
66. より深くコンポーネントを理解する
67. イントロダクション
68. Slots
69. 動的なコンポーネント
70. 大規模アプリでのコンポーネント同士のコミュニケーション
71. イントロダクション
72. Provide / Inject
73. InjectionKey
74. より深くディレクティブを理解する
75. カスタムディレクティブ
76. modifiers (修飾子)
77. v-modelとdropdown, checkbox, radiobutton
78. v-modelとカスタムコンポーネント
79. HTTPリクエストを扱う
80. イントロダクション
81. バックエンドのセットアップ
82. POSTリクエスト データを作成する
83. GETリクエスト データを取得する
84. Loadingを扱う
85. エラーを扱う

『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

1. Vue.jsの基本
2. 講座の紹介
3. Udemyで受講する簡単な説明
4. 講座で扱っている資料・サンプルコード
5. Vue.jsの概要
6. Vue2 インストール
7. API elとdata
8. 仮想DOM
9. Vue.js DevTools
10. タグに属性をつける(直接DOM操作の場合)
11. v-bind と :
12. v-bind その2 オブジェクト
13. v-bind その3 style/class
14. ディレクティブ v-show
15. v-if v-else v-else-if
16. v-for その1
17. v-for その2
18. v-text と v-html
19. v-cloak
20. v-on と @
21. v-on その2 イベントオブジェクト 修飾子
22. v-on その3 preventDefault
23. computed
24. thisとアロー関数
25. watch
26. リアクティブシステム
27. ライフサイクルフック created とmounted
28. トランジションなど
29. CSS Sass/Scss BEM (JS講座と同じ)
30. サンプル1: タブメニュー
31. transition トランジション
32. サンプル2: モーダルウィンドウ
33. transition-group トランジション複数
34. Array.splice
35. サンプル3: カルーセル
36. カスタムクラスのトランジション(animate.css)
37. フォームと非同期通信(Ajax)
38. フォーム HTMLのおさらい(JS講座と同じ)
39. 双方向データバインディング(v-bindとv-on)
40. v-model
41. v-model 修飾子
42. @submitとmethods
43. computed(get/set)
44. フォームバリデーションの補足
45. サンプル4: Todoリスト(フィルターつき)
46. web通信のおさらい
47. 簡易サーバーとNetwork
48. Promise/async/await/fetch
49. 表示時・クリック時のAjax
50. lodashのdebounce/throttle
51. watch + Ajax
52. コンポーネント
53. コンポーネントについて
54. グローバルコンポーネント
55. ローカルコンポーネント
56. props サンプル UIフレームワーク
57. props 直接書いてみる
58. propsとv-bind
59. propsで配列を渡す
60. propsの補足
61. $emit カスタムイベント
62. コンポーネント間のフォーム
63. 追加：子側でv-modelを使うパターン
64. イベントバス
65. Atomic Design
66. slot
67. 名前付きslot
68. スコープ付きslot
69. Vuetify (CDN)
70. 【追加】URLが v2.vuetify.js/ja に変更
71. クイックスタート
72. レイアウト周り Grid/Flex
73. スタイル Spacingなど
74. UIコンポーネント を使ってみる
75. スロット(activator, item)
76. サンプルを読む テーブルCRUD
77. サンプル5: DogApi
78. Vuetifyの補足 (カスタムディレクティブなど)
79. SFC (SingleFileComponent)
80. VueCLIの前に
81. VueCLIのインストール方法
82. Vuterのインストール・設定
83. ファイル・フォルダの構成
84. 補足: コンポーネント名について
85. import/export
86. render と $mount
87. SFC (SingleFileComponent)
88. Scoped CSS
89. publicPath (vue.config.js)
90. 補足1 SCSS (グローバル設定含む)
91. 追記:SCSSの補足
92. 補足2 マルチページモード
93. VueRouter SPA
94. Vue Routerを使ってみる (CDN)
95. Vue Routerインストール (npm)
96. ファイル・フォルダの構成
97. router-linkのprops
98. $router と $route
99. 動的パラメータ+props その1
100. 動的パラメータ+props その2
101. 動的パラメータ+props 補足
102. 動的パラメータの補足 watch
103. リダイレクトと404ページ
104. ネストされたルート
105. 名前付きrouter-view
106. トランジションを含めたルート
107. ナビゲーションガード
108. historyモードの補足
109. サンプル6 SPA + GoogleBookAPI
110. サンプルアプリの全体像
111. Google Books APIの説明
112. Google Books API
113. LocalStorageの解説
114. Local Storage
115. Vuetifyのインストール(vue add)
116. ファイル・フォルダ整理
117. 検索画面 fetch, v-card
118. App.vueからlocalStorageへ保存
119. search->editへの移動と表示
120. beforeRouteEnter + $nextTick
121. BookEdit カレンダーなど
122. BookEdit->BookIndex
123. 一覧画面(BookIndex)
124. BookEdit dateの修正
125. LocalStorage一括削除
126. サンプルアプリの補足
127. Vuex
128. Vuexとは
129. Vuexのインストール
130. Vuex stateとmutations
131. mutations補足 payload
132. actions->mutations->state
133. getters
134. スプレッド構文
135. mapヘルパー(mapActions)
136. モジュール分割と名前空間(namespace)
137. Vuexの使い所(モジュール結合度・Container/Presentational)
138. Vue.js3対応
139. Vue.js3の特徴
140. Vue.js3のインストール(CDN)
141. Vue.js devTools (ver6.x)
142. Vue.js2と同じコードの確認 OptionsAPI
143. Vue.js3のインストール(NPM)
144. エントリーポイントの確認
145. Provide/Inject 長距離Props
146. Teleport
147. 追記: Composition API script setupについて
148. CompositionAPI・setup()の実行タイミング
149. setup()でthisが使えない件
150. setup()の戻り値
151. ref()
152. reactive()
153. toRefs()
154. メソッド
155. computed()
156. watch()
157. watchEffect()
158. ライフサイクルフック
159. setup(props)
160. emit (context.emit)
161. Composition Function(合成関数)の概要
162. 合成関数(script内)
163. 合成関数(モジュール化)
164. setup内でvue-router
165. setup内でナビゲーションガード
166. setup内でvuex その1
167. setup内でvuex その2
168. script setup
169. script setupの概要
170. script setupを実際に試してみる
171. props down を試してみる
172. event upを試してみる
173. 補足
174. Node.jsのインストール方法
175. コマンドプロンプト(win)の使い方
176. fontAwesomeの登録設定方法
177. VSCodeインストール方法 その1
178. VSCodeインストール方法 その2
179. 講座内のサンプルコードについて