レバテックフリーランスのサイトに当サイトが紹介されました!

【動画で学習】UdemyのVue.js 人気/おすすめ講座【セールでお得】

こちらでは、UdemyのVue.js講座を、おすすめ、セール情報とともに紹介していきまっす。

Udemy講座の特徴

udemy

具体的な講座を見る前に、Udemyについてざっと整理しておきましょう。

Udemyは動画ベースの学習サービス、以下のような特徴があります。

Udemyの特徴

  • 買い切り型で継続コストがない
  • その上、内容更新あり、質問可能
  • スマホ対応、流し聴き学習も可能
  • 30日間返金が可能
  • セールで頻繁に80%以上割引

なんといっても、買い切り型なので購入後は継続コスト等が一切不要なのが安心。

その上で、講座の内容がアップデートされたり、質問も可能なので、買い切りなのに利用できるサポートが手厚いです。

講座の内容も10時間以上に登るものも多く、1本で基礎から応用まで学習可能

ユーザー評価や、動画プレビューあり、さらには30日間の返金保証もあるので、まず失敗しない購入が可能

購入時に絶対に抑えておきたいのがセール。毎回80~90%OFFの割引されます。

基本月1回は必ずセールが開催されているので、そこで購入するようにしましょう。また、新規ユーザーは1本目は大概セール価格で購入可能です。

 

UdemyのVue.js講座 人気ランキング(セール情報付き)

以下がUdemyで学習できるVue.jsの最新の人気講座ランキング(日本語のもの)です。

セール価格情報も載せています。上述したとおりUdemyのセールは大きいので逃さずゲットしてください。

人気
Rank
学習コース評価
1
(4.5)
総評価数 3480件
2
超Vue.js 2 完全パック (Vue Router, Vuex含む)
発売日 2019/06/23
受講者 15,674人
通常 20,000円
現在 2,200円
(4)
総評価数 3769件
3
(4.3)
総評価数 336件
4
(4.4)
総評価数 699件
5
ざっくり学ぶ、モダンフロントエンド(ES6, TypeScript, Vue.js)...
発売日 2020/04/02
受講者 4,859人
通常 27,800円
現在 1,300円
(4.5)
総評価数 831件
6
【Nuxt3】3日でできるNuxt.js WEBアプリ開発入門(Vue.js・Vuetify・TypeScript)...
発売日 2023/05/19
受講者 47人
通常 7,600円
現在 1,300円
(3.1)
総評価数 10件
7
【Vue.js + firebase + Vuetify】Vue.js入門!超実践チャットルームアプリ開発...
発売日 2021/09/03
受講者 635人
通常 4,200円
現在 1,800円
(4.1)
総評価数 84件
8
ゼロから始めるVueJS
発売日 2022/09/09
受講者 249人
無料講座
(3.5)
総評価数 29件
9
Vue.js + Firebaseで作るシングルページアプリケーション
発売日 2019/02/21
受講者 4,141人
通常 11,800円
現在 11,800円
(4.1)
総評価数 834件
10
Vue.js + Vuex を使用したモダンフロントエンド開発
発売日 2018/05/13
受講者 91人
通常 10,000円
現在 10,000円
(4.2)
総評価数 28件
11
(2)
総評価数 1件
 

UdemyのVue.js 人気・おすすめの5講座

以下が今人気のおすすめの講座の詳細です。

Udemy講座では、1つのコースで基礎から応用まで幅広く学べるものが多く、コスパ高く学習可能。

自分にあったコースをセールでゲットして効率よく学習しましょう。

はじめてのVue.js 3 入門!jQuery を使わないウェブ開発 - 導入からアプリケーション開発まで体系的に学ぶ

はじめてのVue.js 3 入門!jQuery を使わないウェブ開発 - 導入からアプリケーション開発まで体系的に学ぶ
発売日 2018/05/19
(4.5)

5 total hours
Angular.js、React.jsに比べて学習コストが低い注目度抜群のJavaScriptフレームワーク Vue.js!高度化するWeb開発のフロントエンド開発の課題を解決。

このコースでは、人気急上昇中の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対応コンテンツを追加



↓全て表示↑少なく表示
 
Users Voice
初めてVue.jsを触る人間にはとても良い内容だと思いました。 ある程度の基礎知識が必要なのは動画内でも言っていたので、まっさらの人はまず知識をつけてからのほうがよいでしょう。(なくても受けれますが理解に時間がかかると思います。) 満点じゃないのには動画がたまに同じ内容をリピートしている箇所がある(編集ミス?)ので、「ん?」と思い集中が途切れてしまうことがあったのと、中盤から後半にかけて口調が速くなっているので開発慣れしていない人は動画止めながらになってしまうかなと思ったためです。(入門なので開発に慣れてる人向けではないという認識です。) (参考:Udemy)

↓全て表示 ↑少なく表示
Vue3.jsを使ったことがない状態で、クイックにVue3.jsで使用する技を学べたので、今後独学で学んでいけそうである。 (参考:Udemy)

↓全て表示 ↑少なく表示
 
