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

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

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

はじめに

こんばんは。

前回の続きです。

kojirooooocks.hatenablog.com

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

とりあえず成果

Image from Gyazo

所感

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章からです。

現場からは以上です。

おまけ

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

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