UGA Boxxx

つぶやきの延長のつもりで、知ったこと思ったこと書いてます

【Webパフォーマンス】CloudinaryでBlurをかけたら画像サイズが約70%削減された

コアWeb Vitalsの一つLCPを改善したい

対応策としては調査済みで、

改善方法

だいたいのことはやったが最大画像サイズが推奨最大サイズの約144KBを超えてしまうのでそこをなんとかしたい

そこで、ビジネスサイドと交渉し、その画像にBlur(ぼかし効果)をかけてみることになった

Blurでどれくらいファイルサイズが落ちるのか検証したところ、これくらいのぼかし具合で 298kB → 87.2kB まで小さくなった

実際にはこれにテキストが入るので、背景画像が多少ぼかしていても問題ないと判断し採用された

画像はCloudinaryを使っていたので、,e_blur:300というのをURLに含めるだけで実現する

cloudinary.com

ビジネス側とうまく交渉できればお手軽にLCPは改善するかもしれない

【TypeScript】SymbolでIDを公称型にする

TypeScriptで元はstringだが型定義したIDを作りたいとき

type AreaId = string;

のように定義していたが、TypeScriptは構造的な部分一致により同一の型かどうかを判断しているので、これではどんなstringの文字列も通してしまう

そこで厳密に区別される仕組みがないかを調べた

qiita.com

上の記事を参考にすると、特定のID型を簡単に作るには Symbolを使って以下のようにするのがよいみたい

const id = Symbol();
type AreaId = string & { [id]: never };

シンボル | TypeScript 日本語ハンドブック | js STUDIO

ただ、これだとAreaIdを定義する際にasを使わざるを得ず、少し雑になる

もしIDが何かしらのフォーマットに基づいていて精査できるのであれば型ガードでチェックしてから使うのがよい

例えば、あるID(ValidId)のフォーマットが「数字」と「言語コード」を組み合わせたもの(12345:ja)であるならば

const isValidId = (value: string): value is ValidId => {
   if (!value) false
   const [number, lang] = value.split(":")
    return !Number.isNaN(+number) && Object.prototype.hasOwnProperty.call(LANG_CODE, lang)
}

と精査できて、この条件式を通過した値はValidId型であると保証される

【Figma】Config2022での新機能を触ってみた

Figma Config 2022 発表されたアップデートのうち、気になった機能を触ってみた

Figma Releases

Auto Layout

Auto Layoutは入れ子になっている要素の長さや数に応じて、自動的にオブジェクトのレイアウトを調整してくれる機能

これの複数要素間のスペースをマイナスにすることができるようになったので、重なりを表現できるようになった

それだけでなく、重なりの順番も指定できるようになった

あとは、position: absolute(絶対値による位置指定)も表現できるようになった

詳しくはこちら

www.figma.com

Component Properties

Component Properties はコンポーネントがもつ属性のうち、booleanやtextや子コンポーネントを変更可能なプロパティとして定義することができる

例えば、showImageというトグルで画像の表示/非表示をコンポーネントの利用者側で設定できるようにするなど  

よりReactやVue.jsでいうpropsと同じ定義ができるようになった

Variantsとの違いは以下

詳しくはこちら

www.figma.com

【Github Actions】ブランチ名を取得したい

ChromaticのビルドをGithub ActionsのJobにするときにブランチ名を使いたい

Github Actionsでブランチ名を取得するにはどうするか調べた

以下の記事が参考になった

qiita.com

プルリクエスト時は以下

マージするブランチ名は ${{github.head_ref}}
マージ先のブランチ名は ${{github.base_ref}}

公式ドキュメントによるとトリガーするイベントが pull_request または pull_request_targetのときのみ使えるとのこと

docs.github.com

