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

このコースでは、Vue.jsアプリケーション開発を楽しくするためのフレームワーク「Nuxt（ナクスト）」を基礎から学びます。

このコースはVue.jsの基礎を習得済みであることを前提にコース制作をしています。

Nuxtとは？

NuxtはJavaScriptでSPAを開発するためのフロントエンドフレームワークVue.jsをベースとして、Vue Routerによる状態管理、Vue Routerルーティング、サーバサイドレンダリング（SSR）、といったWebアプリケーション開発のベストプラクティスとなる各種機能を、最初から組み込み、Vue.jsを強化したものです。

東京都が運営する「新型コロナウイルス感染症対策サイト」、高級ホテル・レストラン予約サイト 「一休」、文章、写真、イラスト、音楽、映像などの作品配信サイト 「note」などにも利用されている、今注目の技術です。

Nuxtを学ぶメリット

Vue.jsでは、本格的にアプリケーションを制作しようとした場合、Vue.jsを拡張するためのソフトウェアを自分で追加して、カスタマイズして実装するという手間が掛かりましたが、Nuxtを使えば、Vue.js開発のベストプラクティスが揃った状態で、顧客が求める機能の開発に注力することができるようになります。

Vue.jsの知識が活かせて、はじめから顧客が求める機能の開発に注力できるNuxtは、Vue.jsからのステップアップの学習テーマとして、とてもおすすめです。

カリキュラムの流れ

このコースでは Nuxtによるアプリケーションを、最初から作成する方法をお伝えいたします。

簡単なHello World!プログラムから初めて、徐々にステップアップしていきます。

ECサイトのカートの1機能を想定した、カウンターアプリを作ったり

タスク管理アプリケーションを制作します

日々の業務で忙しい皆さんが、短時間でNuxtのポイントを習得できる内容となっております。

詳細は無料プレビュー動画を10分用意しましたので、ぜひご覧ください！

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

■ 主な動作検証済みバージョン

「Nuxt 3対応コンテンツ」

• Nuxt 3.2.3

• node.js 18.15.0

  
  

「【旧版・サポート終了】Nuxt.js 2対応コンテンツ」

• Nuxt.js 2.8

• node.js v14.18.1

  
  

補足

• 指定バージョン以外では、コースの学習はできません（ご自身で問題解決ができる方を除く）。

• Nuxt.js 2に関する古いカリキュラムは、メンテナンスが困難なため、今後廃止予定です。

• 旧版（Nuxt.js 2）のカリキュラムにて学習中の方が困らないように、当面の間、旧版のレクチャーをコース後半に掲載いたしますが、メンテナンスとサポートは終了しております。

  
  

Q＆Aコーナーのご利用について

• 本コースの内容を超えるご質問にはお答えできませんので、あらかじめご了承ください。

• コース内で紹介する動作確認済みのサンプルコード以外の動作については、サポート対象外とさせていただいております。

• ご意見・ご要望や、コンテンツのリクエストは、コース内で紹介する専用のフォームにてお知らせいただけると幸いです。

■更新履歴

• 2023/5/2 Nuxt 3対応コンテンツを追加（タスク管理アプリを開発しよう）

• 2023/4/28 Nuxt 3対応コンテンツを追加（状態管理をしよう、カウンターアプリを開発しよう）

• 2023/4/24 Nuxt 3対応コンテンツを追加（アセットを使おう）

• 2023/4/23 Nuxt 3対応コンテンツを追加（非同期データ通信をしよう）

• 2023/4/14 Nuxt 3対応コンテンツを追加（ビューについて知ろう）

• 2023/4/8 Nuxt 3対応コンテンツを追加（ルーティングについて知ろう）

• 2023/4/4 Nuxt 3対応コンテンツを追加（コースイントロダクション、開発環境構築、はじめてのNuxt 3）

• 2021/10/22 全体的に動作確認とマイナーアップデートを実施

  
  

  
  

