こちらでは、UdemyのVue.js講座を、おすすめ、セール情報とともに紹介していきまっす。
Contents
Udemy講座の特徴
具体的な講座を見る前に、Udemyについてざっと整理しておきましょう。
Udemyは動画ベースの学習サービス、以下のような特徴があります。
Udemyの特徴
- 買い切り型で継続コストがない
- その上、内容更新あり、質問可能
- スマホ対応、流し聴き学習も可能
- 30日間返金が可能
- セールで頻繁に60%以上割引
なんといっても、買い切り型なので購入後は継続コスト等が一切不要なのが安心。
その上で、講座の内容がアップデートされたり、質問も可能なので、買い切りなのに利用できるサポートが手厚いです。
講座の内容も10時間以上に登るものも多く、1本で基礎から応用まで学習可能。
ユーザー評価や、動画プレビューあり、さらには30日間の返金保証もあるので、まず失敗しない購入が可能。
購入時に絶対に抑えておきたいのがセール。毎回60%～90%まで割引されます。
基本月1回は必ずセールが開催されているので、そこで購入するようにしましょう。また、新規ユーザーは1本目は大概セール価格で購入可能です。
UdemyのVue.js講座一覧(セール情報付き)
以下が今Udemyで学習できるVue.jsの主な講座(日本語のもの)です。
セール価格情報も載せています。上述したとおりUdemyのセールは大きいので逃さずゲットしてください。
| 学習コース | 評価 |
|---|---|
 Vue JS入門決定版！jQuery を使わない Web 開発 - 導入からアプリケーション開発まで体系的に動画で学ぶ... 発売日 2018/05/19 受講者 7,882人 通常 7,200円 新規 1,750円 | 総評価数 1588件 |
 | 総評価数 1606件 |
 Nuxt JS入門決定版！Vue.jsのフレームワークNuxt JSの基本からFirebaseと連携したSPAの開発まで... 発売日 2019/02/01 受講者 2,759人 通常 10,800円 新規 1,610円 | 総評価数 389件 |
 | 総評価数 498件 |
 | 総評価数 351件 |
 | 総評価数 19件 |
 | 総評価数 22件 |
