未経験からエンジニアになりたい人必見!
おすすめプログラミングスクール3選!

【2022年最新版】UdemyでおすすめのVue.js動画6選

本記事では、Udemyに掲載されているおすすめのVue.js講座を紹介しています。

Udemyとは?

Udemyとは、IT技術・音楽・写真などの幅広いテーマの中から学びたいもの好きな時に学ぶことができるオンライン学習プラットフォームで、利用者数は2021年に4,400万人を超えています。

IT技術などの専門的な分野で初学者が参考書を買って独学で勉強すると、半分以上が挫折してしまいます。その理由の多くは、分からない箇所で躓いて周りに聞ける人が周りに居ないことです。

Udemyの場合、動画で分からないポイントがあったら講師の方に質問することができます。また過去に受講している生徒からの質問も確認することができます。

FAQ

Udemyを使ったことがない人が気になるポイントについて、FAQ形式で記載しています。

このFAQはUdemy公式ホームページに書かれている内容のみを載せているのでご安心ください。

購入したコースの返金をすることは可能ですか?
購入後30日以内であれば返金することが可能です。
Udemyでの支払い方法は何がありますか?
「クレジットカード/デビットカード」「PayPal」「App Store」「Google Play」「Udemyクレジット」があります。
購入したコースに期限はありますか?
学習期限はありません。アカウントが有効且つコースのライセンスを所有し続ける限り、コースを修了した後でも引き続き受講できます。

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

作成者よしぴー(Yoshipi)
学習時間17.5時間
受講者数14,225人
レビュー (3,487件)
動画情報
こんな人にオススメ!
  • モダンなJavaScriptフレームワークに興味があるフロントエンドエンジニア
  • AngularやReactの経験があり、Vueにも興味がある方
  • Progateを一通り終え、実際に実務で使える技術を学びたい方
  • 本で学ぶよりも動画で学ぶ方が好きな方
  • jQueryやRuby on Rails以外のWebアプリケーション開発の方法を学びたい方
  • 新しいことを学ぶのが好きな方

エンジニアのみなさん!