1. [v3]コースイントロダクション
2. [v3]Nuxt の概要を知ろう
3. [v3]開発環境を構築しよう
4. [v3]開発環境を構築しよう
5. [v3]具体的な開発環境構築手順について
6. [v3]はじめてのNuxt 3
7. [v3]イントロダクション - はじめてのNuxt 3
8. 補足：Q&A対応に関するガイドライン
9. [v3]受講オリエンテーション（Udemyのご利用が初めての方向け）
10. [v3]【macOS】新規プロジェクトを作成しよう
11. [v3]【Windows】新規プロジェクトを作成しよう
12. [v3]ディレクトリ構造を確認しよう
13. [v3]デフォルトページのコードを確認しよう
14. [v3]Hello Worldプログラムを実行しよう
15. [v3]ホットリロードについて知ろう
16. [v3]マスタッシュ構文を使おう
17. [v3]ページ遷移をしよう①
18. [v3]ページ遷移をしよう②
19. [v3]エラーを自力で解決できるようになろう
20. [v3]演習 : はじめての Nuxt3
21. [v3]演習解答 : はじめての Nuxt3
22. [v3]ルーティングについて知ろう
23. [v3]イントロダクション - ルーティングについて知ろう
24. [v3]新規プロジェクトを作成しよう
25. [v3]ルーティング、階層構造を確認しよう
26. [v3]動的なルーティングについて知ろう
27. [v3]パラメータのバリデーションを使おう
28. [v3]ビューについて知ろう
29. [v3]イントロダクション - ビューについて知ろう
30. [v3]新規プロジェクトを作成しよう
31. [v3]デフォルトレイアウトを拡張しよう
32. [v3]エラーページを表示しよう
33. [v3]補足：HTMLのヘッダー情報を設定しよう
34. [v3]HTMLのヘッダー情報を設定しよう
35. [v3]非同期データ通信をしよう
36. [v3]イントロダクション - 非同期データ通信
37. [v3]新規プロジェクトを作成しよう
38. [v3]補足：学習に使用するデータについて知ろう
39. [v3]学習に使用するデータについて知ろう
40. [v3]データを取得して1件表示しよう
41. [v3]複数のデータを表示しよう
42. [v3]エラー処理をしよう
43. [v3]アセットを使おう
44. [v3]イントロダクション - アセットを使おう
45. [v3]新規プロジェクトの作成しよう
46. [v3]画像の表示をしよう
47. [v3]静的なファイルを公開しよう
48. [v3]状態管理をしよう
49. [v3]イントロダクション - 状態管理をしよう
50. [v3]状態管理について知ろう
51. [v3]新規プロジェクトの作成しよう
52. [v3]状態管理をしよう
53. [v3]composablesディレクトリで状態管理をしよう
54. [v3]アクションを使おう
55. [v3]カウンターアプリを開発しよう
56. [v3]イントロダクション - カウンターアプリを開発しよう
57. [v3]新規プロジェクトを作成しよう
58. [v3]ステートを作成をしよう
59. 補足：アクションを作成しよう
60. [v3]アクションを作成しよう
61. [v3]タスク管理アプリを開発しよう
62. [v3]イントロダクション - タスク管理アプリを開発しよう
63. [v3]タスク管理アプリの設計を見てみよう
64. [v3]新規プロジェクトを作成しよう
65. [v3]ビューを作成しよう
66. [v3]タスクの追加機能を作成しよう
67. [v3]タスクの削除/クリア機能を作成しよう
68. [v3]補足：コピペ用のコード
69. [v3]（おまけ）スタイルを設定しよう
70. [v3]動作確認をしよう
71. ボーナスレクチャー
72. ボーナスレクチャー

Nuxt3の最新機能を使った開発を体験できるコースとなっています。

Nuxt3のcomposables, plugins, middleware, $fetch, useAsyncData, useFetchなど

最新規機能を使った開発を体験できます。

それだけでなくTailwind CSSやpiniaなどの実務で使うようなライブラリも使いながら2時間という短時間でまとめました。

■ 本コースの対象者

・Nuxtに入門したばかりの方

・Nuxt3の最新機能を使ってみたい方

・作品を使いながらNuxtの学習をしたい方

・ドキュメントを読むより動画で学習したい方

・Tailwind CSSを使ったスタイリングを学習したい方

・piniaを使った認証機能を実装したい方

