いままでVue.jsのテンプレートでWebサービスを作ったことはあったのですが、Nuxtでちゃんと作ったことがなかったので勉強しています。 Twitterでは再勉強とか書いてしまったんですが、記憶をたどっても create-nuxt-app 以上のことをした覚えがありませんでした…。

プログラミングの勉強方法といってもいろいろとありますが、自分の場合は「とりあえず教本のレクチャーを全部やって、そこからできあがったものを弄くり回す」が一番身につくように感じました。 前回のUnityとBlenderの勉強も同様のやり方です。 そうした理由で、教本にするのはレクチャー通りに進めれば最終的にモノができあがる本を選んでいます。

今回は、Boothで売られていた技術書で勉強しました。

Nuxt & Firebaseではじめる！サーバーレスWebアプリ開発入門 - minetti - BOOTH

本書では簡単なQAサービスを作るまでがレクチャーされています。 実装内容はSSRでFirebase Authenticationでのアカウント認証・投稿（編集と削除含む）・Firebaseへのデプロイと、自分にはちょうどよい内容でした。

• Firestoreのセキュリティルール
• 何かしらのCIを使ったデプロイや、デプロイ環境の切り替え
• 一部UIの詳細な実装（ウィンドウサイズでメニューが消える）
• メール／パスワード以外のアカウント認証

このあたりは本書では省略されています。 いったん本書の内容はすべて実装したので、いまはこうした省略部分をちゃんと実装しながら、今後サービスを作る上のお手本プロジェクトを作っているような段階です。

とりあえず、GitHub ActionsでStaging環境とRelease環境それぞれのデプロイができる下地と、ハンバーガーメニューの表示までを実装。 ほかにもFirebase Storageと連携した画像のアップロードとか、FirebaseUIやメールリンクでのアカウント認証方法も、ここで実装方法を確認したい。

ちなみにハンバーガーメニューの表示は下記のQiita記事を参考に、ストアにメニューの表示／非表示のステータスを追加して管理するようにしました。

Nuxt.jsにBulmaを組み込んだら、Vuexストアが理解できた件 - Qiita

いま作っているプロジェクト自体はサイトやコードを公開する予定はないですが、これを下地に何かしらのWebサービスを、できれば年内に公開しないなあと思ったところでこの記事は終わりです。

yamacraftを支援する

記事への感謝や応援を、コーヒー1杯分の支援で行うことができます。支援を受けると、さらに頑張って記事を書くようになります。