Development
Web Development
Nuxt.js
Nuxt JS入門決定版！Vue.jsのフレームワークNuxt JSの基本からFirebaseと連携したSPAの開発まで
4.3 (310 ratings)
Course Ratings are calculated from individual students’ ratings and a variety of other signals, like age of rating and reliability, to ensure that they reflect course quality fairly and accurately.
2,362 students enrolled

Nuxt JS入門決定版！Vue.jsのフレームワークNuxt JSの基本からFirebaseと連携したSPAの開発まで

Nuxt JSを使用して効率よくVue.jsアプリケーションを構築しよう！Vue Routerを利用したルーティング設定、Vuexストアを使用した状態管理、非同期通信、アセットの取り扱いを学ぶ。カウンターアプリ、TODOアプリ開発に取り組む
Bestseller
4.3 (310 ratings)
Course Ratings are calculated from individual students’ ratings and a variety of other signals, like age of rating and reliability, to ensure that they reflect course quality fairly and accurately.
2,362 students enrolled
Created by 中村祐太 （Yuta Nakamura）, Proglus（プログラス） プログラミング教室
Last updated 5/2020
Japanese
Preview this course
Nuxt JS入門決定版！Vue.jsのフレームワークNuxt JSの基本からFirebaseと連携したSPAの開発まで
Current price: $62.99 Original price: $89.99 Discount: 30% off
5 hours left at this price!
Buy now
30-Day Money-Back Guarantee
This course includes
  • 4 hours on-demand video
  • 8 articles
  • 3 downloadable resources
  • Full lifetime access
  • Access on mobile and TV
  • Certificate of Completion
Training 5 or more people?

Get your team access to 4,000+ top Udemy courses anytime, anywhere.

Try Udemy for Business
What you'll learn
  • NuxtJSの基礎を学ぶ
  • NuxtJSとVuexによる状態管理を学ぶ
  • NuxtJSとVue Routerの関係性について学ぶ
  • NuxtJSとAxiosを使った非同期通信の開発方法を学ぶ
  • NuxtJSを使ってカウンターアプリを開発する方法を学ぶ
  • NuxtJS と Firebase連携させたSPA開発入門としてTODOアプリを開発する方法を学ぶ
Course content
Expand all 93 lectures 04:03:40
+ – コースイントロダクション
5 lectures 12:44

このコースの紹介をします。

  • カリキュラムについて

  • ターゲット受講生

  • 想定する前提知識

コース紹介
Preview 03:03
受講オリエンテーション
08:31
補足：受講オリエンテーション
00:31

サンプルコードについて説明します。

  • 添付資料

  • 掲載がない場合

  • アクセス方法

サンプルコードについて
00:26
よくあるご質問
00:12
+ – 開発環境構築
1 lecture 00:51

開発環境構築について説明します。

  • Webブラウザ

  • テキストエディタ

  • Node.js

開発環境構築
00:51
+ – はじめてのNuxt.js
18 lectures 51:50

このセクションについて説明します。

  • セクション概要

  • 主なカリキュラム

イントロダクション - はじめてのNuxt.js
Preview 00:36

新規プロジェクトの作成について説明します。

  • Windowsユーザーの方へ

  • Create Nuxt App

  • プロジェクト作成の実践

【macOS】新規プロジェクトの作成
Preview 08:50

VS codeでプロジェクトを開く方法を説明します。

  • VS Code

  • フォルダの選択

  • プロジェクト読み込み

【macOS】 VS Codeでプロジェクトを開く
00:46

新規プロジェクトの作成について説明します。

  • create-nuxt-app

  • ターミナルについて

  • プロジェクト作成の実践

【Windows】新規プロジェクトの作成
Preview 08:27

VS codeでプロジェクトを開く方法を説明します。

  • VS Code

  • フォルダの選択

  • プロジェクト読み込み

【Windows】VS Codeでプロジェクトを開く
01:26

ディレクトリ構造について説明します。

  • 主要な構造

  • 構成の把握

  • 各ディレクトリの説明

ディレクトリ構造
Preview 01:57

デフォルトページについて説明します。

  • ソースコードの確認

  • デフォルトページ

  • nuxtコンポーネント

デフォルトページについて
02:13

Next.jsを使って簡単な実装をします。

  • 目標物の確認

  • コードの記述

  • うまくいかない場合

Hello World!
Preview 02:07