レクチャー内容
  1. はじめに
    • コース紹介
  2. Vue.jsの基本的な使い方を学ぼう
    • イントロダクション - Vue.jsの基本的な使い方を学ぼう
    • 受講オリエンテーション(Udemyのご利用が初めての方向け)
    • 補足:Q&A対応に関するガイドライン
    • サンプルコードについて
    • CodePenの使い方を知ろう
    • アップデート情報:Vue.js CDN のURLについて
    • Vue.jsを読み込もう
    • Vueインスタンスを作成しよう
    • ルートのテンプレートを作成しよう
    • データバインディングとは
    • テキストのデータバインディングをしよう
    • dataオプションにオブジェクトや配列要素を設定しよう
    • エラーを自力で解決できるようになろう
    • ディレクティブとは
    • 属性のデータバインディングを使おう v-bind
    • 条件分岐 v-ifを使おう
    • 繰り返しの描画 v-forを使おう
    • オブジェクトの繰り返し描画をしよう v-for
    • イベント処理の基本を理解しよう v-on
    • 双方向データバインディングを使おう v-model
    • コンポーネントを利用しよう
    • コンテンツリクエスト募集中!
  3. Visual Studio Codeを導入しよう
    • イントロダクション - Visual Studio Codeを導入しよう
    • Visual Studio Codeをインストールしよう
    • 拡張機能をインストールしよう
    • Hello Worldプログラムを書いてみよう
    • 実行方法に関する補足
  4. 実践演習:タスク管理アプリの開発をしよう
    • イントロダクション
    • 再掲:サンプルコードについて
    • ファイルの準備をしよう
    • 主要な要素を配置しよう
    • 追加ボタンのイベントハンドリングをしよう
    • データバインディングをしよう
    • 訂正情報
    • タスクを追加しよう
    • タスク追加後の文字列をクリアしよう
    • 未入力なら追加しない処理を実装しよう
    • リスト表示をしよう
    • タスクの完了/未完了の管理をしよう
    • スタイルを設定しよう
    • タスクの削除をしよう
    • 全体的な動作確認をしよう
  5. テンプレート構文を使えるようになろう
    • イントロダクション
    • 様々なテンプレート制御ディレクティブを使おう
    • v-once ディレクティブを使おう
    • v-pre ディレクティブを使おう
    • v-htmlディレクティブを使おう
    • v-cloakディレクティブを使おう
    • 補足:v-textディレクティブを使おう
    • v-textディレクティブを使おう
    • JavaScript 式を使おう
    • v-bindの省略記法も使えるようになろう
  6. 算出プロパティを使えるようになろう
    • イントロダクション
    • 算出プロパティの基本を知ろう
    • 算出プロパティとメソッドの比較をしよう
    • 補足:算出プロパティのgetterとsetterを使おう
    • 算出プロパティのgetterとsetterを使おう
    • 算出プロパティのキャッシュ 動作を確認しよう
  7. 監視プロパティ(ウォッチャ)を使えるようになろう
    • イントロダクション
    • 監視プロパティの基本を知ろう
    • 例題:単位変換アプリを作ろう
    • 算出プロパティと監視プロパティの比較をしよう
    • オプション deepを使おう
  8. 実践演習:APIを用いたリアルタイムサーチ - 監視プロパティの理解を深めよう
    • イントロダクション
    • 再掲:サンプルコードについて
    • ☆☆☆重要☆☆☆利用するAPIについて知ろう
    • 開発の準備 をしよう
    • 空のオプションを用意しよう
    • dataオプションを実装しよう
    • APIからデータを取得しよう
    • テンプレート側の実装をしよう
    • フォームの監視をしよう
    • 動作確認をしよう
  9. クラスとスタイルのバインディングを使おう
    • イントロダクション
    • クラスのデータバインディングの基本を知ろう
    • 複数のクラスを動的に切り替えよう
    • プレーンなクラス属性と共存させよう
    • 配列構文によるクラスのデータバインディングをしよう
    • オブジェクトデータを利用しよう
    • クラスの条件に三項演算子を使おう
    • インラインスタイルのデータバインディングを使おう
    • インラインスタイルのデータバインディングにオブジェクトデータを使おう
  10. 条件付きレンダリングを使おう
    • イントロダクション
    • v-ifとv-elseを使おう
    • v-else-ifを使おう
    • v-showを使おう
    • v-if とv-showの違いを知ろう
  11. イベントハンドリングを使おう
    • イントロダクション
    • インラインメソッドハンドラを使おう
    • メソッドイベントハンドラを使おう
    • イベントオブジェクトを参照しよう
    • イベントハンドラに引数を渡そう
    • $event を使おう
    • イベント修飾子の概要を知ろう
    • イベント修飾子の利用例を知ろう .once
    • v-on 省略記法を使おう
  12. フォーム入力バインディングを使おう
    • イントロダクション - フォーム入力バインディング
    • フォーム入力バインディングの基本
    • v-model利用時は、属性は無視される。
    • 複数行テキストについて
    • チェックボックス について
    • チェックボックス 単体
    • チェックボックス 複数
    • 訂正情報:「ラジオボタンについて」
    • ラジオボタンについて
    • セレクトボックス 単体の選択
    • セレクトボックス 複数の選択
    • v-model 修飾子の種類
    • 修飾子 .lazy
    • 修飾子 .trim
    • 修飾子 .number
  13. コンポーネントを使おう
    • イントロダクション - コンポーネントを使おう
    • コンポーネントの定義 グローバル
    • コンポーネントの定義 ローカル
    • コンポーネント名について
    • コンポーネントで動的な処理を行う
  14. トランジションの基本
    • トランジションの基本を知ろう
  15. クロージング
    • クロージング
    • 謝辞
  16. ボーナスレクチャー
    • ボーナスレクチャー
   

超Vue.js 2 完全パック (Vue Router, Vuex含む)

超Vue.js 2 完全パック (Vue Router, Vuex含む)
発売日 2019/06/23
(4)

17.5 total hours
Vue.jsを、基礎から、Vue CLI、Vue Router、Vuexを使った実践的な内容まで網羅的に学びますので、ぜひこの講座で学んでみてください。ReactやAngularエンジニアの方もぜひ!

エンジニアのみなさん!

このコースを修了する頃には、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では30日間の全額返金保証を行なっております。講座の内容には自信がありますが、もし万が一講座に満足いただけなかったとしても心配ありませんので、ご安心ください。

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

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

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

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

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

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

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

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


この講座の内容リスト

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

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

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

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

  • コンポーネントの知識

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

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

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

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

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

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

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

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

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


↓全て表示↑少なく表示
 
Users Voice
受講者がコーディングしながら聞いている事を想定して、少し間を設けて説明があると良いと思います。 動画を止める隙もないほど速いタイミングでファイルを切り替えられたりするところが多々あり、戻って再度再生させたりで進めるのが大変でした。 (参考:Udemy)

↓全て表示 ↑少なく表示
解説している内容は非常に質が良く、良いことが学べた。しかし、作者の喋る速さが早すぎてもはや何を言っているのか聞き取れないことがたびたびあった。たまに大事なとこでどもってしまっているので、次回以降は改善していただけると助かります。 (参考:Udemy)

↓全て表示 ↑少なく表示
 