実務で大規模なwebサイトを作る場合にはvueをそのまま使うより、Nuxtを使う機会が多いと思います。

Nuxt2からNuxt3へは大規模な変更が多く含まれるのでこのコースで学習してより深い知識を身につけましょう。

1. 本コースの紹介
2. 本コースで作るものについて紹介
3. Nuxt3開発環境を構築しよう
4. Nuxt3のプロジェクトを作成して開発サーバを起動しよう
5. Tailwind CSSを導入して表示を確認しよう
6. Naive UIを導入して表示を確認しよう
7. Nuxt3のuseFetchを使ってユーザーの一覧を取得してみよう
8. useFetchを使ってjsonplaceholderにリクエストしてみよう
9. 取得したデータをテーブル形式で表示しよう
10. Naive UIを使ってサイドメニューを実装しよう
11. Tailwind CSSを使って見た目を調整しよう
12. User一覧取得と同じようにPostの一覧も取得してみよう
13. サイドメニューの画面遷移を実装しよう
14. Nuxt3のplugins, composablesを使ってbaseURLを共通化しよう
15. piniaを使って認証機能を作成しよう
16. ログインページのUIを作成しよう
17. バリデーションを実装しよう
18. 入力した内容からユーザーの情報を取得しよう
19. piniaを導入してログインしているユーザーをストアに保存しよう
20. ストアに保存したユーザーをページ層から取得してみよう
21. Nuxtのmiddlewareを使って認証が必要なページとリダイレクト機能を作成しよう
22. ログアウト機能を実装しよう
23. ユーザー詳細画面を実装しよう
24. ユーザー一覧画面から詳細画面に遷移できるようにしよう
25. テーブルコンポーネントを共通化してみよう
26. ユーザーの詳細情報を取得しよう
27. ローディング機能とエラーが発生した時にはダイアログを表示しよう
28. ユーザーの詳細画面の見た目を調整しよう
29. ユーザーの基本情報を表示してみよう
30. ユーザーに属するポストの一覧を取得して表示しよう
31. ユーザーに属するアルバムの一覧を取得して表示しよう
32. ユーザーに属するTodoの一覧を取得して表示しよう
33. ポストの詳細情報を取得して表示しよう
34. ユーザーの新規登録、編集、削除ができるようになろう
35. 本セクションの紹介
36. ユーザーの新規登録ページを追加しよう
37. ユーザーの新規登録フォームのUIを作成しよう
38. ユーザーの入力内容を取得し、バリデーションを実行しよう
39. ユーザーを新規登録するためのPOSTリクエストを送ってみよう
40. ユーザー編集ページを追加しよう
41. ユーザー編集フォームの初期値にAPIから取得した値をセットしよう
42. ユーザーを編集するためのPATCHリクエストを送ってみよう
43. ユーザー削除ボタンクリック時に確認ダイアログを表示するようにしよう
44. ユーザーを削除するためのDELETEリクエストを送ってみよう

フロントエンドにNuxt.js、サーバーサイドにRails APIモードを使い、ログイン機能がついたWebアプリケーションを構築します。

認証機能にはJson Web Tokenを使用し、ログイン機能を一から構築します。

このレッスンで、ぼんやりしていたログインの仕組みを理解していきましょう。

開発環境にはDocker、本番環境にはHerokuを使用し、インターネット上にWebアプリケーションを公開します。

他人とのポートフォリオに差を付け、一つ上の転職活動にお役立てください。