UdemyのVue.jsおすすめ講座 3選
以下がおすすめの講座です。
以下の講座は、Vue.jsの基礎学習から、応用・実用まで内容網羅。
1本でかなり幅広い内容を学習できるので、非常にコスパの高いVue.js学習が可能です。
それぞれ詳しく見ていきましょう。
超Vue.js 完全パック - もう他の教材は買わなくてOK！ (Vue Router, Vuex含む)
発売日 2019/06/23
17.5 total hours
Vue.jsを、基礎から、Vue CLI、Vue Router、Vuex、Firebaseを使った実践的な内容まで網羅的に学びますので、ぜひこの講座で学んでみてください。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、Firebaseを使用した大規模なシングルページアプリケーション(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上でのログイン認証の方法
↓全て表示↑少なく表示
Users Voice
レクチャー内容
- はじめに
- コースの紹介
- Vue.jsでHello World !を表示させてみる
- ボタンを押したら文字が反転する処理をVue.jsで行ってみる
- このコースの流れ
- 再生速度の変更とQ&Aの使い方について
- ローカル環境でVue.jsを動かす方法
- これが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という２つの例を見ながら、頻繁に行われる処理を簡略化した、イベント修飾子を理解する
- キー修飾子を使って、特定のキーボードを押した時にイベントを発火するようにする
- v-onディレクティブの引数を[ ]を使って動的に表現する
- @マークを使ってv-onを省略記法で書く
- v-modelを使用して、双方向バインディングを作成する
- computedプロパティを使って、動的なデータを表現する
- computedとmethodの違いを理解し、算出プロパティのリアクティブな依存関係にもとづきキャッシュされるという性質を理解する
- ウォッチャを使って、データが変わった時に特定の処理をする
- 丸カッコ( )は、二重中括弧とv-onディレクティブにおいて、いつ必要なのか
- クラスをデータにバインディング(紐付け)する方法その１。オブジェクトを渡し、真偽値を使って動的に適応させるクラスを切り替える
- クラスをデータにバインディングする方法その2。配列を使って、適応させたいクラスを並べる
- スタイル属性を、オブジェクトを用いて動的にバインディングする
- スタイルオブジェクトをデータに書いて、コードを見やすくする
- 複数のスタイルオブジェクトを配列構文を用いて適応させる
- まとめ
- 「条件付きレンダリング」と「リストレンダリング」
- イントロダクション-セクション3
- v-ifディレクティブを使って、条件に応じて描画する処理を書く
- v-elseを使って、v-ifがfalseの場合の処理を書く
- v-else-ifを使って、複雑な条件式を作る
- templateタグを使用して、不必要な要素を加えずにv-ifを複数の要素に適応させる
- v-showを使って、頻繁に何かを切り替える処理のパフォーマンスを高める
- v-forディレクティブを使用して、配列に基づいてリストを描画する
- ２つ目の引数に配列のインデックスを取ってv-forを使用する
- オブジェクトに対してv-forディレクティブを使用する
- オブジェクトのv-forには、第２引数と第３引数にキーとインデックスを取る
- templateタグを使用して、不必要な要素を加えずにv-forを複数の要素に適応させる
- n in 10 のように、整数値に対してv-forを適用する
- inの代わりにofを使用してJavaScriptのイテレータ構文に近い書き方をする
- key属性をつける必要性を学び、予期せぬバグを起こさないv-forを作る
- まとめ
- Vueインスタンスとその内部構造はこうなっている
- イントロダクション-セクション4
- Vue インスタンスは複数作ることができる
- 外側からVue インスタンスにアクセスする方法
- リアクティブシステム(getter、setter、Watcher)がどのように動いているかを確認し、プロパティを後から追加できないことを理解する
- Vueインスタンスプロパティの$dataの紹介
- 内側からVueインスタンスのプロパティやメソッドにアクセスする
- VueのAPI一覧はここに載っています。
- $mountメソッドを使用して、elプロパティの代わりにする
- templateプロパティを使って、文字列のみでテンプレートを書く
- render(描画)関数を使用して、仮想ノードを作ってDOMの描画を行う
- 仮想DOMと、その必要性を理解する
- 仮想DOMを図で理解する
- Vue インスタンスライフサイクルの全体像を見て、Vueがどのように動いているかを理解する
- ライフサイクルフックのタイミングを実際にコードで確かめる
- コンポーネントを使用して、同じようなインスタンスを使い回す
- まとめ
- Vue CLIを使った実践的な開発をはじめる方法
- イントロダクション-セクション5
- なぜVue CLIを使う必要があるのか
- Vue CLIのインストールと初期設定を行う
- Vue CLIが作成したそれぞれのファイルの説明
- .vueファイル(単一ファイルコンポーネント)とmain.jsの解説
- デプロイ時の本番環境のためのbuildをしてみる
- まとめ
- ゼロから始めるコンポーネント
- イントロダクション-セクション6
- コンポーネントを使用して、再利用可能なVueインスタンスを作る
- dataはなぜコンポーネントにおいて関数である必要があるのか
- コンポーネントにおける、ローカル登録とグローバル登録の違いを理解する
- 「 import App from ‘./App.vue'」の意味を理解する
- 単一ファイルコンポーネント(.vueファイル)の基礎的な使い方
- 実際に単一ファイルコンポーネントを作成してグローバル登録する
- templateはルート要素を1つにしなければならないことに注意する
- シングルファイルコンポーネントをローカル登録する
- componentsフォルダを作成して、綺麗なフォルダ構造を作る
- コンポーネントの名前はケバブケースかパスカルケースにする
- スコープ付きCSSと、Vue.jsがそれをどのように実装しているのかを理解する
- まとめ
- コンポーネント間でデータを受け渡す方法
- イントロダクション-セクション7
- 親子間のデータの受け渡しの必要性を理解する
- propsを使用して、親から子にデータを渡す
- propsの名前はJavaScriptではキャメルケース、HTML内ではケバブケースにすることをお勧めします
- コンポーネント内でpropsを扱う時はdataのように使用する
- バリデーションを使用して、プロパティに意図しない値が渡されるのを防ぐ
- 複数のpropsをつける方法
- $emitメソッドを使って、子から親にデータを渡す
- なぜ$emitはpropsと違ってこんなに複雑なのか
- propsで配列とオブジェクトを渡す時は、参照渡しになるので注意する
- $emitで作るカスタムイベント名はケバブケース(kebab-case)にする
- まとめ
- コンポーネントの高度な機能はこう書く
- イントロダクション-セクション8
- htmlのコードを子コンポーネントに渡すとき、propsでは限界がある
- slotを使うことで、子コンポーネントにhtmlのコードを渡すことができる
- slotは親と子のどちらのスコープにアクセスできるのか
の中にフォールバックコンテンツを入れると、デフォルトのコンテンツになる - 【名前付きスロット】v-slotを使用すれば、複数のslotを使用して複雑なデータを渡すことができる
- デフォルトのスロットを名前付きスロットの中に置く
- v-slot使用時にtemplate以外を使用するとエラーが出る
- 「スロットプロパティ」を使って、子コンポーネントのデータにアクセスする
- スロットプロパティにおける、デフォルトスロットしかない場合の省略記法
- デフォルトスロットに対する省略記法は、名前つきスロットと混在させることができない点に注意する
- 動的なスロット名
- 名前つきスロットは#に置き換えることができる
- スロットのまとめ
- 動的に複数のコンポーネントを切り替えるために、componentタグと、is属性を使用する
- 動的コンポーネントは切り替えるごとにdestroyedされる挙動となることを理解する
- keep-aliveを使って動的コンポーネントの状態を保持する
- ライフサイクルフックのactivatedとdeactivatedを使用する
- まとめ
- こうすればVue.jsでフォームが簡単に作れる
- イントロダクション-セクション9
- v-modelを使用して、input要素に双方向データバインディングを作成する
- .lazy修飾子でchangeイベント後にデータと入力を同期する
- .number修飾子でユーザの入力を数値として自動的に型変換する
- .trim修飾子を使用して、ユーザの入力から空白を自動的に取り除く
- textareaにv-modelを使用して複数行テキストに双方向データバインディングを作成する
- 単体のチェックボックスに双方向データバインディングを作成する
- 複数のチェックボックスに双方向データバインディングを作成する
- ラジオボタンに双方向データバインディングを作成する
- セレクトボックスに双方向データバインディングを作成する
- v-modelの中身がどうなっているのかを理解する
- コンポーネントでv-modelを使う方法
- まとめ
- カスタムディレクティブで自由にディレクティブを作る方法
- イントロダクション-セクション10
- カスタムディレクティブを使ってコードを抽象化、そして再利用する
- グローバルにカスタムディレクティブを登録する
- ディレクティブはどのように動くのか。フック関数を理解する
- 関数による省略記法を使って、bindとupdateを１つのコードにする
- elを使ってDOMを直接操作し、シンプルなカスタムディレクティブを作成する
- カスタムディレクティブに、binding.valueを使ってデータを渡す
- 複数の値を必要とするカスタムディレクティブにはオブジェクトを渡す
- 引数をカスタムディレクティブに渡す方法
- 修飾子をカスタムディレクティブに対して使えるようにする
- directivesオプションを使って、ローカルにカスタムディレクティブを登録する
- カスタムディレクティブではthisは使えないことに注意する
- まとめ
- 「フィルター」と「ミックスイン」
- イントロダクション-セクション11
- フィルターを使用して、一般的なテキストフォーマットを作成する
- コンポーネントのオプション内でローカルフィルタを定義する
- 複数のフィルタ関数を連結させる
- フィルターでthisが使えないことに注意する
- computedとフィルターのキャッシュに対する違いを理解する
- 共有できるコードを全てミックスインにする
- 実際にミックスインを作って、オプションをコンポーネント間で共有する
- オプションが被ったときに、どのようにミックスインがマージされるのか
- グローバルミックスインを作成する
- まとめ
- 「トランジション」と「アニメーション」
- イントロダクション-セクション12
- なぜVue.jsがトランジション効果を適用するための方法を提供しているかを考える
- Vue.jsが提供するトランジション効果を適用する3つのパターン
- ６つのトランジションクラスと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クラスを使用する
- トランジションの再利用する時はコンポーネントにする
- まとめ
- Vue Routerでルーティングできる仕組み
- イントロダクション-セクション13
- VueRouterとは何をするものなのか。実際にURLによって表示する内容を変える
- シングルページアプリケーションとは何かを理解する
- hashモードからhistoryモードに切り替えてURLを美しくする
コンポーネントを使って、クリックでURLを切り替える - active-class属性とexact属性を使って、アクティブなリンクにスタイリングをつける
- コードからURLを切り替える方法を学ぶ
Vue JS入門決定版！jQuery を使わない Web 開発 - 導入からアプリケーション開発まで体系的に動画で学ぶ
発売日 2018/05/19
8.5 total hours
Vue Router, Vue CLI 対応. 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がまず思い浮かぶ方が多いのではないでしょうか。
しかしながら、大規模なアプリケーション開発ではない場合、オーバースペックとなりメリットが活かしきれず、熟練したメンバーが揃えられないプロジェクトチームでは、その学習コストの高さから、開発スピードが低下してしまう懸念があります。
私は、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）
↓全て表示↑少なく表示
Users Voice
レクチャー内容
- はじめに
- コース紹介
- 受講オリエンテーション
- 補足：受講オリエンテーション
- コースカリキュラムの流れ
- 学習環境について
- 補足：学習環境について
- サンプルコードについて
- Vue.jsの基本的な使い方
- イントロダクション - Vue.jsの基本的な使い方
- 補足：jsFiddleについて
- JSFiddle 画面説明
- Vue.jsの読み込み
- Vue.jsの開発バージョンと本番バージョン
- Vueインスタンスの作成
- データバインディングとは
- ルートのテンプレートを作成
- テキストのデータバインディング
- dataオプションにオブジェクトや配列要素を設定
- 補足:jsFiddleの利用が便利になる設定
- jsFiddleの利用が便利になる設定
- jsFiddle ソースコードの保存・読み込み
- エラーを自力で解決する方法
- ディレクティブとは
- 属性のデータバインディング v-bind
- 補足：属性のデータバインディング v-bind
- 条件分岐 v-if
- 条件分岐 v-show
- 繰り返しの描画 v-for
- オブジェクトの繰り返し v-for
- イベント処理の基本 v-on
- 双方向データーバインディング v-model
- コンポーネント
- 演習：Vue.jsの基本的な使い方のまとめ①
- 演習：Vue.jsの基本的な使い方のまとめ②
- 補足：テキストエディタを使った開発
- 補足：JavaScriptのセミコロンについて
- 実践演習：TODO管理アプリの開発
- イントロダクション - TODO管理アプリの開発
- Vueインスタンスとルートテンプレートの作成
- 主要な要素の配置
- 追加ボタンのイベントハンドリング
- inputのvalueを双方向データバインディング
- タスクの追加
- タスク追加後の文字列クリア
- 未入力なら追加しない
- リスト表示
- タスクの完了/未完了の管理
- スタイルの設定
- タスクの削除
- 全体を通して動作確認
- 実践演習：Bitcoin価格表示アプリの開発 - API連携
- イントロダクション - 実践演習：Bitcoin価格表示アプリの開発 - API連携
- 利用するAPIの仕様
- データを格納するプロパティを作成
- HTTPクライアント axiosの導入
- Bitcoin価格をAPIから取得
- 補足：JavaScriptの bindについて
- 通信エラーのキャッチ
- Bitcoin価格の表示
- 中間まとめ
- 小数点以下の桁数調整
- チラツキ防止
- 通信エラーハンドリング
- ローディング表示
- テンプレート構文
- イントロダクション - テンプレート構文
- 様々なテンプレート制御ディレクティブ
- v-once ディレクティブ
- v-pre ディレクティブ
- v-htmlディレクティブ
- v-cloakディレクティブ
- v-text ディレクティブ
- バインディング式
- JavaScript 式
- フィルタ（ローカルフィルタ）
- フィルタ（グローバルフィルタ）
- フィルタの連結
- フィルタの引数
- v-bind 省略記法
- 算出プロパティ
- イントロダクション
- 算出プロパティの基本
- 算出プロパティとメソッドの比較
- 算出プロパティのgetterとsetter
- 算出プロパティのキャッシュ
- 監視プロパティ（ウォッチャ）
- イントロダクション
- 監視プロパティの基本
- 例題:単位変換アプリ
- 算出プロパティと監視プロパティの比較
- 監視プロパティのオプション
- オプション deep ①
- オプション deep ②
- オプション immediate
- 実践演習：APIを用いたリアルタイムサーチ - 監視プロパティの理解を深める
- イントロダクション - 実践演習：APIを用いたリアルタイムサーチ
- 利用するAPIについて
- 開発の準備
- 空のオプションの用意
- dataオプション
- APIからデータを取得
- テンプレート側の実装
- フォームの監視
- 動作確認
- クラスとスタイルのバインディング
- イントロダクション
- クラスのデータバインディングの基本
- 複数のクラスを動的に切り替える
- プレーンなクラス属性と共存
- 配列構文によるクラスのデータバインディング
- オブジェクトデータの利用
- クラスの条件に三項演算子を使う
- インラインスタイルのデータバインディング
- インラインスタイルのデータバインディングにオブジェクトデータ
- 条件付きレンダリング
- イントロダクション
- v-ifとv-else
- v-else-if
- v-show
- v-if とv-showの違い
- イベントハンドリング
- イントロダクション - イベントハンドリング
- インラインメソッドハンドラ
- メソッドイベントハンドラ
- イベントオブジェクトの参照
- イベントハンドラに引数を渡す
- $event
- イベント修飾子
- イベント修飾子の利用例 .once
- キー修飾子
- システム修飾子
- v-on 省略記法
- フォーム入力バインディング
- イントロダクション - フォーム入力バインディング
- フォーム入力バインディングの基本
- v-model利用時は、属性は無視される。
- 複数行テキスト
- チェックボックス
- チェックボックス 単体
- チェックボックス 複数
- ラジオボタン
- セレクトボックス 単体の選択
- セレクトボックス 複数の選択
- 修飾子の種類
- 修飾子 .lazy
- 修飾子 .trim
- 修飾子 .number
- コンポーネント
- イントロダクション - コンポーネント
- コンポーネントの定義 - グローバル登録
- コンポーネントの定義 - ローカル登録
- コンポーネント名
- コンポーネントのオプション
- トランジション
- トランジションの基礎
- ボーナスセクション：Vue Routerの基本
- イントロダクション - Vue Routerの基本
- Vue Routerとは
- 開発環境について
- はじめてのVue Router
- ファイルの作成
- Vue.jsとVue Routerの読み込み
- ページ遷移 router-link
- router-view コンポーネント
- ページごとのコンポーネントの作成
- Routerインスタンスの生成とマウント
- 動作確認 - はじめてのVue Router
- URLパラメータを利用する
- 名前付きのルート
- ネストされたルート
- リダイレクト
- 名前付きルートへのリダイレクト
- エイリアス
- 補足：URLのハッシュマークについて
- ボーナスセクション：Vue CLI3の導入
- イントロダクション
- Node.jsのインストール
- Vue CLIのインストール
- 新規プロジェクトの作成
- ファイル構成
- 単一ファイルコンポーネントとは
- 単一ファイルコンポーネントの作成
- 単一ファイルコンポーネントの利用
- セクションまとめ
- クロージング
- クロージング
- 謝辞
- ボーナスレクチャー
- ボーナスレクチャー
JavaScript(ES6)/Vue.js/TypeScript フロントエンド技術入門
発売日 2020/04/02
8 total hours
フロントエンド開発に欠かせない JavaScriptをキホンから。TypeScriptや Vue.jsもこれ一本で学習して頂けます。
JavaScriptは、ウェブ制作に欠かせないプログラミング言語です。簡単な演出から、近年ではSPA（Single Page Application）の開発などに幅広く活用されています。
JavaScriptの進化は非常に早く、新しい言語仕様やライブラリー・フレームワークが次々に登場していて体系的な学習が難しくなってきています。
この講座では、そんな JavaScriptの新しい仕様（ES6以降）の知識と、近年非常に人気のある「TypeScript」、そして「Vue.js」を一気に学ぶことができるフロントエンド技術の入門講座となっています。
最初は、JavaScriptのキホンのキホンからスタートして、最終的には本格的なフレームワークである「Vue CLI」を用いたアプリケーション開発まで体験していきます。是非ゆっくりと自分のペースで学んでいって頂ければ幸いです。
↓全て表示↑少なく表示
Users Voice
レクチャー内容
- はじめに
- はじめに
- Udemyでの講座の進め方
- 開発環境を整えよう（Windows編）
- 開発環境を整えよう（macOS編）
- 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にメールアドレスを保存して、次回自動記入しよう②
- ローカルストレージに値を保存しよう
- TypeScriptでトランスコンパイルしよう
- macOSをご利用の方へ
- トランスコンパイルとは。TypeScript Compiler（tsc）をインストールしよう
- tscでコンパイルしてみよう
- watchで自動でコンパイルされるようにしよう
- TypeScriptの「型」を知ろう
- 関数の「型」を知ろう
- その場で型を決める「ジェネリック」
- 複数の型を定義できる「ユニオンタイプ」
- 型を指定しなくても自動で決まる「型推論」
- 入れられる値を決められる「リスト」
- TypeScriptのクラス定義
- TypeScriptの getterと setter
- 読み込み専用プロパティ - readonly
- Vue.jsでウェブの画面を簡単に制御しよう
- Vue.jsとは
- Vue.jsでプログラムを作成しよう
- HTML属性に Vue.jsで値を挿入しよう - v-bind
- フェードインで表示しよう - transition
- フォームと値を接続しよう - v-model
- 条件によって、表示・非表示を切り替えよう - v-if
- v-forディレクティブで繰り返し構文を作ろう
- v-forディレクティブで、配列を制御しよう
- v-onディレクティブでイベントを作ろう
- Vue.jsのコンポーネントで再利用可能なパーツを作ろう
- 時間が変化する、時計コンポーネントを作ろう
- スロットで後からコンポーネントを書き換えよう
- ミックスインで再利用できるプログラムを作ろう
- 実践：計算機プログラムを作ろう①
- 実践：計算機プログラムを作ろう②
- Vue CLIで、SPA（Single Page Application）を開発しよう
- メモアプリを作ろう
- Vue CLIをインストールしよう
- プロジェクトを作成しよう
- Vue CLI UIを使って、ブラウザーで操作しよう
- Vue CLIプロジェクトのファイル構成を知ろう
- Vue Routerプラグインを入れてルーティング処理ができるようにしよう
- メモの新規作成画面を作成しよう①
- メモの新規作成画面を作成しよう②
- Vuexを使ってデータを保存しよう①
- Vuexを使ってデータを保存しよう②
- リスト画面を作ろう
- 編集画面を作ろう
- リスト画面から編集画面にリンクを張ろう
- 編集内容をストアに保存しよう
- 保存ボタンを押さなくてもデータが変わってしまうバグを修正しよう
- 共通パーツをコンポーネント化しよう
- データをローカルストレージに保存できるようにしよう
- アプリケーションをビルドしよう
Preview Video
関連:Vue.jsを本でも学ぼう
UdemyのVue.js講座は上述したとおり、Vue.jsの基礎的な使い方からWebアプリ開発実用まで、幅広く学べる非常にパフォーマンスの高い学習法。
ただ、リファレンスとしては動画だと見返しづらい側面もありますので、書籍も併用しながら学習すると良いかと思います。
Vue.jsの参考書は以下で紹介しています。合わせて参照ください。
いじょうでっす。
コメント