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

Vue.jsを学びたいと考えているみなさま！

このコースはこれ1本でVue.jsで必要な知識が全て手に入る、Vue.js完全ガイドとなっています。この講座を修了する頃には、Vue.jsの多くを熟知し、Vue.jsを使ったWebサービスを世界中に公開しているでしょう。

このコースがあなたの仕事やプライベートにどのように役立つか。

• もしあなたがプログラミング初心者ならVue.jsを学ぶことで最新の開発技法が身につき、簡単に複雑なWebアプリケーションを作成することができるようになります。ぜひ本講座を受講してあなた自身のWebアプリケーションを世界中に公開してみてください。

• 素のJavaScriptや、jQuery、Ruby on Railsなどで開発している方にとっては、本講座を受講することで、より効率的な新しいWeb開発の手法が身につきます。この講座に投資することで得られるスキルセットは、あなたの市場価値をきっと高めるでしょう。

• すでにVue.jsで開発しているが、なんとなく使っている、という方にとっても本講座はおすすめです。この講座ではVue.jsで必要な知識を網羅的かつ丁寧に説明しています。正しく理解した上で自信を持ってVue.jsを使うことであなたの生産性はきっと高まるはずです。ぜひこの機会をお見逃しなく！

• ReactやAngularなど、他のJavaScriptフレームワークの経験がある方にとっては、Vueはそれらの良いところを利用しているので、簡単に学ぶことができます。多様なスキルセットを持つことで、あなたの市場価値が高くなりますのでぜひ本講座を受講してみてください。

  
  

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

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

  この講座はVue.js 3のComposition APIやViteをベースに作成したVue.jsの完全ガイドになっています。あなたは、Vue.jsに関する基礎的な知識から、Vue.jsの内部構造、非同期コンポーネントやComposableといったVue.jsの応用的な機能、Vue Router、Pinia、TypeScriptを使用した大規模なシングルページアプリケーション(SPA)の作成、そしてそれらを世界中に公開する方法までを網羅的に学ぶことができます。ここまで詳しくVue.jsを解説した日本語のUdemy講座は他に無いので、ぜひこの講座で学んでみてください。

• プログラミング初心者の場合は受講するべきではないのか？

  この講座の主なターゲットは、HTMLやCSS、JavaScriptは少し勉強したけれども、それ以上何をすれば良いのかわからない、という方です。そのため最低限の知識さえあれば購入する躊躇はいりません。今すぐ一緒にVue.jsを勉強しましょう。もちろんプログラミングの知識が豊富な方も大歓迎です。本講座ではViteを使った最新の開発手法をベースに、ComposableやPinia、TypeScriptなど発展的な内容まで網羅的に解説しています。

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

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

  
  

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

• Vue 3のまとまった動画教材がないので困っている。

  本講座はVue 3を使用して基礎から応用まで抜けがないよう、詳細にわかりやすく解説していますので、これ１本でVue.jsで必要な知識が全て手に入るようになっています。

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

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

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

  本講座ではドキュメントの内容を噛み砕いてわかりやすく解説しています。難しい言葉も不必要に使用していませんので、安心してご受講ください。

  
  

この講座の内容リスト

• Viteを使ったプロジェクトのセットアップ

• リアクティビティ

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

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

• コンポーネントの基礎

• 親子間のコンポーネントでデータを受け渡す方法

• デモアプリの作成

• Vue.jsの内部構造

• コンポーネントの応用

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

• Composableを使った処理の再利用

• アニメーションをVue.jsで使用する方法

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

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

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

• TypeScriptと一緒に使う方法(ボーナス)

• Options APIの紹介(ボーナス)