1. イントロ
2. このコースで作れるもの
3. Docker入門
4. Docker for Macをインストールしよう
5. Dockerとは何か?
6. DockerComposeとは何か?
7. Dockerを使ったRails+Nuxt.js環境構築
8. 開発環境の全体像を理解する
9. Gitのインストールとセットアップ
10. Railsを動かすDockerfileを作成する 1/2 ~作成編~
11. Railsを動かすDockerfileを作成する 2/2 ~解説編~
12. Nuxt.jsを動かすDockerfileを作成する
13. Dockerfileのベストプラクティス
14. docker-compose.ymlの環境変数設計
15. .env, .gitignore, docker-compose.yml を作成する
16. docker-compose.ymlを理解する
17. Railsアプリを立ち上げる
18. Nuxt.jsアプリを立ち上げる
19. 複数プロジェクトのGit管理
20. Git管理の全体像を理解する
21. apiとfrontリポジトリのコミット
22. rootリポジトリのコミット
23. GitHubへのSSH接続設定
24. GitHubにプロジェクトをPushする
25. RailsAPI × Nuxt.js 初めてのAPI通信
26. 【Rails】"Hello"を返すコントローラーを作成する
27. 【Nuxt.js】axiosの初期設定を行う
28. 【Rails】CORS設定を行う
29. heroku.ymlを使ったDockerデプロイ
30. Heroku会員登録とHerokuCLIのインストール
31. 【Rails】Pumaの設定とheroku.ymlの作成 ~ デプロイ準備編 ~
32. 【Rails】開発環境の起動コマンドを変更する ~ デプロイ準備編 ~
33. 【Rails】HerokuCLI-manifestを使ってアプリを構築する ~ デプロイ準備編 ~
34. HerokuへSSH接続を行いRailsをデプロイする ~ デプロイ編 ~
35. 【Rails】HerokuのPostgreSQLを初期化する ~ デプロイ編 ~
36. 【Nuxt.js】Dockerfileの編集とheroku.ymlの作成 ~ デプロイ準備編 ~
37. 【Nuxt.js】Herokuにアプリを作成しプロジェクトをPushする ~ デプロイ編 ~
38. モデル開発事前準備
39. Railsアプリケーションのタイムゾーン設定
40. Railsデータベースのタイムゾーン設定
41. Railsのi18nとオートロードパスの設定を行う
42. モデル開発に必要なGemをインストールする
43. ユーザーモデル開発
44. ユーザーテーブル設計と認証設計を理解する
45. Userテーブルを作成する
46. Userモデルのバリデーション設定
47. バリデーションメッセージの日本語化
48. emailカラムのカスタムバリデーション設定
49. ユーザーテーブルにSeedデータを投入する
50. バリデーションテストの事前準備
51. Userモデルバリデーションテスト 1/2
52. Userモデルバリデーションテスト 2/2
53. Nuxt.jsからユーザーテーブルを取得する
54. Nuxt.js フロント開発事前準備
55. UIフレームワーク Vuetifyを導入する
56. VuetifyにカスタムCSSを追加する
57. nuxt-i18nを導入する
58. ログイン前のレイアウト構築
59. Nuxt.jsのレイアウト・ページ・コンポーネントの役割を理解しよう
60. 【ウェルカムページ 1/4】コンポーネントファイル群を作成しよう
61. 【ウェルカムページ 2/4】アイキャッチ画像・アプリ名・メニューを表示しよう
62. 【ウェルカムページ 3/4】スクロールイベントでツールバーの色を変化させよう
63. 【ウェルカムページ 4/4】レスポンシブデザインに対応させよう
64. ログイン前のレイアウトファイルを作成しよう
65. 会員登録フォームを作成しよう
66. 親子コンポーネント間の双方向バインディングを理解しよう
67. 会員登録フォームの双方向バインディングを実装しよう
68. Vuetifyを使った会員登録フォームのバリデーション設定
69. ログインページを作成しよう
70. ログイン後のレイアウト構築
71. ログイン後のツールバーを作成しよう 1/2 ~下準備編~
72. ログイン後のツールバーを作成しよう 2/2 ~inject編~
73. NuxtChildコンポーネントを理解しよう
74. NuxtChildを使ってアカウントページを作成しよう
75. ログイン後のトップページにプロジェクト一覧を表示しよう
76. 動的なルートに表示する個別プロジェクトページを作成しよう
77. ナビゲーションドロワーを作成しよう
78. Vuexを理解しよう
79. middlewareを理解しよう
80. パンくずリストを追加しよう
81. エンターキーでフォームを送信しよう
82. サーバーサイドのログイン認証
83. JWTとは何か?
84. RailsコンソールからJWTを発行してみよう
85. JWTの3つのメリットと注意点を理解しよう
86. JWTを使ったログイン認証の流れを理解しよう
87. JWTの初期設定ファイルを作成しよう
88. トークン発行クラスの共通モジュールを作成しよう
89. リフレッシュトークンクラスを作成しよう
90. アクセストークンクラスを作成しよう
91. トークンを簡単に扱うためのモジュールを作成しよう
92. アクセストークンからcurrent_userを取得しよう
93. リフレッシュトークンからsession_userを取得しよう
94. 認証を行うコントローラーを作成しよう
95. 認証コントローラーのテストをしよう
96. 認証モジュールのテストをしよう
97. 本番環境のクレデンシャル設定をしてHerokuにデプロイしよう
98. フロントエンドのログイン認証
99. Nuxt.jsからRailsへログインリクエストを送ろう
100. ログインレスポンスをVuexに保存しよう
101. アクセストークンを使ってプロジェクト一覧を取得しよう
102. ログアウト機能を実装しよう
103. リフレッシュトークンを使ってログイン状態を維持しよう
104. サイレントリフレッシュでアクセストークンを更新しよう
105. ログイン前ユーザーのリダイレクト処理を行おう
106. グローバルイベントのトースターを作成しよう
107. ログイン前ユーザーがアクセスしたルートを記憶しよう
108. ログイン済みユーザーのリダイレクト処理を行おう
109. エラーページをカスタマイズしよう
110. Herokuにデプロイして、本番環境でログインしてみよう
111. 本番環境への対応
112. ブラウザのサードパーティCookie拒否に対応する
113. Nuxt.jsにカスタムドメインを設定してSSL化しよう
114. Nuxt.jsにSSLリダイレクト処理を行おう
115. Railsにカスタムドメインを設定してSSL化しよう
116. RailsにSSLリダイレクト処理を行おう【完】

