ざきの学習帳(旧 zackey推し )

日々の学びを書きます

近況

ちまちま記事を書くモチベーションが出てきたので、近況を書く。

転職した

  • toC 向けに考えたい
  • フロントエンド中心(というより、事業を伸ばすというのを大前提のもと Core Web Vitals 等指標ベースで改善する動きをしたい)
  • Generative AI 利用やデータ分析に取り組んでいる

らへんを目的に転職した。

転職と同時に副業もいったんやめた(転職先で利用している技術等のキャッチアップ目的)。 キャッチアップするならブログも再開するか、と言う感じで本記事を書き始めた。

週一とは言わず、書きたい時に書くぐらいの温度感で再開する。

TIL 用のブログを Nuxt3, Nuxt Content v2 に移行中

github.com

のこと。Nuxt2 のままだったので移行中。 Nuxt3, Content v2 化 by zakizaki-ri9 · Pull Request #34 · zakizaki-ri9/blog · GitHub で大体置き換えた。Feed 等はまた時間見つけながら修正する予定。

普段の TIL は Nuxt3 のブログ。技術系メモは Zenn。その他ははてなブログてな感じに分けていこうと思う。

Nuxt(Vue) 2 だけど script setup 使ったら、体験良かった

QIita - Nuxt.jsアドベントカレンダー2021 の5日目記事です。(ちょうどネタがあったので投稿してみました)

結論、お試しできる Vue / Nuxt 2 環境があったら、unplugin-vue2-script-setupを導入すると、お手軽に<script setup>を体験できるよ、という話しです。

<script setup> については、次の記事がわかりやすいかと思います。

zenn.dev

Nuxt 2.x 環境で script setup を利用可能にする

を使って、次のブログを作りました。

Vue 3 から利用できる <script setup> も素振りしたいと思い、unplugin-vue2-script-setup を導入してみました。

github.com

導入した際のハマったことはこちら -> Vue / Nuxt 2系で <script setup> を使用するには unplugin-vue2-script-setup を導入する

<script setup>修正前後の diff

f:id:kic-yuuki:20211205093324p:plain

簡単な例ですが、赤枠の PostDateTime.vue を script setup 構文に変えてみたところ、次のようになりました。 by 元のコミット -> refactor: PostDateTime.vue を script setup に · zakizaki-ri9/blog@2c94d71 · GitHub

-<script lang="ts">
-import { defineComponent } from '@nuxtjs/composition-api'
+<script setup lang="ts">
import dayjs from 'dayjs'
type Props = {
  postedAt: string
}
+const { postedAt } = defineProps({
+  postedAt: {
+    type: String,
+    required: true,
+  },
+})
const format = (datetime?: string) => {
  return datetime ? dayjs(datetime).format('YYYY-MM-DD') : undefined
}
-export default defineComponent({
-  props: {
-    postedAt: {
-      type: String,
-      required: true,
-    },
-  },
-  setup({ postedAt }: Props) {
-    return { formatedPostedAt: format(postedAt) }
-  },
-})
+const formatedPostedAt = format(postedAt)
</script>

PostDateTime.vueは日付を表示するだけの簡単なコンポーネントですが、defineComponent内にネストした記述が不要となり、見通しが良くなったのがわかるかと思います。

おわり

年末年始に Vue / Nuxt 3 に触れてみようという方、もし Vue / Nuxt 2 環境下で試せるリポジトリがあれば unplugin-vue2-script-setup を導入し、<script setup>を触ってみてはいかがでしょうか。

docker/build-push-action@v2 のキャッシュ方法は cache.md を読むと参考になる

※本記事は docker/build-push-action@v2.7時点の情報を元に記述しています。

結論、cache.md とは次のことです。
build-push-action/cache.md at v2.7.0 · docker/build-push-action · GitHub

ほか、背景や調べたことをつらつらメモ書きしておきます。

背景

副業で Ruby on Rails の CI 環境を作る上で次の記事が参考になりました。

techracho.bpsinc.jp

しかし残念なことに、buildx/BuildKitランナーをVMのコンテキストでセットアップする(つまりDockerのキャッシュがエクスポート可能になり、正しくキャッシュできる)驚くほどシンプルな方法が存在するにもかかわらず、このドキュメントにはそのことが記載されていないのです。

以下は、docker/build-push-actionリポジトリから引用した公式なサンプルです。

前述にて、Local cacheを利用したワークフローのサンプルおよび、docker/build-push-action を利用したキャッシュ方法が記述されたリンクが紹介されています。

build-push-action/cache.md at v2.7.0 · docker/build-push-action · GitHub

Ruby on Rails に限らず、GitHub Actions 上で Docker build する機会がある場合、前述のサンプルが大いに参考になると思います。

cache-from, cache-to などの記述は Buildx のドキュメントを参考にする

GitHub Action to build and push Docker images with Buildx with full support of the features provided by Moby BuildKit builder toolkit. This includes multi-platform build, secrets, remote cache, etc. and different builder deployment/namespacing options.

About 記載されている通り docker/build-push-action@v2 は Buildx を利用して Build, Push, Cache などの Docker に関する操作が行われています。

Buildx とは docker build を強化するプラグイン。前述の記事内などで記述されている cache-from / cache-to など、キャッシュの読み書き先を指定など、色々できるみたいです。

