
Nuxt JS入門
Nuxt JSを使用して効率よくVue.jsアプリケーションを構築しよう!Vue Routerを利用したルーティング設定、Vuexストアを使用した状態管理、非同期通信、アセットの取り扱いを学ぶ。カウンターアプリ、TODOアプリ開発に取り組む
レギュラー
合計時間:03:53:12
学習内容
■ 主な学習トピック
- Nuxt.jsの基礎を学ぶ
- Nuxt.jsとVuexによる状態管理を学ぶ
- Nuxt.jsとVue Routerの関係性について学ぶ
- Nuxt.jsとAxiosを使った非同期通信の開発方法を学ぶ
- Nuxt.jsを使ってカウンターアプリを開発する方法を学ぶ
- Nuxt.jsと Firebase連携させたSPA開発入門としてTODOアプリを開発する方法を学ぶ
■ 講座内容
このコースでは、Vue.jsアプリケーション開発を楽しくするためのフレームワーク「Nuxt.js(ナクストジェイエス)」を基礎から学びます。
このコースはVue.jsの基礎を習得済みであることを前提にコース制作をしています。
Nuxt.jsとは?
Nuxt.jsはJavaScriptでSPAを開発するためのフロントエンドフレームワークVue.jsをベースとして、Vue Routerによる状態管理、Vue Routerルーティング、サーバサイドレンダリング(SSR)、といったWebアプリケーション開発のベストプラクティスとなる各種機能を、最初から組み込み、Vue.jsを強化したものです。
東京都が運営する「新型コロナウイルス感染症対策サイト」、高級ホテル・レストラン予約サイト 「一休」、文章、写真、イラスト、音楽、映像などの作品配信サイト 「note」、「東京都 新型コロナウイルス感染症対策サイト」などにも利用されている、今注目の技術です。
Nuxt.jsを学ぶメリット
Vue.jsでは、本格的にアプリケーションを制作しようとした場合、Vue.jsを拡張するためのソフトウェアを自分で追加して、カスタマイズして実装するという手間が掛かりましたが、Nuxt.jsを使えば、Vue.js開発のベストプラクティスが揃った状態で、顧客が求める機能の開発に注力することができるようになります。
Vue.jsを使った開発では、基本的にはクライアント側における表示をサポートしているため、SEO対策の一環として、クローラーに気を遣って、あらかじめサーバー側でレンダリングするなどの対策が必要となるケースがありましたが、Nuxt.jsでは、Vue SSRというサーバサイドレンダリング機能がすぐに利用できます。
Vue.jsの知識が活かせて、はじめから顧客が求める機能の開発に注力できるNuxt.jsは、Vue.jsからのステップアップの学習テーマとして、とてもおすすめです。
カリキュラムの流れ
このコースでは Nuxt.jsによるアプリケーションを、最初から作成する方法をお伝えいたします。
簡単なHello World!プログラムから初めて、徐々にステップアップしていきます。
ECサイトのカートの1機能を想定した、カウンターアプリを作ったり、
Nuxt.jsとGoogle Firebaseを連携させて、TODO管理アプリケーションをSPAとして制作します。
学業や業務で忙しい皆さんが、短時間でNuxt.jsのポイントを習得できる内容となっております。
それでは、皆さんとコースの中でお会いできることを楽しみにしています。
■ 学習に必要な要件
- HTML・CSSの基礎
- JavaScriptの基礎(ES2015までの構文)
- Vue.jsの基礎
- Vue Routerの基礎
- Vuexの基礎
- npmの基本操作
- 基本的なLinuxコマンドが使える(ls, cd, mv等)
- パソコン(macOSまたはWindows)が利用できる
■ このコースのターゲット
- VueJSの基本を習得済み
- Nuxt,jsを使ったアプリケーション開発を学びたい
■ バージョン情報
- node v10.13 以上 最新の LTS バージョン
レクチャー一覧
- コースイントロダクション
- 1. コース紹介
- 開発環境構築
- 2. 開発環境構築
- はじめてのNuxt.js
- 3. イントロダクション-はじめてのNuxtJS
- 4. 補足:新規プロジェクトの作成について
- 5. macOS_新規プロジェクトの作成
- 6. macOS_VSCodeでプロジェクトを開く
- 7. Windows_新規プロジェクトの作成
- 8. Windows_VSCodeでプロジェクトを開く
- 9. ディレクトリ構造
- 10. デフォルトページについて
- 11. HelloWorld
- 12. ホットリローディング
- 13. マスタッシュ構文を使う
- 14. ページ遷移1
- 15. ページ遷移2
- 16. 演習_はじめてのNuxtjs
- 17. 演習回答はじめてのNuxt.js
- 18. スクラッチでプロジェクトを作成する_1
- 19. スクラッチでプロジェクトを作成する_2
- 20. セクションまとめ_はじめてのNuxtJS
- ルーティング
- 21. イントロダクション_ルーティング
- 22. 新規プロジェクトの作成_ルーティング
- 23. VueRouterの設定を確認
- 24. 階層構造
- 25. 動的なルーティング
- 26. パラメータのバリデーション
- ビュー
- 27. イントロダクション_ビュー
- 28. 新規プロジェクトの作成
- 29. アプリテンプレートのカスタマイズ
- 30. デフォルトレイアウトのカスタマイズ
- 31. エラーページのカスタマイズ
- 32. HTMLヘッダーのカスタマイズ
- 33. セクションまとめ_ビュー
- 非同期データ通信
- 34. イントロダクション_非同期データ通信
- 35. 新規プロジェクトの作成
- 36. axiosのインストール
- 37. 学習に使用するデータについて
- 38. データを取得して1件表示
- 39. 複数のデータを表示する
- 40. 演習_表示項目の追加
- 41. 演習回答_表示項目の追加
- 42. エラー処理
- アセット
- 43. イントロダクション-アセット
- 44. 新規プロジェクトの作成_アセット
- 45. 画像の表示
- 46. 静的なファイルの公開
- 47. セクションまとめ_アセット
- Vuexストアを利用した状態管理
- 48. イントロダクション-Vuexストアを利用した状態管理1
- 49. Vuexとは1
- 50. データフロー
- 51. 新規プロジェクトの作成
- 52. ストアの作成
- 53. ミューテーションの利用
- 54. ミューテーションの値渡し
- 55. アクションの利用
- 56. モジュールモードの利用
- 57. セクションまとめ
- カウンターアプリの開発
- 58. イントロダクション_カウンターアプリの開発
- 59. 新規プロジェクトの作成
- 60. ストアの作成
- 61. カウンターコンポーネントの作成
- 62. カウンターコンポーネントの利用
- 63. 動作確認_カウンターアプリ
- 64. 演習_リセット機能の追加
- 65. 演習回答_リセット機能の追加
- 66. セクションまとめ
- Nuxt.js & FirebaseによるSPA開発入門
- 67. イントロダクション - Nuxt.js & FirebaseによるSPA開発入門
- 68. 注意事項等
- 69. Firebaseについて
- 70. Firebaseの設定
- 71. 新規プロジェクトの作成
- 72. Firebase関連のパッケージのインストール
- 73. 環境変数の設定
- 74. firebaseとの連携
- 75. ストアの作成indexjs
- 76. ストアの作成todosjs
- 77. todos.jsの説明
- 78. Todosコンポーネントの作成
- 79. TODO追加機能
- 80. TODOリストを表示1
- 81. TODOリストを表示2
- 82. 削除機能
- 83. 完了・未完了チェックボックス
- 84. TODO実施状況によってスタイルを変更
- 85. 時刻フォーマットの成形
- 86. 細かい動作の修正1
- 87. 細かい動作の修正2
- 88. 動作確認