レクチャー内容
  1. はじめに
    • コースの紹介
    • Vue.jsでHello World !を表示させてみる
    • ボタンを押したら文字が反転する処理をVue.jsで行ってみる
    • このコースの流れ
    • 再生速度の変更とQ&Aの使い方について
    • ローカル環境でVue.jsを動かす方法
  2. これがVue.jsの基礎、テンプレート構文だ
    • イントロダクション-セクション2
    • テンプレート構文とは何か
    • 二重中括弧を使ってデータを描画する
    • thisを理解して、methodから自分のdataにアクセスする
    • v-から始まる特別な属性であるディレクティブを理解する
    • 一度だけ描画するv-onceディレクティブを理解する
    • v-htmlを使って、データをHTMLとして出力する(XSS脆弱性に注意)
    • v-bindを使用して、属性の値をデータに対応づける
    • v-bindの応用的な使い方を学ぶ
    • v-onを用いて、クリックなどのイベント発生時に特定の処理をする
    • v-onの引数となるDOMイベント一覧
    • v-on使用時に、イベントオブジェクトを使ってイベントの情報を取得する
    • v-onに指定しているメソッドに引数を持たせる
    • .stopと.preventという2つの例を見ながら、頻繁に行われる処理を簡略化した、イベント修飾子を理解する
    • キー修飾子を使って、特定のキーボードを押した時にイベントを発火するようにする
    • v-onディレクティブの引数を[ ]を使って動的に表現する
    • @マークを使ってv-onを省略記法で書く
    • v-modelを使用して、双方向バインディングを作成する
    • computedプロパティを使って、動的なデータを表現する
    • computedとmethodの違いを理解し、算出プロパティのリアクティブな依存関係にもとづきキャッシュされるという性質を理解する
    • ウォッチャを使って、データが変わった時に特定の処理をする
    • 丸カッコ( )は、二重中括弧とv-onディレクティブにおいて、いつ必要なのか
    • クラスをデータにバインディング(紐付け)する方法その1。オブジェクトを渡し、真偽値を使って動的に適応させるクラスを切り替える
    • クラスをデータにバインディングする方法その2。配列を使って、適応させたいクラスを並べる
    • スタイル属性を、オブジェクトを用いて動的にバインディングする
    • スタイルオブジェクトをデータに書いて、コードを見やすくする
    • 複数のスタイルオブジェクトを配列構文を用いて適応させる
    • まとめ
  3. 「条件付きレンダリング」と「リストレンダリング」
    • イントロダクション-セクション3
    • v-ifディレクティブを使って、条件に応じて描画する処理を書く
    • v-elseを使って、v-ifがfalseの場合の処理を書く
    • v-else-ifを使って、複雑な条件式を作る
    • templateタグを使用して、不必要な要素を加えずにv-ifを複数の要素に適応させる
    • v-showを使って、頻繁に何かを切り替える処理のパフォーマンスを高める
    • v-forディレクティブを使用して、配列に基づいてリストを描画する
    • 2つ目の引数に配列のインデックスを取ってv-forを使用する
    • オブジェクトに対してv-forディレクティブを使用する
    • オブジェクトのv-forには、第2引数と第3引数にキーとインデックスを取る
    • templateタグを使用して、不必要な要素を加えずにv-forを複数の要素に適応させる
    • n in 10 のように、整数値に対してv-forを適用する
    • inの代わりにofを使用してJavaScriptのイテレータ構文に近い書き方をする
    • key属性をつける必要性を学び、予期せぬバグを起こさないv-forを作る
    • まとめ
  4. Vueインスタンスとその内部構造はこうなっている
    • イントロダクション-セクション4
    • Vue インスタンスは複数作ることができる
    • 外側からVue インスタンスにアクセスする方法
    • リアクティブシステム(getter、setter、Watcher)がどのように動いているかを確認し、プロパティを後から追加できないことを理解する
    • Vueインスタンスプロパティの$dataの紹介
    • 内側からVueインスタンスのプロパティやメソッドにアクセスする
    • VueのAPI一覧はここに載っています。
    • $mountメソッドを使用して、elプロパティの代わりにする
    • templateプロパティを使って、文字列のみでテンプレートを書く
    • render(描画)関数を使用して、仮想ノードを作ってDOMの描画を行う
    • 仮想DOMと、その必要性を理解する
    • 仮想DOMを図で理解する
    • Vue インスタンスライフサイクルの全体像を見て、Vueがどのように動いているかを理解する
    • ライフサイクルフックのタイミングを実際にコードで確かめる
    • コンポーネントを使用して、同じようなインスタンスを使い回す
    • まとめ
  5. Vue CLIを使った実践的な開発をはじめる方法
    • イントロダクション-セクション5
    • なぜVue CLIを使う必要があるのか
    • Vue CLIのインストールと初期設定を行う
    • インストール時の補足
    • Vue CLIが作成したそれぞれのファイルの説明
    • .vueファイル(単一ファイルコンポーネント)とmain.jsの解説
    • デプロイ時の本番環境のためのbuildをしてみる
    • まとめ
  6. ゼロから始めるコンポーネント
    • イントロダクション-セクション6
    • コンポーネントを使用して、再利用可能なVueインスタンスを作る
    • dataはなぜコンポーネントにおいて関数である必要があるのか
    • コンポーネントにおける、ローカル登録とグローバル登録の違いを理解する
    • 「 import App from ‘./App.vue'」の意味を理解する
    • 単一ファイルコンポーネント(.vueファイル)の基礎的な使い方
    • 実際に単一ファイルコンポーネントを作成してグローバル登録する
    • templateはルート要素を1つにしなければならないことに注意する
    • シングルファイルコンポーネントをローカル登録する
    • componentsフォルダを作成して、綺麗なフォルダ構造を作る
    • コンポーネントの名前はケバブケースかパスカルケースにする
    • スコープ付きCSSと、Vue.jsがそれをどのように実装しているのかを理解する
    • まとめ
  7. コンポーネント間でデータを受け渡す方法
    • イントロダクション-セクション7
    • 親子間のデータの受け渡しの必要性を理解する
    • propsを使用して、親から子にデータを渡す
    • propsの名前はJavaScriptではキャメルケース、HTML内ではケバブケースにすることをお勧めします
    • コンポーネント内でpropsを扱う時はdataのように使用する
    • バリデーションを使用して、プロパティに意図しない値が渡されるのを防ぐ
    • 複数のpropsをつける方法
    • $emitメソッドを使って、子から親にデータを渡す
    • なぜ$emitはpropsと違ってこんなに複雑なのか
    • propsで配列とオブジェクトを渡す時は、参照渡しになるので注意する
    • $emitで作るカスタムイベント名はケバブケース(kebab-case)にする
    • まとめ
  8. コンポーネントの高度な機能はこう書く
    • イントロダクション-セクション8
    • htmlのコードを子コンポーネントに渡すとき、propsでは限界がある
    • slotを使うことで、子コンポーネントにhtmlのコードを渡すことができる
    • slotは親と子のどちらのスコープにアクセスできるのか
    • <slot></slot>の中にフォールバックコンテンツを入れると、デフォルトのコンテンツになる
    • 【名前付きスロット】v-slotを使用すれば、複数のslotを使用して複雑なデータを渡すことができる
    • デフォルトのスロットを名前付きスロットの中に置く
    • v-slot使用時にtemplate以外を使用するとエラーが出る
    • 「スロットプロパティ」を使って、子コンポーネントのデータにアクセスする
    • スロットプロパティにおける、デフォルトスロットしかない場合の省略記法
    • デフォルトスロットに対する省略記法は、名前つきスロットと混在させることができない点に注意する
    • 動的なスロット名
    • 名前つきスロットは#に置き換えることができる
    • スロットのまとめ
    • 動的に複数のコンポーネントを切り替えるために、componentタグと、is属性を使用する
    • ESLintのエラーに関する補足
    • 動的コンポーネントは切り替えるごとにdestroyedされる挙動となることを理解する
    • keep-aliveを使って動的コンポーネントの状態を保持する
    • ライフサイクルフックのactivatedとdeactivatedを使用する
    • まとめ
  9. こうすればVue.jsでフォームが簡単に作れる
    • イントロダクション-セクション9
    • v-modelを使用して、input要素に双方向データバインディングを作成する
    • .lazy修飾子でchangeイベント後にデータと入力を同期する
    • .number修飾子でユーザの入力を数値として自動的に型変換する
    • .trim修飾子を使用して、ユーザの入力から空白を自動的に取り除く
    • textareaにv-modelを使用して複数行テキストに双方向データバインディングを作成する
    • 単体のチェックボックスに双方向データバインディングを作成する
    • 複数のチェックボックスに双方向データバインディングを作成する
    • ラジオボタンに双方向データバインディングを作成する
    • セレクトボックスに双方向データバインディングを作成する
    • v-modelの中身がどうなっているのかを理解する
    • コンポーネントでv-modelを使う方法
    • まとめ
  10. カスタムディレクティブで自由にディレクティブを作る方法
    • イントロダクション-セクション10
    • カスタムディレクティブを使ってコードを抽象化、そして再利用する
    • グローバルにカスタムディレクティブを登録する
    • ディレクティブはどのように動くのか。フック関数を理解する
    • 関数による省略記法を使って、bindとupdateを1つのコードにする
    • elを使ってDOMを直接操作し、シンプルなカスタムディレクティブを作成する
    • カスタムディレクティブに、binding.valueを使ってデータを渡す
    • 複数の値を必要とするカスタムディレクティブにはオブジェクトを渡す
    • 引数をカスタムディレクティブに渡す方法
    • 修飾子をカスタムディレクティブに対して使えるようにする
    • directivesオプションを使って、ローカルにカスタムディレクティブを登録する
    • カスタムディレクティブではthisは使えないことに注意する
    • まとめ
  11. 「フィルター」と「ミックスイン」
    • イントロダクション-セクション11
    • フィルターを使用して、一般的なテキストフォーマットを作成する
    • コンポーネントのオプション内でローカルフィルタを定義する
    • 複数のフィルタ関数を連結させる
    • フィルターでthisが使えないことに注意する
    • computedとフィルターのキャッシュに対する違いを理解する
    • 共有できるコードを全てミックスインにする
    • 実際にミックスインを作って、オプションをコンポーネント間で共有する
    • オプションが被ったときに、どのようにミックスインがマージされるのか
    • グローバルミックスインを作成する
    • まとめ
  12. 「トランジション」と「アニメーション」
    • イントロダクション-セクション12
    • なぜVue.jsがトランジション効果を適用するための方法を提供しているかを考える
    • Vue.jsが提供するトランジション効果を適用する3つのパターン
    • 6つのトランジションクラスとtransitionコンポーネントを用意する
    • transitionコンポーネントにおける、6つのトランジションクラスの使い方を理解する
    • fadeするトランジション効果をCSSトランジションを使って実際に作成する
    • トランジションクラスがどのタイミングで追加/削除されているかを確認する
    • CSSアニメーションを使ってslideするトランジション効果を実際に作成する
    • transitionは単一の要素だけでしか利用できないことを確認する
    • CSSトランジションとCSSアニメーションを両方使用する時はtype属性をつける
    • apper属性を使って、最初の描画時にトランジションを適用する
    • カスタムトランジションクラスを使用して、Animate.cssを使う
    • 補足 Animate.cssのアップデートによる変更
    • name属性を動的に変更して、動的トランジションを作る
    • 複数の要素を切り替えるトランジションについて学ぶ
    • mode属性を使って、要素間のトランジションのタイミングをずらす
    • 動的コンポーネントに対してトランジションを使用する
    • JavaScriptを使ってアニメーションを作る
    • 8つのJavaScriptフックとその引数を理解する
    • トランジションクラスとJavaScriptフックが適応されるタイミングを知る
    • css属性にfalseを指定して、安全にJavaScriptのみのアニメーションを作る
    • 実際にJavaScriptフックを使用してアニメーションを作成する
    • transition-groupを使ってリストトランジションを作る
    • 5つのtransition-groupとtransitionで異なる重要な特徴
    • 7つ目のトランジションクラスであるv-moveクラスを使用する
    • トランジションの再利用する時はコンポーネントにする
    • まとめ
  13. Vue Routerでルーティングできる仕組み
    • イントロダクション-セクション13
    • Vue Routerをインストールする際の補足
    • VueRouterとは何をするものなのか。実際にURLによって表示する内容を変える
    • シングルページアプリケーションとは何かを理解する
    • hashモードからhistoryモードに切り替えてURLを美しくする
   