Vue.jsを基盤としたフレームワーク『Nuxt.js』のバージョン3を用いたWEBサイト開発の方法が学習できるコースです。

WEBアプリ開発を通して、プログラミング言語『TypeScript』の記述の基礎も学ぶことができます。

Nuxt3やTypeScriptを完璧に理解するというより、まずはNuxtでのWEBアプリ開発をどのようにして進めれば良いのか、実践形式で学ぶことによって、開発者のスタートラインに手っ取り早く立ちたい方に向けての動画です。

学習範囲

• Nuxt.js

• Vue.js

• Vuetify

• Tailwind CSS

• TypeScript

1. はじめに
2. このコースの紹介
3. 環境構築
4. 環境構築・プロジェクト作成
5. Vuetifyの設定
6. tailwindの設定
7. pages作成
8. layouts作成
9. カウントアップ
10. 変数宣言
11. ボタン作成・アイコンを使うための設定
12. ボタンを押したときに数字が1ずつ増える処理を作成
13. ToDo管理アプリ
14. ToDo追加
15. 画面遷移
16. composables作成
17. components作成
18. middleware作成
19. さいごに
20. このコースで学んだ内容のまとめ

『Nuxt.js』は、

近年人気のJSフレームワーク『Vue.js』を拡張し、

さらに便利にWebサイト、Webシステムを使えるようにしたフレームワークです。

複数のモード切替と、

ライブラリを使用したモードなど様々な要求に対応できる機能を持っています。

・SPA (シングルページアプリケーション)

・SSR (サーバーサイドレンダリング)

・SSG (静的サイト生成)

・PWA (プログレッシブウェブアプリケーション)

ただでさえ『Vue.js』が多数の機能を持つのに加え、

『Nuxt.js』専用の機能もたっぷり増えているため、

『結局なにをどうすればいいのさ・・・』となってしまいがちです。

そんな実体験もありこの講座では、

はじめは『Nuxt.js』で追加されている機能に絞り、

少しずつハンズオンで確かめながら、

『できる！』と思えるように時間をかけて進めるような構成にしています。

初心者の視点で、

ちょっとでも『ん？』と思う箇所はできるだけ掘り下げ、

スッキリした状態で先へ進めるように解説しています。

簡単でもいいのでできるだけ手を動かしてアプリをつくりつつ、

知識だけでなく実際に使えるようになるような構成を意識しております。

2022年1月現在、

Nuxt.js3がパブリックベータ版でまだマニュアルが出揃っていない事もあり、

まずは『Nuxt.js2』でレクチャーし、

