Visual Studio Code にて Ruby LSP のコードジャンプが働かないときに試すこと

ソフトウェア開発 プログラミング -> 言語 -> Ruby

結論

  • .ruby-lsp/ を削除する
  • Visual Studio Code を再起動する

ImageMagick の v6 と v7 では同じコマンドを実行しても生成される画像のバイナリは異なる

ソフトウェア

結論

表題のとおりで、v6 と v7 では生成されるバイナリは異なる。

理由

imagemagick.org

v6 と v7 で生成されるバイナリの比較検討のやり方

ImageMagick の v6 と v7 にて、同じコマンドにて画像変換を行い、MD5 を取得する

  • 元画像は Unsplash の画像 を用いる
    • この画像を before.jpg というファイル名で保存する
$ wget -O before.jpg "https://images.unsplash.com/photo-1720048170996-40507a45c720?q=80&w=2513&auto=format&fit=crop&ixlib=rb-4.0.3&ixid=M3wxMjA3fDF8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D"

ImageMagick での変換コマンド と MD5 のチェックコマンド

v6

$ convert -strip -geometry 50% before.jpg after.jpg

# macOS では "md5sum" ではなく "md5" になる
$ md5sum after.jpg

v7

$ magick before.jpg -strip -geometry 50% after.jpg

# macOS では "md5sum" ではなく "md5" になる
$ md5sum after.jpg

補足

  • 公式のダウンロードページ は常に最新版しかダウンロードできない
    • なので、パッチバージョンまで含めてバージョンを固定する確実な方法は Docker を使うことぐらいしかない（はず）
    • apt などのパッケージマネージャもバージョンは不定*1

*1:チーム全体に固定を求めるのは手間

zsh と nodenv を用いていて、VSCode で Jest の拡張機能を用いているときに「node や npm が見つからない」というエラーが出るときの対処法

プログラミング ソフトウェア開発

前提

  • Node (Npm) の管理には nodenv を用いている前提ですが、他の類似のツールでも同様かと思います

結論

2点行う必要がありました。

1. VSCode の settings.json に "jest.shell" プロパティを追加する

以下の記事が完璧です。

zenn.dev

具体的には以下の内容を追記します。

  "jest.shell": {
    "path": "/usr/bin/env",
    "args": ["zsh", "--login"]
  },

2. .zshenv で nodenv を設定する

.zshrc ではなく .zshenv に書きます*1。

# nodenv
export PATH="$HOME/.nodenv/bin:$PATH"
eval "$(nodenv init -)"

注意点

  • 上記の設定を追加した後は、念のため VSCode をいったん「終了」して再起動した方がいいです
    • 少なくとも自分の環境では「ウィンドウの再読み込み」ではうまくいきませんでした
  • 前述の 2点 の作業を両方とも行う必要はないかもしれませんが、やはり自分の環境では両方とも行わないとだめでした

エラーが出ていたときの現象

以下のようなエラーメッセージがが出ていました。

zsh: command not found: npm
exec: node: not found
jest vscode /bin/sh: 1: npm: not found
/bin/sh: 1: npm: not found
[error] Failed to start jest session: zsh: command not found: npm

*1:.zshenv はデリケートなので記述内容には注意する必要があります

ASIDE で init したときの "Generate package.json?" の意味

ソフトウェア開発

結論

  • Yes だと npm init 的な package.json が生成される
  • No だと 最低限の package.json が生成される
  • つまり、No にしたからといって package.json が生成されないということではない
  • デフォルト選択肢は Yes になっているが、自分ではデフォルトは No でいいと思う

具体例

Yes を選んだときの package.json

