2024年のtipsまとめ

仕事中などに気づいたプログラミングのtipsを個人のnotionにまとめているものです。

2024年頭に｢数ヶ月おきにnotionに溜まったtipsをブログ記事にしよう！｣と思っていたんですが、全然できてなかったので年末にまとめて放出します。

Storybookのタイトルを変える

Storybookを複数プロジェクトで使い回すと、タイトルがすべて｢Storybook｣なのが煩わしく感じると思います。 このtipsを書いた時点では公式でタイトルを変更する方法がなく、苦肉の策として MutationObserver を用い て manager.js に以下のように記載することで、タイトルを無理やり変えることができます。

document.addEventListener("DOMContentLoaded", () => {
  const newTitle = "ほげほげプロジェクト Storybook";
  const oldTitle = "Storybook";

  const observer = new MutationObserver((mutationsList) => {
    for (const mutation of mutationsList) {
      const currentTitle = mutation.target.textContent;
      if (
        currentTitle &&
        currentTitle.includes(oldTitle) &&
        !currentTitle.includes(newTitle)
      ) {
        mutation.target.textContent = currentTitle.replace(oldTitle, newTitle);
      }
    }
  });

  for (const titleNode of document.querySelectorAll("title")) {
    observer.observe(titleNode, {
      attributes: false,
      childList: true,
      subtree: false,
    });
  }
});

MutationObserverで特定のタグの変化をハンドルできるので、StorybookがStoryの切り替えでタイトルを変更するたびに、それをトラップして、Storybook の文字列を任意のタイトルに置き換えます。

VScodeで常にタブにディレクトリ名を表示する

settings.jsonに以下を記述します。

"workbench.editor.labelFormat": "short"

同じファイル名がたくさんあるプロジェクト(例えばNext.jsのAppRouterや、コンポーネントファイルを全部index.tsxにする場合など)で便利です。

vscode-prettierがjsに対して動かないことがあった

ymlやsettings.jsonの保存などにはprettierが発火するのに、jsにだけ動かないことがありました。

"[javascript][javascriptreact][typescript][typescriptreact]": {
  "editor.defaultFormatter": "esbenp.prettier-vscode",
},

settings.jsonに以上のように書いていたんですが、

"[javascript]": {
  "editor.defaultFormatter": "esbenp.prettier-vscode"
}

と書くことで動くようになりました。おそらくデフォルトでこのキーに対してどこかで設定があり、キー指定で上書きしてあげないと別で設定されてしまってそうでした。

ServerlessでAWS SSO経由でデプロイする

eval $(aws configure export-credentials --profile ${AWS_PROFILE} --format env) && env -u AWS_PROFILE serverless deploy

aws configure export-credentials とすると、必要な環境変数をexportしてくれるので、それをevalしたうえでserverlessコマンドを実行します。

chatGPTに絵文字を作ってもらうと便利

見出しやコミットコメントなどに絵文字をいれると賑やかになるだけでなく視認性も良くなりますが、都度適切な絵文字を選ぶのは地味に大変です。

chatGPTに以下のようにお願いすることで、絵文字をサジェストしてもらえます。

以下の見出しに適切な絵文字を3つずつ理由をつけてサジェストして

eslintの no-restricted-imports の便利な使い方

"no-restricted-imports": [
      "error",
      {
        paths: [
          {
            name: "next/router",
            importNames: ["useRouter"],
            message: "おそらくnext/navigationの間違いです",
          },
          {
            name: "@library/components",
            importNames: ["Icon"],
            message: "@/app/components/Icon を使ってください",
          },
        ],
      },
]

• 腐敗防止層を実装しているので、ライブラリを誤って直接importさせたくない
• nextのuseRouterのように、複数同名のシンボルがある場合に間違った方を選ばせない

という用途に気軽に使え、便利です。

Amplifyで接続先のリポジトリの名前を変えたいとき

接続しているリポジトリの名前を事情があって変えたいときに、amplifyで必要な操作のメモです。

aws amplify update-app --app-id <AMPLIFY_APP_ID> --repository <REPOSITORY_URL> --access-token <ACCESS_TOKEN>

上記のコマンドを実行したあとにWebUIから｢リポジトリを再接続｣することで、接続先リポジトリを変更できます。このとき、GithubのPersonalAccessTokenが必要ですが、｢リポジトリを再接続｣したあとにトークンを無効化しても問題ありません。トークンは admin:repo_hook の権限が必要です。

vscodeでctrl+Wでウィンドウを閉じないようにすると、タブを連打で閉じたときに勢い余ってウィンドウを閉じなくなるので快適

{
  "key": "cmd+w",
  "command": "-workbench.action.closeWindow",
  "when": "!editorIsOpen && !multipleEditorGroups"
}

aws sso loginをloginが必要なときだけ呼ぶ

https://github.com/aws/aws-cli/issues/6948#issuecomment-1624475627

alias aws-sso-login='aws sts get-caller-identity >/dev/null 2>&1 || aws sso login'

nodeでstdinのパイプをお手軽に行う

// do.mjs

import { stdin } from "process";
import { createInterface } from "readline";

createInterface({
  input: stdin,
  output: process.stdout,
  terminal: false,
}).on("line", (line) => {
  // do something
});

利用方法

cat hogehoge | node do.mjs

nodeで気軽に画像一括処理

jimp と fs.readdirSync でお手軽に画像の一括処理ができます(以下はクロッピングの例)。

import fs from "fs";
import Jimp from "jimp";
import path from "path";

const SRC_DIR = "src";
const DIST_DIR = "dist";

async function main() {
  // src以下のファイルをループで処理
  const files = fs.readdirSync(SRC_DIR);

  for (const file of files) {
    const filePath = path.join(SRC_DIR, file);
    const stat = fs.statSync(filePath);
    if (stat.isDirectory()) {
      continue;
    }

    console.log("manipulating:", filePath);

    const jimp = await Jimp.read(filePath);
    jimp
      .crop(106, 530, 872, 1446)
      .write(path.join(DIST_DIR, path.basename(filePath)));
  }
}

main().catch(console.error);

vscodeのターミナルで vim とタイプしたらvscodeのエディタで開く

同僚がやっていたものを｢vscodeのターミナルでのみ｣に改良したものです。

if [[ $TERM_PROGRAM = 'vscode' ]]; then
  alias vim='code -r'
fi