ホットリローディングについて説明します。

  • 開発時の話

  • ホットリローディングのメリット

  • 実際に実装

ホットリローディング
01:14

一つ前のレクチャー「ホットリローディング」について補足説明を説明します。

補足：ホットリローディング
00:22

マスタッシュ構文を使ってみます。

  • マスタッシュ構文の活用

  • プロパティの作成

  • プロパティの内容を表示

マスタッシュ構文を使う
Preview 01:51

ページ遷移について説明します。

  • ページ遷移の実装

  • 目標物の確認

  • うまくいかない場合

ページ遷移①
Preview 02:02

ページ遷移について説明します。

  • ルートの定義について

  • vueルーターについて

  • 詳細を確認したい方

ページ遷移②
04:31

ここまでの内容を確認する演習です。

  • トップページとマイページ

  • ページ遷移

  • シングルページアプリケーション

演習 : はじめての Nuxt.js
01:12

ここまでの内容を確認する演習の回答です。

  • 雛形の作成

  • ページ作成

  • 演習回答

演習回答 : はじめての Nuxt.js
05:13

スクラッチでプロジェクトを作成する方法を説明します。

  • スクラッチ

  • 本質的な部分の見えやすさ

  • スクラッチでプログラムの作成

スクラッチでプロジェクトを作成する①
05:24

スクラッチでプロジェクトを作成する方法を説明します。

  • ディレクトリ内のファイルの削除について

  • package-lock.jsonについて

  • パッケージの相互関係

スクラッチでプロジェクトを作成する②
03:18

セクションのまとめをします。

  • セクションのカリキュラム

  • 次回のセクションについて

セクションまとめ
00:21
+ – ルーティング
6 lectures 16:11

このセクションについて説明します。

  • セクション概要

  • Vue Router

  • 主なカリキュラム

イントロダクション - ルーティング
01:12

新規プロジェクトの作成について説明します。

  • create-nuxt-app

  • 各種設定

  • 動作確認

新規プロジェクトの作成
02:29

Vue Routerの設定を確認します。

  • 設定の記載場所

  • ルーティングの自動生成について

  • ルートの定義更新

Vue Routerの設定を確認する
02:39

階層構造について説明します。

  • pages

  • path

  • 動作確認

階層構造について
02:09

動的なルーティングについて説明します。

  • 動的なルーティングの定義

  • 目標物の確認

  • ルーティングを実装

動的なルーティング
04:04

パラメータのバリデーションについて説明します。

  • 現在の状態

  • バリデーションの必要性

  • パラメーターのチェック

パラメータのバリデーション
03:38
+ – ビュー
7 lectures 18:52

このセクションについて説明します。

  • セクション概要

  • 主なカリキュラム

  • 復習

イントロダクション-ビュー
00:28

新規プロジェクトの作成について説明します。

  • create-nuxt-app

  • 各種設定

  • 動作確認

新規プロジェクト作成
01:45

アプリテンプレートのカスタマイズについて説明します。

  • 隠しフォルダ/ディレクトリ

  • テンプレートをカスタマイズする場合

  • noscriptタグ

アプリテンプレート
05:29

デフォルトレイアウトのカスタマイズについて説明します。

  • 基本的なレイアウトの定義

  • テンプレートについて

  • 関係性について

デフォルトレイアウト
02:23

エラーページのカスタマイズについて説明します。

  • 404ERROR

  • エラーページを定義するファイル作成

  • error.viewのルール

エラーページ
03:40

HTMLヘッダーのカスタマイズについて説明します。

  • ヘッダータグないの設定

  • 例題で学習

  • フォントの指定

HTML ヘッダー
04:46

セクションのまとめをします。

  • セクションのカリキュラム

セクションまとめ
00:21
+ – 非同期データ通信
9 lectures 19:19

このセクションについて説明します。

  • セクション概要

  • 非同期データ通信とは

  • 主なカリキュラム

イントロダクション - 非同期データ通信
00:46

新規プロジェクトの作成について説明します。

  • create-nuxt-app

  • 各種設定

  • 動作確認

新規プロジェクトの作成
02:04

axiosのインストールについて説明します。

  • JavaScriptで非同期通信をしない理由

  • axiosについて

  • インストールの実践

axiosのインストール
02:37

学習に使用するデータについて説明します。

  • JSONPlaceholder

  • 実務での利用について

  • 利用できなくなった場合

学習に使用するデータについて
01:49