このコースを修了する頃には、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の実践的な内容が学べますので、この機会をお見逃しなく!
  1. はじめに
    1. コースの紹介
    2. vue.jsでHello World!を表示させてみる
    3. ボタンを押したら文字が反転する処理をvue.jsで行なってみる
    4. このコースの流れ
    5. 再生速度の変更とQ&Aの使い方について
    6. ローカル環境でvue.jsを動かす方法
  2. これがVue.jsの基礎、テンプレート構文だ
    1. イントロダクション
    2. テンプレート構文とは何か
    3. 二重中括弧を使ってデータを描画する
    4. thisを理解して、methodsから自分のdataにアクセスする
    5. v-から始まる特別な属性であるディレクティブを理解する
    6. 一度だけ描画するv-onceディレクティブを理解する
    7. v-htmlを使って、データをHTMLとして出力する(XSS脆弱性に注意)
    8. v-bindを使用して、属性の値をデータに対応づける
    9. v-bindの応用的な使い方を学ぶ
    10. v-onを用いて、クリックなどのイベント発生時に特定の処理をする
    11. v-onの引数となるDOMイベント一覧
    12. v-on使用時に、イベントオブジェクトを使ってイベントの情報を取得する
    13. v-onに指定しているメソッドに引数を持たせる
    14. .stopと.preventという2つの例を見ながら、頻繁に行われる処理を簡略化した、イベント修飾子を理解する
    15. キー修飾子を使って、特定のキーボードを押した時にイベントを発火するようにする
    16. v-onディレクティブの引数を[]を使って動的に表現する
    17. @マークを使ってv-onを省略記法で書く
    18. v-modelを使用して、双方向バインディングを作成する
    19. computedプロパティを使って、動的なデータを表現する
    20. computedとmethodの違いを理解し、算出プロパティのリアクティブな依存関係に基づきキャッシュされるという性質を理解する
    21. ウォッチャを使って、データが変わった時に特定の処理をする
    22. 丸カッコ()は、二重中括弧とv-onディレクティブにおいて、いつ必要なのか
    23. クラスをデータにバインディング(紐付け)する方法その1。オブジェクトを渡し、真偽値を使って動的に適応させるクラスを切り替える
    24. クラスをデータにバインディングする方法その2。配列を使って、適応させたいクラスを並べる
    25. スタイル属性を、オブジェクトを用いて動的にバインディングする
    26. スタイルオブジェクトをデータに書いて、コードを見やすくする
    27. 複数のスタイルオブジェクトを配列構文を用いて適応させる
    28. まとめ
  3. 「条件付きレンダリング」と「リストレンダリング」
    1. イントロダクション
    2. v-ifディレクティブを使って、条件に応じて描画する処理を書く
    3. v-elseを使って、v-ifがfalseの場合の処理を書く
    4. v-else-ifを使って、複雑な条件式を作る
    5. templateタグを使用して、不必要な要素を加えずにv-ifを複数の要素に適応させる
    6. v-showを使って、頻繁に何かを切り替える処理のパフォーマンスを高める
    7. v-forディレクティブを使用して、配列に基づいてリストを描画する
    8. 2つ目の引数に配列のインデックスを取ってv-forを使用する
    9. オブジェクトに対してv-forディレクティブを使用する
    10. オブジェクトのv-forには、第2引数と第3引数にキーとインデックスを取る
    11. templateタグを使用して、不必要な要素を加えずにv-forを複数の要素に適応させる
    12. n in 10 のように、整数値に対してv-forを適用する
    13. inの代わりにofを使用してJavaScriptのイテレータ構文に近い書き方をする
    14. key属性をつける必要性を学び、予期せぬバグを起こさないv-forを作る
    15. まとめ
  4. Vueインスタンスとその内部構造はこうなっている
    1. イントロダクション
    2. Vue インスタンスは複数作ることができる
    3. 外側からVue インスタンスにアクセスする方法
    4. リアクティブシステム(getter、setter、Watcher)がどのように動いているかを確認し、プロパティを後から追加できないことを理解する
    5. Vueインスタンスプロパティの$dataの紹介
    6. 内側からVueインスタンスのプロパティやメソッドにアクセスする
    7. VueのAPI一覧はここに載っています。
    8. $mountメソッドを使用して、elプロパティの代わりにする
    9. templateプロパティを使って、文字列のみでテンプレートを書く
    10. render(描画)関数を使用して、仮想ノードを作ってDOMの描画を行う
    11. 仮想DOMと、その必要性を理解する
    12. 仮想DOMを図で理解する
    13. Vue インスタンスライフサイクルの全体像を見て、Vueがどのように動いているかを理解する
    14. ライフサイクルフックのタイミングを実際にコードで確かめる
    15. コンポーネントを使用して、同じようなインスタンスを使い回す
    16. まとめ
  5. Vue CLIを使った実践的な開発をはじめる方法
    1. イントロダクション
    2. なぜVue CLIを使う必要があるのか
    3. Vue CLIのインストールと初期設定を行う
    4. インストール時の補足
    5. Vue CLIが作成したそれぞれのファイルの説明
    6. .vueファイル(単一ファイルコンポーネント)とmain.jsの解説
    7. デプロイ時の本番環境のためのbuildをしてみる
    8. まとめ
  6. ゼロから始めるコンポーネント
    1. イントロダクション
    2. コンポーネントを使用して、再利用可能なVueインスタンスを作る
    3. dataはなぜコンポーネントにおいて関数である必要があるのか
    4. コンポーネントにおける、ローカル登録とグローバル登録の違いを理解する
    5. 「 import App from ‘./App.vue’」の意味を理解する
    6. 単一ファイルコンポーネント(.vueファイル)の基礎的な使い方
    7. 実際に単一ファイルコンポーネントを作成してグローバル登録する
    8. templateはルート要素を1つにしなければならないことに注意する
    9. シングルファイルコンポーネントをローカル登録する
    10. componentsフォルダを作成して、綺麗なフォルダ構造を作る
    11. コンポーネントの名前はケバブケースかパスカルケースにする
    12. スコープ付きCSSと、Vue.jsがそれをどのように実装しているのかを理解する
    13. まとめ
  7. コンポーネント間でデータを受け渡す方法
    1. イントロダクション
    2. 親子間のデータの受け渡しの必要性を理解する
    3. propsを使用して、親から子にデータを渡す
    4. propsの名前はJavaScriptではキャメルケース、HTML内ではケバブケースにすることをお勧めします
    5. コンポーネント内でpropsを扱う時はdataのように使用する
    6. バリデーションを使用して、プロパティに意図しない値が渡されるのを防ぐ
    7. 複数のpropsをつける方法
    8. $emitメソッドを使って、子から親にデータを渡す
    9. なぜ$emitはpropsと違ってこんなに複雑なのか
    10. propsで配列とオブジェクトを渡す時は、参照渡しになるので注意する
    11. $emitで作るカスタムイベント名はケバブケース(kebab-case)にする
    12. まとめ
  8. コンポーネントの高度な機能はこう書く
    1. イントロダクション
    2. htmlのコードを子コンポーネントに渡すとき、propsでは限界がある
    3. slotを使うことで、子コンポーネントにhtmlのコードを渡すことができる
    4. slotは親と子のどちらのスコープにアクセスできるのか
    5. <slot></slot>の中にフォールバックコンテンツを入れると、デフォルトのコンテンツになる
    6. 【名前付きスロット】v-slotを使用すれば、複数のslotを使用して複雑なデータを渡すことができる
    7. デフォルトのスロットを名前付きスロットの中に置く
    8. v-slot使用時にtemplate以外を使用するとエラーが出る
    9. 「スロットプロパティ」を使って、子コンポーネントのデータにアクセスする
    10. スロットプロパティにおける、デフォルトスロットしかない場合の省略記法
    11. デフォルトスロットに対する省略記法は、名前つきスロットと混在させることができない点に注意する
    12. 動的なスロット名
    13. 名前つきスロットは#に置き換えることができる
    14. スロットのまとめ
    15. 動的に複数のコンポーネントを切り替えるために、componentタグと、is属性を使用する
    16. ESLintのエラーに関する補足
    17. 動的コンポーネントは切り替えるごとにdestroyedされる挙動となることを理解する
    18. keep-aliveを使って動的コンポーネントの状態を保持する
    19. ライフサイクルフックのactivatedとdeactivatedを使用する
    20. まとめ
  9. こうすればVue.jsでフォームが簡単に作れる
    1. イントロダクション
    2. v-modelを使用して、input要素に双方向データバインディングを作成する
    3. .lazy修飾子でchangeイベント後にデータと入力を同期する
    4. .number修飾子でユーザの入力を数値として自動的に型変換する
    5. .trim修飾子を使用して、ユーザの入力から空白を自動的に取り除く
    6. textareaにv-modelを使用して複数行テキストに双方向データバインディングを作成する
    7. 単体のチェックボックスに双方向データバインディングを作成する
    8. 複数のチェックボックスに双方向データバインディングを作成する
    9. ラジオボタンに双方向データバインディングを作成する
    10. セレクトボックスに双方向データバインディングを作成する
    11. v-modelの中身がどうなっているのかを理解する
    12. コンポーネントでv-modelを使う方法
    13. まとめ
  10. カスタムディレクティブで自由にディレクティブを作る方法
    1. イントロダクション
    2. カスタムディレクティブを使ってコードを抽象化、そして再利用する
    3. グローバルにカスタムディレクティブを登録する
    4. ディレクティブはどのように動くのか。フック関数を理解する
    5. 関数による省略記法を使って、bindとupdateを1つのコードにする
    6. elを使ってDOMを直接操作し、シンプルなカスタムディレクティブを作成する
    7. カスタムディレクティブに、binding.valueを使ってデータを渡す
    8. 複数の値を必要とするカスタムディレクティブにはオブジェクトを渡す
    9. 引数をカスタムディレクティブに渡す方法
    10. 修飾子をカスタムディレクティブに対して使えるようにする
    11. directivesオプションを使って、ローカルにカスタムディレクティブを登録する
    12. カスタムディレクティブではthisは使えないことに注意する
    13. まとめ
  11. 「フィルター」と「ミックスイン」
    1. イントロダクション
    2. フィルターを使用して、一般的なテキストフォーマットを作成する
    3. コンポーネントのオプション内でローカルフィルタを定義する
    4. 複数のフィルタ関数を連結させる
    5. フィルターでthisが使えないことに注意する
    6. computedとフィルターのキャッシュに対する違いを理解する
    7. 共有できるコードを全てミックスインにする
    8. 実際にミックスインを作って、オプションをコンポーネント間で共有する
    9. オプションが被ったときに、どのようにミックスインがマージされるのか
    10. グローバルミックスインを作成する
    11. まとめ
  12. 「トランジション」と「アニメーション」
    1. イントロダクション
    2. なぜVue.jsがトランジション効果を適用するための方法を提供しているかを考える
    3. Vue.jsが提供するトランジション効果を適用する3つのパターン
    4. 6つのトランジションクラスとtransitionコンポーネントを用意する
    5. transitionコンポーネントにおける、6つのトランジションクラスの使い方を理解する
    6. fadeするトランジション効果をCSSトランジションを使って実際に作成する
    7. トランジションクラスがどのタイミングで追加/削除されているかを確認する
    8. CSSアニメーションを使ってslideするトランジション効果を実際に作成する
    9. transitionは単一の要素だけでしか利用できないことを確認する
    10. CSSトランジションとCSSアニメーションを両方使用する時はtype属性をつける
    11. apper属性を使って、最初の描画時にトランジションを適用する
    12. カスタムトランジションクラスを使用して、Animate.cssを使う
    13. 補足 Animate.cssのアップデートによる変更
    14. name属性を動的に変更して、動的トランジションを作る
    15. 複数の要素を切り替えるトランジションについて学ぶ
    16. mode属性を使って、要素間のトランジションのタイミングをずらす
    17. 動的コンポーネントに対してトランジションを使用する
    18. JavaScriptを使ってアニメーションを作る
    19. 8つのJavaScriptフックとその引数を理解する
    20. トランジションクラスとJavaScriptフックが適応されるタイミングを知る
    21. css属性にfalseを指定して、安全にJavaScriptのみのアニメーションを作る
    22. 実際にJavaScriptフックを使用してアニメーションを作成する
    23. transition-groupを使ってリストトランジションを作る
    24. 5つのtransition-groupとtransitionで異なる重要な特徴
    25. 7つ目のトランジションクラスであるv-moveクラスを使用する
    26. トランジションの再利用する時はコンポーネントにする
    27. まとめ
  13. VueRouterでルーティングできる仕組み
    1. イントロダクション
    2. Vue Routerをインストールする際の補足
    3. VueRouterとは何をするものなのか。実際にURLによって表示する内容を変える
    4. シングルページアプリケーションとは何かを理解する
    5. hashモードからhistoryモードに切り替えてURLを美しくする
    6. <router-link>コンポーネントを使って、クリックでURLを切り替える
    7. active-class属性とexact属性を使って、アクティブなリンクにスタイリングをつける
    8. コードからURLを切り替える方法を学ぶ
    9. コロンを使用して動的なURLを作り、routeオブジェクトを利用してパラメーターを取得する
    10. パラメーターが変わった時にライフサイクルフックが呼ばれないことに注意する
    11. ルートコンポーネントの再利用性を損なわないようにするpropsオプションをtrueにする
    12. router-viewコンポーネントの挙動を知る
    13. childrenオプションを使って、ネストされた<router-view>を作る
    14. to属性を動的に表現する
    15. 名前付きルートを使って、わかりやすくリンク先のURLを動的にする
    16. クエリを使用したVue Routerの使い方を学ぶ
    17. 名前付きビューを使って、固定されたレイアウトを作成する
    18. 名前付きビューごとにpropsを定義する必要があることに注意する
    19. リダイレクト機能を使って、全てをキャッチするルートを作る
    20. router-viewにトランジションを適用する
    21. 特定のidを持つ要素までスクロールするために、URLにハッシュ(#)をつける
    22. scrollBehavior関数を使ってページの移動時のスクロールの振る舞いを変える
    23. 【発展】transitionが適応されているときのスクロールの振る舞いを、非同期で実行することで適切な動きにする
    24. 全てのページ遷移前に、特定の処理をするためのbeforeEachガードの説明
    25. 特定のページ遷移前に、特定の処理をするためのbeforeEnterガードの説明
    26. コンポーネントに指定できる3つのナビゲーションガード
    27. 遅延ローディングをすることで、必要な時にデータを取ってくる処理を書く
    28. まとめ
  14. Vuexを使って大規模なプロジェクトに備える
    1. イントロダクション
    2. Vuexがなぜ必要かを考える
    3. Vuexをインストールする際の補足
    4. Vuexのstateを使って、実際にコンポーネントから値をとってくる
    5. gettersを使って、ストアに算出プロパティを作る
    6. mapGettersヘルパーで、効率よくgettersをコンポーネントに追加する
    7. mutationとcommitを使って、状態(state)を変える場所を一つに絞りデータの予測と追跡をしやすくする
    8. mapMutaionsヘルパーで、効率よくmutationsをコンポーネントに追加する
    9. どうしてmutationでは同期的な処理しか書けないかを理解する
    10. actionをdispatchして、非同期処理を含む処理を扱いながらミューテーションをコミットする
    11. mapActionsヘルパーを使って、効率よくActionsをコンポーネントで使用する
    12. Vuexの全体的なデータの流れをまとめる
    13. 双方向バインディング(v-model)をVuexで使いたい時はどうすれば良いのか
    14. 機能ごとにコードを抜き出し、モジュールとして別ファイルに分割し、コードの肥大化に対処する
    15. ゲッター、ミューテーション、アクション、をそれぞれ別のファイルに切り出し、コードの肥大化に対処する
    16. 名前空間を使って、モジュール間で同じ名前を使えるようにする
    17. Vue Devtoolsをインストールして、デバックしやすくする
    18. まとめ
  15. 世界中に自分のアプリを公開する
    1. buildコマンドで本番用のバンドルをdistディレクトリの中に作る
    2. Netlifyを用いて、実際にアプリをデプロイし、世界中からアクセスできるようにする
    3. ページが存在しないときは、index.htmlを返す処理を加えて、正しいSPAの動きにする
  16. このコースのまとめ
    1. このコースのまとめ
  17. ボーナス:axiosを使ってサーバーにhttp通信をする方法
    1. イントロダクション
    2. axiosをインストールし、プロジェクトをセットアップする
    3. FirebaseのCloud Firestoreを使ってバックエンドサーバーを用意する
    4. postメソッドを使ってデータをサーバーに送る
    5. getメソッドを使ってサーバーのデータを取得する
    6. サーバーから取得したデータを表示する
    7. FirebaseのSDKを使わず、REST APIを使っていることに注意する
    8. FirebaseのCloud Firestoreの詳細
    9. baseURLやheaderなど、全てのリクエストに同じ設定をつける方法を学ぶ
    10. Interceptorsを使って、thenやcatchの前に共通で行いたい処理を書く
    11. axios.create()を使って、新しくaxiosのインスタンスを生成する
    12. まとめ
  18. ボーナス:ログイン機能はこう実装する
    1. イントロダクション
    2. ログイン認証がSPA上でどのように実現されるかを理解する
    3. ログイン認証を行うために、Firebase Authenticationとプロジェクトのセットアップをする
    4. ユーザー登録の機能を実装する
    5. ユーザーログインの機能を実装する
    6. Cloud Firestoreのルールを、トークンがないとアクセスできないようにする
    7. Vuexを使用して、トークンをプロジェクト全体で使えるようにする
    8. トークンをヘッダーにつけてリクエストを送る
    9. beforeEnterガードを使って、ログイン状態に応じてリダイレクトする処理を実装する
    10. ログイン状態に応じてナビゲーションバーの内容を変更する
    11. リフレッシュトークンを使って、トークンの有効期限が切れても正しく動くような処理を実装する
    12. ブラウザのウィンドウを閉じた後もログイン状態を維持するための、自動ログインの処理を実装する
    13. autoLoginの補足
    14. ログアウトの実装
    15. まとめ

動画の詳細はこちら

Vue.js 3 入門決定版!jQuery を使わないウェブ開発 – 導入からアプリケーション開発まで体系的に動画で学ぶ

作成者中村 祐太
学習時間5時間
受講者数12,512人
レビュー (2,448件)
動画情報
こんな人にオススメ!
  • Vue JSは気になっているけどまだ試していない
  • jQueryからステップアップしたいWebエンジニア
  • jQueryからステップアップしたいWebデザイナー
  • HTML/CSS/JavaScriptの基礎知識はある
  • 多少のお金を支払うことで学習時間を短縮したい
  • 他の教材で学習をはじめたが挫折した

このコースでは、人気急上昇中の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分用意しましたので、ぜひご覧ください! 

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

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

動画の詳細はこちら

Vue.js + Firebaseで作るシングルページアプリケーション

作成者Kazuya Kojima
学習時間5時間
受講者数3,911人
レビュー (801件)
動画情報
こんな人にオススメ!
  • モダンなフロントエンド開発について学びたい方
  • Vue jsの基礎を学びアプリケーションの開発から公開までを経験してみたい方
  • Firebaseを使用してサーバーを構築せずに認証やデータベースの機能を使用してみたい方

このコースは、フロントエンド開発において人気のあるフレームワーク「Vue.js」の基礎から実践的な内容まで網羅的に学べるコースとなっています。

Vue.jsは単体で使用する他に、次のようなライブラリやツールを使用することで、幅広いアプリケーションの開発に対応できるようになっています。

  • Vue.js上のデータフローを管理するためのVuex
  • シングルページアプリケーションを実現するためのVue Router
  • Vue.jsの開発環境を素早く立ち上げることができるVue CLI
  • 様々なUIコンポーネント(本コースではVuetifyを使用したUIの作成について解説しています)

本コースではこれらのプラグインやツールを使用して、実践的な開発を想定して使い方を学んでいきます。

また、実際のアプリケーション開発を通して、開発環境の構築から認証機能の実装、アプリケーションの作成、デプロイ(アプリケーションの公開)までの一連の流れをこのコースで経験することができます。

アプリケーションを作成するに当たってはフロントエンドの開発の他に、データの永続化にデータベースが必要であったり、ユーザー認証が必要なケースがほとんどだと思います。

本コースではこれらの機能はBaaS(Backend as a Service)のFirebaseを使用して行きます。

具体的にはFirebaseの次のサービスの使い方を解説しています。

  • Authenticationを使用したGoogleアカウント認証機能
  • Cloud Firestoreを使用したデータベースの機能
  • Hostingを使用したアプリケーションの公開

これからVue.jsを学びたい方、より深く各ライブラリの使い方を学びたい方にぜひお勧めのコースとなっています。

上記のようにFirebaseの一部のサービスの使い方も解説していますので、Firebaseの使い方を学びたい、試しに使ってみたいという方にもぜひ受講して頂きたいと思っております。

  1. はじめに
    1. はじめに
  2. Vue.jsの学習環境の準備
    1. JSFiddleの使い方
    2. CDNを利用したVue.jsの導入
  3. Vue.jsの基礎
    1. Vueコンストラクタのelオプション
    2. Vueコンストラクタのdataオプション
    3. Vueインスタンスの$watchメソッド
    4. Vueインスタンスのwatchオプション
    5. Vue.jsのテンプレートと仮想DOMの関係について
    6. v-bindディレクティブの解説
    7. フィルター機能の解説
    8. computedプロパティの解説
    9. v-onディレクティブとmethodsプロパティ
    10. v-ifディレクティブとv-showディレクティブの解説
    11. v-if, v-else-if, v-elseディレクティブを使用した条件分岐
    12. v-forディレクティブの解説
    13. v-forディレクティブにおけるkeyの指定について
    14. v-modelディレクティブの解説
    15. templateオプションの解説
  4. Vueインスタンスのライフサイクル
    1. Vueインスタンスのライフサイクルとは
    2. ライフサイクルフックで呼び出されるメソッドの定義方法
  5. コンポーネントの基礎
    1. コンポーネントについての概要
    2. コンポーネントの作成方法
    3. コンポーネントの親子構造について
    4. コンポーネントのローカル登録とグローバル登録
    5. 親コンポーネントから子コンポーネントへのデータの伝搬
    6. propsとdataの違いについて
    7. 子コンポーネントから親コンポーネントへのデータの渡し方
    8. .sync修飾子を使用したのデータの渡し方
    9. スロットの使用方法について
  6. Vue CLIによる開発環境構築
    1. Vue CLIの概要
    2. Vue CLIの導入
    3. Vueコマンドによる開発環境のセットアップ
  7. エディターの紹介
    1. Visual Studio Codeの紹介
  8. Vue CLIで作成した開発環境の解説
    1. Vue CLIで作成したプロジェクトの 動作環境について
  9. 単一ファイルコンポーネントの解説
    1. 単一ファイルコンポーネントとは
    2. 単一ファイルコンポーネントの作成
    3. 単一ファイルコンポーネントの利用方法
  10. Vue Routerの解説
    1. シングルページアプリケーション(SPA)の解説
    2. Vue Routerの設定方法についての解説 その1
    3. Vue Routerの設定方法についての解説 その2
    4. router-viewとrouter-linkの使用方法
  11. アドレス帳アプリケーションの作成
    1. Vuetifyの導入
    2. Vuetifyのバージョンダウングレードについて
    3. 画面の整理とツールバーのカスタマイズ
    4. 画面の整理とツールバーのカスタマイズ(Vuetify2系の場合)
    5. サイドメニューコンポーネントの作成
    6. サイドメニューコンポーネントの作成(Vuetify2系の場合)
    7. サイドメニューコンポーネントの解説
    8. Vuexの解説
    9. メニューの開閉状態の管理 ストアの実装
    10. メニューの開閉状態の管理 コンポーネントからのストアの利用
    11. メニューの開閉状態の管理 コンポーネントからのストアの利用(Vuetify2の場合)
    12. メニューの開閉状態の管理 mapActionsの利用方法
    13. メニューの開閉状態の管理 mapActionsの利用方法(Vuetify2系の場合)
    14. 連絡先一覧ページの作成
    15. 連絡先一覧ページの作成(Vuetify2系の場合)
    16. レイアウト修正と サイドメニューへのリンク追加
    17. レイアウト修正と サイドメニューへのリンク追加(Vuetify2系の場合)
    18. 連絡先追加画面の作成
    19. 連絡先追加画面の作成(Vuetify2系の場合)
    20. 連絡先追加機能の作成
    21. 連絡先追加機能の作成(Vuetify2系の場合)
    22. Firebaseとは
    23. Firebaseを利用するためのセットアップ
    24. インストールするFirebaseのSDKについての注意点
    25. Firebaseのライブラリ追加と設定の修正
    26. Googleアカウントで ログインするための設定
    27. Googleログイン機能の実装
    28. Googleログイン機能の実装(Vuetify2系の場合)
    29. ログインユーザーの取得機能の実装
    30. ログアウト機能の実装
    31. ログアウト機能の実装(Vuetify2系の場合)
    32. ログイン状態による表示の切り替え
    33. ログイン状態による表示の切り替え(Vuetify2系の場合)
    34. ログイン状態によるルートの制御
    35. ログイン状態によるルートの制御(Vuetify2系の場合)
    36. Cloud Firestoreへのデータベースの設定
    37. Cloud Firestoreへのデータの保存
    38. Cloud Firestoreからのデータ取得
    39. 連絡先編集画面へのページ遷移
    40. Cloud Firestoreへのデータの保存(Vuetify2系の場合)
    41. 連絡先編集フォームへのデータの復元
    42. 連絡先データの更新処理
    43. 連絡先データの削除処理
    44. 連絡先データの削除処理(Vuetify2系の場合)
  12. アプリケーションの公開
    1. FirebaseのHostingを使用したアプリケーションのデプロイ

動画の詳細はこちら

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

作成者世界のアオキ
学習時間15.5時間
受講者数2,764人
レビュー (378件)
動画情報
こんな人にオススメ!
  • プログラミングに少しでも興味がある方
  • ホームページにVueJsも含めたいと思っている方
  • 本やWebで勉強したけれどいまいち身につかないと感じている方
  • モダンなフロントエンドに触れたい方

『Vue.js』はプログレッシブ(段階的)フレームワークと呼ばれ、はじめは小規模から、機能を追加することで大規模まで対応できるというつくりになっているのですが、いきなり小規模〜大規模を覚えようとすると、覚えることが多すぎて、『結局なにをどうすればいいのさ・・・』となってしまいがちです。

そんな実体験もありこの講座では、はじめはちょっとずつ、jQueryでもできることから取り組んで、『できる!』と思えるように時間をかけて進めるような構成にしています。

初心者の視点で、ちょっとでも『ん?』と思う箇所はできるだけ掘り下げ、スッキリした状態で先へ進めるように解説しています。

簡単でもいいのでできるだけ手を動かしてアプリをつくりつつ、知識だけでなく実際に使えるようになるような構成を意識しております。

Vue.js2の方が初心者向けということもあり、セクション1~9まではVue.js2でレクチャーし、セクション10以降でVue.js3を解説しています。

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

動画の詳細はこちら

【新着】[2022年決定版] Vue3 x Typescriptによるアプリケーションづくり

作成者Shuya Inada
学習時間6.5時間
受講者数208人
レビュー (31件)
動画情報
こんな人にオススメ!
  • HTML/CSSを理解して、webアプリケーションを作りたいプログラミング初級者

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

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

  1. 紹介
    1. 紹介
    2. このコースの全体像
    3. 開発環境の整備
  2. [オプション]JavaScriptとTypescript
    1. 変数
    2. 関数
    3. オブジェクト
    4. letとconst
    5. スプレッド構文とレスト構文
    6. 高階関数
    7. Typescriptと型
  3. Vueの導入
    1. 環境構築
    2. viteで作られたアプリケーション
    3. template, script, style
    4. templateについて
    5. scriptについて
    6. styleについて
  4. ComponentとCompositionAPI
    1. コンポーネント指向について
    2. 初めてのコンポーネント
    3. v-bind データを埋め込む
    4. v-on 処理を埋め込む
    5. ネイティブイベントを扱う
    6. 動的なアプリケーションへの入り口
    7. RefとReactive
    8. v-model 双方向バインド
    9. Computed Property
    10. watch
    11. CompositionAPIとOptionAPI
    12. script setup
    13. ライフサイクルの扱い方
  5. 動的なリスト
    1. イントロダクション
    2. 静的なリスト
    3. 動的なリスト 要素の追加
    4. 動的なリスト 要素の削除
    5. v-if 条件付きレンダリング
    6. まとめ
  6. コンポーネント同士のコミュニケーション
    1. イントロダクション
    2. Props 親から子へ
    3. Emits 子から親へ
    4. (optional) コールバック関数とEmit
  7. 初めてのアプリケーション開発
    1. イントロダクション
    2. 全体の構成を作る
    3. 動的なスタイリング
    4. 確認アラートを出す
    5. まとめ
  8. より深くコンポーネントを理解する
    1. イントロダクション
    2. Slots
    3. 動的なコンポーネント
    4. ダイアログとTeleport
  9. 大規模なアプリでのコンポーネント同士のコミュニケーション
    1. イントロダクション
    2. Provide / Inject
    3. InjectionKey
  10. より深くディレクティブを理解する
    1. カスタムディレクティブ
    2. modifiers (修飾子)
    3. v-modelとdropdown, checkbox, radiobutton
    4. v-modelとカスタムコンポーネント
  11. HTTPリクエストを扱う
    1. イントロダクション
    2. バックエンドのセットアップ
    3. POSTリクエスト データを作成する
    4. GETリクエスト データを取得する
    5. Loadingを扱う
    6. エラーを扱う
  12. アニメーションとトランジション
    1. イントロダクション
    2. CSSによるアニメーション
    3. Transitionによるアニメーション
    4. Modalのアニメーション
    5. Listのアニメーション

動画の詳細はこちら

【新着】【Vue.js + firebase + Vuetify】Vue.js入門!超実践チャットルームアプリ開発

作成者マイケル
学習時間5.5時間
受講者数22人
レビュー (1件)
動画情報
こんな人にオススメ!
  • Vue JSの基本を一通り学習し、実際の開発を通して、理解を深めたい初学者。

Vue.jsの基礎を学んだ後に、実践的な開発をしてみたい人向けのステップアップコースです!

  • Vue.js の基本は学んだけど、次に何をすればいいかわからない
  • 1からプログラムを書くとなると、全く手が動かない
  • 実務でも活かせるような実践的な内容で学びたい
  • ポートフォリオに何を作ればいいかわからない

といったVue.js, JavaScript の初学者の方に向けて本コースを作成しました。

認証機能や、DBはgoogle が提供しているfirebase というサービスを利用しています。firebase はモダンなフロントエンドの開発ではよく現場でも使用されているサービスです。

firebaseを利用することで、本来ならば、PHPやRuby, Python などのプログラミング言語を使用してバックエンドのプログラムを実装しないといけないところを、firebase があらかじめ、一般的なWebサービスで使用する機能を用意してくれるので、それらの機能を実装する必要がなくなり、より効率的に開発をすることができます。

また、デザインもある程度こだわりたいため、今回は、vuetify というVue.jsで使用できるUIフレームワークも導入しています。

Vuetifyを利用することでですね、特にデザインの知識がなくても、ある程度、見た目の良いデザインを実装することができます

Vue.js + Vuetify + firebase という3つのモダンなフロントエンドの技術を使用して、チャットアプリを開発してみましょう!

実際に実務でも実装する内容になっていると思いますので、現場でも参考になると思います。

また、ポートフォリオで何を作っていいかわからない方にとってもですね。本コースで開発したチャットアプリをベースに、ご自身の作りたいようにカスタマイズできると思います。

  • vue.js の基本を学んだけど、次に何をしていいかわからない人
  • プログラムの公式をなぞるだけではなく、実践的なアプリ開発をしてみたい人
  • ポートフォリオに何を作っていいかわからない人

にとてもおすすめできる内容になっているように思います

前半部分を無料で公開しているので、ぜひ参考にしてみてください。

  1. 紹介
    1. Vue.js環境構築をしよう
    2. Vuetifyで簡単UIデザインしてみよう
    3. Vue Routerでサイドメニューを作ろう
    4. ユーザー一覧を作成しよう
    5. チャット画面を作り込んでいこう
    6. チャット送信を実装しよう
    7. firebase の設定をしよう
    8. サイドメニューをコンポーネント化しよう
  2. ログイン機能作成
    1. ログイン画面を作成しよう
    2. v-card でログイン画面のレイアウトを調整しよう
    3. ログインフォームを作成しよう
    4. ログインフォームのバリデーションを実装しよう
    5. ユーザー新規作成画面のレイアウトを作成しよう
    6. ユーザー新規作成処理を実装しよう
    7. ユーザー新規作成処理に成功した場合・失敗した場合の処理実装
    8. フラッシュメッセージを実装しよう
    9. ログイン処理を実装しよう
    10. ログアウトメニューを追加しよう
    11. ログアウトを実装しよう
    12. ログイン状態を確認しよう
  3. ユーザー編集機能の実装
    1. ユーザーをセッション管理しよう
    2. ユーザーアイコンを変更しよう
    3. 画像選択したあとにイベントを発火させよう
    4. firebase のcloud storage に画像をアップロードしよう
    5. アップロードしたURLを取得して、アイコン画像を切り替えよう
  4. チャットルーム機能の実装
    1. firestore database にデータを登録しよう
    2. コレクションを取得しよう
    3. ルーム一覧を作成しよう
    4. ルーム新規作成フォームをモーダルで表示させよう
    5. ルーム新規作成フォームを作成しよう
    6. ルーム新規作成処理を実装しよう
    7. チャットページにルームIDを渡そう
    8. firestoreからドキュメントを取得しよう
    9. 取得したルーム名を表示させよう
    10. ルーム名のエラーを修正しよう
    11. メッセージをfirestoreから取得しよう
    12. 作成日時順にソートしよう
    13. メッセージ送信を修正しよう
    14. メッセージをfirestoreに保存しよう
    15. レクチャー39の補足
    16. リアルタイムに追加されたメッセージを表示させよう
  5. さいごに
    1. さいごに

動画の詳細はこちら