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

作者:寺田晃大
インプレスR&D

実践Firestore (技術の泉シリーズ（NextPublishing）)

今回は10, 11章をやりまして、今回ですべて終わりました。

本題

各バージョン

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"

成果

所感

この章も前回同様バージョン違いによるコードのブレはなく終わりました。

api_keyとかを privateRuntimeConfig とかを使いましたが、それくらいです。

終わりに

なんとか今月中に出来ました。

全体的な感想としては、自分の知識がないため、golangもnuxtもどちらも謎なところが多かったですね...

本見ながらやって、まだわかってない部分とかもあるので、継続的にいろんな本読んで写経してたらまた変わりそうです。

次回はこちらの本を写経予定。

作者:福田雄貴
インプレスR&D

リファクタリング既存のコードを安全に改善する（第2版）

現場からは以上です。

おまけ

以下の本読んでいます。

ちょっと案件が忙しいので、第一章読んで時間立ってしまっているので、もっかい最初から読む予定です。

2022-04-20

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

はじめに

こんばんは。

前回の続きです。

作者:寺田晃大
インプレスR&D

リファクタリング既存のコードを安全に改善する（第2版）

今回は9章メイン

本題

各バージョン

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"

とりあえず成果

所感

9章はバージョンの違いがあっても問題なく本通りのコードで再現できました。

go, nuxtで本章で追加したライブラリもバージョン違いがありますが、同じもので問題なかったです！

goのmodelを作ったのですが、phpとかでなれていると、若干違和感があり戸惑いました。

package models

import "time"

type Favorite struct {
    ID        uint      `gorm:"primary_key"`
    UserId    uint      `json:"user_id"`
    VideoId   string    `json:"video_id"`
    CreatedAt time.Time `json:"-"`
    UpdatedAt time.Time `json:"-"`

    User User
}

終わりに

次は10, 11章です。次で終わりそうです。

今月中にはいけそうかな？

現場からは以上です。

おまけ

以下の本読みはじめました。

まだ1章だけですが、サンプルコードがjavascriptなので、理解しやすく説明もわかりやすいです。

分厚い本なので時間かかりそうですが、頑張って読んでいきます。

2022-04-08

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

はじめに

こんばんは。

前回の続きです。

作者:寺田晃大
インプレスR&D

Engineers in VOYAGE ― 事業をエンジニアリングする技術者たち

今回は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"

とりあえず成果

所感

今回は１点、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章からです。

現場からは以上です。

おまけ

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

作者:株式会社VOYAGE GROUP 監修
ラムダノート (RMNTE)

リファクタリング既存のコードを安全に改善する（第2版）

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

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

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

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

2022-04-02

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

はじめに

こんばんは。

前回の続きです。

作者:寺田晃大
インプレスR&D

Engineers in VOYAGE ― 事業をエンジニアリングする技術者たち

今回は4章の続きから6章終わりまで

本題

各バージョン

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"

とりあえず成果

所感

6章までは go, nuxt含めとくに詰まるところはなかったです。

本のバージョンが最新とは違う問題も特に発生せずスムーズに行きました。

ただ1点、youtubeAPIでデータを取得する際に、 id,snippet という感じでデータを指定して取得するのですが、本では特に なんの問題もなく 取れる前提のコードで進んでいくのですが、僕が書いたものでは、 id,snippet と指定していても、 snippet があったりなかったりするデータがありました。

なので、本の通りにやると、snippet が取れない場合にエラーで落ちるという現象が発生しました。

v-if="Object.keys(item).indexOf('snippet') !== -1" とかで逃げられるのでそこまで問題はありませんでしたが、そこだけが現在のバージョンとの乖離かもしれません。

あ、あと最初は cssを tailwindを選んでて、css全くあたってなかったのですが、そろそろちゃんとしようと思って、ホント同様の bluma をあてましたw

後から変えたので、めんどくさかったですが、以下のような感じで当て終わりました。

コマンド

$ npm install bulma
$ npm install --save-dev sass sass-loader@10

// build時の警告を消すためにインストール
$ npm install --save-dev @nuxt/postcss8

ファイル修正 (nuxt-config.js)

  buildModules: [
    '@nuxt/postcss8'  ← 追加
  ],

  css: [
    'bulma'  ← 追加
  ],

終わりに

という感じで、そこまでつまらず出来ました。

てゆか知らなかったんですが、vscodeってターミナル分割できるんですね。

f:id:kojirooooocks:20220402113729p:plain

phpstormとかも出来ないのかな？

やり方誰か知ってたら教えて下さい。

あと、 air って停止したら see you again~ って出るの可愛いですね。

次回は7章からです。

現場からは以上です。

おまけ

最近以下の本を読んでいます。

長期で運用されているサービスや業界後発サービスの辛いお話や負債の返却の仕方とかがインタビュー形式で進んでいくので面白いです。

作者:株式会社VOYAGE GROUP 監修
ラムダノート (RMNTE)