データを取得して1件表示する方法について説明します。

  • 目標物の確認

  • メソッドについての補足

  • 特定のデータを取り出す方法

データを取得して1件表示
05:03

複数のデータを表示する方法について説明します。

  • v-for

  • 10人分のリスト表示

  • データをv-forで取り出す

複数のデータを表示する
02:20

表示項目の追加をする演習です。

  • 演習内容

  • 目標物の確認

  • コードの内容

演習：表示項目の追加
00:45

表示項目の追加をする演習の回答です。

  • v-for

  • 動作確認

  • 演習回答

演習回答：表示項目の追加
00:44

エラー処理について説明します。

  • エラーの原因

  • エラーの検証方法

  • .catchメソッド

エラー処理
03:11
+ – アセット
5 lectures 08:04

このセクションについて説明します。

  • セクション概要

  • アセット

  • 主なカリキュラム

イントロダクション - アセット
00:38

新規プロジェクトの作成について説明します。

  • create-nuxt-app

  • 各種設定

  • 動作確認

新規プロジェクトの作成
01:03

画像の表示について説明します。

  • 目標物の確認

  • 画像ファイルの配置位置

  • 画像の参照

画像の表示
03:36

静的なファイルの公開方法について説明します。

  • staticディレクトリ

  • staticディレクトリの画像へのアクセス

  • 例題を使って学習

静的なファイルの公開
02:27

セクションのまとめをします。

  • セクションのカリキュラム

  • 行ったことの詳細

セクションまとめ
00:20
+ – Vuexストアを利用した状態管理
10 lectures 34:17

このセクションについて説明します。

  • Vuexの基礎知識

  • Vuexとは？

  • 2つのモジュールモード

イントロダクション - Vuexストアを利用した状態管理
02:19

Vuexについて説明します。

  • Vuexとは？

  • Vuexのメリット/デメリット

  • 状態管理の例

Vuexとは
02:58

データフローについて説明します。

  • Vuexのポイント

  • 用語について

  • 値を書き換える場合

データフロー
03:04

新規プロジェクトの作成について説明します。

  • create-nuxt-app

  • 各種設定

  • 動作確認

新規プロジェクトの作成
00:37

ストアの作成について説明します。

  • Storeの実装

  • 記述の仕方について

  • クラシックモードの利用

ストアの作成
05:45

ミューテーションの利用について説明します。

  • 目標物の確認

  • ミューテーションを通した書き換え

  • 値を書き換えるための記述

ミューテーションの利用
05:07

ミューテーションへ値を渡す方法について説明します。

  • ミューテーションへ値を渡すには？

  • ペイロード

  • 第二引数の受け取り

ミューテーションの値渡し
02:29

アクションの利用について説明します。

  • アクションを経由する方法

  • actionsを作成

  • コンポネント側からアクションを呼ぶ

アクションの利用
04:57

モジュールモードの利用について説明します。

  • 2つのモードの違い

  • モジュールを変更する場合

  • モジュールモードの条件

モジュールモードの利用
06:34

セクションのまとめをします。

  • セクションのカリキュラム

  • 行ったことの詳細

セクションまとめ
00:27
+ – カウンターアプリの開発
9 lectures 15:49

このセクションについて説明します。

  • セクション概要

  • 完成品の動作確認

  • セクションの演習としての利用

イントロダクション-カウンターアプリの開発
02:06

新規プロジェクトの作成について説明します。

  • create-nuxt-app

  • 各種設定

  • 動作確認

新規プロジェクトの作成
00:46

ストアの作成について説明します。

  • ストアの実装

  • counterを用意

  • モジュールモードの使用

ストアの作成
01:54

カウンターコンポーネントの作成について説明します。

  • このレクチャーで作る部分

  • クリックでのcountUp

  • counterコンポーネント実装

カウンターコンポーネントの作成
03:25

カウンターコンポーネントの利用について説明します。

  • カウンターコンポーネントをトップページから利用

  • Counter componentのインポート

  • counterコンポーネント参照時の記述の仕方

カウンターコンポーネントの利用
01:54

動作確認を行います。

  • 修正事項

  • 保存の確認

  • 動作の確認

動作確認
01:52

リセット機能の追加をする演習です。

  • 目標物の確認

  • 手順について

  • 補足

演習：リセット機能の追加
01:07

リセット機能の追加をする演習の回答です。

  • リセット機能の追加

  • カウンターコンポーネントにボタン設置

  • 動作確認

