Nuxt.js のおすすめの教材7選！ 【 2023年3月 最新版】

『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にアップするところまでを解説しており、

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

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

(SSG, SSR, PWAなど)

■講座内のサンプル

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

■講座で扱っている内容

『Nuxt.js』

・create-nuxt-app

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

・ context

・オートルーティング

・オートインポート

・layouts/middleware/plugins/modules/assets

・VisualStudioCode拡張機能

・GoogleChrome拡張機能

・SPA

『Firebase』

・CloudFireStore

・Authentication

・Hosting

■ 今後追加予定

SSR

SSG

PWA

Nuxt.js3対応

CompositionAPI対応

■収録時のバージョン

・セクション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

このコースでは、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のポイントを習得できる内容となっております。

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

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

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

• 本コースの範囲を超えるご質問にはお答えできませんので、ご了承ください。

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

• Nuxt.js 2.8

• node.js v14.18.1

指定バージョン以外では、コースの学習はできません。

■更新履歴

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

  
  

  
  

1. コースイントロダクション
2. コース紹介
3. 受講オリエンテーション
4. 補足：受講オリエンテーション
5. よくあるご質問
6. 開発環境構築
7. 開発環境構築
8. はじめてのNuxt.js
9. イントロダクション - はじめてのNuxt.js
10. サンプルコードについて
11. 【macOS】新規プロジェクトの作成
12. 【macOS】 VS Codeでプロジェクトを開く
13. 【Windows】新規プロジェクトの作成
14. 【Windows】VS Codeでプロジェクトを開く
15. 【☆重要☆】Nuxt.jsのバージョンを動作検証済みバージョンへ変更しHello Worldプログラムを実行しよう
16. ホットリローディング
17. 補足：ホットリローディング
18. マスタッシュ構文を使う
19. ページ遷移①
20. ページ遷移②
21. 演習 : はじめての Nuxt.js
22. 演習回答 : はじめての Nuxt.js
23. スクラッチでプロジェクトを作成する①
24. スクラッチでプロジェクトを作成する②
25. セクションまとめ
26. コンテンツリクエスト募集中！
27. ルーティング
28. イントロダクション - ルーティング
29. 新・新規プロジェクトの作成
30. Vue Routerの設定を確認する
31. 階層構造について
32. 動的なルーティング
33. パラメータのバリデーション
34. ビュー
35. イントロダクション-ビュー
36. 新・新規プロジェクトの作成
37. アプリテンプレート
38. デフォルトレイアウト
39. HTML ヘッダー
40. セクションまとめ
41. 非同期データ通信
42. イントロダクション - 非同期データ通信
43. 新・新規プロジェクトの作成
44. axiosのインストール
45. 学習に使用するデータについて
46. データを取得して1件表示
47. 複数のデータを表示する
48. 演習：表示項目の追加
49. 演習回答：表示項目の追加
50. 補足：エラー処理
51. エラー処理
52. アセット
53. イントロダクション - アセット
54. 新・新規プロジェクトの作成
55. 画像の表示
56. 静的なファイルの公開
57. セクションまとめ
58. Vuexストアを利用した状態管理
59. イントロダクション - Vuexストアを利用した状態管理
60. Vuexとは
61. データフロー
62. 新・新規プロジェクトの作成
63. ストアの作成
64. ミューテーションの利用
65. ミューテーションの値渡し
66. アクションの利用
67. モジュールモードの利用
68. セクションまとめ
69. カウンターアプリの開発
70. イントロダクション-カウンターアプリの開発
71. 新・新規プロジェクトの作成
72. old削除予定：新・新規プロジェクトの作成
73. ストアの作成
74. カウンターコンポーネントの作成
75. カウンターコンポーネントの利用
76. 動作確認
77. 演習：リセット機能の追加
78. 演習回答：リセット機能の追加
79. セクションまとめ
80. Nuxt.js & FirebaseによるSPA開発入門
81. イントロダクション
82. 注意事項等
83. Firebaseについて
84. Firebaseの設定
85. 新・新規プロジェクトの作成
86. Firebase関連のパッケージのインストール
87. 補足:環境変数の設定
88. 環境変数の設定
89. Firebaseとの連携
90. ストアの作成 （index.js）
91. ストアの作成 （todos.js）
92. todos.jsの説明
93. Todosコンポーネント の作成
94. TODO 追加機能
95. TODOリストを表示①
96. TODOリストを表示②
97. 削除機能
98. 完了・未完了チェックボックス
99. TODO実施状況によってスタイルを変更
100. 時刻フォーマットの成形
101. 細かい動作の修正①
102. 細かい動作の修正②
103. 動作確認
104. ボーナスレクチャー
105. ボーナスレクチャー

フロントエンドに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をもっと使いやすくしたNuxtを、Vueをまだ触ったことがない人でもマスターできるように基礎から勉強できます。

また短時間できちんと実力をつけられるよう、文法のインプットをした後にWebサイトやWebアプリを開発していきながらアウトプットをしていきます。

ここで作成したWebサイトやWebアプリを、ぜひ就活・転職・副業で使って周りと差をつけてください！

● お知らせ

現在コースの作成中のため、Udemyの最低価格で販売をさせていただきながら作成をしています。

優しくアドバイスやレビューをUdemyやTwitterで送ってもらえると嬉しいです。

通常価格になる前のこのタイミングで購入してNuxtの勉強を初めましょう！

● Nuxtとは？

NuxtはJavaScriptフレームワークの一つで、Vueをベースに作られています。

Vueのよく使う機能（Router）を最初から設定・簡単に使えるようにしてくれています。

ZOZOやLINE, DMM, noteなどの日本の大手企業やベンチャー企業、中小企業でも採用されていることが多いため、就活や転職でとても役に立ちます。

● コースの流れ

今回のコースは大きくこのような流れで進んでいきます。

1. 始める前に知っておいて欲しいこと

2. Nuxtの文法

3. 環境構築

4. Figmaの使い方

5. 実践①おしゃれなWebサイトを作る

6. 実践②チャット&ToDoアプリを作る

「エンジニアとしてこれからやっていきたい」という方に知っておいて欲しい内容から、実務をする上で知らないと困ってしまう内容、Nuxtに関する実践的な内容まで、このコース１つで幅広くカバーできる内容になっています。

● 最後に

申し訳ありませんが、本コースは、以下のような方には、おすすめできません。

Nuxtでアプリを作ったことがある方には物足りないかもしれません
本コースは「Nuxtを用いたアプリを初めて1人でつくる方」を対象としています。
そのため、すでにアプリ制作を体験している方には物足りなく感じるかもしれません。

バック（サーバーなど）のことを学びたい方には向いていないかもしれません

Nuxtを用いたアプリ制作を主軸に置いているため、バックエンド（サーバー構築等）は、最低限のものに留めています。こちらを深く学びたい方には物足りなく感じるかもしれません。

自分で学ぶ意欲がない方には向いていないかもしれません

本コースでは、実際にWebアプリを制作しながらNuxtを習得していきますが、ご自身で調べること、確認することにも挑戦してもらうことがあります。

実務では、分からないことを自分で調べる能力が大変重要です。

一緒に「自ら学ぶ力」も育てていきましょう。

HTML, CSSを触ったことがない方は、ぜひProgateをやってみてから受講をしてください

HTML, CSSについては、本コースではサポートしません。

本コースでNuxtを効率良く習得するためにも、事前学習を行いましょう。

今すぐNuxtの勉強をはじめて、他の人に差をつけましょう！