【旧版】Nuxt.js 2入門

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.js v14.18.1
Nuxt.js 2.8

■更新履歴

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