{
  "name": "foobar",
  "version": "0.0.0",
  "description": "",
  "main": "build/index.js",
  "license": "Apache-2.0",
  "keywords": [],
  "scripts": {
    "clean": "rimraf build dist",
    "lint": "npm run license && eslint --fix --no-error-on-unmatched-pattern src/ test/",
    "bundle": "rollup --no-treeshake -c rollup.config.mjs",
    "build": "npm run clean && npm run bundle && ncp appsscript.json dist/appsscript.json",
    "license": "license-check-and-add add -f license-config.json",
    "test": "jest test/ --passWithNoTests --detectOpenHandles",
    "deploy": "npm run lint && npm run test && npm run build && ncp .clasp-dev.json .clasp.json && clasp push -f",
    "deploy:prod": "npm run lint && npm run test && npm run build && ncp .clasp-prod.json .clasp.json && clasp push"
  },
  "engines": {
    "node": ">=12"
  },
  "dependencies": {
    "@google/clasp": "^2.4.2",
    "@types/google-apps-script": "^1.0.89",
    "@types/jest": "^29.5.14",
    "@typescript-eslint/eslint-plugin": "^8.19.0",
    "eslint": "^8.57.1",
    "eslint-config-prettier": "^9.1.0",
    "eslint-plugin-prettier": "^5.2.1",
    "gts": "^6.0.2",
    "jest": "^29.7.0",
    "license-check-and-add": "^4.0.5",
    "ncp": "^2.0.0",
    "prettier": "^3.4.2",
    "rimraf": "^6.0.1",
    "rollup": "^4.29.1",
    "rollup-plugin-cleanup": "^3.2.1",
    "rollup-plugin-license": "^3.5.3",
    "rollup-plugin-prettier": "^4.1.1",
    "rollup-plugin-typescript2": "^0.36.0",
    "ts-jest": "^29.2.5",
    "typescript": "^5.7.2"
  }
}

No を選んだときの package.json

{
  "scripts": {
    "clean": "rimraf build dist",
    "lint": "npm run license && eslint --fix --no-error-on-unmatched-pattern src/ test/",
    "bundle": "rollup --no-treeshake -c rollup.config.mjs",
    "build": "npm run clean && npm run bundle && ncp appsscript.json dist/appsscript.json",
    "license": "license-check-and-add add -f license-config.json",
    "test": "jest test/ --passWithNoTests --detectOpenHandles",
    "deploy": "npm run lint && npm run test && npm run build && ncp .clasp-dev.json .clasp.json && clasp push -f",
    "deploy:prod": "npm run lint && npm run test && npm run build && ncp .clasp-prod.json .clasp.json && clasp push"
  },
  "dependencies": {
    "@google/clasp": "^2.4.2",
    "@types/google-apps-script": "^1.0.89",
    "@types/jest": "^29.5.14",
    "@typescript-eslint/eslint-plugin": "^8.19.0",
    "eslint": "^8.57.1",
    "eslint-config-prettier": "^9.1.0",
    "eslint-plugin-prettier": "^5.2.1",
    "gts": "^6.0.2",
    "jest": "^29.7.0",
    "license-check-and-add": "^4.0.5",
    "ncp": "^2.0.0",
    "prettier": "^3.4.2",
    "rimraf": "^6.0.1",
    "rollup": "^4.29.1",
    "rollup-plugin-cleanup": "^3.2.1",
    "rollup-plugin-license": "^3.5.3",
    "rollup-plugin-prettier": "^4.1.1",
    "rollup-plugin-typescript2": "^0.36.0",
    "ts-jest": "^29.2.5",
    "typescript": "^5.7.2"
  }
}

このあたりを実行している ASIDE のコード

Yes を選んだときにだけ、以下の部分が実行されるという分岐になっています。

github.com

Mermaid でタイトルを付ける方法

ソフトウェア開発

結論

以下のように書く。

---
title: ここにタイトルが入る
---

具体例

Mermaid のコード

---
title: サンプルER図
---

erDiagram
    %% アソシエーション
    users ||--o{ posts : "1人のユーザーは0以上の投稿を持つ"
    users ||--o{ comments: "1人のユーザーは0以上のコメントを持つ"
    posts ||--o{ comments: "1つの投稿は0以上のコメントを持つ"

    %% テーブル定義
    users {
        bigint id PK
        string name "ユーザー名"
        timestamp created_at
        timestamp deleted_at
    }

    posts {
        bigint id PK
        references user FK
        string title "投稿タイトル"
        text content "投稿内容"
        timestamp created_at
        timestamp deleted_at
    }

    comments {
        bigint id PK
        references post FK
        references user FK
        text content "コメント内容"
        timestamp created_at
        timestamp deleted_at
    }

コードをもとに描かれるER図

gyazo.com

公式ページ

mermaid.js.org