【Laravel】【Vue.js3】で【CRM(顧客管理システム)】をつくってみよう【Breeze(Inertia)】

【Laravel】【Vue.js3】で【CRM(顧客管理システム)】をつくってみよう【Breeze(Inertia)】
発売日 2022/05/31
(4.3)

14.5 total hours
受講者向けアンケートでご要望の多かった顧客管理システムを、Vue.js3 (CompositionAPI)の機能をたっぷり使いながら実装しています。フロントエンド・バックエンド幅広い知識をまとめて習得できる講座になっています。

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



↓全て表示↑少なく表示
 
Users Voice
全体的にとてもよい講座で、青木先生の講座は最後に実用でも使えるアプリが出来上がるのがとてもよいと思います。 このアプリをもとにして、自分であれこれといじると、laravelとvueの連携したアプリが作れると思います。 laravelもvueも事前にある程度の知識が必要なので、先生のlaravelの講座(個人的にはマルチログインの講座がおすすめです)や、vueの講座を受講してから、当該の講座を受講するとよいと思います。とくに、vue側の操作はまったくの初見ですと途中で挫折しそうかなと思います。 とても良かったのですが、最後の方はコピペが多くなってしまったのが残念です。コピペして当たり前ながらに動くのを眺めるだけになってしまったのが残念なのですが、手打ちしてもしんどい部分なので、仕方ないのかもしれません。 RFM分析は、途中のコードではまともに動きません。それもapiに移してからエラーが出ることが多く、apiではddが効かない(ddを入れるだけで500エラーになる)という知識がないと、詰まってしまいます。ここは分析部分が長く飽きるところでもあるので、エラーが解決できないまま、やめてしまう人が出そうです。Q&Aに先の動画を見るように指摘がありますが、動画の途中に入れるか、最初にその旨を促す指示を入れた方がいいと思いました。 (参考:Udemy)

