【Nuxt.js】入門から応用まで！【Firebase】と連携しWebアプリをつくってみよう【SPA】

Description

『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

What You Will Learn!

• NuxtJsを基礎からわかりやすく
• ES6の文法をメインに
• 自動ルーティング、自動インポートの使い方
• プラグイン、ミドルウェア、モジュールの組み込み方法
• asyncData, fetch, contextなどNuxtJsで用意されている仕組みの把握
• モダン開発の方法
• Vuetifyを使ったマテリアルデザインの構築方法

Who Should Attend!

• プログラミングに少しでも興味がある方
• NuxtJsでホームページやWebシステムをつくりたいと思っている方
• 本やWebで勉強したけれどいまいち身につかないと感じている方
• モダンなフロントエンドに触れたい方

TAKE THIS COURSE