『Nuxt.js3』正式リリース後に追加していく予定になっています。

また、

講座リリース時点ではSPAアプリをFirebaseにアップするところまでを解説しており、

他のモードについては受講いただいた方のアンケートなども参考に、

講座内容を拡充していく予定としています。

■講座内のサンプル

簡易読書管理アプリ(GoogleBooksAPI+Vuetify+Firebase)

■講座で扱っている内容

『Nuxt.js』

・create-nuxt-app

・ライフサイクル(asyncData, fetch)

・ context

・オートルーティング

・オートインポート

・layouts/middleware/plugins/modules/assets

・VisualStudioCode拡張機能

・GoogleChrome拡張機能

・SPA

『Firebase』

・CloudFireStore

・Authentication

・Hosting

■ 今後追加予定

Nuxt3(時期未定)

■収録時のバージョン

・セクション2～4

Nuxt.js 2.15.7

Vuetify 2.3.10

Node.js 12.16.2

・セクション4

Firebase (JS SDK) 9.6.2

1. 紹介
2. 講座の内容
3. 講座の進め方、資料の場所など
4. 講座で扱っている資料・サンプルコード
5. Nuxt.jsの概要
6. NuxtJs2を使ってみる
7. NuxtJs2のインストールその1
8. NuxtJs2のインストールその2
9. npm run build
10. 講座で扱っているバージョンに合わせる方法
11. フォルダ構成
12. VSCode拡張機能(Vetur他)
13. Vue.js devtools (GoogleChrome拡張機能)
14. ルーティング Vue.jsとの違い
15. ルーティング Nuxtの場合
16. RestAPIを参考にルーティングをつくる
17. テーブルをつくりリンクを張ってみる
18. オートインポート機能
19. フォルダ名なしでオートインポートする方法
20. レイアウト
21. ライフサイクル(asyncData, fetch(引数ありなし)
22. context
23. asyncData, fetch
24. middleware (全てのページで実行)
25. middleware (一部のページで実行)
26. plugins (dayjs) その1
27. plugins (dayjs) その2
28. modules その1
29. modules その2
30. assets
31. NuxtJsでGoogleBooksAPI (SPA)
32. Google Books API の説明
33. Google Books APIの呼び出し確認
34. LocalStorageの解説
35. LocalStorage
36. VueJs2のおさらい その1 (ディレクティブ、OptionsAPI)
37. VueJs2のおさらい その2 (VueRouter, Vuetify)
38. NuxtJsのインストール(Vuetify)
39. ファイル・フォルダの確認
40. layouts/default.vueの調整
41. Header, Footerの切り離し
42. NuxtChild
43. search その1 検索まで
44. search その2 検索0件時の対応
45. search その3 v-cardで表示
46. localStorageへの保存
47. search->editへの移動と表示
48. mounted->createdへの変更
49. beforeRouteEnter (ナビゲーションガード)
50. edit カレンダーなど
51. edit -> index
52. 一覧画面(book/Index.vue)
53. book/edit/_id.vue dateの修正
54. LocalStorage一括削除
55. リダイレクト asyncData({ redirect })
56. サンプルアプリの補足
57. Firebase & SPA
58. Firebaseの概要
59. プロジェクト作成
60. セクション4フォルダの準備
61. firebase SDK のインストール・設定
62. pluginのinjectとnuxt.config.jsへの追加
63. Firestoreの設定
64. Firestore データの追加
65. Firestore データの取得
66. Firebase/Firestoreマニュアルの紹介
67. Authenticationの設定
68. ユーザー登録
69. ログイン
70. ログイン中か確認するために Vuexの解説
71. Vuex サンプル1 increment
72. Vuex サンプル2 todo
73. store/auth.js
74. ログインをVuexで書いてみる
75. ログアウト処理
76. ログイン画面のメニュー非表示
77. middlewareの作成
78. redirectの設定
79. ロードでstateが消えるので対策
80. firebase CLI インストール
81. FirebaseへDeploy
82. 補足
83. Node.jsのインストール方法
84. コマンドプロンプトの使い方(Windows)
85. VS Codeインストール その1
86. VS Codeインストール その2