お世話になった記事

「他人と自分を比較する」は生存本能として正常だから、卑屈にならなくて良いかも / 「生命科学的思考」を読んだ

たまには、エンジニアから離れて別職種の視点から物事を見たいと思い、手に取りました。

作者は、遺伝子検査のサービスを提供している会社の経営者です。

genequest.jp

経営者 かつ 研究者であることから、専門的な知識でありながら、遺伝子・生物学に詳しくない自分にもわかりやすく解説してくれるだろうと、感じました。

概要

次の点について、生命原則や遺伝子の科学的視点&作者の考え方が書かれていました。

  • なぜ人間は「感情」を持っているのか
  • なぜ人間は視野が狭いのか
  • 幸福と快楽の違い / 快楽に手を出してしまうのはなぜか
  • 情熱の原理

目次

  • 第1章 生命に共通する原則とは何か ー客観的に捉えるー
  • 第2章 生命原則に抗い、自由に生きる ー主観を活かすー
  • 第3章 一度きりの人生をどう生きるか ー個人への応用ー
  • 第4章 予測不能な未来へ向け組織を存続させるには ー経営・ビジネスへの応用ー
  • 第5章 生命としての人類はどう未来を生きるのか

ターゲット

書籍内で推奨されている方です。

  • 怒りや悲しみなどネガティブな感情に流されたくない
  • 意志を強く持ち続けたい
  • 組織作りやビジネスに生命科学の知見を応用したい
  • チームや人間関係のことで悩んでいる
  • 何かに打ち込むための情熱がほしい

感想

書籍で気になったポイントや影響を受けたことについて書きます。

色々な書籍を読んでも、自己肯定感の低さから抜け出せない方にオススメかと思います。

[影響] 「他人と自分を比べる」に対して、負の感情がなくなった(かもしれない)

不安・怒りといった負の感情は、遺伝子に組み込まれている生存本能によるものであると書かれています。

私は自己肯定感の低さに悩んでいました。さまざまな書籍や壁打ちによって、自己肯定感が一時的に高くなりましたが、自分より優れた人間を見たときに「他人と自分を比べる」を考え、実力差から劣等感を感じ、自己肯定感の低さから解放されずにいました。

「他人と自分を比べる」という考え方は、人間の遺伝子として正常な反応(生き残る上で自分に何が足りないか考えている)であると書籍で解説されていました。「他人と自分を比べる」は正常な反応と肯定されたことで、次のように考えるようになりました。

  • 「他人と自分を比べる」 -> 「自分が生き残るため、他人のスキルを分析している」と解釈するようになった
    • 実力差から劣等感を生む害悪から、生き残るために発動するスキルになった
  • 「他人と自分を比べる」を正常なこととして解釈することで、劣等感がなくなった(かもしれない)

(かもしれない)と記載したのは、この考えに至ってから1ヶ月ほどしか経っていないためです。1年くらい劣等感に悩むことがなくなったら、(かもしれない)を削除するかもしれません。

[気になったポイント] 思考停止はコスパ良し

考えることは、脳にとって大きなエネルギー消費となるため、思考停止はエネルギー消費を抑えようとする生存本能の正常反応だそうです。

仕事や勉強・創作活動といった生存本能に抗って活動されている方は、その行動力だけでもえらい!って考えると気持ちが楽になりそうです。

[気になったポイント] その他

色々書くとネタバレになりそうなので、気になったキーワードを並べておきます。

  • 情熱は未来差分と初速から生まれる
    • 意識高い=初速がある(行動している)人、意識高い系の人=初速がない(行動していない)人 の表し方はわかりやすかった
  • 思考停止の反対 -> 命を燃やす

@nuxt/content でブログつくった という近況報告

2ヶ月ぶりの投稿です。

zaki-blog という、雑に書くブログをつくったので、その報告です。

ブログ作ったきっかけ

雑記ブログはじめました という記事に書きました。

概要は次のような感じ。

  • 自分の砂場が欲しかった
  • 考え、趣味を気軽に吐き出したかった

使用技術

@nuxt/content

昨年末の UIT INSIDE ep.71 をきっかけに @nuxt/content という Nuxt.js の SSG (静的サイト生成)ライブラリの存在を知りました。

uit-inside.linecorp.com

content.nuxtjs.org

ブログつくるまでのコストが低そうだったので、使わせていただきました。

Composition API の素振りもしたくて、@nuxtjs/composition-api も導入しました。

composition-api.nuxtjs.org

ホスティング Vercel

Next.js との連携が協力で有名な Vercel にホスティングさせてます。

vercel.com

Netlify でもよかったのですが、Vercel でどういう設定ができるか試したかったのが理由です。

参考サイト

  • ブログ自作されている
  • @nuxt/content 使っている

主に前述に当てはまる方のリポジトリに参考にしています。
(自分のブログデザイン等が k● なのは、参考サイトのせいです。)

もっとさんの React, GatsbyJS の本も参考にしました。

最終的に自分が使用したのは、現スキルに応用が効く Nuxt.js ですが、コードベース x SSG でブログを作成する上で、参考となる知見が書かれている本でお世話になりました。

これからやること

  • feed.xml の id を Atom の仕様通りにする
  • OGP対応
  • Tailwind 抜く(かは検討中)

とか、いろいろありますが、無理せずやっていきたいと思います。