プッシュ時は直前のステップでbranch名を出力し、それを変数として使えるようにするというちょっと面倒な方法みたい

    steps:
      - name: Extract branch name
        shell: bash
        run: echo "::set-output name=branch::${GITHUB_REF#refs/heads/}"
        id: extract_branch

      - name: Print branch name
        env:
          BRANCH_NAME: ${{ steps.extract_branch.outputs.branch }}
        run: echo $BRANCH_NAME

set-outputはワークフローコマンドと言って、アクションのコード内でシェルコマンドを実行する際に使えるコマンド

docs.github.com

【Redis】Redisクライアントをモック化したい

Redisを使っているプロジェクトでJestでテストが失敗するのでRedisをモック化したい

調べたらredis-mockがよさそう

www.npmjs.com

基本的な使い方

import redis from 'redis-mock'
jest.mock('redis', () => redis)

毎回これを記述するのは大変なのでjest.config.jssetupFilesAfterEnvで自動でモック化するようにする

jest.config.js

module.exports = {
    // other properties...
    setupFilesAfterEnv: ['./jest.setup.redis-mock.js'],
};

jest.setup.redis-mock.js

jest.mock('redis', () => jest.requireActual('redis-mock'));

【Chromatic】squash and merge でmainにマージするフローの場合のビルド

Chromaticは特に指定がない限り同じブランチかそのブランチのコミット履歴に属する以前のビルドとの差分をチェックする

そしてその差分が承認されるとそれがベースラインのスナップショットとなり次回の変更との差分に使用される

Chromaticのブランチングとベースラインの考え方については以下

www.chromatic.com

ただ、そのベースラインをmainブランチと一致させておけばよいのだが、自分のプロジェクトではsquash and mergeをしているため、ChromaticでマージしたときのmainブランチとGithubでマージした時のmainブランチとでは履歴が異なってしまっている

これにより、次に差分を確認する時ベースラインが比較元のコミット履歴にないため毎回新規の差分になってしまう

公式ドキュメントでもこのsquash and mergerebaseで履歴が消えてしまう問題について言及しているがよくわからなかったので

https://www.chromatic.com/docs/branching-and-baselines#how-baselines-are-calculated

こちらの記事を参考にした

dev.to

この記事によると、プルリクをつくるときにChromaticビルドするだけでなく、Github上でmainブランチにsquash and mergeがされた後に、もう一度Chromaticビルドをするのがよいらしい

このときのビルドはレビュー済みなので--auto-accept-changesで自動でChromaticで承認されるようにするのが肝

Github Actionsのジョブ設定は以下

name: Publish Storybook

on:
    push:
        branches:
            - main

jobs:
    storybook:
        name: Storybook

        runs-on: ubuntu-latest

        steps:
            - name: Checkout
              uses: actions/checkout@v2
              with:
                  fetch-depth: 0

            - uses: ./.github/actions/load-node-modules

            - name: Create snapshots
              run: yarn chromatic --only-changed --auto-accept-changes
              env:
                  CHROMATIC_PROJECT_TOKEN: ${{ secrets.CHROMATIC_PROJECT_TOKEN }}
                  CHROMATIC_SHA: ${{ github.event.after }}
                  CHROMATIC_BRANCH: main

これで、squash and mergeでマージするようなフローでもChromaticの差分が正常にでるようになった

【Github Actions】node_modulesをcacheしてビルドを早くしたい

Github Actionsのあるジョブ内でnpm installしているが、毎回やるのは無駄なのでキャッシュしてビルドを早くしたい

調べたら公式のこれを使うのがよいみたい

github.com

Jobの実行前のnodeの環境を設定できる

基本的な使い方

steps:
- uses: actions/checkout@v3
- uses: actions/setup-node@v3
  with:
    node-version: 14
- run: npm ci
- run: npm test

依存関係をキャッシュする場合はcache: npmを追加する

steps:
- uses: actions/checkout@v3
- uses: actions/setup-node@v3
  with:
    node-version: 14
    cache: 'npm'
- run: npm ci
- run: npm test

setup-node/advanced-usage.md at main · actions/setup-node · GitHub