1. はじめに
2. これがVue.jsだ！
3. このコースの流れ
4. 再生速度の変更とQ&Aの使い方
5. このコースのもくじ
6. こうしてVue.jsをはじめる
7. セクション2のイントロダクション
8. 「単一ファイルコンポーネント」と「Vite」
9. こうして開発環境を整える(Node.js, VSCode, create-vue)
10. create-vueが作成したプロジェクトはどうなっているのか
11. 拡張機能はこうセットアップする(Volar, ESLint, Prettier)
12. createAppを使ってVueのアプリを作る方法
13. .vueファイルはこうなっている！
14. JavaScriptのデータを表示する方法
15. クリックされた時に処理を実行する方法
16. これがリアクティビティだ！
17. ref()を使ってリアクティブなデータを作る方法
18. reactive()を使ってオブジェクトをリアクティブにする方法
19. reactive()とref()はこうして一緒に使える
20. 普通のオブジェクトとref()はこうして一緒に使う
21. セクション2の小テスト
22. これがVue.jsの基礎だ！(テンプレート構文, イベントハンドリング, 算出プロパティ, ウォッチャー, クラス/スタイル)
23. セクション3のイントロダクション
24. これがテンプレート構文だ！
25. 二重波括弧({})を使ってデータを描画する方法
26. これがv-から始まる特別な属性であるディレクティブだ！
27. v-htmlを使ってデータをHTMLとして出力する方法
28. こうしてv-bindを使って属性値を指定する
29. Boolean属性に対してv-bindを利用する方法
30. v-bindで１度に複数の属性を指定する方法
31. v-onを用いてクリックなどのイベント発生時に特定の処理をする方法
32. イベントオブジェクトを使ってイベントの情報を取得する方法
33. v-onでハンドラーに引数を渡す方法
34. イベント修飾子を使って頻繁に行う処理を簡略化する方法 - stop, prevent
35. キー修飾子を使ってキーボードイベントに対して処理をする方法
36. ディレクティブの構造はこうなっている
37. 角括弧([])を使ってディレクティブの引数にscriptのデータを指定する方法
38. v-modelを使用してinputを単純に扱えるようにする方法
39. computedを使って複雑な式を１つにまとめる方法
40. computedを使う時はここに注意する - ReactiveEffect
41. watchEffectを使ってリアクティブなデータの変更を監視する方法
42. watchを使って特定のリアクティブなデータの変更を監視する方法
43. class属性はこう指定する！
44. style属性はこう指定する！
45. セクション3の小テスト
46. 「条件付きレンダリング」と「リストレンダリング」
47. セクション4のイントロダクション
48. v-if, v-else, v-else-ifを使って描画を条件分岐する方法
49. templateタグを使用して効率よく複数の要素にv-ifを適応させる方法
50. v-showを使って頻繁に何かを切り替える処理のパフォーマンスを上げる方法
51. v-forを使って配列のリストを描画する方法
52. key属性はこう使う！
53. v-forで配列のインデックスを取得する方法
54. v-forで分割代入する方法
55. templateタグを使用して効率よく複数の要素にv-forを適応させる方法
56. オブジェクトに対してv-forを使用する方法
57. n in 10のように整数値に対してv-forを適用する方法
58. inの代わりにofを使用してv-forを使う方法
59. セクション4の小テスト
60. コンポーネントはこう使う！
61. セクション5のイントロダクション
62. これがコンポーネントツリーだ！
63. コンポーネント同士を繋げる方法
64. おすすめのコンポーネント名の書き方
65. グローバル登録でコンポーネントをどこでも使えるようにする方法
66. 「componentsフォルダの作成」と「@でパスを省略する方法」
67. 属性をコンポーネントにつけた時はこう継承される
68. styleタグにscoped属性をつけてCSSの適用範囲をコンポーネント内に限定する方法
69. Viteの機能を使ってグローバルなCSSを作る方法
70. Vue Devtoolsをブラウザの拡張機能として使い開発の手助けにする方法
71. セクション5の小テスト
72. 親子間のコンポーネントでデータを受け渡す方法
73. セクション6のイントロダクション
74. propsを利用して親から子にデータを渡す方法
75. バリデーションを利用してpropsに予期しないデータが渡るのを防ぐ方法
76. 高度なバリデーションをpropsに指定する方法
77. propsの命名規則はこうなっている
78. emitを使ってイベントを発生させて子から親に対して通信する方法
79. 引数をemitに渡して子から親にデータを渡す方法
80. defineEmitsを使って明示的にemitするイベントを示す方法
81. emitの命名規則はこうなっている
82. セクション6の小テスト
83. 食事選択アプリをVue.jsで作る方法
84. セクション7のイントロダクション
85. アプリのセットアップを行う方法
86. コンポーネントを使って食べ物の情報をこうして管理する
87. propsを使って汎用的な食べ物のコンポーネントを作成する方法
88. ユーザーが食べたい物をクリックする時の処理はこう書く
89. 最後にユーザーが最も食べたい物を１つだけ表示する方法
90. Vue.jsの内部構造はこうなっている
91. セクション8のイントロダクション
92. こうして仮想DOMを使ってレンダリングをしている
93. 仮想DOMはコンポーネント単位ではこうなっている
94. これがコンポーネントのライフサイクルだ！
95. DOMが更新されるタイミングはこうなっている -nextTick()
96. useTemplateRef()を使って直接DOM要素にアクセスする方法
97. セクション8の小テスト
98. コンポーネントの高度な機能はこう書く
99. セクション9のイントロダクション
100. slotを使ってタグごと親から子にデータを渡す方法
101. フォールバックコンテンツを使ってデフォルトのコンテンツを指定する方法
102. 名前付きスロットを使ってslotタグを複数指定する方法
103. slotで子から親にデータを渡す方法
104. 動的コンポーネントを使って簡単にコンポーネントを切り替える方法 -
105. shallowRefを使ってパフォーマンスを上げる方法
106. KeepAliveを使ってデータが消えないようにする方法
107. KeepAliveにはこれらの属性をつけることができる！ - include属性 exclude属性 max属性
108. KeepAliveのライフサイクルはこうなっている - onActivated, onDeactivated
109. を利用して好きな位置にテンプレートを配置する方法
110. 非同期コンポーネントを利用して遅延読み込みする方法 - defineAsyncComponent
111. 非同期コンポーネントのローディング中やエラー時に別のコンポーネントを表示する方法
112. セクション9の小テスト
113. こうすれば簡単にVue.jsでフォームを作れる
114. セクション10のイントロダクション
115. テキストのinputタグとtextareaタグにv-modelを適用させる方法
116. チェックボックスにv-modelを適用させる方法
117. ラジオボタンにv-modelを適用させる方法
118. selectタグにv-modelを適用させる方法
119. v-modelで使用できる３つの修飾子 - lazy, trim, number
120. defineModelを使ってコンポーネントにv-modelを使用する方法
121. セクション10の小テスト
122. Composableを使って処理の部分を再利用する方法
123. セクション11のイントロダクション
124. これがComposableだ！
125. Composable同士を組み合わせる方法 - Composition API
126. Composableの書き方のベストプラクティスはこうなっている
127. VueUseを使って簡単に便利な機能を利用する方法
128. セクション11の小テスト
129. アニメーションはこうしてVue.jsで使う
130. セクション12のイントロダクション
131. CSSトランジションとCSSアニメーションはこうなっている
132. を使って要素の表示時や消える時にアニメーションをつける方法
133. 内部でTransitionコンポーネントはこうやってクラスをつけている
134. name propsを使ってクラスの名前をv以外にする方法
135. CSSアニメーションをTransitionコンポーネントで使う方法
136. appearを使って最初の表示時にもアニメーションをつける方法
137. クラスの名前を自由に変える方法 - Animate.css
138. modeを使って２つの要素が切り替わる時に綺麗にアニメーションする方法
139. 6つのTransitionコンポーネントが発生させるイベント
140. JavaScriptで要素の表示時や消える時にアニメーションをつける方法
141. enter-cancelledとleave-cancelledを使って綺麗なJavaScriptアニメーションを作る方法
142. を使ってリストに対してアニメーションをつける方法
143. moveクラスを利用して滑らかなアニメーションをリストにつける方法
144. セクション12の小テスト
145. Vue RouterでURLごとに違うコンポーネントを表示する方法
146. セクション13のイントロダクション
147. Vue Routerはこうしてセットアップする
148. Vue Routerの設定はこう書く - history,
149. を使って効率良くページを移動する方法
150. 動的な:to属性を使って遷移先のページをオブジェクトで指定する方法
151. プログラムから画面を移動する方法 - push(), replace(), go()
152. nameを使ってルートに名前をつける方法
153. パラメーター(:)を使って動的なパスを作る方法
154. routeオブジェクトでURLの情報を取得する方法
155. パラメーターに色々なルールを追加する方法 - (\\d+), ?, +, *
156. どんなパスでも全てキャッチする処理を書く方法
157. 「リダイレクト」と「エイリアス」
158. props: trueとしてコンポーネントの再利用性を上げる方法
159. ネストされたRouterViewはこう使う
160. 名前付きビューを使って複数のRouterViewを同じ階層に配置する方法
161. をVue Routerと一緒に使う方法
162. スクロールの振る舞いはこうして指定する
163. beforeEachナビゲーションガードでページ移動時に処理を実行する方法
164. beforeEnterナビゲーションガードで特定のページ移動時に処理を実行する方法
165. onBeforeRouteUpdateナビゲーションガードでコンポーネントの再利用時に処理を実行する方法
166. beforeResolveナビゲーションガードとafterEachフックでページ移動完了時に処理を実行する方法
167. onBeforeRouteLeaveナビゲーションガードでページから離れる時に処理を実行する方法
168. metaはこう使って各ルートに情報をつける！
169. Vue Routerで遅延読み込みをして効率よくコンポーネントをダウンロードする方法
170. セクション13の小テスト
171. Piniaを使ってプロジェクト全体で使うデータを管理する方法
172. セクション14のイントロダクション
173. Piniaがなぜ必要なのか
174. Piniaを使ってStoreを定義する方法 - defineStore()
175. Storeで定義したデータをコンポーネントから使う方法
176. 「State」と「Getters」と「Actions」
177. コンポーネント以外のところでStoreで定義したデータを使う方法
178. セクション14の小テスト
179. 世界中に自分のアプリを公開する方法
180. セクション15のイントロダクション
181. npm run buildでdistフォルダを作って公開する準備をする方法
182. これが静的ホスティングサービスだ！
183. Cloudflare Pagesを使ってVue.jsのアプリケーションを公開する方法
184. セクション15の小テスト
185. おわりに
186. このコースのまとめ
187. TypeScriptとVue.jsを一緒に使う方法(ボーナス)
188. セクション17のイントロダクション
189. こうしてTypeScriptをセットアップする
190. ref()とTypeScriptを一緒に使う方法
191. computed()とTypeScriptを一緒に使う方法
192. useTemplateRef()とTypeScriptを一緒に使う方法
193. イベントハンドラーとTypeScriptを一緒に使う方法
194. propsとTypeScriptを一緒に使う方法
195. defineModel()とTypeScriptを一緒に使う方法
196. emitとTypeScriptを一緒に使う方法
197. セクション17の小テスト
198. Options APIはこうなっている(ボーナス)
199. セクション18のイントロダクション
200. dataやmethodsを使ってOptions APIでデータを操作する方法

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

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::render)
19. 補足:Linkコンポーネントについて
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分析コードについて
123. RFM分析1 概要 RFMそれぞれの情報を取得
124. RFM分析2 RFMランクをつけてみる
125. RFM分析3 RとFの2次元でデータ取得
126. RFM分析 描画前の準備
127. RFMランク用のテーブルをView側に追加
128. RFMServiceを作成し非同期で受け取れるところまで対応
129. RFM分析結果を表で表示
130. デバッグ(Log), 外部結合, ranksテーブル・ダミー作成
131. 外部結合し0も表示できるように対応
132. 補足1 VS Code / Git, GitHub
133. Laravel第2弾・第3弾に含めていたものと同じ内容です。
134. VS Codeのインストール1
135. VS Codeインストール 2
136. VS Code 拡張機能
137. Gitのインストール(mac)
138. Gitのインストール(win)
139. GitHubの登録
140. Gitのconfig設定
141. SSHキーの設定 (mac)
142. SSHキーの設定 (win)
143. gitHubにpushしてみる(init, add, commit, push)
144. 初回の補足と2回目のpush
145. ブランチとプルリク
146. 講座コードのダウンロード&インストール方法
147. 補足2
148. XAMPPのインストール (Windows)
149. MAMPのインストール (Mac)
150. コマンドプロンプトの使い方 (Windows)
151. composer のインストール (mac)
152. Node.jsのインストール方法

