もがき系プログラマの日常

もがき系エンジニアの勉強したこと、日常のこと、気になっている技術、備忘録などを紹介するブログです。

NuxtとGoではじめるWebアプリ開発を読んで勉強 vol.3

はじめに

こんばんは。

前回の続きです。

kojirooooocks.hatenablog.com

今回は7章〜8章まで

本題

各バージョン

go

$ go version
go version go1.18 darwin/amd64

echo

$ go get github.com/labstack/echo/v4
go: added github.com/labstack/echo/v4 v4.7.2

nuxt

"nuxt": "^2.15.8"

とりあえず成果

Image from Gyazo

所感

今回は1点、farebase周りで本のままだとよろしくない箇所がありました。

本のままだと version8の状態での使用方法になっており、現在はversion9になっており本のままだと動きませんでした。

plugins/firebases.js

import { initializeApp } from 'firebase/app'
import { getAuth } from 'firebase/auth'

const firebaseApp = initializeApp({
  apiKey: 'xxxxxxx',
  authDomain: 'xxxxxxx.firebaseapp.com',
  projectId: 'xxxxxxx',
  storageBucket: 'xxxxxxx.appspot.com',
  messagingSenderId: 'zzzzzzzzzzzz',
  appId: 'yyyyyyyyyyyyyyyyy'
})

const auth = getAuth(firebaseApp)
export default auth

使用方法は以下のようになりました。

store/index.js

import { createUserWithEmailAndPassword, signInWithEmailAndPassword, signOut } from 'firebase/auth'
import auth from '~/plugins/firebases'

export const actions = {
  // signup
  async signUp ({ commit }, payload) {
    await createUserWithEmailAndPassword(auth, payload.email, payload.password)
      .then((userCredential) => {
        const user = userCredential.user
        const token = user.getIdToken()
        this.$cookies.set('jwt_token', token)
        commit('mutateToken', token)
        this.app.router.push('/')
      })
      .catch((error) => {
        console.log(error)
        alert('登録できませんでした。')
      })
  },

  // login
  async login ({ commit }, payload) {
    await signInWithEmailAndPassword(auth, payload.email, payload.password)
      .then((userCredential) => {
        const user = userCredential.user
        const token = user.getIdToken()
        this.$cookies.set('jwt_token', token)
        commit('mutateToken', token)
        this.app.router.push('/')
      })
      .catch((error) => {
        console.log(error)
        alert('ログインできませんでした。')
      })
  },

  // logout
  async logout ({ commit }) {
    await signOut(auth)
      .then(() => {
        commit('mutateToken', null)
        this.$cookies.remove('jwt_token')
        this.app.router.push('/login')
      })
      .catch((error) => {
        console.log(error)
        alert('ログアウトできませんでした。')
      })
  }
}

8章はmysqlのセットアップです。 一応やったのですが、できればfirestoreとかで保存してみたいものでs。

次回は9章からです。

現場からは以上です。

おまけ

以下の本読み終わりました。

最近お仕事でテストの議論をすることがありまして、それもあってか以下の部分が印象に残りました。

実装から距離をとってテストを書くことでテストの独立性を保つ

わざと実装言語と別言語でテストコードを書くことで、テストと実装の距離をとり結合度を弱めるというのはすごく良いと思いました。

次はこちらを見る予定です。