演習回答：リセット機能の追加
02:12

セクションのまとめをします。

  • セクションのカリキュラム

  • 行ったことの詳細

  • 次回のセクションについて

セクションまとめ
00:33
+ – Nuxt.js & FirebaseによるSPA開発入門
22 lectures 01:05:11

このセクションについて説明します。

  • SPA開発入門

  • Nuxt.js

  • Google Firebase

イントロダクション
00:09

注意事項についてです。

  • Firebaseに登録するデータ

  • 他のユーザーが操作する可能性

  • 学習完了後の処理

注意事項等
00:19

Firebaseについて説明します。

  • Firebaseとは？

  • 料金

  • Cloud Firestore

Firebaseについて
02:32

Firebaseの設定について説明します。

  • プロジェクトの作成

  • データベース作成

  • Cloud Firestoreの設定

Firebaseの設定
03:45

新規プロジェクトの作成について説明します。

  • create-nuxt-app

  • SPAモードに設定

  • 各種設定

新規プロジェクトの作成
01:23

Firebase関連のパッケージのインストールについて説明します。

  • firebase

  • vuexfire

  • エラーの確認

Firebase関連のパッケージのインストール
02:42

環境変数の設定について説明します。

  • 環境変数の管理

  • dotenvの使用

  • dotenvファイルの作成

環境変数の設定
04:03

FIrebaseとの連携する設定について説明します。

  • firebaseの初期化

  • 初期化の重複防止

  • firebaseのエクスポート

Firebaseとの連携
02:41

ストアの作成(index.js)について説明します。

  • ライブラリの内部構造について知りたい場合

  • ミューテーションの注意

  • 動作の確認

ストアの作成 （index.js）
02:29

ストアの作成(todos.js)について説明します。

  • コードの入力について

  • 実装

  • 詳細の説明

ストアの作成 （todos.js）
03:46

todos.jsの説明をします。

  • 各部分の確認

  • 概要の理解

  • 次のレクチャーについて

todos.jsの説明
03:20

Todosコンポーネントの作成について説明します。

  • todos.viewの作成

  • 大枠の作成

  • firebase初期化

Todosコンポーネント の作成
02:54

TODOの追加機能を説明します。

  • 格納するデータ

  • addメソッド

  • addアクション

TODO 追加機能
05:50

TODOリストを表示する方法について説明します。

  • todos.viewの作成

  • todosの値を返すメソッド

  • コンピューテッドを経由する理由

TODOリストを表示①
02:38

TODOリストを表示する方法について説明します。

  • v-for

  • todo.idについて

  • 動作確認

TODOリストを表示②
02:41

削除機能の実装について説明します。

  • 削除時に呼ばれるメソッド

  • ここでのidについて

  • 削除ボタンの設置

削除機能
03:06

完了・未完了チェックボックスについて説明します。

  • toggle動作

  • dispatchメソッド

  • チェックボックス設置

完了・未完了チェックボックス
03:38

TODO実施状況によってスタイルを変更する方法について説明します。

  • スタイル

  • テンプレート側の変更

  • 動作確認

TODO実施状況によってスタイルを変更
02:33

時刻フォーマットの成形について説明します。

  • 日時フォーマット

  • momentのインストール

  • フィルターの用意

時刻フォーマットの成形
04:47

細かい動作の修正について説明します。

  • データ登録時のエラー解消

  • 現在のエラーの理由

  • v-if

細かい動作の修正①
02:31

細かい動作の修正について説明します。

  • ソート順の修正

  • 現在の並び順

  • 登録日時順に並べる

細かい動作の修正②
05:54

動作の確認を行います。

  • ソート順

  • 削除

  • toggle動作

動作確認
01:29
Requirements
  • HTML・CSSの基礎
  • JavaScriptの基礎(ES2015までの構文)
  • VueJSの基礎
  • Vue Routerの基礎
  • Vuexの基礎
  • npmの基本操作
  • 基本的なLinuxコマンドが使える（ls, cd, mv等）
  • パソコン(macOSまたはWindows)が利用できる
Description

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


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


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


Who this course is for:
  • VueJSの基本を習得済み
  • NuxtJSを使ったアプリケーション開発を学びたい
  • ★★すでにNuxt JSで開発されている方には向きません★★
  • ★★公式ドキュメントを読めば独学で入門できるベテランの方には向きません★★