顧客からのオーダー情報を登録・更新するWEBアプリケーションを作成します。

フロントにVUE、バックエンドにLaravelをInertiaで違和感なく開発する方法を学ぶことができます。

単純なCRUD（Create, Read, Update, Delete）を超えた機能を提供するアプリを提供します。

1. ユーザー体験の向上

単なるデータの追加や削除にとどまらず、ユーザーのニーズに応じた高度な操作が可能になります。例えば、検索機能やリアルタイムでのデータ更新により、ユーザーはより直感的に操作でき、スムーズな体験が提供されます。

2. 効率的なデータ管理

単純なCRUD操作ではデータの基本的な管理にとどまりますが、高度な機能により、データのフィルタリングや詳細情報の表示、インタラクティブな操作が可能になります。これにより、データの利用効率が大幅に向上します。

3. 柔軟な機能の提供

単なるデータの表示や変更だけでなく、検索やモーダルウィンドウなどの追加機能を組み込むことで、ユーザーの様々な要望に応えられる柔軟なシステムが構築できます。これにより、複雑な要件にも対応できます。

4. 直感的な操作性

ユーザーはページ遷移や複雑な操作なしで、必要な情報に迅速にアクセスできるため、操作が直感的で使いやすくなります。これにより、学習コストが低く、ユーザーの満足度が向上します。