↓全て表示 ↑少なく表示
難しそうに見えますが、アオキさんの初級の講座を受けていたら問題なく対応できそうな内容かなと思います。真面目にやれば、ここまでできるの!?と思うくらい、驚くほど上達します。助かりました。 (参考:Udemy)

↓全て表示 ↑少なく表示
 
レクチャー内容
  1. 紹介、環境構築
    • コース紹介
    • 講座の進め方、資料の場所など
    • 講座で扱っている資料・コード一覧
    • アンケートにご協力ありがとうございました。
    • 追記: windowsでのインストールコマンド
    • Laravel インストール
    • DB設定、マイグレート
    • Git/GitHubの設定
    • 初期設定 (タイムゾーン、言語、デバッグバー)
    • 初期設定: 言語ファイルの設定
  2. Inertia、Vue3、script setup (compositionAPI)
    • Laravel Breeze (Inertia)のインストール
    • 追加: Inertia v1.0 に伴うpackage.jsonへの追加依頼 サイトURL変更について
    • 簡易サーバー動作確認 (npm run dev など)
    • ChromeやVSCodeの拡張機能・プラグイン
    • 補足:コンポーネント名の変更
    • 生成されたファイルの確認 ( Inertia::render)
    • 補足:Linkコンポーネントについて
    • aタグとLinkコンポーネントの違い
    • Link 名前付きルート
    • Link ルートパラメータ
    • Linkコンポーネントでstore保存 その1
    • Linkコンポーネントでstore保存 その2
    • Vue.js3の概要
    • フォーム (create) その1
    • フォーム (create) その2
    • バリデーション
    • CSRF対策( 実施済み)
    • フラッシュメッセージ
    • Indexにv-forを追加してみる
    • イベントコールバック ( onBefore) その1
    • イベントコールバック ( onBefore) その2
    • スロット・名前付きスロット
    • 他のコンポーネントを使ってみる
    • defineEmits
    • git push
  3. CRM 商品関連
    • CRMの概要
    • 設計資料の紹介
    • アプリ名、ロゴ設定
    • Items 下準備1: マイグレーション
    • Item 下準備2: モデル・ルーティング
    • Item 下準備3 ユーザーシーダー、ログイン後のロゴ調整
    • ItemSeeder、ナビメニュー
    • Items (商品・サービス) index
    • Item indexの調整・補足
    • Items createへのリンク
    • Items create
    • Items store
    • 追加:ValidationErrorsコンポーネントがなくなった件の対策
    • 【old】Items バリデーション
    • Items フラッシュメッセージ
    • Item Show 商品詳細
    • JSで bl2br 改行対応
    • Item Edit 商品編集その1
    • Item Edit 商品編集その2
    • Item Update 更新対応
    • Item Delete 削除処理
  4. CRM 顧客情報・利用登録
    • Customers 1000件ダミー登録
    • Customers ダミーデータ修正
    • Customers index 顧客一覧
    • Customer ページネーション 確認
    • ページネーション コンポーネントの作成
    • ページネーションをIndexに組み込む
    • Customer 検索機能 (Laravel側)
    • Customer 検索機能 (Vue.js側)
    • Customer 新規登録
    • Customer 保存処理
    • 郵便番号から住所取得
  5. CRM 購入画面
    • Purchase モデル・マイグレーション・リレーション・ダミー
    • ItemPurchase マイグレーション・リレーション
    • 中間テーブルのダミーデータ作成
    • 購入画面の準備
    • 購入日の日付を取得 (JS Dateオブジェクト)
    • 顧客情報をv-forで表示
    • 商品情報をv-forで表示
    • 合計金額をcomputedで計算
    • 保存処理その1 POST通信
    • 保存処理その2 DBに保存
    • 保存処理その3 トランザクション追加
    • Purchase/Create.vueのレイアウト調整
    • micromodal.js
    • API通信の設定確認 (Sanctum, axios)
    • async-await も使って 顧客情報取得
    • 顧客情報をモーダルウィンドウに組み込む
    • defineEmitで子 -> 親 に情報をアップロード
  6. CRM 購買履歴画面
    • ダミーデータ 3万件投入
    • joinで4つのテーブルを紐づけて合計金額を表示 (mysql版)
    • グローバルスコープ
    • 購買履歴の一覧画面 (index)
    • 購入日の表示変更 (dayjs)
    • 購買履歴の詳細画面 (show) (小計・合計)
    • 詳細画面 (ビュー側調整)
    • 購買履歴の編集画面 (edit)の準備
    • 購買履歴の編集用コード(Laravel側)
    • 購買履歴の編集画面 (Vue側)
    • 購入履歴の更新その1
    • 購入履歴の更新その2 (sync)
  7. データ分析
    • Analysisページ追加
    • 期間を指定する
    • Analysis.vueにフォームを追加
    • Api通信(Ajax通信)の通信確認
    • 日別売上のクエリ作成・取得確認
    • 期間指定のクエリ修正 (Carbon
    • 日別売上のテーブル表示
    • vue-charts-3 インストール
    • 日別売上のグラフ表示
    • サービスへの切り離し
    • 月別・年別分析の追加
    • 補足: デシル分析 customer_nameでエラーがでたら
    • デシル分析1 会員毎にまとめて金額順にソートする
    • デシル分析2 連番を振り必要な変数を設定
    • デシル分析3 case文で10のグループに分ける準備
    • デシル分析4 平均、合計、構成比を算出する
    • ResultTableコンポーネントに分離する
    • API通信でデシル分析結果を取得
    • 追記: RFM分析コードについて
    • RFM分析1 概要 RFMそれぞれの情報を取得
    • RFM分析2 RFMランクをつけてみる
    • RFM分析3 RとFの2次元でデータ取得
    • RFM分析 描画前の準備
    • RFMランク用のテーブルをView側に追加
    • RFMServiceを作成し非同期で受け取れるところまで対応
    • RFM分析結果を表で表示
    • デバッグ(Log), 外部結合, ranksテーブル・ダミー作成
    • 外部結合し0も表示できるように対応
  8. 補足1 VS Code / Git, GitHub
    • Laravel第2弾・第3弾に含めていたものと同じ内容です。
    • VS Codeのインストール1
    • VS Codeインストール 2
    • VS Code 拡張機能
    • Gitのインストール(mac)
    • Gitのインストール(win)
    • GitHubの登録
    • Gitのconfig設定
    • SSHキーの設定 (mac)
    • SSHキーの設定 (win)
    • gitHubにpushしてみる(init, add, commit, push)
    • 初回の補足と2回目のpush
    • ブランチとプルリク
    • 講座コードのダウンロード&インストール方法
  9. 補足2
    • XAMPPのインストール (Windows)
    • MAMPのインストール (Mac)
    • コマンドプロンプトの使い方 (Windows)
    • composer のインストール (mac)
    • Node.jsのインストール方法
 
Preview Video
   

【Vue.js2&Vue.js3対応】基礎から【Vuetify】を使った応用まで! 超初心者から最短距離でレベルアップ

【Vue.js2&Vue.js3対応】基礎から【Vuetify】を使った応用まで! 超初心者から最短距離でレベルアップ
発売日 2020/08/12
(4.4)

16 total hours
サンプル豊富で実践で使える知識をたっぷり身につけていきます。Vue.js2 初歩の初歩からVueRouter, Vuexまで。Vuetifyを使ってデザインも意識したアプリサンプルあり。Vue.js3のCompositionAPIも追加!



『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



↓全て表示↑少なく表示
 
Users Voice
説明が簡潔で分かりやすい。が、初心者の私にとっては、初見のワードで説明が欲しい時もある。 (参考:Udemy)

↓全て表示 ↑少なく表示
細かい。時間をかけた際に細かい部分まで手が届く講座に見えました。 (参考:Udemy)

↓全て表示 ↑少なく表示
 
レクチャー内容
  1. Vue.jsの基本
    • 講座の紹介
    • Udemyで受講する簡単な説明
    • 講座で扱っている資料・サンプルコード
    • Vue.jsの概要
    • Vue2 インストール
    • API elとdata
    • 仮想DOM
    • Vue.js DevTools
    • タグに属性をつける(直接DOM操作の場合)
    • v-bind と :
    • v-bind その2 オブジェクト
    • v-bind その3 style/class
    • ディレクティブ v-show
    • v-if v-else v-else-if
    • v-for その1
    • v-for その2
    • v-text と v-html
    • v-cloak
    • v-on と @
    • v-on その2 イベントオブジェクト 修飾子
    • v-on その3 preventDefault
    • computed
    • thisとアロー関数
    • watch
    • リアクティブシステム
    • ライフサイクルフック created とmounted
  2. トランジションなど
    • CSS Sass/Scss BEM (JS講座と同じ)
    • サンプル1: タブメニュー
    • transition トランジション
    • サンプル2: モーダルウィンドウ
    • transition-group トランジション複数
    • Array.splice
    • サンプル3: カルーセル
    • カスタムクラスのトランジション(animate.css)
  3. フォームと非同期通信(Ajax)
    • フォーム HTMLのおさらい(JS講座と同じ)
    • 双方向データバインディング(v-bindとv-on)
    • v-model
    • v-model 修飾子
    • @submitとmethods
    • computed(get/set)
    • フォームバリデーションの補足
    • サンプル4: Todoリスト(フィルターつき)
    • web通信のおさらい
    • 簡易サーバーとNetwork
    • Promise/async/await/fetch
    • 表示時・クリック時のAjax
    • lodashのdebounce/throttle
    • watch + Ajax
  4. コンポーネント
    • コンポーネントについて
    • グローバルコンポーネント
    • ローカルコンポーネント
    • props サンプル UIフレームワーク
    • props 直接書いてみる
    • propsとv-bind
    • propsで配列を渡す
    • propsの補足
    • $emit カスタムイベント
    • コンポーネント間のフォーム
    • 追加:子側でv-modelを使うパターン
    • イベントバス
    • Atomic Design
    • slot
    • 名前付きslot
    • スコープ付きslot
  5. Vuetify (CDN)
    • 【追加】URLが v2.vuetify.js/ja に変更
    • クイックスタート
    • レイアウト周り Grid/Flex
    • スタイル Spacingなど
    • UIコンポーネント を使ってみる
    • スロット(activator, item)
    • サンプルを読む テーブルCRUD
    • サンプル5: DogApi
    • Vuetifyの補足 (カスタムディレクティブなど)
  6. SFC (SingleFileComponent)
    • VueCLIの前に
    • VueCLIのインストール方法
    • Vuterのインストール・設定
    • ファイル・フォルダの構成
    • 補足: コンポーネント名について
    • import/export
    • render と $mount
    • SFC (SingleFileComponent)
    • Scoped CSS
    • publicPath (vue.config.js)
    • 補足1 SCSS (グローバル設定含む)
    • 追記:SCSSの補足
    • 補足2 マルチページモード
  7. VueRouter SPA
    • Vue Routerを使ってみる (CDN)
    • Vue Routerインストール (npm)
    • ファイル・フォルダの構成
    • router-linkのprops
    • $router と $route
    • 動的パラメータ+props その1
    • 動的パラメータ+props その2
    • 動的パラメータ+props 補足
    • 動的パラメータの補足 watch
    • リダイレクトと404ページ
    • ネストされたルート
    • 名前付きrouter-view
    • トランジションを含めたルート
    • ナビゲーションガード
    • historyモードの補足
  8. サンプル6 SPA + GoogleBookAPI
    • サンプルアプリの全体像
    • Google Books APIの説明
    • Google Books API
    • LocalStorageの解説
    • Local Storage
    • Vuetifyのインストール(vue add)
    • ファイル・フォルダ整理
    • 検索画面 fetch, v-card
    • App.vueからlocalStorageへ保存
    • search->editへの移動と表示
    • beforeRouteEnter + $nextTick
    • BookEdit カレンダーなど
    • BookEdit->BookIndex
    • 一覧画面(BookIndex)
    • BookEdit dateの修正
    • LocalStorage一括削除
    • サンプルアプリの補足
  9. Vuex
    • Vuexとは
    • Vuexのインストール
    • Vuex stateとmutations
    • mutations補足 payload
    • actions->mutations->state
    • getters
    • スプレッド構文
    • mapヘルパー(mapActions)
    • モジュール分割と名前空間(namespace)
    • Vuexの使い所(モジュール結合度・Container/Presentational)
  10. Vue.js3対応
    • Vue.js3の特徴
    • Vue.js3のインストール(CDN)
    • Vue.js devTools (ver6.x)
    • Vue.js2と同じコードの確認 OptionsAPI
    • Vue.js3のインストール(NPM)
    • エントリーポイントの確認
    • Provide/Inject 長距離Props
    • Teleport
    • 追記: Composition API script setupについて
    • CompositionAPI・setup()の実行タイミング
    • setup()でthisが使えない件
    • setup()の戻り値
    • ref()
    • reactive()
    • toRefs()
    • メソッド
    • computed()
    • watch()
    • watchEffect()
    • ライフサイクルフック
    • setup(props)
    • emit (context.emit)
    • Composition Function(合成関数)の概要
    • 合成関数(script内)
    • 合成関数(モジュール化)
    • setup内でvue-router
    • setup内でナビゲーションガード
    • setup内でvuex その1
    • setup内でvuex その2
  11. script setup
    • script setupの概要
    • script setupを実際に試してみる
    • props down を試してみる
    • event upを試してみる
  12. 補足
    • Node.jsのインストール方法
    • コマンドプロンプト(win)の使い方
    • fontAwesomeの登録設定方法
    • VSCodeインストール方法 その1
    • VSCodeインストール方法 その2
    • 講座内のサンプルコードについて
 
Preview Video
   

ざっくり学ぶ、モダンフロントエンド(ES6, TypeScript, Vue.js)

ざっくり学ぶ、モダンフロントエンド(ES6, TypeScript, Vue.js)
発売日 2020/04/02
(4.5)

13 total hours
フロントエンド開発に欠かせない JavaScriptをキホンから。TypeScriptや Vue.jsもこれ一本で学習して頂けます。

JavaScriptは、ウェブ制作に欠かせないプログラミング言語です。簡単な演出から、近年ではSPA(Single Page Application)の開発などに幅広く活用されています。

JavaScriptの進化は非常に早く、新しい言語仕様やライブラリー・フレームワークが次々に登場していて体系的な学習が難しくなってきています。

この講座では、そんな JavaScriptの新しい仕様(ES6以降)の知識と、近年非常に人気のある「TypeScript」、そして「Vue.js」を一気に学ぶことができるフロントエンド技術の入門講座となっています。

最初は、JavaScriptのキホンのキホンからスタートして、最終的には本格的なフレームワークである「Vue CLI」を用いたアプリケーション開発まで体験していきます。是非ゆっくりと自分のペースで学んでいって頂ければ幸いです。


↓全て表示↑少なく表示
 
Users Voice
聞き取りやすく、解説も丁寧でとても分かりやすいです。HTMLやその他の講座も良かったです。 (参考:Udemy)

↓全て表示 ↑少なく表示
丁寧にわかりやすく進みます。ざっくりと学びたかったのでよかった。 (参考:Udemy)

↓全て表示 ↑少なく表示
 
レクチャー内容
  1. はじめに
    • はじめに
    • Udemyでの講座の進め方
    • 開発環境を整えよう(Windows編)
    • 開発環境を整えよう(macOS編)
  2. JavaScript(EcmaScript 2015/ES6)入門
    • JavaScriptを体験しよう
    • EcmaScript(エクマスクリプト)とは
    • 素材ファイルをダウンロードしよう
    • 画面に文章を表示する - document.write
    • エラーが発生した時の対処法 - Chromeデベロッパーツール
    • JavaScriptを書く時の細かな注意点
    • 警告ウィンドウを表示しよう - window.alert
    • コメントを書こう
    • 計算をしよう - 算術演算子
    • ユーザーに質問しよう - window.prompt
    • 今日の日付を表示しよう - Date
    • 日付をテンプレート文字列を使って表示しよう
    • 画面をその場で変更しよう - innerHTML
    • ウェブブラウザーのタイトルを書き換えよう - window.title
    • 条件によって動きが変わるプログラムを作ろう - if
    • 2つの条件で動き変わるプログラムを作ろう - 論理演算子
    • 1から 365までを連続して表示するプログラムを作ろう - while
    • for構文を使って、より簡単に繰り返しのプログラムを作ろう - for
    • 今日の曜日を日本語で表示しよう - 配列(Array)
    • 連想配列(ハッシュ)を使って配列をより分かりやすく管理しよう - ハッシュ
    • 文章の中からキーワードを検索しよう - indexOf
    • 数字以外の場合にエラーを表示しよう - isFinite
    • 消費税を四捨五入しよう - Math.round
    • ランダムに値を取り出そう - Math.random
    • 偶数か奇数かを判断する - 剰余算
    • 「関数」を作って、よく使う処理をまとめよう
    • 変数のスコープと、let宣言、var宣言の違い
    • クラスを定義しよう
    • setterと getterでプロパティを安全に保とう
    • JSONデータを扱おう
    • 1回だけクリックできるボタンを作ろう - イベントリスナー
    • フォームが空欄だったらエラーを表示しよう
    • チェックボックスにチェックがついたら、ボタンを押せるようにしよう
    • 正規表現を使って、郵便番号が正しいかを確認しよう
    • 別のウェブページに転送しよう - location
    • タイマーで時計をリアルタイムに更新しよう - setInterval
    • JavaScriptを外部ファイル化しよう
    • モジュールを作って外部ファイルを扱いやすくしよう
    • Ajax(非同期)通信で、JSONデータを受信しよう
    • Cookieにメールアドレスを保存して、次回自動記入しよう①
    • Cookieにメールアドレスを保存して、次回自動記入しよう②
    • ローカルストレージに値を保存しよう
  3. TypeScript:基本編
    • TypeScript編の学習に当たって
    • TypeScriptの特徴とメリットを知ろう
    • ターミナルの操作を知ろう
    • 画面に文字を表示しよう
    • メソッドとパラメータについて理解しよう
    • 足し算してみよう - 算術演算子
    • TypeScriptの設定をしよう
    • コメントを書こう
    • 税込み金額を求めよう - 変数
    • 定数を使おう
    • 変数の型とは
    • 型推論とany型を理解しよう
    • 列挙型(enum)について知ろう
    • 型を変換しよう
    • 合計金額を表示しよう - 文字列連結
    • 足し算ができる計算機プログラムを作ろう
  4. TypeScript:中級編
    • 所持金が足りるか確認しよう - if
    • else if構文を理解しよう
    • ユーザー名とパスワードが合っているかを確認しよう - 論理演算子
    • 同意しているかを確認しよう - 真偽値・ブール値
    • 今日の日付を確認しよう① - Dateオブジェクト
    • 今日の日付を確認しよう② - Dateオブジェクト
    • サイコロを作ろう - Mathオブジェクト
    • 1から100までを表示しよう - for構文
    • インクリメント・デクリメントについて理解しよう
    • 100回サイコロを振って、1が出たら終わりにしよう - break
    • サイコロで1が出るまで繰り返そう - while
    • 都道府県を一覧表示しよう - 配列
    • for of構文で配列を繰り返そう
    • 配列を操作しよう
    • 配列のキーを自由に設定しよう - 連想配列
    • 都道府県を地域で分類しよう - 多次元配列
    • タプル型を知ろう
    • パスワード生成ツールを作ろう①
    • パスワード生成ツールを作ろう②
  5. TypeScript:関数を使おう
    • サイコロを振る関数を作ろう - 関数
    • 自由な数字でサイコロを振ろう - 関数のパラメータ
    • 指定した文字から1文字取りだそう - 可変長パラメータ
    • 関数式とアロー関数で関数を作ろう
    • 変数のスコープを理解しよう
    • 関数をオーバーロードしよう
    • 点数の平均を求めるプログラムを作ろう①
    • 点数の平均を求めるプログラムを作ろう②
    • ジェネリック関数、ジェネリクスについて理解しよう
  6. TypeScript:クラス定義編
    • クラスとプロパティを定義しよう
    • メソッドを定義しよう
    • ゲッター・セッターを定義しよう
    • コンストラクタを定義しよう
    • 子クラスを作って継承しよう
    • メソッドをオーバーライドしよう
    • 抽象クラスを作ろう
    • インターフェイスを定義しよう
    • モジュールに分けよう
    • 年齢を計算するプログラムを作成しよう①
    • 年齢を計算するプログラムを作成しよう②
  7. Vue.jsでウェブの画面を簡単に制御しよう
    • Vue.jsのバージョンについて
    • Vue.jsとは
    • Vue.jsでプログラムを作成しよう
    • HTML属性に Vue.jsで値を挿入しよう - v-bind
    • フェードインで表示しよう - transition
    • フォームと値を接続しよう - v-model
    • 条件によって、表示・非表示を切り替えよう - v-if
    • v-forディレクティブで繰り返し構文を作ろう
    • v-forディレクティブで、配列を制御しよう
    • v-onディレクティブでイベントを作ろう
    • Vue.jsのコンポーネントで再利用可能なパーツを作ろう
    • 時間が変化する、時計コンポーネントを作ろう
    • スロットで後からコンポーネントを書き換えよう
    • ミックスインで再利用できるプログラムを作ろう
    • 実践:計算機プログラムを作ろう①
    • 実践:計算機プログラムを作ろう②
  8. Vue CLIで、SPA(Single Page Application)を開発しよう
    • メモアプリを作ろう
    • Vue CLIをインストールしよう
    • プロジェクトを作成しよう
    • Vue CLI UIを使って、ブラウザーで操作しよう
    • Vue CLIプロジェクトのファイル構成を知ろう
    • Vue Routerプラグインを入れてルーティング処理ができるようにしよう
    • メモの新規作成画面を作成しよう①
    • メモの新規作成画面を作成しよう②
    • Vuexを使ってデータを保存しよう①
    • Vuexを使ってデータを保存しよう②
    • リスト画面を作ろう
    • 編集画面を作ろう
    • リスト画面から編集画面にリンクを張ろう
    • 編集内容をストアに保存しよう
    • 保存ボタンを押さなくてもデータが変わってしまうバグを修正しよう
    • 共通パーツをコンポーネント化しよう
    • データをローカルストレージに保存できるようにしよう
    • アプリケーションをビルドしよう
 
Preview Video
   

Udemyで無料で学べるVue.js講座一覧

以下の講座は無料で学習が可能。

無料コースでは、質問ができない、学習した証の修了証書が発行されない、といった違いがありますが、動画コンテンツはすべて利用可能。

有料講座ほどの内容の幅はないですが、動画学習の取っ掛かりとしてまずこちらを試してみるのもおすすめです。

ゼロから始めるVueJS

ゼロから始めるVueJS
発売日 2022/09/09
(3.5)

31 total mins
Javascriptのフレームワーク、Vueを最初から丁寧に学んでいきます

Javascriptのフレームワーク、Vueを最初から丁寧に学んでいきます 

Javascriptをやったことがない方ようにも、JavascriptやTypescriptについても初めから丁寧に解説していきます


↓全て表示↑少なく表示
 
Users Voice
すごくいい教材でした! vueに関して旬な情報をわかりやすく体系的に解説されています (参考:Udemy)

↓全て表示 ↑少なく表示
あまりVue3についてのコースが少ない中では、非常にまとまっていたと思う (参考:Udemy)

↓全て表示 ↑少なく表示
 
レクチャー内容
  1. 紹介
    • 紹介
    • アウトライン
  2. アプリケーション入門
    • イントロダクション
    • 初めてのこんぽーねんと
    • v-bind データを埋め込む
    • v-on 処理を埋め込む
    • ネイティブイベントを扱う
   

関連:Vue.jsを本でも学ぼう

UdemyのVue.js講座は上述したとおり、Vue.jsの基礎的な使い方からWebアプリ開発実用まで、幅広く学べる非常にパフォーマンスの高い学習法。

ただ、リファレンスとしては動画だと見返しづらい側面もありますので、書籍も併用しながら学習すると良いかと思います。

Vue.jsの参考書は以下で紹介しています。合わせて参照ください。

いじょうでっす。

コメント

タイトルとURLをコピーしました