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

Nuxt.js は、人気の JavaScript フレームワークである Vue.js をベースに、WebサイトやWebアプリケーション開発をより効率的にするための強力なフレームワークです。SPA (シングルページアプリケーション)、SSR (サーバーサイドレンダリング)、SSG (静的サイト生成)、PWA (プログレッシブウェブアプリケーション) など、多様な要件に対応できる豊富な機能が特徴です。

Nuxt.js を学ぶメリット

Vue.js の機能に加えて、Nuxt.js 専用の機能が多数搭載されており、開発の選択肢が広がります。しかし、その多機能性から「何から始めれば良いのか？」と迷ってしまう方も少なくありません。

この講座では、Nuxt.js の機能を段階的に理解し、実践を通して「できる！」と思えるように設計されています。特に初心者の方に焦点を当て、疑問点や不明点があれば丁寧に解説します。手を動かしてアプリを開発しながら、知識を習得し、すぐに実務で活用できるスキルを身につけることを目指します。

2022年1月現在、Nuxt.js 3 はまだパブリックベータ版であり、公式ドキュメントが完全には整備されていません。そのため、まずは Nuxt.js 2 に焦点を当ててレクチャーを行います。Nuxt.js 3 が正式リリースされた際には、追加コンテンツを随時更新予定です。

講座リリース時点では、SPA アプリを Firebase にデプロイする手順を解説しています。受講者の皆様からのフィードバックを参考に、他のモードに関する解説も拡充していく予定です。

講座で作成するサンプルアプリ

本講座では、以下の機能を備えた簡易読書管理アプリを開発します。

• Google Books API を利用した書籍検索
• Vuetify を用いた洗練されたUI
• Firebase を利用したデータ保存と認証

講座で扱う技術

• Nuxt.js:
  • create-nuxt-app によるプロジェクト作成
  • asyncData、fetch を利用したライフサイクル
  • コンテキストの理解
  • オートルーティング
  • オートインポート
  • layouts、middleware、plugins、modules、assets の活用
  • Visual Studio Code 拡張機能
  • Google Chrome 拡張機能
• Firebase:
  • Cloud Firestore
  • Authentication
  • Hosting

今後の予定

• Nuxt.js 3 の解説 (時期未定)

収録時のバージョン

• Nuxt.js: 2.15.7
• Vuetify: 2.3.10
• Node.js: 12.16.2
• Firebase (JS SDK): 9.6.2

この講座を受講することで、Nuxt.js を活用した効率的な Web アプリ開発の基礎を習得し、実践的なスキルを身につけることができます。