8. ビジネスニーズへの適応

インボイスに対応した請求書を発行します。

カリキュラムの時間は合計二時間と短いように思えますが、土日の二日間でしっかりWEBアプリが作成できるようになります。

また、コードやコマンドは　各レクチャーのリソースにおいておりますので、どんどんコピーアンドペーストをしてください。

商品情報には、商品名だけではなく、価格、コード、税率が含まれます。

オーダー情報には、顧客、商品１～３が含まれます。

ピュアなLaravelでは困難な、ページ遷移なしで商品情報を出力したり、モーダルウインドウで検索して、検索結果から該当する商品を選択するとそれが反映されるなどVueJSらしい処理を加えています。

詳細画面では金額の計算や消費税の計算をコントローラーで行い、VUEファイルに渡します。通常税率、軽減税率の区分毎に集計しますので、インボイスにも対応します。

詳細画面から請求書としてPDFファイルを出力することができます。

請求書には、軽減税率対応品は※印が付きます。

Vue.jsを用いて表示・登録・編集・削除する基本的なCRUDアプリを構築できる。

選択ボックスで商品を選択すると、商品詳細情報（コード、価格、税率）をページ遷移無しにブラウザに表示する方法が分かる。

顧客や商品を文字列から検索する方法が学べる。

複数のテーブルをリレーションしたデータの出力・表示方法が分かる。

