【Nuxt入門】Vue.jsのベストプラクティスが詰まった”Nuxt.js”でのリアルタイムチャット開発を徹底解説
近年はwebでもネイティブアプリのような複雑なUIが求められるようになり、それに対応すべく作られたモダンな技術を扱えるフロントエンドエンジニアの需要がますます増してきています。
そこで、Rails や Laravelなどのwebアプリケーションフレームワークがある程度使えるようになってきたサーバーサイドエンジニアの方や、フロントエンドエンジニアを目指している方に向けて、SPA開発やモダンなフロントエンド開発の入門になれば良いなと思い本教材を作成しました。
また、サーバーサイドの開発をしなくても、ある程度のことはFirebaseを使えば簡単に実現が可能です。この機会に、Firebaseの便利さもぜひ体験していただければと思います。
Nuxt（Vue.js）を使ったSPA開発の基本的な手法の理解
本教材では、Vue.jsフレームワーク ”Nuxt.js” と MBaaS（mobile backend as a Service）サービスである ”Firebase” を使ってリアルタイムにやり取りが行えるチャットアプリを作成していきます。
環境構築から、基本的な機能をステップごとに作成していくので、実装を進めるにつれてNuxt（Vue.js）とFirebaseについての理解が深まることでしょう。
また、フロントエンドのアーキテクチャには、SPA（Single Page Aplication）を採用しており、リアルタイムチャットアプリの開発を通して、Nuxt（Vue.js）でのSPA開発の基本的な流れが学べるようになっています。
学習内容
- Vue.js + Nuxt.js を使った実践的な開発スキルを学びます。
- Firebase Authenticationを使ったサインアップ機能の開発を行います。
- アカウント登録機能の実装を通して画像アップロードとFirestoreについて学びます。
- チャット機能を通してリアルタイムなデータのやり取りについて学びます。
- Firebase Hostingを使ってアプリケーションを公開する方法を学びます。
- Vuexでのチャットデータの管理について学びます。
実際に作成するサービスの全体像
■ Nuxt では何をしているのか？
主に HTML の生成と状態に応じた HTML の変更を担当します。 表示に必要なデータは HTML を生成する時や変更する時に外部（今回は Firebase）から取得してきます。ちなみに、SPA（Single Page Aplication）となりますので、 ページ遷移などを行うときは毎回サーバーサイドで HTML を生成して返すのではなく、ブラウザ側で JavaScript を使って HTML を変更してページ遷移したように見せています。
■ Firebase では何をしているのか？
データの保存、ユーザー認証、画像保存処理を担当します。 本来は Rails や Laravel などサーバーサイドで自分で実装する必要のある機能ですが、今回は Firebase に変わりに行ってもらうことで HTML, javaScript のみでアプリケーション開発を可能にしています。
上記の画像と説明をみて、まだイマイチぴんと来ていない方も、教材にて解説をしていくのでご安心ください。
本教材の対象者
- モダンな技術を用いてリアルタイムチャットを作成してみたい方
- Vue.jsを学んだ次のステップとして、フレームワークであるNuxtを触ってみたい方
- Firebaseを使ったアプリケーション開発の大まかな流れを把握したい方
受講における必要条件
- HTML/CSS の基礎知識
- JavaScript の基礎知識
- Vue.js の基礎知識
簡単な解説はありますが、JavaScript や Vue.js を一度も触ったことの無い方は、まずは書籍等で学習することをおすすめします。
学ばないこと
本教材は HTML・CSS の解説、つまり作成するアプリケーションの見た目の解説は詳しくしていません。細かく知りたい方はご自身で調べていただければと思います。
本教材の対応バージョン
- Nuxt 2.1以降
本教材で質問対応可能なOSや環境
- Mac OS