顧客選択ボックスに顧客テーブルをセレクトボックスに展開する方法が分かる。

登録時の誤入力を防止するバリデーションが学べる。

バリデーションを実現するためにLaravelのRequestの使い方が分かる。

一覧表示のページングが学べる。

Laravelのコントローラー側で検索する方法とVue側で検索する方が学べる。

Vue.jsとLaravelをInertia経由で操作する方法を学べる。

Laravel Breezeでアカウントの作成、ログイン認証機能を作れる。

consoleを有効に使ってLaravelのコントローラーから返却されるデータの確認ができる。

Vue.jsで取得したデータの表示方法、バリデーション、ページングへの活用方法が分かる。

Laravelでのテーブルの作成方法、ダミーデータの挿入方法が分かる。

Vue.jsでLaravelにアクセスして、登録・編集・削除処理ができるようになる。

1. 環境の設定
2. 環境構築Laravel、Breeze、vueのインストール
3. 商品CRUDの作成
4. 商品CRUDの完成形
5. 商品Productモデルの作成、ダミーデータの挿入
6. 商品Productsテーブルのレコードを一覧表示
7. 商品Productを新規登録するフォームを作成
8. 商品Productのバリデーションと登録の実行
9. 商品Productを更新するフォームを作成
10. 商品Productの更新の実行
11. 商品Productの削除
12. 商品名から検索する
13. 更新登録時にフラッシュメッセージを表示
14. ページング実装
15. ヘッダーに商品情報リンクを設置
16. 受注入力CRUDの作成
17. 顧客Customerモデル、オーダーOrderモデル、ダミーデータの挿入まで
18. Orderリソースの設定
19. コンソールでOrderResourceから情報を取得できるいるか確認
20. オーダーOrderリソースの情報をページングで一蘭表示
21. 会社名を検索できるようにする
22. オーダーOrderを新規登録するフォームを作成
23. 検索用モーダルウインドウを表示
24. モーダルウインドウで検索機能
25. オーダーOrderの３商品の登録の実行
26. オーダーOrderで１、２商品だけの登録を許可する
27. オーダーOrderコードの修正
28. オーダーOrderを更新するフォームを作成
29. Orderオーダー更新の実行
30. Order削除の実行
31. Orderオーダー詳細画面
32. Orderオーダー詳細画面に消費税額（通常税率・軽減税率）も表示
33. 請求書PDFファイルを生成する
34. 詳細画面からも元のページに戻る

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. コンポーネント間でのコミュニケーション
54. このセクションについて
55. 型・モデルの定義
56. Propsを渡す
57. イベントをEmitsする
58. 復習を兼ねてonDeleteを実装
59. 初めてのアプリケーション実践
60. イントロダクション
61. 全体の構成を作る
62. 動的なスタイリング
63. 確認アラートを出す
64. まとめ
65. コンポーネントをより深く理解する
66. Slotsとは
67. Fallback Contents
68. Named Slots
69. モーダルについて
70. モーダルを出す
71. Teleport
72. 状態管理
73. イントロダクション
74. Provide / Inject
75. Provide / Inject を深める
76. Injection Key
77. 実践　アプリケーション作成
78. フォームの作成
79. リストの作成
80. ステートの作成
81. モーダルの追加
82. モーダルを仕上げる
83. ステート管理を導入する
84. バリデーションを追加する
85. ツイートを削除する
86. ここから先は過去の収録です
87. ここから先は過去の収録です
88. アーカイブ　Slots
89. イントロダクション
90. Slots
91. 動的なコンポーネント
92. アーカイブ　動的なリスト
93. イントロダクション
94. 静的なリスト
95. 動的なリスト　要素の追加
96. 動的なリスト　要素の削除
97. v-if 条件付きレンダリング
98. まとめ
99. アーカイブ　コンポーネント同士のコミュニケーション
100. イントロダクション
101. Props 親から子へ
102. Emits 子から親へ
103. (optional) コールバック関数とEmit
104. アーカイブ　大規模アプリでのコンポーネント同士のコミュニケーション
105. イントロダクション
106. Provide / Inject
107. InjectionKey