NakuRei's Notes

Claude Codeのステータスラインの設定を晒すだけ

Fri, 27 Mar 2026 22:35:23 +0900

これはなに

Claude Codeのステータスラインの設定を残しておくためのメモ。

下記のようになる。

はじめに

諸事情により、ステータスラインのスクリプトはシェルスクリプトで書いている。ほんとうはPythonなどで書いたほうがグラデーションなど使えてよいかも。

前提条件

jqが使えること

ステータスラインの設定

下記を~/.claude/statusline.shなどのファイルに保存する。

statusline.sh

#!/bin/bash
input=$(cat)

readonly CYAN='\033[0;36m'
readonly GREEN='\033[0;32m'
readonly YELLOW='\033[0;33m'
readonly RED='\033[0;31m'
readonly RESET='\033[0m'

readonly MODEL=$(echo "$input" | jq -r '.model.display_name')
readonly DIR=$(echo "$input" | jq -r '.workspace.current_dir')
# The "// 0" provides a fallback if the field is null
readonly PCT=$(echo "$input" | jq -r '.context_window.used_percentage // 0' | cut -d. -f1)
readonly HOUR_LIMIT=$(echo "$input" | jq -r '.rate_limits.five_hour.used_percentage // 0' | cut -d. -f1)
readonly WEEK_LIMIT=$(echo "$input" | jq -r '.rate_limits.seven_day.used_percentage // 0' | cut -d. -f1)


# ${DIR##*/} extracts just the folder name
echo "[${MODEL}] 📁 ${DIR##*/}"

if [ "${PCT}" -lt 40 ]; then
 PCT_COLOR=$GREEN
elif [ "${PCT}" -ge 80 ]; then
 PCT_COLOR=$RED
else
 PCT_COLOR=$YELLOW
fi

if git rev-parse --git-dir > /dev/null 2>&1; then
 readonly BRANCH=$(git branch --show-current 2>/dev/null)
 readonly STAGED=$(git diff --cached --numstat 2>/dev/null | wc -l | tr -d ' ')
 readonly MODIFIED=$(git diff --numstat 2>/dev/null | wc -l | tr -d ' ')

 GIT_STATUS=""
 [ "$STAGED" -gt 0 ] && GIT_STATUS="${GREEN}+${STAGED}${RESET}"
 [ "$MODIFIED" -gt 0 ] && GIT_STATUS="${GIT_STATUS}${YELLOW}~${MODIFIED}${RESET}"

 echo -e "${PCT_COLOR}${PCT}%${RESET} | 🌿 ${BRANCH} ${GIT_STATUS}"
else
 echo -e "${PCT_COLOR}${PCT}%${RESET}"
fi

echo -e "${HOUR_LIMIT}%/5hr ${WEEK_LIMIT}%/wk"

実行権限を付与する

chmod +x ~/.claude/statusline.sh

Claude Codeの設定で、ステータスラインのコマンドに上記のファイルを指定する

Windowsの場合は次のようにする。

~/.claude/settings.json

{
 "statusLine": {
 "type": "command",
 "command": "bash -c \"~/.claude/statusline.sh\""
 },
}

Linux, WSLの場合は以下のようにする。

~/.claude/settings.json

{
 "statusLine": {
 "type": "command",
 "command": "~/.claude/statusline.sh"
 },
}

参考文献・URL

Customize your status line - Claude Code Docs

Configure a custom status bar to monitor context window usage, costs, and git status in Claude Code

code.claude.com

Claude Codeの使用率がステータスラインに表示できるようになったので表示用のスクリプトを作った話

Claude Code v2.1.80で追加されたrate_limitsフィールドを使って、5時間/7日間の使用量をステータスラインにかわいく表示する4つのパターンを紹介します

nyosegawa.com

OpenClawを初めて触ってみたときのメモ

Sun, 08 Mar 2026 00:53:14 +0900

なんかこの流れだといろいろバグっていたらしく、きちんと最後まで設定ができていない。間違って環境を消してしまって再度試したらログとか流れとかが変わってしまった。

一応当時試したとおりの間違ったことは書いていないはずなので、記録ということで残しておく。

これはなに

OpenClawを初めて触ったときにやったことのメモ。

OpenClaw - OpenClaw

docs.openclaw.ai

環境

本当は専用のマシンがあればよかったのだが、昨今はPCが高騰しており、かつ余っているPCはラップトップしかなかった。とはいえ、最近はWindowsのデスクトップPCを24時間稼働しっぱなしなので、そのPCにOpenClaw用の環境を構築することにした。隔離された環境にするため、WSLで仮想環境を構築することとした。ちなみに当時は、WindowsではWSL2環境下で実行することを公式が強く推奨していた。

WSLの環境は下記のとおり。

> wsl --version
WSL バージョン: 2.6.3.0
カーネル バージョン: 6.6.87.2-1
WSLg バージョン: 1.0.71
MSRDC バージョン: 1.2.6353
Direct3D バージョン: 1.611.1-81528511
DXCore バージョン: 10.0.26100.1-240331-1435.ge-release
Windows バージョン: 10.0.26200.7840

OpenClaw用にディストリビューションを新規に作成した。

wsl --install -d Ubuntu-24.04 --name OpenClaw

作成されているかどうかは、wsl -l -vで確認できる。

> wsl -l -v
 NAME STATE VERSION
* Ubuntu-22.04 Running 2
 docker-desktop Running 2
 Ubuntu-24.04 Running 2
 OpenClaw Stopped 2

wsl -d OpenClawで仮想環境に入れる。apt updateとapt upgradeをしておく。

OpenClawの初回セットアップ

初回セットアップ手順は公式サイトにあるとおり実行した。

はじめに - OpenClaw

docs.openclaw.ai

以下は実行したコマンドのメモ。なお、公式の手順は更新されうるので、あくまで参考程度に記録を残す。

まず、必要要件を確認する。実行時はNode 22+のみ必須だった。

Nodeをインストールする。aptだとNode 18が入るため、NodeSourceを利用してNode 24をインストールした。

curl -fsSL https://deb.nodesource.com/setup_24.x | sudo -E bash -
sudo apt install nodejs -y

確認する。

node -v # v24.14.0
npm -v # 11.9.0

これで事前要件は満たした。次に、OpenClawをインストールする。

curl -fsSL https://openclaw.ai/install.sh | bash

利用承諾とか、AIサービスの設定とかを進める。設定はQuickStartで進めた。

当時はOpenAI CodexのProプランにお試しで入っていたので、その利用枠を使った。本当はAPIキーを使ったほうがOpenAIのモデルが使えて良いのかも。まあモデルは使ってみて不満になったら考えればいい。

モデルはいったんGPT-5.3-Codex-Sparkを使うことにした。全然利用枠を使っていなかったし、応答が速いなら適していそうだなと思ったので。

当時のログ

$ curl -fsSL https://openclaw.ai/install.sh | bash

 🦞 OpenClaw Installer
 WhatsApp automation without the "please accept our new privacy policy".

✓ Detected: linux

Install plan
OS: linux
Install method: npm
Requested version: latest

[1/3] Preparing environment
✓ Node.js v24.14.0 found
· Active Node.js: v24.14.0 (/usr/bin/node)
· Active npm: 11.9.0 (/usr/bin/npm)

[2/3] Installing OpenClaw
✓ Git already installed
· Configuring npm for user-local installs
✓ npm configured for user installs
· Installing OpenClaw v2026.3.2
✓ OpenClaw npm package installed
✓ OpenClaw installed

[3/3] Finalizing setup

! PATH missing npm global bin dir: /home/nakurei/.npm-global/bin
 This can make openclaw show as "command not found" in new terminals.
 Fix (zsh: ~/.zshrc, bash: ~/.bashrc):
 export PATH="/home/nakurei/.npm-global/bin:$PATH"

🦞 OpenClaw installed successfully (2026.3.2)!
I'm in. Let's cause some responsible chaos.

· Starting setup


🦞 OpenClaw 2026.3.2 (85377a2) — Greetings, Professor Falken

▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄
██░▄▄▄░██░▄▄░██░▄▄▄██░▀██░██░▄▄▀██░████░▄▄▀██░███░██
██░███░██░▀▀░██░▄▄▄██░█░█░██░█████░████░▀▀░██░█░█░██
██░▀▀▀░██░█████░▀▀▀██░██▄░██░▀▀▄██░▀▀░█░██░██▄▀▄▀▄██
▀▀▀▀▀▀▀▀▀▀▀▀▀▀▀▀▀▀▀▀▀▀▀▀▀▀▀▀▀▀▀▀▀▀▀▀▀▀▀▀▀▀▀▀▀▀▀▀▀▀▀▀
 🦞 OPENCLAW 🦞

┌ OpenClaw onboarding
│
◇ Security ─────────────────────────────────────────────────────────────────────────────────╮
│ │
│ Security warning — please read. │
│ │
│ OpenClaw is a hobby project and still in beta. Expect sharp edges. │
│ By default, OpenClaw is a personal agent: one trusted operator boundary. │
│ This bot can read files and run actions if tools are enabled. │
│ A bad prompt can trick it into doing unsafe things. │
│ │
│ OpenClaw is not a hostile multi-tenant boundary by default. │
│ If multiple users can message one tool-enabled agent, they share that delegated tool │
│ authority. │
│ │
│ If you’re not comfortable with security hardening and access control, don’t run │
│ OpenClaw. │
│ Ask someone experienced to help before enabling tools or exposing it to the internet. │
│ │
│ Recommended baseline: │
│ - Pairing/allowlists + mention gating. │
│ - Multi-user/shared inbox: split trust boundaries (separate gateway/credentials, ideally │
│ separate OS users/hosts). │
│ - Sandbox + least-privilege tools. │
│ - Shared inboxes: isolate DM sessions (`session.dmScope: per-channel-peer`) and keep │
│ tool access minimal. │
│ - Keep secrets out of the agent’s reachable filesystem. │
│ - Use the strongest available model for any bot with tools or untrusted inboxes. │
│ │
│ Run regularly: │
│ openclaw security audit --deep │
│ openclaw security audit --fix │
│ │
│ Must read: https://docs.openclaw.ai/gateway/security │
│ │
├────────────────────────────────────────────────────────────────────────────────────────────╯
│
◇ I understand this is personal-by-default and shared/multi-user use requires lock-down. Continue?
│ Yes
│
◇ Onboarding mode
│ QuickStart
│
◇ QuickStart ─────────────────────────╮
│ │
│ Gateway port: 18789 │
│ Gateway bind: Loopback (127.0.0.1) │
│ Gateway auth: Token (default) │
│ Tailscale exposure: Off │
│ Direct to chat channels. │
│ │
├──────────────────────────────────────╯
│
◇ Model/auth provider
│ OpenAI
│
◇ OpenAI auth method
│ OpenAI Codex (ChatGPT OAuth)
│
◇ OpenAI Codex OAuth ─────────────────────────────────────────────╮
│ │
│ Browser will open for OpenAI authentication. │
│ If the callback doesn't auto-complete, paste the redirect URL. │
│ OpenAI OAuth uses localhost:1455 for the callback. │
│ │
├──────────────────────────────────────────────────────────────────╯
│
Open: https://auth.openai.com/oauth/authorize?response_type=code&client_id=app_EMoamEEZ73f0CkXaXp7hrann&redirect_uri=http%3A%2F%2Flocalhost%3A1455%2Fauth%2Fcallback&scope=openid+profile+email+offline_access&code_challenge=CNjhpu1rTMn-lPrUFJbu3w-0V9RAqyd9nYj_41_PjOg&code_challenge_method=S256&state=9d04818bfb995cec805ca2968595702c&id_token_add_organizations=true&codex_cli_simplified_flow=true&originator=pi
◇ OpenAI OAuth complete
│
◇ Model configured ────────────────────────────────╮
│ │
│ Default model set to openai-codex/gpt-5.3-codex │
│ │
├───────────────────────────────────────────────────╯
│
◇ Default model
│ openai-codex/gpt-5.3-codex-spark
│
◇ Channel status ────────────────────────────╮
│ │
│ Telegram: needs token │
│ WhatsApp (default): not linked │
│ Discord: needs token │
│ Slack: needs tokens │
│ Signal: needs setup │
│ signal-cli: missing (signal-cli) │
│ iMessage: needs setup │
│ imsg: missing (imsg) │
│ IRC: not configured │
│ Google Chat: not configured │
│ Feishu: install plugin to enable │
│ Google Chat: install plugin to enable │
│ Nostr: install plugin to enable │
│ Microsoft Teams: install plugin to enable │
│ Mattermost: install plugin to enable │
│ Nextcloud Talk: install plugin to enable │
│ Matrix: install plugin to enable │
│ BlueBubbles: install plugin to enable │
│ LINE: install plugin to enable │
│ Zalo: install plugin to enable │
│ Zalo Personal: install plugin to enable │
│ Synology Chat: install plugin to enable │
│ Tlon: install plugin to enable │
│ │
├─────────────────────────────────────────────╯
│
◇ How channels work ───────────────────────────────────────────────────────────────────────╮
│ │
│ DM security: default is pairing; unknown DMs get a pairing code. │
│ Approve with: openclaw pairing approve <channel> <code> │
│ Public DMs require dmPolicy="open" + allowFrom=["*"]. │
│ Multi-user DMs: run: openclaw config set session.dmScope "per-channel-peer" (or │
│ "per-account-channel-peer" for multi-account channels) to isolate sessions. │
│ Docs: channels/pairing │
│ │
│ Telegram: simplest way to get started — register a bot with @BotFather and get going. │
│ WhatsApp: works with your own number; recommend a separate phone + eSIM. │
│ Discord: very well supported right now. │
│ IRC: classic IRC networks with DM/channel routing and pairing controls. │
│ Google Chat: Google Workspace Chat app with HTTP webhook. │
│ Slack: supported (Socket Mode). │
│ Signal: signal-cli linked device; more setup (David Reagans: "Hop on Discord."). │
│ iMessage: this is still a work in progress. │
│ Feishu: 飞书/Lark enterprise messaging with doc/wiki/drive tools. │
│ Nostr: Decentralized protocol; encrypted DMs via NIP-04. │
│ Microsoft Teams: Bot Framework; enterprise support. │
│ Mattermost: self-hosted Slack-style chat; install the plugin to enable. │
│ Nextcloud Talk: Self-hosted chat via Nextcloud Talk webhook bots. │
│ Matrix: open protocol; install the plugin to enable. │
│ BlueBubbles: iMessage via the BlueBubbles mac app + REST API. │
│ LINE: LINE Messaging API bot for Japan/Taiwan/Thailand markets. │
│ Zalo: Vietnam-focused messaging platform with Bot API. │
│ Zalo Personal: Zalo personal account via QR code login. │
│ Synology Chat: Connect your Synology NAS Chat to OpenClaw with full agent capabilities. │
│ Tlon: decentralized messaging on Urbit; install the plugin to enable. │
│ │
├───────────────────────────────────────────────────────────────────────────────────────────╯
│
◇ Select channel (QuickStart)
│ Discord (Bot API)
│
◇ Discord bot token ──────────────────────────────────────────────────────────────────────╮
│ │
│ 1) Discord Developer Portal → Applications → New Application │
│ 2) Bot → Add Bot → Reset Token → copy token │
│ 3) OAuth2 → URL Generator → scope 'bot' → invite to your server │
│ Tip: enable Message Content Intent if you need message text. (Bot → Privileged Gateway │
│ Intents → Message Content Intent) │
│ Docs: discord │
│ │
├──────────────────────────────────────────────────────────────────────────────────────────╯
│
◇ How do you want to provide this Discord bot token?
│ Enter Discord bot token
│
◇ Enter Discord bot token
│ XXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXX
│
◇ Configure Discord channels access?
│ Yes
│
◇ Discord channels access
│ Open (allow all channels)
│
◇ Selected channels ────────────────────────────────────────────╮
│ │
│ Discord — very well supported right now. Docs: │
│ discord │
│ │
├────────────────────────────────────────────────────────────────╯
Updated ~/.openclaw/openclaw.json
Workspace OK: ~/.openclaw/workspace
Sessions OK: ~/.openclaw/agents/main/sessions
│
◇ Skills status ─────────────╮
│ │
│ Eligible: 6 │
│ Missing requirements: 38 │
│ Unsupported on this OS: 7 │
│ Blocked by allowlist: 0 │
│ │
├─────────────────────────────╯
│
◇ Configure skills now? (recommended)
│ Yes
│
│
│
◆ Install missing skill dependencies
│
│
◆ Install missing skill dependencies
│
│
◇ Install missing skill dependencies
│ 📰 blogwatcher, 🍌 nano-banana-pro, 💎 obsidian, 🧾 summarize, 🎞️ video-frames
│
◇ Homebrew recommended ──────────────────────────────────────────────────────────╮
│ │
│ Many skill dependencies are shipped via Homebrew. │
│ Without brew, you'll need to build from source or download releases manually. │
│ │
├─────────────────────────────────────────────────────────────────────────────────╯
│
◇ Show Homebrew install command?
│ Yes
│
◇ Homebrew install ─────────────────────────────────────────────────────╮
│ │
│ Run: │
│ /bin/bash -c "$(curl -fsSL │
│ https://raw.githubusercontent.com/Homebrew/install/HEAD/install.sh)" │
│ │
├────────────────────────────────────────────────────────────────────────╯
│
◇ Install failed: summarize — brew not installed — Homebrew is not installed. Install it from https://brew.sh or install "steipete/tap/summarize" manually using your sys…
Tip: run `openclaw doctor` to review skills + requirements.
Docs: https://docs.openclaw.ai/skills
│
◇ Install failed: obsidian — brew not installed — Homebrew is not installed. Install it from https://brew.sh or install "yakitrak/yakitrak/obsidian-cli" manually using …
Tip: run `openclaw doctor` to review skills + requirements.
Docs: https://docs.openclaw.ai/skills
│
◇ Install failed: blogwatcher (exit 1) — go not installed — apt-get is available but sudo is not usable (missing or requires a password). Install manually: https://go.dev/doc/insta…
sudo: a password is required
Tip: run `openclaw doctor` to review skills + requirements.
Docs: https://docs.openclaw.ai/skills
│
◇ Install failed: nano-banana-pro — brew not installed — Homebrew is not installed. Install it from https://brew.sh or install "uv" manually using your system package manager …
Tip: run `openclaw doctor` to review skills + requirements.
Docs: https://docs.openclaw.ai/skills
│
◇ Install failed: video-frames — brew not installed — Homebrew is not installed. Install it from https://brew.sh or install "ffmpeg" manually using your system package mana…
Tip: run `openclaw doctor` to review skills + requirements.
Docs: https://docs.openclaw.ai/skills
│
◇ Set GOOGLE_PLACES_API_KEY for goplaces?
│ No
│
◇ Set GEMINI_API_KEY for nano-banana-pro?
│ Yes
│
◇ Enter GEMINI_API_KEY
│ XXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXX
│
◇ Set NOTION_API_KEY for notion?
│ No
│
◇ Set OPENAI_API_KEY for openai-image-gen?
│ Yes
│
◇ Enter OPENAI_API_KEY
│ XXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXX
XXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXX
│
◇ Set OPENAI_API_KEY for openai-whisper-api?
│ Yes
│
◇ Enter OPENAI_API_KEY
│ XXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXX
XXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXX
│
◇ Set ELEVENLABS_API_KEY for sag?
│ No
│
◇ Hooks ──────────────────────────────────────────────────────────────────╮
│ │
│ Hooks let you automate actions when agent commands are issued. │
│ Example: Save session context to memory when you issue /new or /reset. │
│ │
│ Learn more: https://docs.openclaw.ai/automation/hooks │
│ │
├──────────────────────────────────────────────────────────────────────────╯
│
◇ Enable hooks?
│ 💾 session-memory
│
◇ Hooks Configured ─────────────────╮
│ │
│ Enabled 1 hook: session-memory │
│ │
│ You can manage hooks later with: │
│ openclaw hooks list │
│ openclaw hooks enable <name> │
│ openclaw hooks disable <name> │
│ │
├────────────────────────────────────╯
Config overwrite: /home/nakurei/.openclaw/openclaw.json (sha256 XXXXXXXXXXXXXXXXXX -> XXXXXXXXXXXXXXX, backup=/home/nakurei/.openclaw/openclaw.json.bak)
│
◇ Systemd ────────────────────────────────────────────────────────────────────────────────╮
│ │
│ Linux installs use a systemd user service by default. Without lingering, systemd stops │
│ the user session on logout/idle and kills the Gateway. │
│ Enabling lingering now (may require sudo; writes /var/lib/systemd/linger). │
│ │
├──────────────────────────────────────────────────────────────────────────────────────────╯
│
◇ Systemd ────────────────────────────────╮
│ │
│ Enabled systemd lingering for nakurei. │
│ │
├──────────────────────────────────────────╯
│
◇ Gateway service runtime ────────────────────────────────────────────╮
│ │
│ QuickStart uses Node for the Gateway service (stable + supported). │
│ │
├──────────────────────────────────────────────────────────────────────╯
Error: systemctl is-enabled unavailable: Command failed: systemctl --user is-enabled openclaw-gateway.service

DiscordのサーバーとBotをつくる

クイックセットアップを途中まで進めていって、Select channelになったタイミングで、そういややり取りの窓口が必要と気づいた。最初に考えておくべきだった。

選択肢の中で一番使い慣れているのはDiscordだったので、Discordを使うことにした。Discordの場合、Botを作って追加し、トークン情報をOpenClawに渡す必要があるようだ。 Botを追加するということはサーバーも必要だ。

Discordのサーバーをつくる

まず、Botを招待するためのサーバーを作る。Discordをひらき、OpenClaw用のDiscordサーバーを新しく作り、適当にグループやチャンネルを作った。各チャンネルの説明欄には、それぞれ何をする場なのかを適当に書いた。

DiscordのBotをつくる

次に、Botを作る。OpenClawのログに書かれているとおりに進める。

Discord Developer Portalにアクセスし、Discordアカウントでログインする。アプリケーションから「新しいアプリケーション」を選択して、新しいアプリケーションをつくる。名前は適当。

新しくアプリケーションを作ったら、まず左のメニューからBotを選択する。“Privileged Gateway Intents"にある3つのトグル（Presence Intent, Server Members Intent, Message Content Intent）をすべてオンにして、Botに権限を与えた。あとで分かったが、これは最低限Message Content Intentをオンにすればよい。

その後、「トークンをリセット」ボタンをクリック。リセットしてもいいか確認が出るので実行する。そうするとトークンとなる文字列が表示されるので、これをコピーして控えておく。

最後に、左のメニューからOAuth2を選択肢、URLを作成する。“OAuth2 URLジェネレーター"にあるたくさんのチェックボックスからbotにチェックを入れ、連携タイプをサーバーのインストールにしたら、一番下に生成されるURLへアクセスする。すると、DiscordでどのサーバーにBotを追加するか聞かれるので、先程作ったサーバーを指定する。これでボットをサーバーに招待でき、メンバーリストにBotが追加される。

セットアップを終わらせる

ログを見る限り、なんか色々失敗しているので、セットアップが完了していない。失敗しているものを完了させる。

パスを通す

ログを見る限り、まずパスが通っていないようだ。~/.npm-global/binにパスを通す必要があるらしい。現に、openclawコマンドが見つからない。

$ openclaw gateway install
openclaw: command not found

よって、パスを通す。

echo 'export PATH="$HOME/.npm-global/bin:$PATH"' >> ~/.bashrc
source ~/.bashrc
hash -r

パスがっ通ったか確認。問題なさそうだ。

which openclaw # /home/user/.npm-global/bin/openclaw
openclaw --version # 2026.3.2

gateway service の再セットアップ

再度openclaw gateway installを実行してみたが、まだだめらしい。

$ openclaw gateway install

🦞 OpenClaw 2026.3.2 (85377a2) — I read logs so you can keep pretending you don't have to.

Gateway service check failed: Error: systemctl is-enabled unavailable: Command failed: systemctl --user is-enabled openclaw-gateway.service

よって、openclaw doctorを実行してみる。すると、gateway serviceが問題なく作成された。

ログ

$ openclaw doctor

🦞 OpenClaw 2026.3.2 (85377a2) — If you're lost, run doctor; if you're brave, run prod; if you're wise, run tests.

▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄
██░▄▄▄░██░▄▄░██░▄▄▄██░▀██░██░▄▄▀██░████░▄▄▀██░███░██
██░███░██░▀▀░██░▄▄▄██░█░█░██░█████░████░▀▀░██░█░█░██
██░▀▀▀░██░█████░▀▀▀██░██▄░██░▀▀▄██░▀▀░█░██░██▄▀▄▀▄██
▀▀▀▀▀▀▀▀▀▀▀▀▀▀▀▀▀▀▀▀▀▀▀▀▀▀▀▀▀▀▀▀▀▀▀▀▀▀▀▀▀▀▀▀▀▀▀▀▀▀▀▀
 🦞 OPENCLAW 🦞

┌ OpenClaw doctor
│
◇ Update ──────────────────────────────────────────────────────────────────────────────────╮
│ │
│ This install is not a git checkout. │
│ Run `openclaw update` to update via your package manager (npm/pnpm), then rerun doctor. │
│ │
├───────────────────────────────────────────────────────────────────────────────────────────╯
│
◇ State integrity ───────────────────────────────────────────────────────────────╮
│ │
│ - OAuth dir not present (~/.openclaw/credentials). Skipping create because no │
│ WhatsApp/pairing channel config is active. │
│ │
├─────────────────────────────────────────────────────────────────────────────────╯
│
◇ Security ─────────────────────────────────╮
│ │
│ - No channel security warnings detected. │
│ - Run: openclaw security audit --deep │
│ │
├────────────────────────────────────────────╯
│
◇ Skills status ────────────╮
│ │
│ Eligible: 8 │
│ Missing requirements: 43 │
│ Blocked by allowlist: 0 │
│ │
├────────────────────────────╯
│
◇ Plugins ──────╮
│ │
│ Loaded: 5 │
│ Disabled: 33 │
│ Errors: 0 │
│ │
├────────────────╯
│
◇ Enable bash shell completion for openclaw?
│ Yes
│
◇ Shell completion ────────────────────────────────────────────────────────╮
│ │
│ Shell completion installed. Restart your shell or run: source ~/.bashrc │
│ │
├───────────────────────────────────────────────────────────────────────────╯
│
◇
│
◇ Gateway ──────────────╮
│ │
│ Gateway not running. │
│ │
├────────────────────────╯
│
◇ Gateway connection ────────────────────────────╮
│ │
│ Gateway target: ws://127.0.0.1:18789 │
│ Source: local loopback │
│ Config: /home/nakurei/.openclaw/openclaw.json │
│ Bind: loopback │
│ │
├─────────────────────────────────────────────────╯
│
◇ Memory search ───────────────────────────────────────────────────────────────────────────╮
│ │
│ Memory search is enabled but no embedding provider is configured. │
│ Semantic recall will not work without an embedding provider. │
│ │
│ │
│ Fix (pick one): │
│ - Set OPENAI_API_KEY, GEMINI_API_KEY, VOYAGE_API_KEY, or MISTRAL_API_KEY in your │
│ environment │
│ - Configure credentials: openclaw configure --section model │
│ - For local embeddings: configure agents.defaults.memorySearch.provider and local model │
│ path │
│ - To disable: openclaw config set agents.defaults.memorySearch.enabled false │
│ │
│ Verify: openclaw memory status --deep │
│ │
├───────────────────────────────────────────────────────────────────────────────────────────╯
│
◇ Gateway ────────────────────────╮
│ │
│ Gateway service not installed. │
│ │
├──────────────────────────────────╯
│
◇ Install gateway service now?
│ Yes
│
◇ Gateway service runtime
│ Node (recommended)

Installed systemd service: /home/nakurei/.config/systemd/user/openclaw-gateway.service
Run "openclaw doctor --fix" to apply changes.
│
└ Doctor complete.

サービスが作られたので、起動する。active (running)になっていれば成功。

systemctl --user daemon-reload
systemctl --user enable --now openclaw-gateway.service
systemctl --user status openclaw-gateway.service --no-pager

openclaw gateway statusも実行して、問題なく動いていると確認できた。

openclaw gateway statusのログ

下記ログから動いているとわかる。

systemd service有効
Gateway稼働中
RPC probe正常
Discordログイン成功
127.0.0.1:18789で待受中

$ openclaw gateway status

🦞 OpenClaw 2026.3.2 (85377a2) — Alexa, but with taste.

│
◇
Service: systemd (enabled)
File logs: /tmp/openclaw/openclaw-2026-03-08.log
Command: /usr/bin/node /home/nakurei/.npm-global/lib/node_modules/openclaw/dist/index.js gateway --port 18789
Service file: ~/.config/systemd/user/openclaw-gateway.service
Service env: OPENCLAW_GATEWAY_PORT=18789

Config (cli): ~/.openclaw/openclaw.json
Config (service): ~/.openclaw/openclaw.json

Gateway: bind=loopback (127.0.0.1), port=18789 (service args)
Probe target: ws://127.0.0.1:18789
Dashboard: http://127.0.0.1:18789/
Probe note: Loopback-only gateway; only local clients can connect.

Runtime: running (pid 2568, state active, sub running, last exit 0, reason 0)
RPC probe: ok

Listening: 127.0.0.1:18789
Troubles: run openclaw status
Troubleshooting: https://docs.openclaw.ai/troubleshooting

スキルを入れる

セットアップ時のログを見るとわかるが、セットアップ中に入れようとしたスキルは色々足らず失敗している。よって入れ直した。

スキル一覧と使えるかどうかの確認は、openclaw skills checkでできる。

openclaw skills checkのログ

$ openclaw skills check

🦞 OpenClaw 2026.3.2 (85377a2) — Your config is valid, your assumptions are not.

Skills Status Check

Total: 51
✓ Eligible: 11
⏸ Disabled: 0
🚫 Blocked by allowlist: 0
✗ Missing requirements: 40

Ready to use:
 🧩 coding-agent
 🎮 discord
 📦 healthcheck
 🍌 nano-banana-pro
 🖼️ openai-image-gen
 ☁️ openai-whisper-api
 📦 skill-creator
 🧾 summarize
 🧵 tmux
 🎞️ video-frames
 🌤️ weather

Missing requirements:
 🔐 1password (bins: op)
 📝 apple-notes (bins: memo; os: darwin)
 ⏰ apple-reminders (bins: remindctl; os: darwin)
 🐻 bear-notes (bins: grizzly; os: darwin)
 📰 blogwatcher (bins: blogwatcher)
 🫐 blucli (bins: blu)
 🫧 bluebubbles (config: channels.bluebubbles)
 📸 camsnap (bins: camsnap)
 📦 clawhub (bins: clawhub)
 🎛️ eightctl (bins: eightctl)
 ♊️ gemini (bins: gemini)
 📦 gh-issues (bins: gh)
 🧲 gifgrep (bins: gifgrep)
 🐙 github (bins: gh)
 🎮 gog (bins: gog)
 📍 goplaces (bins: goplaces; env: GOOGLE_PLACES_API_KEY)
 📧 himalaya (bins: himalaya)
 📨 imsg (bins: imsg; os: darwin)
 📦 mcporter (bins: mcporter)
 📊 model-usage (bins: codexbar; os: darwin)
 📄 nano-pdf (bins: nano-pdf)
 📝 notion (env: NOTION_API_KEY)
 💎 obsidian (bins: obsidian-cli)
 🎙️ openai-whisper (bins: whisper)
 💡 openhue (bins: openhue)
 🧿 oracle (bins: oracle)
 🛵 ordercli (bins: ordercli)
 👀 peekaboo (bins: peekaboo; os: darwin)
 🗣️ sag (bins: sag; env: ELEVENLABS_API_KEY)
 📜 session-logs (bins: jq, rg)
 🗣️ sherpa-onnx-tts (env: SHERPA_ONNX_RUNTIME_DIR, SHERPA_ONNX_MODEL_DIR)
 💬 slack (config: channels.slack)
 🌊 songsee (bins: songsee)
 🔊 sonoscli (bins: sonos)
 🎵 spotify-player (anyBins: spogo, spotify_player)
 ✅ things-mac (bins: things; os: darwin)
 📋 trello (bins: jq; env: TRELLO_API_KEY, TRELLO_TOKEN)
 📞 voice-call (config: plugins.entries.voice-call.enabled)
 📱 wacli (bins: wacli)
 𝕏 xurl (bins: xurl)

Tip: use `npx clawhub` to search, install, and sync skills.

Ready to useに入っているスキルは使える。入っていなければ使えない。

なぜ使えないのかは、スキルごとにopenclaw skills infoで確認できる。たとえばobsidianスキルを確認してみる。

openclaw skills infoでobsidianスキルを確認

$ openclaw skills info obsidian

🦞 OpenClaw 2026.3.2 (85377a2) — If something's on fire, I can't extinguish it—but I can write a beautiful postmortem.

💎 obsidian ✗ Missing requirements

Work with Obsidian vaults (plain Markdown notes) and automate via obsidian-cli.

Details:
 Source: openclaw-bundled
 Path: ~/.npm-global/lib/node_modules/openclaw/skills/obsidian/SKILL.md
 Homepage: https://help.obsidian.md

Requirements:
 Binaries: ✗ obsidian-cli

Install options:
 → Install obsidian-cli (brew)

Tip: use `npx clawhub` to search, install, and sync skills.

Requirementsのところに、何が足らないか書いてある。この場合はobsidian-cliが足りていない。Install optionsのところに、どうやって入れればいいか書いてある。この場合はHomebrewで入れればいい。

きちんと必要要件を満たすと、下記のようにReadyになる。

obsidianスキルがReadyになった

$ openclaw skills info obsidian

🦞 OpenClaw 2026.3.2 (85377a2) — I don't have opinions about tabs vs spaces. I have opinions about everything else.

💎 obsidian ✓ Ready

Work with Obsidian vaults (plain Markdown notes) and automate via obsidian-cli.

Details:
 Source: openclaw-bundled
 Path: ~/.npm-global/lib/node_modules/openclaw/skills/obsidian/SKILL.md
 Homepage: https://help.obsidian.md

Requirements:
 Binaries: ✓ obsidian-cli

Tip: use `npx clawhub` to search, install, and sync skills.

今回入れたかったスキルに対して、必要だったものは下記のとおり。

今回入れたかったスキルに対して、必要だったものを入れたときに実行したコマンドたち

Homebrew: インストールコマンドを実行して、ログに出てくるパス追加やツールインストールのコマンド群を実行する
- このとき実行したコマンドは次のとおり
  - echo >> /home/nakurei/.bashrc
  - echo 'eval "$(/home/linuxbrew/.linuxbrew/bin/brew shellenv bash)"' >> /home/nakurei/.bashrc
  - eval "$(/home/linuxbrew/.linuxbrew/bin/brew shellenv bash)"
  - sudo apt install build-essential
  - brew install gcc
- 確認: brew --version
Go: sudo apt install -y golang-go
- 確認: go version
ffmpeg: sudo apt install -y build-essential ffmpeg
- 確認: ffmpeg -version
uv: curl -LsSf https://astral.sh/uv/install.sh | sh
- source "$HOME/.local/bin/env"でパスを通す
- 確認: uv --version
Obisdian CLI: brew install yakitrak/yakitrak/obsidian-cli
- 確認: obsidian-cli --help
summarize: npm install -g @steipete/summarize
- 確認: summarize --help
blogwatcher: go install github.com/Hyaxia/blogwatcher/cmd/blogwatcher@latest
- インストール後、source ~/.bashrcして、パスを通す
- 確認: blogwatcher --help

必要なものを入れ終えたら、再度openclaw skills checkを実行して、Ready to useに使いたいスキルが入っていることを確認する。

入れたいスキルをすべて入れ終えたときの、openclaw skills checkのログ

$ openclaw skills check

🦞 OpenClaw 2026.3.2 (85377a2) — Your task has been queued; your dignity has been deprecated.

Skills Status Check

Total: 51
✓ Eligible: 13
⏸ Disabled: 0
🚫 Blocked by allowlist: 0
✗ Missing requirements: 38

Ready to use:
 📰 blogwatcher
 🧩 coding-agent
 🎮 discord
 📦 healthcheck
 🍌 nano-banana-pro
 💎 obsidian
 🖼️ openai-image-gen
 ☁️ openai-whisper-api
 📦 skill-creator
 🧾 summarize
 🧵 tmux
 🎞️ video-frames
 🌤️ weather

Missing requirements:
 🔐 1password (bins: op)
 📝 apple-notes (bins: memo; os: darwin)
 ⏰ apple-reminders (bins: remindctl; os: darwin)
 🐻 bear-notes (bins: grizzly; os: darwin)
 🫐 blucli (bins: blu)
 🫧 bluebubbles (config: channels.bluebubbles)
 📸 camsnap (bins: camsnap)
 📦 clawhub (bins: clawhub)
 🎛️ eightctl (bins: eightctl)
 ♊️ gemini (bins: gemini)
 📦 gh-issues (bins: gh)
 🧲 gifgrep (bins: gifgrep)
 🐙 github (bins: gh)
 🎮 gog (bins: gog)
 📍 goplaces (bins: goplaces; env: GOOGLE_PLACES_API_KEY)
 📧 himalaya (bins: himalaya)
 📨 imsg (bins: imsg; os: darwin)
 📦 mcporter (bins: mcporter)
 📊 model-usage (bins: codexbar; os: darwin)
 📄 nano-pdf (bins: nano-pdf)
 📝 notion (env: NOTION_API_KEY)
 🎙️ openai-whisper (bins: whisper)
 💡 openhue (bins: openhue)
 🧿 oracle (bins: oracle)
 🛵 ordercli (bins: ordercli)
 👀 peekaboo (bins: peekaboo; os: darwin)
 🗣️ sag (bins: sag; env: ELEVENLABS_API_KEY)
 📜 session-logs (bins: jq, rg)
 🗣️ sherpa-onnx-tts (env: SHERPA_ONNX_RUNTIME_DIR, SHERPA_ONNX_MODEL_DIR)
 💬 slack (config: channels.slack)
 🌊 songsee (bins: songsee)
 🔊 sonoscli (bins: sonos)
 🎵 spotify-player (anyBins: spogo, spotify_player)
 ✅ things-mac (bins: things; os: darwin)
 📋 trello (bins: jq; env: TRELLO_API_KEY, TRELLO_TOKEN)
 📞 voice-call (config: plugins.entries.voice-call.enabled)
 📱 wacli (bins: wacli)
 𝕏 xurl (bins: xurl)

Tip: use `npx clawhub` to search, install, and sync skills.

長期メモリを有効化する

embedding providerを設定すると、memory searchが有効化され、長期メモリが使えるようになる。メモリの様子はopenclaw memory statusで確認できる。

openclaw memory status --deep

うまくいっていないときのログ

$ openclaw memory status --deep

🦞 OpenClaw 2026.3.2 (85377a2) — I autocomplete your thoughts—just slower and with more API calls.

│
◇
Memory Search (main)
Provider: none (requested: auto)
Model: none
Sources: memory
Indexed: 0/0 files · 0 chunks
Dirty: yes
Store: ~/.openclaw/memory/main.sqlite
Workspace: ~/.openclaw/workspace
Embeddings: unavailable
Embeddings error: No API key found for provider "openai". You are authenticated with OpenAI Codex OAuth. Use openai-codex/gpt-5.3-codex (OAuth) or set OPENAI_API_KEY to use openai/gpt-5.1-codex.

No API key found for provider "google". Auth store: /home/nakurei/.openclaw/agents/main/agent/auth-profiles.json (agentDir: /home/nakurei/.openclaw/agents/main/agent). Configure auth for this agent (openclaw agents add <id>) or copy auth-profiles.json from the main agentDir.

No API key found for provider "voyage". Auth store: /home/nakurei/.openclaw/agents/main/agent/auth-profiles.json (agentDir: /home/nakurei/.openclaw/agents/main/agent). Configure auth for this agent (openclaw agents add <id>) or copy auth-profiles.json from the main agentDir.

No API key found for provider "mistral". Auth store: /home/nakurei/.openclaw/agents/main/agent/auth-profiles.json (agentDir: /home/nakurei/.openclaw/agents/main/agent). Configure auth for this agent (openclaw agents add <id>) or copy auth-profiles.json from the main agentDir.
By source:
 memory · 0/0 files · 0 chunks
Vector: unknown
FTS: ready
Embedding cache: enabled (0 entries)
Batch: disabled (failures 0/2)
Issues:
 no memory files found in ~/.openclaw/workspace

まず、メモリ用のフォルダを作る。

mkdir -p ~/.openclaw/memory

次に、Provider用のAPIキーを設定する。今回はOpenAIのAPI keyを設定した。

printf 'OPENAI_API_KEY=APIキー\n' >> ~/.openclaw/.env

そして、ProviderをOpenAIに設定する。

openclaw config set agents.defaults.memorySearch.provider openai

ログ

$ openclaw config set agents.defaults.memorySearch.provider openai

🦞 OpenClaw 2026.3.2 (85377a2) — Greetings, Professor Falken

Config overwrite: /home/nakurei/.openclaw/openclaw.json (sha256 XXXXXXXXXXXXXXXXXXXXXXXXX -> XXXXXXXXXXXXXXXXXXXXXXXXX, backup=/home/nakurei/.openclaw/openclaw.json.bak)
Updated agents.defaults.memorySearch.provider. Restart the gateway to apply.

すると、サービスのリスタートを求めあれるので、リスタートする。

systemctl --user restart openclaw-gateway.service

インデックスを貼り、再度確認する。

openclaw memory index
openclaw memory status --deep

有効になったときのログ

$ openclaw memory status --deep

🦞 OpenClaw 2026.3.2 (85377a2) — I'm the assistant your terminal demanded, not the one your sleep schedule requested.

│
◇
Memory Search (main)
Provider: openai (requested: openai)
Model: text-embedding-3-small
Sources: memory
Indexed: 0/0 files · 0 chunks
Dirty: no
Store: ~/.openclaw/memory/main.sqlite
Workspace: ~/.openclaw/workspace
Embeddings: ready
By source:
 memory · 0/0 files · 0 chunks
Vector: ready
Vector path: ~/.npm-global/lib/node_modules/openclaw/node_modules/sqlite-vec-linux-x64/vec0.so
FTS: ready
Embedding cache: enabled (0 entries)
Batch: disabled (failures 0/2)
Issues:
 no memory files found in ~/.openclaw/workspace

メンションをなくす

自分とボットしかいないのに毎回メンションをするのは面倒なので、メンションなしでも応答するようにする。この設定はopenclaw.jsonを編集するとできる。nanoでもvimでも好きなエディタで開いて、編集すればいい。

nano .openclaw/openclaw.json

DiscordからサーバーのIDを確認し、下記のようにrequireMentionをfalseに設定する。

DiscrodサーバーのIDの部分は、実際のサーバーIDに置き換えること。

{
 "channels": {
 "discord": {
 "enabled": true,
 "token": "XXXXXXXX",
 "groupPolicy": "open",
 "streaming": "off",
 "guilds": {
 "DiscrodサーバーのID": {
 "requireMention": false
 }
 }
 }
 }
}

反映させる。

systemctl --user restart openclaw-gateway.service

動いた！

参考文献・URL

OpenClaw - OpenClaw

docs.openclaw.ai

Discord × OpenClaw 実践セットアップ — 設定はAIとの対話で終わる｜Karry

前回、OpenClawの「家」をDiscordに建てた話を書いた。なぜDiscordなのか、チャンネル設計の思想、自治区という発想——あれは考え方の話だった。今回は手を動かす。Bot作成からAgent Terms、Cron Jobsまで、実際にやった設定を全部書く。先に結論だけ言っておくと、僕が自分でコードを書いたり設定ファイルをいじったりした場面は、ほぼなかった。 Discord Botを作る — 唯一の手作業唯一の手作業がこれ。Discord Developer Portalに行って、Applicationを作って、BotページからTokenを取る。ここまではどのチ

note.com

はじめてtmuxを触ってみたときのメモ

Mon, 23 Feb 2026 17:19:04 +0900

これはなに

はじめてtmuxを触ってみたときにやったことのメモ。

GitHub - tmux/tmux: tmux source code

tmux source code. Contribute to tmux/tmux development by creating an account on GitHub.

環境

Windows 11 WSL2 Ubuntu 24.04
tmux 3.4

インストール

aptでインストールした。

sudo apt install tmux

他のインストール方法は公式を参照してほしい。

Installing

tmux source code. Contribute to tmux/tmux development by creating an account on GitHub.

バージョンを確認できれば成功。

$ tmux -V
tmux 3.4

操作に慣れる

起動して閉じるだけ

とりあえず起動してみる。

tmux

すると新たにウィンドウが開く。これはtmuxセッションと呼ばれる。tmuxセッション内では、画像のように下部にステータスバーが表示される。

ステータスバーには、現在のセッション名やウィンドウ名、日時などが表示される。セッション名はデフォルトでは0になっている。

Ctrl + dを押すかexitコマンドを実行すると、tmuxセッションが終了する。

exit

ターミナルを分割してみる

再度起動する。

tmux

tmuxではウィンドウを分割できる。分割したものはペインと呼ばれる。上下の分割はCtrl + bを押してから%を押す。左右の分割はCtrl + bを押してから"を押す。

JISキーボードの場合、%はShift + 5なので、Ctrl + bを押してからShift + 5を押す必要がある。"も同様に、Shift + 2なので、Ctrl + bを押してからShift + 2を押す必要がある。

ペインの切り替え

ペインの切り替えは、Ctrl + bを押してから矢印キーを押す。例えば、右のペインに切り替える場合は、Ctrl + bを押してから右矢印キーを押す。

また、Ctrl + bを押してからoを押すと次のペインに移動、Ctrl + bを押してから;を押すと以前のペインに移動できる。

ペインのサイズ変更

ペインのサイズ変更は、Ctrl + bを押してからCtrl + 矢印キーを押す。例えば、右のペインを広げる場合は、Ctrl + bを押してからCtrl + 右矢印キーを押す。

Ctrl + bを押してからzを押すと、現在のペインを最大化できる。もう一度Ctrl + bを押してからzを押すと、元のサイズに戻る。

ペインの移動

ペインの移動は、Ctrl + bを押してから{を押すと次に、Ctrl + bを押してから}を押すと前に移動できる。番号はCtrl + bを押してからqを押すと表示される。

ペインの削除

ペインの削除は、Ctrl + bを押してからxを押す。すると、削除するかどうかの確認が表示されるので、yを押すと削除される。

ペイン内でCtrl + dを押すかexitコマンドを実行しても、ペインを削除できる。

セッションの一時離脱

Ctrl + dではなく、Ctrl + bを押してからdを押すと、セッションから一時的に離脱できる。離脱したセッションはバックグラウンドで動いているので、再度アタッチすれば続きから作業できる。アタッチは以下のコマンドでできる。

tmux a

どういうセッションがあるか確認したいときは、以下のコマンドを実行する。

tmux ls

すると次のように確認できる。

$ tmux ls
0: 2 windows (created Mon Feb 23 00:59:32 2026) (attached)

原則として、終了時はCtrl + bを押してからdを押して離脱し、再開時はtmux aでアタッチするのが良さそう。

ウィンドウを増やす

ペインの組み合わせを新しく作りたい場合は、ウィンドウを新しく作る。ウィンドウはタブのようなもので、tmuxでは複数のウィンドウを切り替えて作業できる。

Ctrl + bを押してからcを押すと、新しいウィンドウが作成される。

ウィンドウの切り替えは、Ctrl + bを押してからnを押すと次のウィンドウ、Ctrl + bを押してからpを押すと前のウィンドウに切り替えられる。あるいは、Ctrl + bを押してからウィンドウ番号（e.g. 0, 1, 2, …）を押すと、その番号のウィンドウに切り替えられる。

カスタマイズ

設定ファイルを作る

tmuxはホームディレクトリにある.tmux.confファイルでカスタマイズできる。例えば、以下のように記述すると、Ctrl + b（プレフィックスキー）をCtrl + aに変更できる。

# プレフィックスキーをCtrl + aに変更
unbind C-b
set-option -g prefix C-a
bind C-a send-prefix

ウィンドウ内でマウス操作を有効にするには、以下のように記述する。マウス操作を有効にするとターミナルのスクロールが使えたり、クリックでペインを切り替えたりできるようになる。ただし、ターミナルの文字列をCtrl + Shift + cでコピーできなくなる。

# マウス操作を有効にする
set -g mouse on

また、ユーザー名@ホスト名: カレントディレクトリの部分に色をつけるには、以下のように記述する。

# tmux内でも同じ色が出るように設定
set-option -g default-terminal screen-256color
set -g terminal-overrides 'xterm:colors=256'

クリップボードをtmuxとOSとで共有するには、以下のように記述する。

# クリップボードをtmuxと共有する
set-option -g set-clipboard on

設定を反映させる

設定を変更した後は、tmuxセッション内で以下のコマンドを実行して設定を反映させる。

tmux source-file ~/.tmux.conf

おわりに | 感想

きちんとショートカットキーを覚えないと使いにくいが、慣れれば便利そう。任意の形式で分割できたり、最大化できたりするのは便利だし、セッションを一時離脱できるというのも役立ちそう。使えるようになるぞ～。

参考文献・URL

とほほのtmux入門 - とほほのWWW入門

www.tohoho-web.com

ターミナル多重化ソフトウェアtmuxの始め方

tmux、これだけ知っておけばおｋ（用語・準備編） - Qiita

1. tmuxとは tmuxとは一つのターミナルで複数のセッションやウィンドウを管理できるソフトウェアツールでTerminal Multiplexerの略です。tmux内で複数の仮想端末を切り替えることでTeratermやPutty、ターミナルなどを新規に立ち上げる手間を...

GitHub で main ブランチを保護するときに何をすればいいかのメモ

Sun, 15 Feb 2026 17:34:07 +0900

これはなに

GitHubでmainブランチを保護するためのルール設定のメモ。

前提

GitHubでは、ブランチ保護にルールを設定できる。

ブランチ保護ルールを管理する - GitHub ドキュメント

ブランチ保護ルールを作成して、1 つ以上のブランチに特定のワークフローを強制することができます。たとえば、承認レビューを要求したり、保護されたブランチにマージされるすべての pull request について状態チェックを渡したりすることができます。

ここでは、メインブランチの保護にフォーカスし、上記の保護ルールをどのように設定すればいいのかを述べる。

ルール集

`main`っぽい名前のブランチの作成を禁止する

main*に"Restrict creations"を設定する。*をつけるのが肝。

`main`ブランチそのものの更新をすべて停止する

mainに"Restrict updates"を設定する。この設定を有効にすると、プッシュだけでなくリベースやマージなどすべての更新を阻止できる。

`main`ブランチの削除を禁止する

mainに"Restrict deletions"を設定する。

デプロイを保証する

mainに"Require deployments to succeed"を設定する。

署名付きコミットを要求する

mainに"Require signed commits"を設定する。

プルリクエスト（PR）を要求する

mainに"Require a pull request before merging"を設定する。

自分だけの開発なら、“Required approvals"は0にする。他者に必ずレビューしてもらいたいなら、“Required approvals"を1以上にする
“Dismiss stale pull request approvals when new commits are pushed"は、有効にするのがベター
自分だけレビューなくマージして、ほかの人には自分のレビューを強制する場合、CODEOWNERSファイルを作成して、“Require review from Code Owners"を有効にするとよい
“Require conversation resolution before merging"は有効でもいいかも

CI/CDの通過を強制する

mainに"Require status checks to pass"を設定する。

“Require branches to be up to date before merging"は有効にするのがベスト

強制pushを禁止する

mainに"Block force pushes"を有効にする。

リポジトリを公開している際のルール集

デプロイしているブランチに"Require deployments to succeed"を設定する
自分が署名付きコミットを使っているなら、保護したいブランチに"Require signed commits"を設定する
保護したいブランチに"Require a pull request before merging"を設定する

参考文献・URL

ブランチ保護ルールを管理する - GitHub ドキュメント

ルールセットで使用できるルール - GitHub ドキュメント

リポジトリ内の特定のブランチとタグを保護するためにルールセットに追加できるルールについて説明します。

MATLABで図を保存するときは図のサイズに気を付けるべき

Mon, 09 Feb 2026 20:29:33 +0900

MATLABで図を保存するとき、何も考えず保存すると、図によってはグラフが小さすぎて見れなかったり凡例が図に被ったりしてしまう。 .figで保存していれば、開いてから最大サイズにすればいいだけなのだが、これを毎回やっているとなかなかめんどい。.pngで保存していたら詰む。

そこで、下記のように、保存する前に図のサイズを最大サイズにしてから保存する。

figH = figure();
figH.WindowState = 'maximized';
% fig
savefig(figH, "output.fig");
% png 2020a以降
exportgraphics(figH, 'output.png', 'Resolution', 300);
% png 2020aより前
print(figH, 'output.png', '-dpng', '-r300');

こうすると、グラフが小さすぎて見れなかったり凡例が図に被ったりする事故を防げる。

C# の開発環境を VS Code で構築した際の構築手順メモ

Fri, 06 Feb 2026 22:40:41 +0900

これはなに

C#の開発環境をVS Codeで構築した際に取った手順のメモ。

環境

Windows 11
VS Code 1.108.2
.NET SDK 10.0.102

手順

1. .NET SDKのインストール

.NET SDKをインストールする。

.NET のダウンロード (Linux、macOS、Windows) | .NET

Linux、macOS、および Windows で .NET アプリケーションを構築し、実行するための無料ダウンロード。.NET Framework、.NET、および ASP.NET 用のランタイム、SDK、および開発者パック。

dotnet.microsoft.com

Windowsの場合wingetで入れるのが楽。どのバージョンがインストールできるかは、winget searchで確認できる。

winget search ".NET SDK"

実行例を以下に示す。ここから最新版を確認する。

> winget search ".NET SDK"
名前 ID バージョン ソース
--------------------------------------------------------------------------------------------
Microsoft .NET SDK 10.0 Microsoft.DotNet.SDK.10 10.0.102 winget
Microsoft .NET SDK 3.1 Microsoft.DotNet.SDK.3_1 3.1.426 winget
Microsoft .NET SDK 5.0 Microsoft.DotNet.SDK.5 5.0.408 winget
Microsoft .NET SDK 6.0 Microsoft.DotNet.SDK.6 6.0.428 winget
Microsoft .NET SDK 7.0 Microsoft.DotNet.SDK.7 7.0.410 winget
Microsoft .NET SDK 8.0 Microsoft.DotNet.SDK.8 8.0.417 winget
Microsoft .NET SDK 9.0 Microsoft.DotNet.SDK.9 9.0.310 winget
Microsoft .NET SDK 10.0 Preview Microsoft.DotNet.SDK.Preview 10.0.100-rc.2.25502.107 winget

当時は.NET 10が最新だったので、それを入れた。

winget install Microsoft.DotNet.SDK.10

インストールが終わったら、以下のコマンドできちんとインストールされたことを確認する。

winget list DotNet

実行例を以下に示す。

> winget list DotNet
名前 ID バージョン ソース
----------------------------------------------------------------------------
Microsoft .NET SDK 10.0.102 (x64) Microsoft.DotNet.SDK.10 10.0.102 winget

.NET SDKのインストールが終わったら、PCを再起動する。

2. VS Codeのインストール

VS Codeを入れる。

Visual Studio Code - The open source AI code editor

code.visualstudio.com

これもwingetで入れられる。

winget install Microsoft.VisualStudioCode

インストールが終わったら、以下のコマンドできちんとインストールされたことを確認する。

winget list VisualStudioCode

実行例を以下に示す。

> winget list VisualStudioCode
名前 ID バージョン ソース
--------------------------------------------------------------------------
Microsoft Visual Studio Code Microsoft.VisualStudioCode 1.108.1 winget

入れ終わったら再起動する。

3. VS Codeに拡張機能を入れる

VS Codeを開いて、拡張機能C# Dev Kitを入れる。

C# Dev Kit - Visual Studio Marketplace

Extension for Visual Studio Code - Official C# extension from Microsoft

4. C#プロジェクトの作成と実行

VS Code上でCtrl + Shift + Pを押しコマンドパレットを開く。.NET: New Projectを選択し、表示されるテンプレートから「コンソールアプリ」を選ぶ。アプリ名などは適当。

作成されたプロジェクトでProgram.csを開き、F5キーを押してデバッグを実行する。選択ウィンドウが表示されたらC#を選ぶ。コンソールに下記のようにHello, World!と出れば成功。

------------------------------------------------------------------------------
Microsoft Visual Studio .NET/C/C++ デバッガー (vsdbg)
は、アプリケーションの開発とテストに役立つ Visual Studio
Code、Visual Studio、または Visual Studio for Mac
ソフトウェアでのみ使用できます。
------------------------------------------------------------------------------
Hello, World!
プログラム '[20208] Program.exe' がコード 0 (0x0) で終了しました。

おわり。あとは任意にC#の開発を進める。

参考文献・URL

Visual Studio Code (VSCode) でC#開発環境を構築する

Visual Studio Codeと.NET SDKのインストール手順から、VSCodeの日本語化やC# Dev Kit（拡張機能）の導入方法、C#プロジェクトの作成、デバッグ実行までを、画像付きでわかりやすく解説します。

hirahira.blog

pywinautoで自動化するとき、クリック前はwaitメソッドで待とう

Wed, 04 Feb 2026 21:08:26 +0900

これはなに

pywinautoを用いた自動化のコツのメモ。

環境

Python 3.14
pywinauto 0.6.9

クリック前はwaitメソッドで待とう

たとえば、検索欄をクリックする場合、下記のようにwaitメソッドで待機してからクリックしよう。

search_box.wait("enabled", timeout=10)
search_box.click_input()

wait()メソッドは、第一引数wait_forに以下5つの値をとれる¹。

`wait_for`	意味
“exists”	有効な状態
“visible”	表示されている
“enabled”	操作可能
“ready”	表示されていて、かつ有効な状態
“active”	アクティブ状態

よって、基本的に"enabled"まで待機すればクリックできる。不安定なら"ready"を使うか、wait()メソッド後にtime.sleep()で1,2秒待機するとよい。

なお、timeoutは必ずつけること。timeoutを設定しないと、何らかの問題でクリックしたい対象そのものが描画されない場合に、無限待機になってしまう。

参考文献・URL

Pywinauto：「待機」の考え方と time.sleep との使い分け｜Hiroyuki Hayashi

はじめに WindowsのGUI自動化では、「いつ操作するか」が結果の安定性を大きく左右します。 pywinauto を使い始めた直後は、time.sleep() による固定時間待機で動かすことが多いですが、処理回数が増えたり、PC 環境が変わったりすると、動作が不安定になることがあります。この記事では、pywinauto が提供する状態に基づく待機（wait）を中心に、time.sleep() との現実的な使い分けについて整理します。 1. 固定時間待機の問題点 time.sleep(指定時間) のような固定時間待機は、次のような性質を持ちます。処理が想定より遅い

note.com

GitHub - pywinauto/pywinauto: Windows GUI Automation with Python (based on text properties)

Windows GUI Automation with Python (based on text properties) - pywinauto/pywinauto

参考: pywinauto公式ドキュメントのwaitのページ ↩︎

systemdサービスファイルの作成方法と設定手順メモ

Sun, 01 Feb 2026 17:57:58 +0900

これはなに

systemdサービスファイルの作成方法と設定手順のメモ。いつも忘れるのでメモしておくだけ。

手順

1. systemdサービスファイルを作成する

以下のコマンドを実行して、systemdサービスファイルを作成または編集する。

your-service-name は任意のサービス名に置き換えること。

sudo nano /etc/systemd/system/your-service-name.service

するとエディタが開くので、設定を記述する。例を以下に示す。

[Unit]
Description=Cronitor Dashboard
After=network.target

[Service]
Type=simple
User=nakurei
ExecStart=/usr/bin/cronitor dash --port 9000
Restart=on-failure

[Install]
WantedBy=multi-user.target

Unit セクションではサービスの説明や依存関係を設定する。After=network.target はネットワークが利用可能になった後でサービスを起動することを意味する。他に Requires= や Wants= を使えば、依存関係を詳細に設定できる。

Service セクションではサービスの動作方法を定義する。User= はサービスを実行するユーザーを指定し、ExecStart= は実行するコマンドを指定する。終了時のコマンドは ExecStop= で指定できる。Restart= はサービスが失敗した場合の再起動ポリシーを設定する。 Restert=on-failure はサービスが異常終了した場合に再起動することを意味する。

Install セクションではサービスのインストールに関する設定を定義する。WantedBy= はサービスがどのターゲットに関連付けられるかを指定する。multi-user.target は通常のマルチユーザーモードでサービスを起動することを意味する。

以上を記述したら、保存してエディタを閉じる。

ちなみに、このファイルは /etc/systemd/system/ ディレクトリに保存される。

ls /etc/systemd/system/your-service-name.service

2. systemdサービスをリロードする

systemdサービスファイルを作成または編集した後、以下のコマンドを実行してsystemdをリロードする。

sudo systemctl daemon-reload

3. systemdサービスを有効化して起動する

systemdサービスファイルを新規作成した場合は、以下のコマンドを実行する。

your-service-name は任意のサービス名に置き換えること。

sudo systemctl enable your-service-name
sudo systemctl start your-service-name

新規作成ではなく編集した場合は、以下のコマンドを実行する。

sudo systemctl restart your-service-name

4. systemdサービスの状態を確認する

以下のコマンドで、実行状態を確認できる。

your-service-name は任意のサービス名に置き換えること。

sudo systemctl status your-service-name

正常に起動していれば、active (running) と表示される。

5. systemdサービスのログを確認する

以下のコマンドで、サービスのログを確認できる。

your-service-name は任意のサービス名に置き換えること。

sudo journalctl -u your-service-name -f

-f オプションを付けると、リアルタイムでログを監視できる。

cronによる定期実行の設定方法

Fri, 30 Jan 2026 21:03:53 +0900

これはなに

cronで定期実行する方法を毎回調べているのでメモしておくだけ。

手順

1. スクリプトに実行権限を付与

chmod +x /path/to/your/script.sh

2. crontabを編集する

crontab -e

3. cronジョブを追加

cronの書式は次のようになっている。これに従いcronジョブを追加する。

* * * * * コマンド
│ │ │ │ │
│ │ │ │ └─ 曜日 (0-7, 0と7は日曜日)
│ │ │ └─── 月 (1-12)
│ │ └───── 日 (1-31)
│ └─────── 時 (0-23)
└───────── 分 (0-59)

cron式のオンラインジェネレーターもある。動作タイミングを確認しやすくて便利。オススメ。

Crontab.guru - The cron schedule expression generator

An easy to use editor for crontab schedules.

crontab.guru

例1: 毎日午前9時に実行。

0 9 * * * /path/to/your/script.sh

例2: 5分ごとに実行。

*/5 * * * * /path/to/your/script.sh

例3: 毎週月曜日の午前3時に実行。

0 3 * * 1 /path/to/your/script.sh

4. 設定を確認

crontab -l

5. cronサービスを再起動（必要に応じて）

sudo service cron restart

6. ログの確認

cronのログは通常/var/log/syslogに記録される。以下のコマンドで確認できる。

grep CRON /var/log/syslog

注意点

スクリプト内で使用するパスは、必ず絶対パスで指定する
cron環境は通常のシェル環境と異なるため、必要な環境変数を設定する
出力をログファイルにリダイレクトすることを検討する

出力は以下のようにすればログファイルにリダイレクトできる。

0 9 * * * /path/to/your/script.sh >> /path/to/your/logfile.log 2>&1

あるいは、以下のようにすれば出力を捨てられる。

0 9 * * * /path/to/your/script.sh > /dev/null 2>&1

参考文献・URL

cronの詳細な使い方については、以下のリンクを参照。

help.ubuntu.com

継承以外の解決策

Sat, 06 Dec 2025 00:09:31 +0900

これはなに

プログラミングにおいて、継承を使わずいい感じに実装するための解決策のメモ。

継承すべきとき

is-aの関係が明確で、かつその振る舞いも共通化できるとき

継承以外の解決策

新しく別のクラス/関数を作る

思想: 似ているだけで別物なら、別で作るべき
- 「似ている」と「同じ」は違う
cons : 重複コードが出る
- 管理が大変になる

合成する（コンポジション）

思想: has-aの関係にする
- 機能を内部に取り込んで利用するイメージ
cons: 一部だけ利用したい場合でも、すべてを合成してしまう
- なぜ合成したのか、意図が不明確になってしまう
- メソッドやプロパティが欲しいだけの場合は向かない
使うとき
- スーパータイプのすべてを利用したいとき
  - e.g. 依存性注入
- 使うのは一部だが、スーパータイプの概念が欲しいとき

共通化

思想: 共通のロジックを関数として抽出する
- いわゆるDRY原則の適用
cons: ロジックが値と分離してしまうため、知る人ぞ知るコードが増えてしまう
使うとき
- 値のカプセル化が不要なとき
  - 単純にロジックとして共通化できる場合はとくに有効
    - ロジックが独立している場合に該当
  - クラスに依存しない実装は、クラスに依存させないほうが望ましい

再設計: 最小カプセル化

思想: 必要な値とロジックだけを抽出して、新しいクラス/関数を作る
- 値とロジックを1つにカプセル化できるため、もっとも理想的な解決策
cons: 抽出が難しいため、実装が難しい
- たいてい再設計が必要になってしまうため、工数がかかる

uvを初めて使ったときのメモ

Sun, 19 Oct 2025 10:17:12 +0900

これはなに

uvを初めて使ったときのメモ。

環境

Windows 11 WSL2 Ubuntu 24.04
uv 0.9.4

導入

Linuxなので下記コマンドで導入した。

curl -LsSf https://astral.sh/uv/install.sh | sh

再起動後、uv --versionでバージョンが表示されれば成功。

$ uv --version
uv 0.9.4

uv自体をアップグレードしておく。

uv self update

シェルの自動補完を有効にしておく。

echo 'eval "$(uv generate-shell-completion bash)"' >> ~/.bashrc
source ~/.bashrc

初期化

もともと使いたいプロジェクトのディレクトリがある場合、そこに移動してuvの初期化する。

cd my-project

アプリケーションプロジェクトなら--appオプション、ライブラリプロジェクトなら--libオプションをつけて初期化する。

# アプリケーションプロジェクト
uv init --app my-app

# ライブラリプロジェクト
uv init --lib my-lib

実行すると、いくつかファイルが生成される。アプリケーションとライブラリで生成されるファイルが異なる。どちらでも最低限のpyproject.tomlが生成されるのは便利。

Pythonのインストール

uvでは複数のPythonバージョンをインストールできる。

uv python install 3.10 3.14

インストールされているPythonバージョンは下記で確認できる。

uv python list

こうやってコマンドひとつでインストールできるのは便利。

プロジェクトで使うPythonバージョンの設定

各プロジェクトで使うPythonバージョンは下記コマンドで設定できる。

uv python pin 3.10

設定されているPythonのバージョンは、.python-versionファイルに保存される。

.python-version

3.10

pyproject.tomlに書かれた最低バージョンよりも低いバージョンはピン留めできないので、pyproject.tomlを編集してからピン留めする必要がある。

仮想環境の作成

プロジェクトの仮想環境は下記コマンドで作成できる。

uv venv

実行すると、.venvディレクトリが作成される。作成速度が爆速ですごい。

仮想環境のアクティベートは下記コマンドでできる。

source .venv/bin/activate

ただし、uvは仮想環境をアクティベートせずとも、uv runを使えば仮想環境内で実行できる。

uv run main.py

VS Codeの場合は、Pythonの拡張機能が.venvを自動で認識してアクティベートしてくれるので、特に意識しなくても良い。

パッケージのインストール

uvではuv addコマンドでパッケージをインストールできる。

uv add numpy

開発でのみ使うパッケージは--devオプションをつける。

uv add --dev pytest

アンインストールはuv removeコマンド。

uv remove numpy

環境の更新

uv syncで、最新の状態に環境を同期できる。

uv sync

これを利用すると、Pythonのバージョンを簡単に変えられる。

uv python pin 3.11
uv sync

パッケージ作るときとか新しいバージョンで動作を見たいときとかに便利。 venvの仮想環境も自動で再作成される。この再生性の速度が爆速ですごい。

自作パッケージを入れる

自作パッケージを入れたい場合は、uv add --editableコマンドを使う。

uv add --dev --editable .

.はカレントディレクトリを意味する。これで自作パッケージを開発モードでインストールできる。

参考文献・URL

GitHub - astral-sh/uv: An extremely fast Python package and project manager, written in Rust.

An extremely fast Python package and project manager, written in Rust. - astral-sh/uv

uv is an extremely fast Python package and project manager, written in Rust.

docs.astral.sh

Installing and managing Python | uv

A guide to using uv to install Python, including requesting specific versions, automatic installation, viewing installed versions, and more.

docs.astral.sh

Claude Codeを初めて試すときに調べたことのメモ

Mon, 13 Oct 2025 14:28:36 +0900

これはなに

Claude Code CLIを初めて試したときのメモ。

インストール

Node.js 18以上を入れる。

Claude Code CLIをインストール。

npm install -g @anthropic-ai/claude-code

開始

Claude Code CLIをインタラクティブに使う（Read-Eval-Print Loop）場合は、単にclaudeコマンドを実行。

claude

単一の指示だけ実行するOne-shot modeで使う場合は、-pオプションで指示を与える。

claude -p "Write a Python function that computes the Fibonacci sequence."

初回利用時はOAuth認証が必要。料金請求先のアカウントを指定する。

最新の会話から再開したい場合は、-cオプションで再開できる。

claude -c

Claude Code自体の設定

settings.jsonでClaude Code CLI自体の設定ができる。

Claude Code の設定 - Claude Code Docs

Claude Code をグローバル設定とプロジェクトレベルの設定、および環境変数で構成します。

docs.claude.com

~/.claude/settings.jsonだとユーザー設定、.claude/settings.jsonだとプロジェクト固有の設定になる。また、.claude/settings.local.jsonだとGitなどで共有されないローカル設定になる。

たとえば、下記のように設定すると処理が終わった後に音を鳴らせる。

{
 "hooks": {
 "Stop": [
 {
 "hooks": [
 {
 "type": "command",
 "command": "mpg123 -q -f 8192 ~/workspace/data/sounds/success001.mp3"
 }
 ]
 }
 ]
 }
}

設定の変更

Claude Code CLIの設定はconfigコマンドで行う。

claude config

インタラクティブモードで設定を変える場合は、以下のようにする。

/config

モデルの選択

モデルは切り替えられる。

claude --model claude-sonnet

インタラクティブモードでモデルを切り替える場合は、以下のようにする。

/model

プロジェクトの設定をする

設定ファイルの作成

claudeで起動し、/initコマンドを実行すると、設定ファイルCLAUDE.mdを作成できる。

claude
/init

これはプロジェクトの文脈をAIに伝える役割を持つ。コーディング規約やアーキテクチャの説明などを記述できる。プロジェクトルートにあるとそのプロジェクトのみに適用される。~/.claude/にあるとグローバルに適用される。

その場限りのルールを追加する

インタラクティブモードのときは、#を使うとその場限りのルールを追加できる。

# Use snake_case for variable names.

便利な使い方

あるファイルだけ使う場合は、以下のようにパイプで指定すると良い。

cat example.py | claude -p "Explain this code."

指示内でファイルを指定するときは、@を使う。

claude -p "Refactor the code in @example.py to improve readability."

コンテキストをリセットする場合は、/clearコマンドを実行したあと、@CLAUDE.md を読んで、プロジェクトのコンテキストを復元してと指示する。

全体として、Anthropicのベストプラクティスに従うと良い。

Claude Code overview - Claude Code Docs

Learn about Claude Code, Anthropic's agentic coding tool that works in your terminal, IDE, desktop app, and browser to help you turn ideas into code faster than ever before.

www.anthropic.com

ワークフローとしては、上記ベストプラクティスにある「探索、計画、コード、コミット」に従うと良さそう。

関連するファイル、画像、URLを読むよう依頼する
特定の問題にどのようにアプローチするかを計画してもらう。決まったら計画をドキュメントにまとめてもらうとより良い
その解決策をコードで実装するよう依頼する
結果をコミットしてもらい、プルリクエストを作成してもらう。必要に応じてREADMEやドキュメントも更新してもらう

参考文献・URL

Claude Code CLIを使いこなす！基本〜便利コマンド紹介編

syu-m-5151.hatenablog.com

Claude Code の使い方｜npaka

「Claude Code」の使い方をまとめました。・Claude Code 1. Claude Code 「Claude Code」は、Anthropicが開発したエージェントコーディングツールです。ターミナルに常駐し、コードベースを理解し、自然言語コマンドを通じてより速くコーディングできます。開発環境に直接統合することで、追加のサーバや複雑なセットアップなしにワークフローを合理化します。現在は研究プレビューとして提供されてます。主な機能は次のとおりです。・コードベース全体のファイルの編集とバグの修正・コードのアーキテクチャとロジックに関する質問に回答・テス

note.com

Claude Code の CLAUDE.mdは設定した方がいい - じゃあ、おうちで学べる

[社内共有版「Claude Code、どこまでも」] はじめに Claude Codeを使い始めて1週間。私の開発スタイルは完全に変わった。きっかけは3ヶ月前に書いた「生成AIといっしょ: 動作するきれいなコードを生成AIとつくる」という記事だった。当時はAIとの協業について考察していたが、正直なところ、まだ私が「運転席」に座っているつもりでいた。AIはあくまで「副操縦士」だと。 syu-m-5151.hatenablog.com 現実は違った。実際にClaude Codeを使ってみて最初に感じたのは、自分の開発スタイルとAIの特性のミスマッチだった。私は根っからの「とりあえずコード書いて…

Ubuntu Server 24.04 をセットアップしたときのメモ

Sat, 20 Sep 2025 14:49:18 +0900

これはなに

Ubuntu Server 24.04をセットアップしたときのメモ。本当にただのメモ。

環境

インストール対象PC: GMKtec ミニpc
その辺に転がっていた16GBのUSBメモリ
インストーラ作成用PC: Windows 11

インストーラの作成

USBメモリにisoイメージを書き込む。

フォーマットしても問題ない8GB以上のUSBメモリが必要。加えて、USBメモリに書き込むためのPCが必要。今回はWindowsマシンを用意した。

まず、Ubuntuの公式サイトからisoイメージをダウンロードする。ダウンロードしたら、それをUSBメモリに書き込む。 Windowsで書き込みをするならRufusが便利。インストールしないポータブル版だと使い捨てやすい。

Rufusの使い方は過去に書いた下記記事を参考にした。

WindowsでHDDなどのデバイスやストレージをXFSにフォーマットする

Rufusを用いてUSBメモリに書き込んだら完了。

BIOSの設定

インストール対象PCのBIOSで、USBメモリから起動するように設定する。ちなみに今回のミニPCはデフォルトの設定でUSBメモリから起動できた。

先ほど作成したUSBメモリと、インストール対象のPCが必要。PCはUSBメモリを挿せる必要がある。

USBを指して電源を入れ、ESCキーを連打してBIOS画面に入る。 BIOS画面でUSBメモリから起動するように設定し、保存して再起動する。これにより、Ubuntuのインストーラが起動する。

Ubuntu Serverのインストール

最初に言語を選択する。この時点で日本語はない。英語にした。
Ubuntuのバージョンが古い場合はアップデートするか聞かれる。Continue without updatingを選択。
キーボードのレイアウトを聞かれる。デフォルトは英語。日本語キーボードを使う場合は、Japaneseを選択。
インストールするベースを聞かれる。Ubuntu Serverを選ぶ。
インターネット接続を聞かれる。きちんとインターネットに接続されていることを確認する。disabledの場合は接続できていない。
- 当時はここで結構ハマった。Wi-Fiの場合はWPA2なら接続できる。この時点ではWPA3は対応していなかった（2敗）。有線LANなら問題ない。
Proxyの設定を聞かれる。設定が必要なら設定する。必要ないなら空欄のまま進めて問題ない。
Ubuntuを取得するMirrorサイトとの接続テストが始まるので少し待つ。This mirror location passed testsと表示されれば問題ない。
インストール時のストレージの設定を聞かれる。
- Use an entire diskを選択するとクリーンインストールになる。大抵はこれで問題ない。
- Set up this disk as an LVM groupを選択するとLVMでのインストールになる。LNMのインストールにすると、パーティションの設定ができる。
- Encrypt the LVM groip with LUKSを選択すると暗号化される。これを設定すると必ずパスフレーズを聞かれるようになる。このときは設定しなかった。
パーティションの設定を聞かれる。こだわりがなければそのままで問題ない。
Confirm destructive actionが表示される。ここでContinueを選択すると、ディスク内のデータがすべてフォーマットされ、インストールが実行されるという警告である。Continueを選択する。
名前・ユーザー名・パスワードを聞かれるので設定する。ここで設定したものがAdminユーザーとなる。ユーザー名とパスワードは後で使うので控えておくこと。
Ubuntu Proへのアップグレードを聞かれる。Skip for nowを選択する。
OpenSSH serverのインストールを聞かれる。リモートからSSHで接続する場合は、Install OpenSSH serverを選択する。鍵は後から作成し設定した。
追加でインストールするパッケージを聞かれる。後から追加できるので、特に必要なければそのまま進める。他にあらかじめインストールしておきたいパッケージがあれば、ここで選択する。

ここまで設定するとインストールがはじまる。しばらく待つ。Installation complete!と表示されれば完了である。 USBを外して、Reboot Nowを選択する。USBを外し忘れると外すように指示されるので、USBを外してEnterを押す。

初回起動

再起動するとログインプロンプトが表示される。先ほど設定したユーザー名とパスワードでログインする。

システムのアップデートを行う。

sudo apt update
sudo apt upgrade -y

参考文献・URL

ミニPCにUbuntu Server 24.04 LTSをインストール - Qiita

1. 必要なものを準備するサーバー機: Ubuntu Server 24.04 LTSをインストールするためのデバイス。 USBメモリ: インストールメディアを作成するための8GB以上の容量が推奨される。別のPC: インストールメディアを作成するためのデバイス...

NavidromeのサーバをDockerで構築したときの手順メモ

Sun, 07 Sep 2025 21:45:19 +0900

これはなに

NavidromeのサーバをDockerで構築したときの手順メモ。

構築した環境は以下。

GitHub - NakuRei/navidrome-music-server-on-docker: NavidromeのサーバをDockerで構築するためのリポジトリ。

NavidromeのサーバをDockerで構築するためのリポジトリ。. Contribute to NakuRei/navidrome-music-server-on-docker development by creating an account on GitHub.

Navidromeとは

NavidromeはSubsonic APIを実装した軽量な音楽サーバである。OSSであり、無料で利用できる。

Navidrome

www.navidrome.org

Subsonic APIをサポートするクライアントアプリを用いれば、スマートフォンやPCから音楽をストリーミング再生できる。

環境

OS: Ubuntu Server 22.04
Docker 28.3.3
Docker Compose 2.39.1

サーバの構築手順

まず、作業用ディレクトリを作成する。

cd ~/workspace
mkdir navidrome
cd navidrome

次に、Docker Composeの設定ファイルを作成する。

nano compose.yaml

以下の内容を記述する。

compose.yaml

services:
 navidrome:
 container_name: navidrome
 image: deluan/navidrome:latest
 restart: unless-stopped
 user: 1000:1000
 ports:
 - "45335:4533" # Navidromeのポート
 volumes:
 - /mnt/nas_buffalo:/music:ro  # NASをマウントした音楽フォルダ（読み取り専用）
 - ./data:/data  # 設定・再生履歴・プレイリストの保存先
 environment:
 - ND_SCANINTERVAL=1h  # 音楽の再スキャン間隔
 - ND_LOGLEVEL=info
 - ND_SESSIONTIMEOUT=24h
 - ND_MUSICFOLDER=/music
 - ND_BASEURL=

portsでは、コンテナの4533ポートをホストの45335ポートにマッピングしている。必要に応じて変更する。
volumesで、コンテナの/musicにホストマシンの音楽データ置き場（例だと/mnt/nas_buffalo/music）をマウントしている。これは環境に応じて変更する必要がある。
volumesで、/dataにホストマシンの./dataをマウントしている。設定・再生履歴・プレイリストはここに保存される。
environmentでは、Navidromeの各種設定を環境変数で指定している。
- ND_MUSICFOLDERには、音楽フォルダのパスを指定する。上記の例では/musicを指定している。

上記の内容でcompose.yamlを作成した場合は、コンテナをビルドする前に、dataディレクトリを作成しておく。

mkdir data

最後に、以下のコマンドでコンテナを起動する。

docker compose up -d

ログは以下で確認できる。

docker compose logs

起動したら、http://<サーバのIP>:<ポート番号>にアクセスする。例のとおりに設定した場合は、http://<サーバのIP>:45335にアクセスする。アクセスすると、管理者ユーザーの作成画面が表示されるので、ユーザー名とパスワードを設定する。

管理者ユーザーのユーザー名とパスワードは忘れないように注意する。

次回以降はこれでログインする。

クライアントからの接続

NavidromeはSubsonic APIをサポートするクライアントアプリを用いて接続できる。このときはiOSでSubStreamerというアプリを利用した。

SubStreamerアプリ - App Store

App Store でGaven Henryの「SubStreamer」をダウンロード。スクリーンショット、評価とレビュー、ユーザのヒント、その他「SubStreamer」みたいなゲームを見ることができます。

apps.apple.com

アプリを起動し、サーバのURL、ユーザー名、パスワードを入力して接続する。

ちなみにPCからはブラウザでhttp://<サーバのIP>:<ポート番号>にアクセスしてつかっている。PCのアプリを使っても良かったのだが、ブラウザで十分だったので。

参考文献・URL

Subsonic APIサーバ（Navidrome）のススメ

Navidrome

www.navidrome.org

GitHub - NakuRei/navidrome-music-server-on-docker: NavidromeのサーバをDockerで構築するためのリポジトリ。

NavidromeのサーバをDockerで構築するためのリポジトリ。. Contribute to NakuRei/navidrome-music-server-on-docker development by creating an account on GitHub.

WSLのディストリビューション間でファイル/ディレクトリを移動する

Sat, 06 Sep 2025 15:32:44 +0900

これはなに

WindowsでWSLを使っている。使っているディストリビューションがUbuntu18.04だったのだが、サポートが切れるため、Ubuntu18.04から22.04に移行する必要が出てきた。このときに取った方法を備忘録としてメモしておく。

とった手順

失敗

最初に取った方法は、Windowsのエクスプローラーで、\\wsl$\{ディストリビューション名}\home\{ユーザ名}にアクセスして、ファイルをコピーする方法だった。この方法は結構手軽でよさそうだったのだが、コピー先の方にのみXXX Zone.Identifierという謎のファイルが各ファイルごとにできてしまい、これが邪魔だった。

XXX Zone.Identifierというファイルは、ChatGPT曰く、ファイルがどのゾーン（インターネット/イントラネット/ローカル）から来たかを記録するためのもの¹らしい。削除しても問題ないらしいが、面倒なので別の方法を取ることにした。

成功

移動先のディストリビューションでsshサーバを立てて、移動元のディストリビューションからscpでコピーする方法を取った。結論を言えば、この方法でうまくいった。

SSHサーバは以下のコマンドでインストールして起動した。

sudo apt update
sudo apt install openssh-server
sudo service ssh start

その後、移動元のディストリビューションで、以下のようにしてコピーした。

scp -r /home/{ユーザ名}/target-dir/ {ユーザ名}@localhost:/home/{ユーザ名}/workspace/

-rオプションをつけることで、ディレクトリごとコピーできる。

{ユーザ名}は環境のユーザ名に置き換えること。

これで、target-dirディレクトリを、移動先のディストリビューションへコピーできた。コピーした後に、移動前のディストリビューションでtarget-dirを削除すれば、移動完了である。

補足

ちなみに、今回はSSHサーバが移動先のディストリビューションだけで立っていたため、ポート番号を指定しなくてもlocalhostで接続できた。複数のSSHサーバを立てている場合は、移動先のディストリビューションのSSHサーバのポート番号を調べて、-P {ポート番号}オプションをつける必要があるはずである。

Windowsの代替データストリーム（Alternate Data Stream, ADS）に関連する。本来はNTFSの隠しADSだが、WSLはLinuxなので、ゴミファイルのように見えてしまうとのこと。 ↩︎

Ubuntu Serverのタイムゾーンを日本時間（JST）に変更する

Sun, 24 Aug 2025 17:48:05 +0900

これはなに

Ubuntu Serverのタイムゾーンを日本時間（JST）に変更する方法のメモ。

環境

Ubuntu Server 24.04.3 LTS

設定手順

現在のタイムゾーンは以下コマンドで確認できる。

timedatectl

出力例は以下のとおり。初期設定ではUTCになっている。

$ timedatectl
 Local time: Thu 2025-08-14 03:35:56 UTC
 Universal time: Thu 2025-08-14 03:35:56 UTC
 RTC time: Thu 2025-08-14 03:35:56
 Time zone: Etc/UTC (UTC, +0000)
System clock synchronized: yes
 NTP service: active
 RTC in local TZ: no

日本時間（JST）に変更するには、以下のコマンドを実行する。

sudo timedatectl set-timezone Asia/Tokyo

実行した後、設定されたかを以下のコマンドで確認する。

timedatectl

出力例は以下のとおり。きちんと日本時間（JST）になっている。

$ timedatectl
 Local time: Thu 2025-08-14 12:36:07 JST
 Universal time: Thu 2025-08-14 03:36:07 UTC
 RTC time: Thu 2025-08-14 03:36:07
 Time zone: Asia/Tokyo (JST, +0900)
System clock synchronized: yes
 NTP service: active
 RTC in local TZ: no

NASをLinux(Ubuntu)にマウントする手順まとめ | fstab設定から確認まで

Sat, 16 Aug 2025 23:40:48 +0900

これはなに

Ubuntu ServerでNASをマウントしたときの手順をまとめたメモ。またやることがあると思うので残しておく。

NASのマウント手順

1. マウントポイントを作成する

マウントポイント（マウント先のディレクトリ）を作成する。

sudo mkdir -p /mnt/nas_buffalo

2. NASのIPアドレスを確認する

NASのIPアドレスを確認する。これは、NASの管理画面やルーターのDHCPクライアントリストから確認できる。

3. 必要なパッケージを入れる

必要なパッケージをインストールする。

sudo apt update
sudo apt install cifs-utils

4. マウントを設定し実行する

まず、マウントするための設定を/etc/fstabに追加する。

sudo nano /etc/fstab

/etc/fstabに以下の行を追加する。

/etc/fstab

//<NASのIPアドレス>/path/to/mount /mnt/nas_buffalo cifs username=<ユーザー名>,password=<パスワード>,uid=1000,gid=1000,_netdev,x-systemd.automount 0 0

ここで、<NASのIPアドレス>はNASのIPアドレス、<ユーザー名>と<パスワード>はNASにアクセスするための認証情報に置き換える。マウントポイントのパスは、先ほど作成した/mnt/nas_buffaloを使用する。例を以下に示す。

/etc/fstab

//192.168.1.2/share /mnt/nas_buffalo cifs username=guest,password=,uid=1000,gid=1000,_netdev,x-systemd.automount 0 0

(2026/02/04追記): ネットワークの起動を待ってからマウントするために、オプションに_netdevを追加することを推奨する。また、システム起動時に自動マウントするため、x-systemd.automountも追加している。

設定を保存してエディタを終了する。

設定を反映するために、以下のコマンドを実行してfstabを再読み込みする。

sudo systemctl daemon-reload

その後、以下のコマンドでマウントを実行する。

sudo mount -a

ちなみに、マウントを解除したい場合は、下記を実行すると解除できる。

sudo umount /mnt/nas_buffalo

5. マウントを確認する

マウントが成功したか確認するために、以下のコマンドを実行する。

df -h | grep nas_buffalo

下記のように表示されれば成功である。

//192.168.1.2/share 3.7T 2.3T 1.4T 64% /mnt/nas_buffalo

iPhoneで自宅PCをリモート起動する手順 | WoLと無線LANの設定

Wed, 13 Aug 2025 10:10:12 +0900

これはなに

スマートフォンから自宅PCを遠隔起動できるようにしたとき設定した手順のメモ。

環境

接続元: iPhone 13 Pro
- OS: iOS 18.5
自宅サーバ: Raspberry Pi 4 Model B 4GB
- OS: Raspberry Pi OS
接続先（起動したいPC）: デスクトップPC
- OS: Windows 11 Pro
- マザーボード: TUF GAMING Z690-PLUS WIFI D4
  - Wake on LAN（WoL）に対応していることが必須
- ネットワークアダプタ: Intel(R) Wi-Fi 6 AX201 160MHz
  - Wake on WLAN（WoWLAN）に対応していることが必須

前提

本稿では、起動したいPCおよび自宅サーバが両方ともWi-Fi接続であることを前提とする。

ただし、本稿のように無線接続の場合は、スリープ（S3）状態からの起動はできても、シャットダウン状態からの起動はできないことに留意すること。

なお、自宅サーバと対象PCを有線でつなげば、シャットダウン状態からの復帰も可能になる。

手順

1. BIOSでWake on LANを有効にする

BIOS設定でWake on LANを有効にする。

BIOSの設定方法はマザーボードによって異なる。たいてい調べれば出てくる。 TUF GAMING Z690-PLUS WIFI D4の場合は、下記サイトが非常に参考となる。

[マザーボード] BIOSでWOL (Wake On Lan) 機能を設定する方法 | サポート公式 | ASUS 日本

www.asus.com

2. ネットワークアダプタの設定でWake on LANを有効にする

起動したいPCのネットワークアダプタの設定でWake on LANを有効にする。

Windowsの場合、「デバイスマネージャー」からネットワークアダプタを選択し、プロパティを開く。無線前提なので、無線LANアダプタを選択している。

まず、「電源の管理」タブを開き、「このデバイスでコンピューターのスタンバイを解除できるようにする」と「Magic Packetでのみスタンバイを解除できるようにする」にチェックを入れる。

次に、「詳細設定」タブを開き、「Wake on Magic Packet」を有効にする。

3. 高速スタートアップを無効にする

Windowsの場合は、高速スタートアップを無効にする必要がある。コントロールパネルの「電源オプション」から「電源ボタンの動作を選択する」を開く。その後、「現在利用できない設定を変更します」をクリックし、「高速スタートアップを有効にする」のチェックを外す。

4. MACアドレスを確認する

起動したいPCのMACアドレスを確認する。 PowerShellを開き、以下のコマンドを実行する。

PowerShell

ipconfig /all

表示される結果から、利用するネットワークアダプタの「物理アドレス」を確認する。これがMACアドレスである。

ちなみに、Windowsの場合は、PowerShellを使って下記のコマンドでも確認できる。

PowerShell

Get-NetAdapter | Where-Object {$_.Status -eq "Up"} | Format-Table Name, MacAddress

この場合は、利用する接続方法に表示される文字列がMACアドレスである。本稿のように無線接続を前提とする場合は、Wi-Fi接続の欄に表示される。

5. 自宅サーバからWake on LANのパケットを送信できるようにする

自宅サーバから起動したいPCにWake on LANのパケットを送信できるようにする。まず、自宅サーバにWake on LANを送信するためのツールをインストールする。Raspberry Pi OS（Debian）では、wakeonlanパッケージを使用する。

自宅サーバ

sudo apt update
sudo apt install wakeonlan

これを利用すると、wakeonlan XX:XX:XX:XX:XX:XX（XX:XX...はMACアドレス）でWoLを実行できる。

なお、MACアドレスはハイフン区切りだと動かない（1敗）。

$ wakeonlan XX-XX-XX-XX-XX-XX
XX-XX-XX-XX-XX-XX is not a hardware address and I could not resolve it as to an IP address.

カンマ区切りにすると動く。

$ wakeonlan XX:XX:XX:XX:XX:XX
Sending magic packet to 255.255.255.255:9 with XX:XX:XX:XX:XX:XX

XX:XX:XX:XX:XX:XXの部分は、起動したいPCのMACアドレスに置き換えること。

6. WoLを実行するスクリプトを作る

毎回MACアドレスを入力するのは面倒なので、スクリプトを作成する。

自宅サーバ

nano wake_pc.sh

内容は以下のとおり。

wake_pc.sh

#!/bin/bash
wakeonlan XX:XX:XX:XX:XX:XX

XX:XX:XX:XX:XX:XXの部分は、起動したいPCのMACアドレスに置き換えること。

保存して、実行権限を付与する。

自宅サーバ

chmod +x wake_pc.sh

これにより、./wake_pc.shで起動したいPCを起動できるようになる。

7. スマートフォンから自宅サーバにSSHで接続する

スマートフォンから自宅サーバにSSHで接続できるようにする。この場合、自宅サーバでSSHサーバを起動しておく必要がある。

TermiusなどのSSHクライアントをスマートフォンにインストールする。 SSH鍵をスマートフォン側で作成して、公開鍵を自宅サーバへ転送する¹。

自宅サーバに渡した公開鍵を~/.ssh/authorized_keysに張り付ける。authorized_keysファイルがない場合は新規に作成する。例を以下に示す。

authorized_keys

ssh-ed25519 XXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXX

これでスマートフォンから自宅サーバへSSH接続できるようになる。

8. スマートフォンから自宅サーバにSSHで接続し、PCを起動する

スマートフォンから自宅サーバにSSHで接続し、先ほど作成したスクリプトを実行する。

自宅サーバ

./wake_pc.sh

対象のPCがスリープ状態から復帰すれば成功である。

9. 外部から自宅サーバに接続してWoLを実行する

外部から自宅サーバへ接続できるようにする。Tailscaleを利用してVPNを構築するのが無料かつ簡単である。

Tailscaleで作る無料VPNの手順とルーティング設定

cloudflare tunnelでもできる。ただしちょっと設定が必要であるため、個人的にはTailscaleをオススメする。

Cloudflare Tunnelを利用して外部からWindows ProマシンへRDPする

参考文献・URL

[マザーボード] BIOSでWOL (Wake On Lan) 機能を設定する方法 | サポート公式 | ASUS 日本

www.asus.com

FMV Q&A - [Windows 11] 高速スタートアップを無効にする方法を教えてください。 - FMVサポート

富士通パソコンFMVのQ&Aをご紹介しています。

www.fmworld.net

隣の部屋にあるPCをスマホWoLで遠隔起動する方法(Wifi＋LAN)

しゃおPCをスマホで起動したいけど、できる？D君宅内なら簡単だよ。しゃおおぉ！やってみたい。やり方はよ！こんにちは、自称節約家のしゃおです。この記事では、宅内環境（ご家庭のLAN内）でスマホから家の中にあ

diynetbank.com

WoWLAN（Wake on Wireless LAN）で、Wi-Fi接続の自宅マシンをネットから起動

遠隔地からリモートデスクトップ操作を行おうとする際に気になる「電源をON/OFF」したいというポイント。ホストPCが有線LANでつながっている際は簡単ですが、無線LANでネット接続していると一気にハードルが上がります。対処法などをまとめました

appleroid.com

公開鍵はメールで送ったり下書きの保存したりなどの方法でWindows側に転送する。 ↩︎

iPhoneからWindows 11マシンへSSH接続したときに設定したことのメモ

Tue, 12 Aug 2025 15:02:12 +0900

これはなに

Windows 11に対して、スマートフォン（iPhone）からSSH接続できるようにしたときの設定したことのメモ。

環境

サーバーの環境は以下のとおり。WindowsはProでなくても問題ないはず。

Windows 11 Pro 24H2 (26100.4652)
PowerShell 5.1.26100.4652

クライアントの環境は以下のとおり。AndroidでもSSHクライアントアプリを使えば同様の手順で接続できる。

iPhone 13 Pro
iOS 18.5
TermiusのiOSアプリ 6.2.0

ちなみにTermiusはAndroid版もある。

設定手順

1. SSHサーバーのインストール

WindowsマシンにSSHサーバーをインストールする。 Windows 11では、OpenSSH Serverを標準でインストールできる。

まず、PowerShellを管理者権限で開き、PowerShellのバージョンを確認する。

PowerShell

$PSVersionTable.PSVersion

実行すると以下のような出力が得られる。

実行結果

> $PSVersionTable.PSVersion

Major Minor Build Revision
----- ----- ----- --------
5 1 26100 4652

Majorバージョンが5以上、Minorバージョンが1以上であればOK。

次に、管理者権限を確認する。

PowerShell

(New-Object Security.Principal.WindowsPrincipal([Security.Principal.WindowsIdentity]::GetCurrent())).IsInRole([Security.Principal.WindowsBuiltInRole]::Administrator)

実行すると以下のような出力が得られる。

実行結果

> (New-Object Security.Principal.WindowsPrincipal([Security.Principal.WindowsIdentity]::GetCurrent())).IsInRole([Security.Principal.WindowsBuiltInRole]::Administrator)
True

Trueが返ってくればOK。Falseの場合は、PowerShellを管理者権限で実行していないので、管理者権限で実行しなおす。

続いて、OpenSSH Serverがインストールされているか確認する。

PowerShell

Get-WindowsCapability -Online | Where-Object Name -like 'OpenSSH.Server*'

実行すると以下のような出力が得られる。

実行結果

> Get-WindowsCapability -Online | Where-Object Name -like 'OpenSSH.Server*'


Name : OpenSSH.Server~~~~0.0.1.0
State : NotPresent

Installedと表示されるならインストールされている。NotPresentと表示されるならインストールされていない。

インストールされていない場合は、以下のコマンドでインストールする。

PowerShell

Add-WindowsCapability -Online -Name OpenSSH.Server~~~~0.0.1.0

下図のようなダイアログが出るので、完了まで待機する。

インストールが完了すると以下の出力が得られる。

実行結果

> Add-WindowsCapability -Online -Name OpenSSH.Server~~~~0.0.1.0


Path :
Online : True
RestartNeeded : False

2. SSHサーバーの起動

OpenSSH Serverをインストールしたら、次にSSHサーバーを起動する。

まず、SSHサーバーのサービスがインストールされているか確認する。

PowerShell

Get-Service -Name sshd

実行すると以下のような出力が得られる。

実行結果

> Get-Service -Name sshd

Status Name DisplayName
------ ---- -----------
Stopped sshd OpenSSH SSH Server

Stoppedと表示されているので、SSHサーバーは停止している。停止している場合は、以下のコマンドでSSHサーバーを起動する。

PowerShell

Start-Service sshd

実行しても何もログが表示されないが、サービスは起動している。もう一度、サービスの状態を確認する。

PowerShell

Get-Service -Name sshd

以下のように、状態がRunningに変わっていればOK。

実行結果

> Get-Service -Name sshd

Status Name DisplayName
------ ---- -----------
Running sshd OpenSSH SSH Server

3. SSHサーバーの自動起動設定

今の状態では、SSHサーバーは手動で起動しなければならない。これを、OS起動時に自動で起動するように設定する。現在の起動の設定は以下のコマンドで確認できる。

PowerShell

(Get-Service -Name "sshd").StartType

実行すると以下のような出力が得られる。

実行結果

> (Get-Service -Name "sshd").StartType
Manual

Manualと表示されている場合、手動起動の設定になっている。これをOS起動時に自動で起動するように設定する。以下のコマンドを実行する。

PowerShell

Set-Service -Name sshd -StartupType 'Automatic'

実行しても何もログが表示されないが、設定は変更されている。もう一度設定を確認する。

PowerShell

(Get-Service -Name "sshd").StartType

実行すると以下のような出力が得られるはずである。

実行結果

> (Get-Service -Name "sshd").StartType
Automatic

このようにAutomaticと表示されていれば、OS起動時に自動で起動するようになった。

4. ファイアウォールの設定

SSHサーバーはデフォルトで22番ポートを使用する。ファイアウォールで22番ポートが開いているか確認する。

PowerShell

Get-NetTCPConnection -LocalPort 22

実行すると以下のような出力が得られる。

実行結果

> Get-NetTCPConnection -LocalPort 22

LocalAddress LocalPort RemoteAddress RemotePort State AppliedSetting OwningPro
 cess
------------ --------- ------------- ---------- ----- -------------- ---------
:: 22 :: 0 Listen 40100
0.0.0.0 22 0.0.0.0 0 Listen 40100

Listenと表示されれば、22番ポートは開いている。

5. SSH鍵の生成と登録

スマートフォンで、SSH接続するためのSSH鍵を生成する。筆者はTermiusのiOSアプリを使用している。鍵を生成してSSH接続するだけなら無料で使える。鍵を生成できるなら任意のSSHクライアントで問題ない。

鍵を生成したら、公開鍵をWindowsマシンに登録する。公開鍵はメールで送るなどの方法¹でWindows側に転送する。

Windowsマシンに渡した公開鍵をC:\Users\<ユーザー名>\.ssh\authorized_keysに登録する。authorized_keysファイルがない場合は新規に作成する。例を以下に示す。

authorized_keys

ssh-ed25519 XXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXX

6. SSH接続の確認

ここまでの設定が完了したら、SSH接続を確認する。スマートフォンのSSHクライアントアプリから、先ほど登録した公開鍵を使用して接続する。

接続先のホスト名はWindowsマシンのIPアドレス、ポートは22を指定する。ユーザー名とパスワードは、Windowsのユーザー名とパスワードを指定する。初回のみフィンガープリント確認が求められるので、確認して接続する。

参考文献・URL

Windows環境でSSHサーバーを有効化する - JBS Tech Blog

最新のWindows環境でSSHサーバー機能を有効化する手順です。

blog.jbs.co.jp

筆者はGmailの下書きに保存して渡している。 ↩︎

Tailscaleで作る無料VPNの手順とルーティング設定

Sun, 10 Aug 2025 04:25:36 +0900

これはなに

Tailscaleを利用して無料でVPNを構築する手順と、Tailscale Routerを用いたローカルネットワークへのルーティング設定方法をまとめたメモ。

Tailscaleとは

Tailscaleは、同一アカウントで認証した端末同士を、インターネット越しに安全に接続できるVPNサービスである。 設定はアカウント作成とクライアントのインストールだけで、非常に簡単である。ポート開放やルーターの設定も不要で、NAT越しでも接続できる。しかも、無料で100台までの端末を接続できる。神。個人利用には十分。

Tailscale | Secure Connectivity for AI, IoT & Multi-Cloud

The connectivity platform for devs, IT, and security teams. Zero Trust identity-based access that deploys in minutes and scales to every resource. Start free.

手順

全体の流れは次のとおりである。

Tailscaleアカウントを作成する
Tailscaleクライアントをインストールする
必要に応じてTailscale Routerを設定する

Tailscaleアカウントを作成する

Tailscaleの公式サイトにアクセスし、アカウントを作成する。GoogleアカウントやGitHubアカウントで簡単に登録できる。 すべての端末で同じようにログインする必要があることを考えて、アカウントを作ると良い。筆者はGoogleアカウントで登録した。

Tailscale

Tailscaleは同一アカウントで認証した端末同士を接続するため、アカウントを共有する必要がある。アカウントの取り扱いには注意すること。

Tailscaleクライアントをインストールする

接続したい/されたい端末にTailscaleクライアントをインストールする。 TailscaleはWindows、macOS、Linux、iOS、Androidなど、主要なプラットフォームに対応している。

Download | Tailscale

Tailscale is the zero configuration VPN that doesn't go through the public internet.

たとえば、Windowsならインストーラをダウンロードして実行する。 iOSやAndroidなら、App StoreやGoogle PlayからTailscaleアプリをインストールする。

クライアントをインストールしたら、Tailscaleアカウントでログインする。 Linuxの場合は、インストールした後、sudo tailscale upを実行してログインする。

ログインすると、その端末がTailscaleのネットワークに自動的に追加される。とても簡単だ。

GUIアプリなら、アプリから接続状態を確認できる。Linuxの場合、tailscale statusコマンドで接続状態を確認できる。自動でsystemctlによる起動が有効になっているので、再起動後も自動で接続される。

必要に応じてTailscale Routerを設定する

Tailscale Routerを使うと、TailscaleクライアントをインストールできないデバイスをTailscaleネットワークに接続できる。 Tailscale Routerは、Tailscaleのサブネットルーティング機能を利用して、ローカルネットワーク内のデバイスへアクセスできるようにする機能である。

たとえば、筆者の環境ではBuffaloのNAS（LinkStation LS720D）を使っていて、これにはTailscaleクライアントをインストールできない。そこで、Raspberry Piに入れたTailscaleでTailscale Routerを設定し、NASをTailscaleネットワークに接続させた。

Tailscale Routerを設定するには、Tailscaleクライアントをインストールした端末で次のコマンドを実行する。

sudo tailscale set --advertise-routes=XXX.XXX.XXX.X/XX

ここで、XXX.XXX.XXX.0/24は、ローカルネットワークのサブネットアドレスに置き換える。たとえば、ローカルネットワークが192.168.1.1のようなアドレスを持つ場合、次のコマンドを実行する。

sudo tailscale set --advertise-routes=192.168.1.0/24

Tailscale Routerの設定コマンドを実行した後、Tailscaleの管理画面にアクセスして、ルーティングを有効にする必要がある。

Tailscale

管理画面の「Machines」を選択すると、接続されている端末の一覧が表示される。 Tailscale Routerとして設定した端末には、Subnetsのラベルが付いている。このSubnetsのラベルに!マークが出ている場合は、ルーティングが有効になっていないことを示している。

その場合は、Tailscale Routerとして設定した端末を選択し、右上の「…」メニューから「Edit route settings…」を選択する。

すると、ルーティング設定の画面が表示される。この画面で「Subnet routes」のチェックボックスにチェックを入れる。

これで設定は完了である。Tailscale Routerを設定した端末が起動していて、かつネットワークアドレスが間違っていなければ、Tailscaleネットワークからローカルネットワークのデバイスへアクセスできる。

ちなみに、サブネットルーターとしているデバイスは、下記を参照して接続の再認証を無効にしておくと良い。

Key expiry · Tailscale Docs

Prevent unnecessary re-authentication when you disable key expiry. Avoid disruptions in network connectivity and still keep your Tailscale network secure.

参考文献・URL

Subnet routers · Tailscale Docs

Use subnet routers to give devices outside your local network access to services within specific subnets. Extend your private network with Tailscale.

Key expiry · Tailscale Docs

Prevent unnecessary re-authentication when you disable key expiry. Avoid disruptions in network connectivity and still keep your Tailscale network secure.

Pythonスクリプトが例外で落ちた瞬間に対話デバッガを起動する

Sun, 03 Aug 2025 22:11:27 +0900

これはなに

Effective Python 第2版の項目80で紹介されているpdbを使った方法が便利という話。

コマンド

実行時に例外が発生するPythonスクリプトをデバッグする際に、下記のコマンドで実行すると、例外が発生した瞬間に自動で対話デバッガが起動する。

python -m pdb -c continue your_script.py

自動でデバッガが起動してくれるので、実行時にそのままバグの原因を調査できてとても便利。

ちなみに、例外の発生するところがわかっているなら、組み込み関数のbreakpoint()を使うほうが簡単。

エイリアス

毎回コマンドを打つのは面倒なので、エイリアスを設定しておくと便利。

alias pydbg='python -m pdb -c continue'

これで、pydbg your_script.pyと打つだけで、例外が発生した瞬間にデバッガが起動する。

ファイル名補完も効くようにすると便利。

complete -o default -o nospace -F _filedir pydbg

これらを~/.bashrcなどに追加して、source ~/.bashrcで反映させると、いつでも簡単にデバッグができるようになる。

参考文献・URL

Effective Python 第2版

使わなくなったCloudflare Tunnelを廃止しWindowsからアンインストールしたときのメモ

Sun, 03 Aug 2025 16:24:25 +0900

これはなに

Cloudflare Tunnelを廃止してWindowsからアンインストールしたときに取った手順のメモ。

手順

まず、cloudflare tunnelのサービスをアンインストールする。管理者権限でPowerShellを開き、以下のコマンドを実行する。

cloudflared service uninstall

正常にアンインストールされれば、Cloudflare Tunnelの状態がHEALTHYからDOWNに変わる。

次に、cloudflared自体を削除する。wingetを使っている場合は、以下のコマンドで削除できる。

winget uninstall cloudflared

最後に、Cloudflare Tunnelの設定をWebから削除する。Cloudflareのダッシュボードにアクセスし、該当するトンネルを削除する。

GitHubで先に作成したリポジトリとローカルプロジェクトを同期する

Mon, 21 Jul 2025 21:07:09 +0900

これはなに

ローカルでプロジェクトを作成したものの、ライセンスファイルはGitHubで作成したものを使いたいとなったときに、どうやって同期すればいいのか調べたときのメモ。

前提

ローカルにGitHubへ上げたいプロジェクトがある
ローカルのプロジェクトではGitの初期化はしていない、あるいは初期化しているがコミットはしていない
GitHub上にリポジトリを作成し、ライセンスファイルを追加している

手順

ローカルでGitの初期化をしていない場合は、初期化する

git init

リモートリポジトリをローカルに追加する

git remote add origin https://github.com/ユーザー名/リポジトリ名.git

リモートリポジトリの内容をローカルに取り込む（同期）

git pull origin main --allow-unrelated-histories

--allow-unrelated-historiesがあると、異なる履歴を持つリポジトリ同士をマージできる。

git pullでコンフリクトが発生する場合は、手動で解決する必要がある。

通常通りに運用する

git add .
git commit -m "test"
git push -u origin main

compose.yamlにversionはもういらない

Sun, 20 Jul 2025 01:10:48 +0900

メモ

ChatGPTなどでcompose.yamlの例を生成してもらうと、たいていversionが書かれている。

compose.yaml

version: "3.8"
services:
 app:
 image: myapp

しかし、Docker compose v2.0以降では、versionは不要になった。そのため下記の書き方で良い。なんならversionを指定しているとそれは非推奨である旨が表示される。

compose.yaml

services:
 app:
 image: myapp

つまり、生成してもらったcompose.yamlにversionが書かれている場合は、削除しておくと良い。

参考文献・URL

【docker compose】警告`version` is obsoleteの解決法

Windows 11をメンテナンスするときにやることメモ

Sat, 05 Jul 2025 20:22:27 +0900

これはなに

Windows 11をメンテナンスするときにやることのメモ。

1. DISMを実行する

DISM（Deployment Image Servicing and Management）ツールを使用して、Windowsイメージのメンテナンスと修復をする。

PowerShellを管理者権限で実行し、以下のコマンドを入力する。

実行完了までに数分かかる。

DISM.exe /Online /Cleanup-image /Restorehealth

2. SFCを実行する

SFC（System File Checker）ツールを使用して、システムファイルの整合性をチェックし、必要に応じて修復する。

PowerShellを管理者権限で実行し、以下のコマンドを入力する。

実行完了までに数分かかる。

sfc /scannow

3. Windows Updateを実行する

Windows Updateを実行して、最新のセキュリティパッチや更新プログラムを適用する。

設定から「Windows Update」を選択し、「更新プログラムのチェック」をクリックする。

4. 不要な一時ファイルを削除する

不要な一時ファイルを削除して、ディスクスペースを確保する。

設定を開き、「システム」から「ストレージ」を選択し、「一時ファイル」から不要な一時ファイルを削除する。

5. ドライブを最適化する

ドライブを最適化し、ハードディスクやSSDのパフォーマンスを向上させる。

設定アプリを開き、「システム」から「ストレージ」を選択し、「ストレージの詳細設定」にある「ドライブの最適化」をクリックする。

6. chkdskを実行する

chkdsk（Check Disk）ツールを使用して、ディスクのエラーをチェックし、修復する。

PowerShellを管理者権限で実行し、以下のコマンドを入力する。

chkdskは再起動後に実行されるため、実行後にPCを再起動する必要がある。

chkdsk C: /r

これにより、Cドライブのエラーがチェックされる。

2回目以降は修復する。

chkdsk C: /f

参考文献・URL

システム ファイル チェッカー ツールを使用して不足または破損しているシステム ファイルを修復する - Microsoft サポート

システムファイルチェッカーツールを使用して、Windows でシステムファイルが見つからない、または破損している場合のトラブルシューティングを行う方法について説明します。

support.microsoft.com

CHKDSKのかけ方と結果の見方

CHKDSKコマンドを管理者権限で実行する方法と結果の所在と見方について記録します。実施環境は、Windows10 21h2です。ＰＣの搭載ディスク環境は、ＣドライブにＳＳＤ,５１２ＧＢ,ＯＳ搭載、

www.maihamabreeze.com

チェックディスクの実行方法(Windows10)

LIFEBOAT

www.lifeboat.jp

WSLでSSH鍵を作るだけ

Wed, 21 May 2025 00:30:32 +0900

これはなに

WSLでSSH鍵を作るときのコマンドのメモ。いつも忘れていつもググっているのでメモっておく。

いつものコマンド

ssh-keygen -t ed25519

オプション

オプション	説明
`-t`	暗号化方法
`-c`	鍵のコメント
`-f`	鍵の保存名

参考文献・URL

GASを使って無料でNetlifyのデプロイ通知をGmailへ送る

Thu, 08 May 2025 20:22:48 +0900

これはなに

GAS（Google Apps Script）を使って、Netlifyのデプロイ通知をGmail等のメールへ送信する設定をしたときの手順記録。

背景

Netlifyでは、Proプラン以上でないとEmail Notificationが利用できない。そのため、無料のFree & Starterプランだと、そのままではGmail等へデプロイ通知を送信できない。しかし、GAS（Google Apps Script）を使えば、無料でデプロイ通知をGmail等のメールへ送れる。本稿はその方法を解説する。

全体の流れ

GAS（Google Apps Script）を作成する
GASをデプロイする
NetlifyのWebhookを作成する
動作を確認する

手順

1. GAS（Google Apps Script）を作成する

まず、Google Apps Scriptにアクセスする。

Apps Script | Google for Developers

Develop high-quality, cloud-based solutions with ease.

script.google.com

アクセスすると下図のような画面が出てくる。

もし、Googleアカウントでログインしていない場合は、ログインする。

画面の左上にある「新しいプロジェクト」をクリックする。しばらくすると、以下のような画面が表示される。

次に、画面の左上にある「無題のプロジェクト」をクリックして、プロジェクト名を変更する。ここでは「Netlify Deploy Notification」とする。

次に、画面の左側にある「コード.gs」をクリックして、以下のコードを貼り付ける。

以下のコードの"your-email-XXXXXXXX@gmail.com"の部分を、実際に受信するGmailアドレスに変更すること。このまま実行してしまうと、“your-email-XXXXXXXX@gmail.com"に通知が送信されてしまう。

コード.gs

function doPost(e) {
 var json = JSON.parse(e.postData.contents);
 var status = json.state; // デプロイ状態（success, failed など）
 var siteName = json.name;
 var deployUrl = json.admin_url;

 var recipient = "your-email-XXXXXXXX@gmail.com"; // 受信するGmailアドレス
 var subject = "Netlify Deploy Status: " + status;
 var body = "Site: " + siteName + "\n" +
 "Status: " + status + "\n" +
 "Admin URL: " + deployUrl;

 MailApp.sendEmail(recipient, subject, body);
}

2. GASをデプロイする

コードを貼り付けたら、上のバーにある「デプロイ」をクリックし、「新しいデプロイ」を選択する。

すると、以下のような画面が表示される。

左側の「種類の選択」が「ウェブアプリ」担っていることを確認し、「新しい説明文」に適当な名前を入力する。ここでは「Netlify Deploy Notification」とする。

次に、下の「アクセスできるユーザー」を「全員」に変更する。これをしないと、NetlifyからのPOSTリクエストを受け取れない。

最後に、右下の「デプロイ」をクリックする。すると、以下のような画面が表示される。表示されたURLをコピーして控えておく。

このURLは、NetlifyのWebhookのURLとして使用するので、絶対に他人へ教えないこと。

3. NetlifyのWebhookを作成する

NetlifyのWebhookを作成する。Netlifyのダッシュボードにアクセスし、対象のサイトを選択する。

Netlify

Start building the best web experiences in record time

app.netlify.com

次に、左側のメニューから「Site configuration」->「Notifications」->「Emails and webhooks」へ移動する。

ここの「Add notification」をクリックし、「HTTP POST request」を選択する。

選択すると以下のような画面が表示される。

「Event to Listen for」は、通知を受け取るイベントを選択する。たとえば、「Deploy succeeded」を選択すると、デプロイが成功したときに通知を受け取れる。デプロイ開始時なら「Deploy started」を選択する。デプロイ失敗時なら「Deploy failed」を選択する。

「URL to notify」には、先ほどGASをデプロイしたときに表示されたURLを貼り付ける。

「JWS secret token (optional)」には、特に何も入力しなくて良い。

最後に、左下の「Save」をクリックして保存する。すると、「Emails and webhooks」の「Deploy notifications」にフックが追加される。

4. 動作を確認する

Netlifyのダッシュボードに戻り、デプロイを実行する。デプロイが完了すると、Gmailに通知が届く。

まとめ

GASを使えば、Netlifyの無料プランでも、デプロイ通知をメールで受け取れる。

参考文献・URL

Apps Script | Google for Developers

Develop high-quality, cloud-based solutions with ease.

script.google.com

MATLABのstringにmustBeNonemptyは効かない

Sat, 05 Apr 2025 10:17:50 +0900

これはなに

MATLABのarguments構文で関数の引数を検証するとき、stringの長さを検証するためにmustBeNonemptyを使っても、長さゼロのstring（""）はエラーにならないという話。

例

たとえば、次のような関数を定義したとする。

function foo(s)
 arguments
 s (1, 1) string {mustBeNonempty}
 end
end

このとき、foo("")を実行すると、エラーにならない。

>> foo("")
ans = ""

解決策

どうやらMATLABの仕様上、長さゼロのstring（""）は空とみなされないらしい。そのため、mustBeNonemptyは効かない。 長さゼロのstring（""）を検証するためには、mustBeNonzeroLengthTextを使う必要がある。

function foo(s)
 arguments
 s (1, 1) string {mustBeNonzeroLengthText}
 end
end

このようにすると、foo("")を実行するとエラーになる。

>> foo("")
Error using foo (line 4)
Invalid value for argument 's'. Must be a non-zero length text.

ただし、mustBeNonzeroLengthTextはMATLAB R2020bから追加された関数なので、これより古いバージョンのMATLABでは使えない。

まとめ

MATLABのarguments構文で、長さゼロのstring（""）を検証するためには、mustBeNonemptyではなく、mustBeNonzeroLengthTextを使う必要がある。

参考文献・URL

jp.mathworks.com にアクセスできません

jp.mathworks.com

jp.mathworks.com にアクセスできません

jp.mathworks.com

jp.mathworks.com にアクセスできません

jp.mathworks.com

Hugoで1年以上前の古い記事に警告を表示するようにした

Sun, 16 Mar 2025 17:54:56 +0900

これはなに

Hugoで1年以上前の古い記事に警告を表示するようにした。そのときの実装のメモ。

実装

ほぼ以下の記事を~~パクって~~参考に実装した。

Hugoで記事が一年以上過ぎた場合はnoticeを表示するようにした

tech-wafter.net

実装部分だけ抜粋すると以下のとおり。

{{ $lastmod := .Lastmod | default .Date }}
{{ $year := (div (sub now.Unix $lastmod.Unix) 31536000) }}

{{ if ge $year 1 }}
<div class="block-highlight-warning">
 <span class="icon-warning">{{ partial "helper/icon" "alert-triangle" }}</span>
 <span>この記事は最終更新日から{{ $year }}年以上経過しています。</span>
</div>
{{ end }}

実装にあたり参考元から3点変更した。

まず、元記事では.Lastmodを直接利用していたが、.Lastmodがない場合に.Dateを利用するように変更した。

{{ $lastmod := .Lastmod | default .Date }}

次に、1年以上の判定について、元記事ではleで比較していたが、個人的に比較対象を左に置きたかったのでgeに変更した。

{{ if ge $year 1 }}

最後に、スタイルを好みに変更した。アイコンのあるほうがわかりやすいため、アイコンを追加した。

本サイトでは、Stackテーマを利用しているので、layouts/partials/article/components/content.htmlに追加で実装した。そうすると、すべての記事に反映される。

実際の実装

layouts/partials/article/components/content.html

<style>
 .block-highlight-warning {
 background-color: #ff6f0020;
 border-left: 4px solid #ff6f00;
 word-break: break-word;
 display: flex;
 align-items: center;
 gap: 1em;
 line-height: 1;
 padding: 1em;
 }

 .icon-warning {
 display: inline-flex;
 align-items: center;
 vertical-align: middle;
 }

 .icon-warning svg {
 vertical-align: baseline;
 width: 1.5em;
 height: 1.5em;
 stroke-width: 1.5;
 flex-shrink: 0;
 }
</style>

{{ $lastmod := .Lastmod | default .Date }}
{{ $year := (div (sub now.Unix $lastmod.Unix) 31536000) }}
<section class="article-content">
 {{ if ge $year 1 }}
 <div class="block-highlight-warning">
 <span class="icon-warning">{{ partial "helper/icon" "alert-triangle" }}</span>
 <span>この記事は最終更新日から{{ $year }}年以上経過しています。</span>
 </div>
 {{ end }}

 <!-- Refer to https://discourse.gohugo.io/t/responsive-tables-in-markdown/10639/5 -->
 {{ $wrappedTable := printf "<div class=\"table-wrapper\">${1}</div>" }}
 {{ .Content | replaceRE "(<table>(?:.|\n)+?</table>)" $wrappedTable | safeHTML }}
</section>

おまけ

ちなみに、N年以上であることを示さなくていいなら、下記の書き方のほうがシンプルかもしれない。

{{ if ge (now.AddDate -1 0 0) .Date }}
 <div class="alert-warning" role="alert">
 <strong>Warning!</strong> This article is over a year old.
 </div>
{{ end }}

参考文献・URL

Hugoで記事が一年以上過ぎた場合はnoticeを表示するようにした

tech-wafter.net

Shell scriptが実行できないときに確認することリスト

Mon, 10 Mar 2025 11:25:07 +0900

これはなに

Shell scriptが実行できないときに確認することのメモ。

確認することリスト

実行権限を確認する

実行権限が付与されているか確認する。

ls -l script.sh

実行権限がある場合は、xが付与されている。

$ ls -l script.sh
-rwxr-xr-x 1 user user 0 Mar 10 11:25 script.sh

実行権限がない場合は、chmodコマンドで実行権限を付与する。

chmod +x script.sh

所有者を確認する

実行権限に対し、所有者が正しいか確認する。

ls -l script.sh

所有者が正しくない場合は、chownコマンドで所有者を変更する。

chown user script.sh

シバンを確認する

シバンが正しく設定されているか確認する。

head -n 1 script.sh

シバンが正しく設定されていない場合は、正しいシバンを設定する。

#!/bin/bash

ファイルの改行コードを確認する

ファイルの改行コードが正しいか確認する。

file script.sh

Linuxの改行コードはLF、Windowsの改行コードはCRLFである。よって、Windowsで作成したファイルをWSLで実行する場合はとくに注意が必要で、改行コードを変換する必要がある。

改行コードは、dos2unixコマンドで変換できる。VS Codeの場合は、ファイルを開いて、右下の改行コードをクリックして変換もできる。

dos2unix script.sh

ファイルの存在を確認する

ファイルが存在するか確認する。

ls script.sh

ファイルが存在しない場合は、ファイルを作成したり、移動したりする。

PATHを確認する

シェルスクリプトがコマンドとして認識されない場合は、PATHにスクリプトのディレクトリが含まれているか確認する。

echo $PATH

PATHにスクリプトのディレクトリが含まれていない場合は、exportコマンドでPATHにスクリプトのディレクトリを追加する。

export PATH=$PATH:/path/to/script

nohupを付けて実行した処理を強制終了する

Sun, 09 Mar 2025 15:53:47 +0900

ここでは、pythonのプログラムをnohupを付けて実行した処理を強制終了する方法を紹介する。

やりかた

下記コマンドでPIDをチェックする。

ps -ef | grep python

これを実行すると、以下のような出力が得られる。

$ ps -ef | grep python
 user 591 462 cons0 15:57:42 /c/Users/user/AppData/Local/Programs/Python/Python312/python

この場合、PIDは591である。このPIDを使ってkillコマンドを実行する。-9は強制終了を意味する。

kill -9 591

これで、nohupを付けて実行した処理を強制終了できる。

参考文献・URL

nohup 付きで実行した処理を強制終了したい

Linux上のterminalで nohup を付けて処理を動かしているのですが、処理が間違っていたことに気づきました。 nohup処理を止めたいのですが、どのようにすれば良いでしょうか？なお他にも動いているnohup処理はあり、そちらは止めたくありません。 (1) 実行した処理 nohup python3 -u my_script1.py > output1.txt nohup p...

ja.stackoverflow.com

個人的 .bashrc に追加することたち

Mon, 24 Feb 2025 22:59:55 +0900

これはなに

.bashrc に追加している設定をメモ程度に残しておくだけ。

設定

リダイレクトをtypoして上書きしないようにする

下記を追記すると、リダイレクト先のファイルがすでに存在する場合、エラーを出してくれる。

set -o noclobber

>>による書き込みに影響はない。

エイリアスを設定する

よく使うエイリアスを設定する。

alias ll='ls -l'
alias la='ls -a'
alias lla='ls -la'

Pythonのデバッグをしやすくする

Pythonスクリプトをデバッグしやすくするためのエイリアスを設定する。

alias pydbg='python -m pdb -c continue'
complete -o default -o nospace -F _filedir pydbg

参考文献・URL

set -o noclobber | technote

tech.withsin.net

noclobber 変数 (Solaris ユーザーズガイド (上級編))

docs.oracle.com

ExpoのアプリがAndroidシミュレータでCommandError No development build for this project is installed. といわれて動作しなかったときの対応メモ

Mon, 13 Jan 2025 14:06:48 +0900

状況

npx expo run:androidを実行した際に自動で起動するAndroidエミュレータ端末では問題なく動作する。しかし、その後にShift+aを押して別の端末を選ぶと、次のエラーが発生し、アプリが動作しなかった。

√ Select a device/emulator » Pixel_Tablet_API_35 (emulator)
› Opening emulator Pixel_Tablet_API_35
CommandError: No development build (com.name.XXXXXXXXXX) for this project is installed. Please make and install a development build on the device first.
Learn more: https://docs.expo.dev/development/build/

解決策

まず、すべてのエミュレータを一度終了し、起動したいエミュレータを起動する。たとえば、起動したいエミュレータがPixel_Tablet_API_35である場合、以下のコマンドを実行する。

emulator -avd Pixel_Tablet_API_35

エミュレータが完全に起動したら、以下のコマンドを実行して、エミュレータに直接インストールする。

npx expo run:android --device

デバイス選択のプロンプトが表示されたら、起動したいエミュレータ（e.g. Pixel_Tablet_API_35）を選択する。これでアプリが動作するようになった。

間違ってmainブランチにコミットしてしまった場合の対処法

Sun, 05 Jan 2025 12:19:00 +0900

これはなに

間違ってmainブランチにコミットしてしまった場合に、それを別のブランチへ移す方法のメモ。

注意

この方法だと履歴を書き換えることになるので、pushしてしまった後だと、push --forceが必要になってしまう。他者に影響が出るので、注意が必要である。

方法

mainブランチから新しいブランチを作成する

git switch -c new-branch

mainブランチにいることを確認する

git branch

mainブランチにいる場合は、以下のように表示される。

$ git branch
* main
 new-branch

mainブランチにいない場合は、以下のコマンドで切り替える。

git switch main

mainブランチをリセットする範囲を確認する

git log --oneline

例えば、次のように表示される。

$ git log --oneline
abcdef3 (HEAD -> main) コミット3
abcdef2 コミット2
abcdef1 コミット1

（省略可）安全のため、現在の状態をタグとして保存する

git tag backup-before-reset

これにより、なにか問題が生じたときに、タグを使って簡単にワークツリーを復元できる。

git checkout backup-before-reset

mainブランチのHEADも戻したい場合は、以下を実行する。

git reset --hard backup-before-reset

mainブランチをリセットする

例えば、コミット1の状態に戻したい場合、以下を実行する。

git reset --hard abcdef1

別ブランチに切り替えてで作業を続ける

git switch new-branch

React NativeのborderRadiusは数値でないとならないらしい

Thu, 02 Jan 2025 17:08:20 +0900

React NativeのStyleSheet APIでborderRadiusを指定する際、その指定値で公式にサポートされているのはnumberのみである。公式ドキュメントを見ても、TYPEにnumberとしか記載されていない。

reactnative.dev

'50%'のような文字列でも動くので問題ないと思っていたが、公式の仕様に従っていないことに留意すべきだろう。将来のアプデや環境変化を考えると、現時点では数値による指定が推奨される。

ChatGPTにリファクタリングを頼んでみるもんだなあ…。

参考文献・URL

reactnative.dev

React + Tailwind CSSでフッタの位置を画面の最下部に固定する方法のメモ

Sun, 24 Nov 2024 22:32:48 +0900

これはなに

React + Tailwind CSSでフッタの位置を画面の最下部に固定する方法のメモ。

なにをつくるか

フッタの位置を画面の最下部に固定する。何もしないと、メインコンテンツが少ないときに。フッタが最下部よりも上に表示されてしまう。それを防ぐ。

この実装のことを"Sticky footers"と呼ぶらしい。

やり方

下記サイトが参考になった。

Sticky footers - CSS | MDN

A sticky footer pattern is one where the footer of your page "sticks" to the bottom of the viewport in cases where the content is shorter than the viewport height. We'll look at a couple of techniques for creating one in this recipe.

developer.mozilla.org

Grid Layoutを使う

Grid Layoutを使って、フッタを画面の最下部に固定する。コンテンツをラップするdiv要素を作成し、その最小の高さを設定する。そして、gridを指定し、grid-template-rowsでauto 1fr autoを指定する。

src/App.tsx

import React from 'react';

function App(): React.JSX.Element {
 return (
 <>
 <div
 className={[
 'w-full max-w-[100vw]',
 'min-h-[100svh] h-[100svh]',
 'grid grid-rows-[auto_1fr_auto]',
 ].join(' ')}
 >
 <header>header</header>
 <main>main</main>
 <footer>footer</footer>
 </div>
 </>
 );
}

これにより、ヘッダとフッタがautoの高さを持ち、メインコンテンツが残りの高さを持つようになる。

Flexboxを使う

Grid Layoutに対応していないブラウザを対象とする場合は、Flexboxを使う方法もある。コンテンツをラップするdiv要素を作成し、その最小の高さを設定する。そして、flexを指定し、flex-colを指定する。加えて、main要素にflex-1を指定する。

src/App.tsx

import React from 'react';

function App(): React.JSX.Element {
 return (
 <>
 <div
 className={[
 'w-full max-w-[100vw]',
 'min-h-[100svh] h-[100svh]',
 'flex flex-col',
 ].join(' ')}
 >
 <header>header</header>
 <main className="flex-1">main</main>
 <footer>footer</footer>
 </div>
 </>
 );
}

これにより、メインコンテンツがヘッダとフッタの間の高さを持つようになる。

この方法は、毎回flex-1を指定する必要があるため、Grid Layoutを使う方法のほうが簡潔である。

参考文献・URL

Sticky footers - CSS | MDN

developer.mozilla.org

React + Tailwind CSSで、ボタンをホバーしたときにちょっと色を変えるときの実装メモ

Sat, 23 Nov 2024 22:39:56 +0900

これはなに

React + Tailwind CSSで、ボタンをホバーしたときにちょっと色を変えるときの実装メモ。

実装

やり方はいくつかある。

明るさを変える
コントラストを変える
彩度を変える
色を変える

この中でも、明るさを変えるのがもっとも簡単でそれっぽくなる。

ライトモードでは、ボタンをホバーしたときに背景色を少し明るくする。これは、hover:brightness-110を設定すると実現できる。

ダークモードでは、ボタンをホバーしたときに背景色を少し暗くする。これは、hover:brightness-90を設定すると実現できる。

実装例を以下に示す。

import React from 'react';

export function CustomButton(): React.JSX.Element {
 return (
 <button
 className={[
 'bg-blue-500 text-white',
 'hover:brightness-110 dark:hover:brightness-90',
 ].join(' ')}
 >
 ボタン
 </button>
 );
}

参考文献・URL

Claude 3.5 Sonnet

GitHubのブランチ保護のルールについて調べたときのメモ

Sun, 29 Sep 2024 19:25:55 +0900

これはなに

GitHubで設定できるブランチ保護のルールについて調べたときのメモ。

前提

ここでは、Target branchesにmainを指定した場合の、各設定の意味を説明する。そのため、本稿のmainは任意のブランチ名に変更できる。

ルールセット

Restrict creations（作成の制限）

Only allow users with bypass permission to create matching refs.

この設定を有効にすると、バイパス権限を持つユーザー以外の、mainブランチ/タグの作成を禁止できる。

通常mainブランチは最初に作成されるため、mainブランチの作成を禁止することはないだろう。main-*のようなパターンを指定すると、意味のある設定になる。

Restrict updates（更新の制限）

Only allow users with bypass permission to update matching refs.

この設定を有効にすると、バイパス権限を持つユーザー以外の、mainブランチ/タグの更新を禁止できる。バイパス権限を持つユーザーは、Bypass listで指定する。この「更新」はプッシュに限らず、リベースやマージなども含まれる。

たとえば、もしBypass listに誰も指定しなければ、mainブランチ/タグの更新をすべて禁止にできる。

別の例として、リポジトリのadmin権限を自分しか持っていない場合、ルールのBypass listにRepository adminを指定してこの設定を有効にする。すると、自分だけがmainブランチを更新できるようになる。

Restrict deletions（削除の制限）

Only allow users with bypass permissions to delete matching refs.

この設定を有効にすると、バイパス権限を持つユーザー以外の、mainブランチ/タグの削除を禁止できる。この設定はデフォルトで有効になっている。

とくにmainブランチの場合は、誤ったmainブランチの削除を防ぐためにも、この設定は有効にしておくべきである。

Require linear history（直線状の履歴必須）

Prevent merge commits from being pushed to matching refs.

この設定を有効にすると、mainブランチ/タグへのマージコミットを禁止できる。言い換えれば、mainブランチ/タグへマージする際に、Squash and mergeあるいはRebase and mergeの使用を強制できる。

この設定はチームの方針による。個人的には、この設定はmainブランチには使わず、feature/*ブランチなどに使う。

Require deployments to succeed（デプロイ成功必須）

Choose which environments must be successfully deployed to before refs can be pushed into a ref that matches this rule.

この設定を有効にすると、mainブランチ/タグへのプッシュを許可する前に、指定した環境へのデプロイ成功を必須にできる。

mainブランチをどこかにデプロイしているなら、この設定を有効にしておくとよい。

Require signed commits（署名済みコミット必須）

Commits pushed to matching refs must have verified signatures.

この設定を有効にすると、mainブランチ/タグへのプッシュを許可する前に、署名済みコミットを要求できる。

自分が署名済みコミットを使っているなら、この設定を有効にしておくと、なりすましなどを防げる。

Require a pull request before merging（マージ前のプルリクエストの必須）

Require all commits be made to a non-target branch and submitted via a pull request before they can be merged.

この設定を有効にすると、mainブランチ/タグへのプッシュを許可する前に、プルリクエストを要求できる。

複数人で開発する場合、mainブランチへの直接のプッシュを禁止できるため、この設定は有効にしておくべきである。

この設定には追加設定がある。

Required approvals

The number of approving reviews that are required before a pull request can be merged.

この設定は、プルリクエストをマージするために必要な承認レビューの数を指定できる。この値を1以上にすると、たとえ自分がプルリクエストを作成していても、他の人にレビューしてもらう必要がある。

この設定を1以上にすると、リポジトリの管理者ですらマージの際にレビューを受けなければならなくなってしまう。しかも、自分自身をレビュワーにはできない。そのため、自分ひとりしかリポジトリを更新しないなら、この設定は0にしなければならない。

Dismiss stale pull request approvals when new commits are pushed

New, reviewable commits pushed will dismiss previous pull request review approvals.

この設定を有効にすると、新しいコミットがプッシュされたときに、古いプルリクエストの承認レビューが無効になる。言い換えれば、一度承認されたプルリクエストに対して新しくコミットがプッシュされた場合、再度のレビューと承認を強制できる。

特に理由がなければ、この設定は有効にしておくとよい。

Require review from specific teams

A collection of reviewers and associated file patterns. Each reviewer has a list of file patterns which determine the files that reviewer is required to review.

この設定を有効にすると、特定のファイルや特定の拡張子のファイルに対して、特定のチームによるレビューを強制できる。

一部のファイルに対して特定のチームのレビューを強制したい場合に便利である。

Require review from Code Owners

Require an approving review in pull requests that modify files that have a designated code owner.

この設定を有効にすると、指定したコードオーナーによるレビューを強制できる。コードオーナーは、CODEOWNERSファイルで指定する。

コードオーナーについて - GitHub ドキュメント

CODEOWNERS ファイルを使い、リポジトリ中のコードに対して責任を負う個人あるいは Team を指定できます。

CODEOWNERSファイルを作成して自分を指定し、この設定を有効にしておくと、自分はプルリクエストを承認無しでマージでき、他の人にはコードオーナー（すなわち自分）によるレビューを強制できる。そのため、他人のプルリクエストを受け付けるけれど、自分のプルリクエストは自分でマージしたい場合に便利である。

Require approval of the most recent reviewable push

Whether the most recent reviewable push must be approved by someone other than the person who pushed it.

この設定を有効にすると、プルリクエストをマージする前に、最後にプッシュした人以外の誰かによる承認を強制できる。つまり、自己承認を防げる。

大規模な開発の場合は有効にすると良さそう。

Require conversation resolution before merging

All conversations on code must be resolved before a pull request can be merged.

この設定を有効にすると、プルリクエストをマージする前に、すべてのコードに関する会話（コメント）を解決する必要がある。よって、プルリクエストへのコメントの見逃しを防げる。

この設定は、プルリクエストの品質を向上させるため、有効にしておくとよい。

Automatically request Copilot code review

Request Copilot code review for new pull requests automatically if the author has access to Copilot code review.

この設定を有効にすると、Copilot Code Reviewを利用している場合、プルリクエストの作成時に自動的にCopilot Code Reviewを要求できる。

GitHub Copilot コードレビューの使用 - GitHub ドキュメント

GitHub Copilot からコードレビューを要求する方法について説明します。

Copilot Code Reviewを利用しているなら、この設定を有効にしておくとよい。

Allowed merge methods

When merging pull requests, you can allow any combination of merge commits, squashing, or rebasing. At least one option must be enabled.

プルリクエストのマージ方法を強制できる。 Merge commits、Squash merging、Rebase mergingのいずれかを有効にする必要がある。複数有効にもできる。

この設定はチームの方針による。個人的には、mainブランチはMerge commitsのみを有効にすることが多い。ブランチのコミットの粒度が雑な場合は、Squash mergingのみを有効にするとよい。

Require status checks to pass（ステータスチェックのパスの強制）

Choose which status checks must pass before the ref is updated. When enabled, commits must first be pushed to another ref where the checks pass.

この設定を有効にすると、mainブランチ/タグへのプッシュを許可する前に、指定したステータスチェックのパスを強制できる。つまり、必須CI/CDの通過を要求できる。

Status checks that are requiredに、必須にしたいステータスチェックを追加する。

この設定には追加設定がある。

Require branches to be up to date before merging

Whether pull requests targeting a matching branch must be tested with the latest code. This setting will not take effect unless at least one status check is enabled.

この設定を有効にすると、プルリクエストに対して、最新のコードによるテストを要求できる。

特別な理由がない限り、この設定は有効にしておくとよい。

Do not require status checks on creation

Allow repositories and branches to be created if a check would otherwise prohibit it.

この設定を有効にすると、ブランチやリポジトリの作成時には、ステータスチェックを必須としなくなる。

ステータスチェックを通せないくらいの初期段階では有効にしてもよいだろう。

Block force pushes（強制プッシュのブロック）

Prevent users with push access from force pushing to refs.

この設定を有効にすると、mainブランチ/タグへの強制プッシュを禁止できる。この設定はデフォルトで有効になっている。

とくにmainブランチの場合は、誤ったmainブランチの強制プッシュを防ぐためにも、この設定は有効にしておくべきである。

Require code scanning results（コードスキャンの強制）

Choose which tools must provide code scanning results before the reference is updated. When configured, code scanning must be enabled and have results for both the commit and the reference being updated.

この設定を有効にすると、mainブランチ/タグへのプッシュを許可する前に、指定したコードスキャン結果の提供を強制できる。

Required tools and alert thresholdsに、必須にしたいコードスキャンツールを追加する。

CodeQLなどのコードスキャンツールを利用しているなら、この設定を有効にしておくとよさそう。

Require code quality results（コード品質結果の強制）

Choose which severity levels of code quality results should block pull request merges. When configured, a code quality analysis must be done on the pull request before the changes can be merged.

この設定を有効にすると、コード品質結果に基づいてプルリクエストのマージをブロックできる。ブロックしたいコード品質の重大度レベルは指定できる。

これは使ったことがないのでわからないが、コード品質を自動で分析してもらえるという点では有用そう。

Automatically request Copilot code review（自動的にCopilotコードレビューを要求）

Request Copilot code review for new pull requests automatically if the author has access to Copilot code review and their premium requests quota has not reached the limit.

この設定を有効にすると、Copilot Code Reviewを利用している場合、プルリクエストの作成時に自動的にCopilot Code Reviewを要求できる。

GitHub Copilot コードレビューの使用 - GitHub ドキュメント

GitHub Copilot からコードレビューを要求する方法について説明します。

この設定には追加設定がある。

Review new pushes

Copilot automatically reviews each new push to the pull request.

この設定を有効にすると、プルリクエストへの新しいプッシュごとにCopilotが自動でレビューする。

個人的にはプッシュごとにレビューを回す必要はないため、この設定は無効にしている。

Review draft pull requests

Copilot automatically reviews draft pull requests before they are marked as ready for review.

この設定を有効にすると、Copilotがドラフトのプルリクエストを自動でレビューする。

これは開発方針によるが、プルリクエストごとにCopilotによるレビューを回したいなら、この設定は有効にしておくとよい。

参考文献・URL

ルールセットで使用できるルール - GitHub ドキュメント

リポジトリ内の特定のブランチとタグを保護するためにルールセットに追加できるルールについて説明します。

リポジトリ管理者はapproveなしでマージできるようにしようとしたら少しハマった話 - Qiita

はじめに個人開発用のリポジトリを作成し、Branch protection ruleを設定していた時の話です。設定項目が間違っており、意図した挙動になっていなかったのを解消しました。やりたかったこと「リポジトリ管理者(CODEOWNERS)は、approveなし...

Gitで新しいブランチにもとのブランチの最新の変更を取り込む方法

Sun, 08 Sep 2024 10:32:01 +0900

これはなに

Gitで、新しいブランチを作成したあと、もとのブランチに更新が入ったときに、どうすればいいのかのメモ。

前提条件

Gitの基本的な使い方を知っている
コマンドラインでGitを操作できる

はじめに

Gitを利用する際、たとえばmainブランチから新しいブランチを作成したあと、mainブランチに更新が入ることはよくある。そのときに、mainブランチの最新の変更を新しいブランチに取り込みたいことがある。

以下では、もとのブランチがmainブランチで、新しいブランチがnew-branchであると仮定して説明する。ただし、この方法は特段mainブランチに限らず、どのブランチに対しても適用できる。

対応方法の種類

最新の変更を取り込む方法は大別して2つある。

新しいブランチの開始点を、mainブランチの最新のコミットへ移動する
mainブランチの最新のコミットを、新しいブランチへ取り込む

基本的に、新しいブランチにまだコミットがない場合は1、すでにコミットがある場合は2の方法を取る。ただし、新しいブランチにコミットがあっても、まだリモートリポジトリにプッシュしていない場合は、1の方法でも問題ない。

事前の準備：作業状態の保存

変更を取り込む前に、git stashコマンドで現在の作業状態を保存しておくことをオススメする。これにより、操作中に問題が発生した場合でも、簡単に元の状態に戻せる。

git stash save "作業中の変更を一時保存"

この操作により、現在の変更が一時的に保存され、作業ディレクトリがクリーンな状態になる。後述する操作で変更の取り込みが完了した後、保存した変更は次の操作で復元できる。

git stash pop

popオプションを指定することで、最後に保存した変更を復元できる。

手順

新しいブランチの開始点を移動する

この方法は、以下の場合に使える。この方法はコミット履歴を変更してしまうため、リモートリポジトリへプッシュした後は使えない。

新しいブランチを作成しただけで、まだ何もコミットしていない場合
新しいブランチを作成し、すぐにコミットしているが、まだリモートリポジトリへプッシュしていない場合

まず、新しいブランチに切り替える¹。

git switch new-branch

その後、mainブランチの最新の状態へリベースする。

git rebase main

これにより、新しいブランチの開始点を、mainブランチの最新のコミットへ移動できる。コンフリクトが発生した場合は、コンフリクトを解消してからgit rebase --continueを実行する。

くれぐれも、すでにリモートリポジトリへプッシュしている場合は、rebaseを使ってはならない。なぜなら、rebaseは履歴を書き換える操作だからである。

リモートリポジトリへプッシュした後にrebaseでローカルリポジトリの履歴を書き換えてしまうと、リモートリポジトリとローカルリポジトリとで、コミット履歴の整合性が取れなくなってしまう。

もし、すでに新しいブランチでコミットしていて、リモートリポジトリにプッシュしている場合は、次に述べるmergeを使う。

新しいブランチに最新のコミットを取り込む

この方法は、以下の場合に使える。この方法はコミット履歴を書き換えないため、リモートリポジトリへプッシュした後でも使える。

新しく作成したブランチにすでにコミットがあり、かつ、すでにリモートリポジトリへプッシュしている場合

まず、新しいブランチに切り替える。

git switch new-branch

その後、mainブランチの最新の状態をマージする。

git merge main

これにより、新しいブランチに、mainブランチの最新の状態を取り込める。ブランチの開始点は変わらないが、履歴を書き換えずに、新しいブランチの状態をmainブランチの最新のコミットへ合わせられる。マージの際にコミットが作成される点には注意すること。

コンフリクトが発生した場合は、コンフリクトを解消してから通常のコミットを行う。

Appendix | コンフリクトの対処

rebaseやmergeの際に、同じファイルの同じ部分が両方のブランチで変更されていると、コンフリクトが発生しうる。コンフリクトが発生した場合は、Gitは自動的にマージを停止し、手動での解決を求める。

コンフリクトが発生した場合の一般的な手順は以下のとおりである。本稿では詳細な説明は省略する。

コンフリクトしたファイルを開く
コンフリクトのある部分を探す
望ましい最終的な内容に編集し、コンフリクトを解決する
変更をステージングエリアに追加する
コンフリクト解決後、rebaseの場合はgit rebase --continueを、mergeの場合は通常のコミットを行う

まとめ

新しいブランチを作成した後、もとのブランチに更新が入ったときは、以下の方法で対応できる。

新しいブランチにまだコミットがない場合は、rebaseを利用して、新しいブランチの開始点をmainブランチの最新のコミットへ移動する
新しいブランチにすでにコミットがある場合、とくにリモートリポジトリへプッシュした後の場合は、mergeを利用して、mainブランチの最新のコミットを新しいブランチへ取り込む

git switchはGit 2.23以降で利用可能。それ以前のバージョンではgit checkoutを使う。 ↩︎

Linuxで容量の大きいファイル/ディレクトリを探すコマンドのメモ

Fri, 30 Aug 2024 22:06:41 +0900

Linuxで、サイズの大きいファイルは下記のコマンドで探せる。

du -sh ./data/* | sort -rh | head -n 10

上記のコマンドは、./data/ディレクトリ以下のファイル/ディレクトリのサイズを合計して表示し、サイズの大きい順に上位10件を表示する。

`du`コマンド

duコマンドは、ディレクトリ/ファイルのディスク使用量を表示するコマンドである。

-sオプション: ディレクトリのサイズを合計して表示する。これをつけることで、サブディレクトリを含めた合計サイズを表示できる。
-hオプション: 人間が読みやすい形式で表示する。

`sort`コマンド

sortコマンドは、行をソートするコマンドである。

-rオプション: 逆順にソートする。
-hオプション: 人間が読みやすい形式でソートする。これをつけることで、1K、1M、1Gのようなサイズを比較できる。

`head`コマンド

headコマンドは、先頭から指定した行数を表示するコマンドである。

-nオプション: 表示する行数を指定する。ここでは10を指定しているため、上位10件のディレクトリ/ファイルが表示される。

GitHubで署名付きコミットを反映させるための設定メモ

Sat, 17 Aug 2024 02:28:02 +0900

これはなに

GitHubで署名付きコミットを反映させるための設定のメモ。

署名付きコミットとは

署名付きコミットとは、コミットした人が本人であると証明するためのものである。

Gitで誰がコミットしたかという情報は、Gitで設定するuser.nameとuser.emailで判断できる。しかし、これらの値は簡単にカスタマイズできるため、いくらでもなりすましができてしまう。このなりすましを回避し、本人であることを証明するのに、署名付きコミットは有用である。

署名付きコミットではGPGキーが利用される。GPGとは、GNU Privacy Guardの略で、データの暗号化や署名に利用できる。GPGキーは秘密鍵と公開鍵のペアで構成される。GPGキーを利用してコミットすると、コミットには秘密鍵で署名が付与される。この署名を公開鍵で検証することで、そのコミットが本人によって行われたと証明できる。

全体の流れ

GitHubで署名付きコミットを利用するための手順は以下のとおりである。

GPGキーの作成
GitHubへのGPGキーの登録
GitにおけるGPGキーの設定
書名付きコミットを試す
署名付きコミットの確認

環境

本記事は以下の環境で動作確認した。

WSL2 Ubuntu 22.04 LTS
Git 2.34.1
GnuPG 2.2.27

GPGキーの作成

書名付きコミットをするために、GPGキーを作成する。

GnuPGのインストール

GPGキーは、GnuPGというGPGのCLIツールを利用して作成する。このツールを入れるとgpgコマンドが使えるようになる。インストールのしかたはOSによって異なるため、公式サイトを参照すること。

GnuPGが正常にインストールされていれば、以下のコマンドでバージョンを確認できる。

$ gpg --version
gpg (GnuPG) 2.2.27
libgcrypt 1.9.4
Copyright (C) 2021 Free Software Foundation, Inc.
License GNU GPL-3.0-or-later <https://gnu.org/licenses/gpl.html>
This is free software: you are free to change and redistribute it.
There is NO WARRANTY, to the extent permitted by law.

Home: /home/user/.gnupg
サポートしているアルゴリズム:
公開鍵: RSA, ELG, DSA, ECDH, ECDSA, EDDSA
暗号方式: IDEA, 3DES, CAST5, BLOWFISH, AES, AES192, AES256,
 TWOFISH, CAMELLIA128, CAMELLIA192, CAMELLIA256
ハッシュ: SHA1, RIPEMD160, SHA256, SHA384, SHA512, SHA224
圧縮: 無圧縮, ZIP, ZLIB, BZIP2

Windowsの場合

Windowsマシンの場合Gpg4winをインストールする。wingetを使ってインストールすると簡単。wingetは、Microsoft曰く、Windows 11ならデフォルトで利用できる。

wingetでGpg4winを入れられるかどうかは、winget searchで確認できる。

winget search gpg4win

以下のような出力が得られれば、インストールできる。

> winget search gpg4win
名前 ID バージョン 一致 ソース
------------------------------------------------------------
Gpg4win GnuPG.Gpg4win 4.4.0 ProductCode: gpg4win winget

インストールはwinget installで行う。

winget install gpg4win

以下のような出力が得られれば、インストール完了となる。

> winget install gpg4win
見つかりました Gpg4win [GnuPG.Gpg4win] バージョン 4.4.0
このアプリケーションは所有者からライセンス供与されます。
Microsoft はサードパーティのパッケージに対して責任を負わず、ライセンスも付与しません。
ダウンロード中 https://files.gpg4win.org/gpg4win-4.4.0.exe
 ██████████████████████████████ 34.3 MB / 34.3 MB
インストーラーハッシュが正常に検証されました
パッケージのインストールを開始しています...
インストーラーは管理者として実行するように要求するため、プロンプトが表示されます。
インストールが完了しました

ターミナル（e.g. PowerShell）を再起動して、gpg --versionでバージョンが表示されればインストール成功。

gpg --version

Log

> gpg --version
gpg (GnuPG) 2.4.7
libgcrypt 1.11.0
Copyright (C) 2024 g10 Code GmbH
License GNU GPL-3.0-or-later <https://gnu.org/licenses/gpl.html>
This is free software: you are free to change and redistribute it.
There is NO WARRANTY, to the extent permitted by law.

Home: C:\Users\nak\AppData\Roaming\gnupg
サポートしているアルゴリズム:
公開鍵: RSA, ELG, DSA, ECDH, ECDSA, EDDSA
暗号方式: IDEA, 3DES, CAST5, BLOWFISH, AES, AES192, AES256,
 TWOFISH, CAMELLIA128, CAMELLIA192, CAMELLIA256
ハッシュ: SHA1, RIPEMD160, SHA256, SHA384, SHA512, SHA224
圧縮: 無圧縮, ZIP, ZLIB, BZIP2

主鍵の作成

GPGキーは以下のコマンドで作成できる。

gpg --full-generate-key

新しい GPG キーを生成する - GitHub ドキュメント

既存の GPG キーがない場合は、新しい GPG キーを生成してコミットおよびタグの署名に使用できます。

鍵の作成時に--expertオプションを付けると、より詳細な設定ができる。たとえば、gpgのバージョンによっては--expertオプションをつけないとECCで鍵が作れない。

gpg --full-generate-key --expert

コマンドを実行すると、プロンプトで鍵の作成に関する質問が表示される。聞かれるのは以下のような質問である。

鍵の種類（RSA、ECCなど）
鍵の長さ
鍵の有効期限
鍵のユーザー情報
- ユーザー名
- メールアドレス
- コメント
パスフレーズ

最初に鍵の種類を選択する。選択肢は以下の通りである。

$ gpg --full-generate-key --expert
gpg (GnuPG) 2.2.27; Copyright (C) 2021 Free Software Foundation, Inc.
This is free software: you are free to change and redistribute it.
There is NO WARRANTY, to the extent permitted by law.

ご希望の鍵の種類を選択してください:
 (1) RSA と RSA (デフォルト)
 (2) DSA と Elgamal
 (3) DSA (署名のみ)
 (4) RSA (署名のみ)
 (7) DSA (機能をあなた自身で設定)
 (8) RSA (機能をあなた自身で設定)
 (9) ECC と ECC
 (10) ECC (署名のみ)
 (11) ECC (機能をあなた自身で設定)
 (13) 既存の鍵
 (14) カードに存在する鍵
あなたの選択は? 11

ここで作成する鍵は、鍵の認証にのみ利用する。そのため、鍵の認証機能のみを持つ鍵を生成する。上記の選択肢には認証機能のみを持つ鍵の選択肢はないため、RSAやECCでも機能を自分で設定する選択肢（e.g. RSA (機能をあなた自身で設定)やECC (機能をあなた自身で設定)）を選ぶ。

たとえば、選択肢11（ECC (機能をあなた自身で設定)）を選ぶと、以下のような質問が表示される。

鍵ECDSA/EdDSAに認められた操作: Sign Certify Authenticate
現在の認められた操作: Sign Certify

 (S) 署名機能を反転する
 (A) 認証機能を反転する
 (Q) 完了

あなたの選択は?

この現在の認められた操作が鍵の機能を示す。Sign Certifyの場合、署名（Sign）と鍵の認証（Certify）の機能が両方付与されている。ここで作成する鍵は鍵の認証にのみ利用するため、署名の機能（S）を削除する。Sを選択すると、署名の機能が削除される。

あなたの選択は? S

鍵ECDSA/EdDSAに認められた操作: Sign Certify Authenticate
現在の認められた操作: Certify

 (S) 署名機能を反転する
 (A) 認証機能を反転する
 (Q) 完了

あなたの選択は? Q

現在の認められた操作がCertifyのみになったら、Qを選択して設定を完了する。

次に、RSAなら鍵の長さ、ECCなら曲線の種類を選ぶ。個人の好みとしては、RSAなら4096¹、ECCならcurve25519を選ぶのがよいだろう。

ご希望の楕円曲線を選択してください:
 (1) Curve 25519
 (3) NIST P-256
 (4) NIST P-384
 (5) NIST P-521
 (6) Brainpool P-256
 (7) Brainpool P-384
 (8) Brainpool P-512
 (9) secp256k1
あなたの選択は? 1

次に、鍵の有効期限を設定する。有効期限は0を選ぶと無期限になる。有効期限を設定する場合は、1y（1年）、2y（2年）などの形式で設定する。セキュリティの観点では、定期的な鍵の更新のために、有効期限を設けることが推奨される。

鍵の有効期限を指定してください。
 0 = 鍵は無期限
 <n> = 鍵は n 日間で期限切れ
 <n>w = 鍵は n 週間で期限切れ
 <n>m = 鍵は n か月間で期限切れ
 <n>y = 鍵は n 年間で期限切れ
鍵の有効期間は? (0) 0
鍵は無期限です

次に、鍵のユーザー情報を設定する。ユーザー名、メールアドレス、コメントを設定する。ユーザー名とメールアドレスは必須、コメントは任意である。おそらく本来は本名や実際のメールアドレスを設定すべきだが、別に架空の名前でも良い。

注意点として、ここで設定するメールアドレスは、GitHubに登録しているメールアドレスと同一のものにしなければならない。GitHubは、GPGキーのメールアドレスとGitHubのメールアドレスが一致している場合、署名付きコミットを認識する。

最後に、パスフレーズを設定する。パスフレーズは秘密鍵を保護するためのもので、他人に知られてはならない。パスフレーズは長く複雑なものを設定するのが望ましい。パスフレーズは鍵の利用時に要求されるため、必ず記録しておくこと。パスワードマネージャーを利用するのがよいだろう。

以上でGPGキーが生成される。作成された鍵は次のコマンドで確認できる。

gpg -k

たとえば、次のような情報が表示される。

$ gpg -k
/home/user/.gnupg/pubring.kbx
--------------------------------
pub ed25519 YYYY-MM-DD [C]
 1234567890ABCDEF1234567890ABCDEF12345678
uid [ 究極 ] UserName <example@mail.com>

この手順で作成されるGPGキー（pubのところに表示されるもの）は主鍵と呼ばれる²。

主鍵の[C]の表記は、主鍵に鍵の認証（Certify）の機能が付与されていることを示している。もし、主鍵に認証の機能（C）がない場合は、主鍵の機能を変更する必要がある。

設定次第では、主鍵でも書名付きコミットはできる。しかし、セキュリティ上の理由から、主鍵を日常的に利用するのは避けるべきである。基本的に、主鍵は副鍵を保証するのだけに利用する。日常的に利用する署名や認証には、このあと作成する副鍵を利用する。これにより、情報漏洩時のリスクを軽減できる。

副鍵の作成

副鍵の作成方法は次のとおりである。まず、主鍵のIDを調べる。

gpg --list-secret-keys --keyid-format LONG

すると、以下のような情報が表示される。

~$ gpg --list-secret-keys --keyid-format LONG
/home/user/.gnupg/pubring.kbx
--------------------------------
sec ed25519/SYUKAGINOID YYYY-MM-DD [C]
 1234567890ABCDEF1234567890ABCDEF12345678
uid [ 究極 ] UserName <example@mail.com>

この中で、SYUKAGINOIDが主鍵のIDである。このIDを使って副鍵を作成する。

まず、次のgpgコマンドを実行する。

gpg --expert --edit-key <主鍵のID>

すると、以下のようなプロンプトが表示される。

gpg>

このプロンプトで、addkeyコマンドを実行する。実行時のプロンプトは以下のようになる。

gpg> addkey

addkeyコマンドを実行すると、主鍵作成時と同様の質問が表示される。注意点として、GitHubの署名付きコミットを利用する場合、副鍵は署名(Signed)の機能を持つように作成しなければならない。逆に言うと、署名の機能だけを持つ副鍵を作成すれば十分である。

たとえば、以下の選択肢が表示され、ECCの副鍵を作成する場合、署名の機能だけを持つ副鍵を作成するには10を選択する。

gpg> addkey
ご希望の鍵の種類を選択してください:
 (3) DSA (署名のみ)
 (4) RSA (署名のみ)
 (5) Elgamal (暗号化のみ)
 (6) RSA (暗号化のみ)
 (7) DSA (機能をあなた自身で設定)
 (8) RSA (機能をあなた自身で設定)
 (10) ECC (署名のみ)
 (11) ECC (機能をあなた自身で設定)
 (12) ECC (暗号化のみ)
 (13) 既存の鍵
 (14) カードに存在する鍵
あなたの選択は? 10

質問に回答すると副鍵³が作成される。生成された副鍵は次のコマンドで確認できる。

gpg -k

たとえば、次のような情報が表示される。

$ gpg -k
/home/user/.gnupg/pubring.kbx
--------------------------------
pub ed25519 YYYY-MM-DD [C]
 1234567890ABCDEF1234567890ABCDEF12345678
uid [ 究極 ] UserName <example@mail.com>
sub ed25519 YYYY-MM-DD [S]

このsubに表示される情報が副鍵である。副鍵の[S]の表記は、副鍵に署名（Sign）の機能が付与されていることを示している。

GitHubへのGPGキーの登録

鍵を生成したら、GitHubに公開鍵を登録する。まず、署名に利用する鍵のIDを確認する。

gpg --list-secret-keys --keyid-format LONG

すると、以下のような情報が表示される。

$ gpg --list-secret-keys --keyid-format LONG
/home/user/.gnupg/pubring.kbx
--------------------------------
sec ed25519/SYUKAGINOID YYYY-MM-DD [C]
 1234567890ABCDEF1234567890ABCDEF12345678
uid [ 究極 ] UserName <example@mail.com>
ssb ed25519/FUKUKAGINOID YYYY-MM-DD [S]

この中で、FUKUKAGINOIDが署名に利用する鍵のIDである。このIDを使って公開鍵を取得する。公開鍵の情報は以下のコマンドで取得できる。

gpg --armor --export <key-id>

たとえば、FUKUKAGINOIDの公開鍵を取得するには、次のコマンドを実行する。

gpg --armor --export FUKUKAGINOID

すると、以下のような公開鍵が表示される。

$ gpg --armor --export FUKUKAGINOID
-----BEGIN PGP PUBLIC KEY BLOCK-----

XXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXX
XXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXX
XXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXX
XXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXX

-----END PGP PUBLIC KEY BLOCK-----

この-----BEGIN PGP PUBLIC KEY BLOCK-----から-----END PGP PUBLIC KEY BLOCK-----までの部分が公開鍵である。

Add new GPG keysへアクセスし、上記の公開鍵をコピー&ペーストして登録する。-----BEGIN PGP PUBLIC KEY BLOCK-----と-----END PGP PUBLIC KEY BLOCK-----も含めてコピーすること。

以上で、GitHubで書名付きコミットを利用するための設定が完了した。

GitにおけるGPGキーの設定

手元でgit commitする際に使うGPGキーを設定する。

git config --global user.signingkey <key-id>

たとえば、今回はFUKUKAGINOIDを使うので、次のように設定する。

git config --global user.signingkey FUKUKAGINOID

書名付きコミットを試す

書名付きコミットをするには、3つの方法がある。

コミット単位で書名付きコミットをする
リポジトリ内のすべてのコミットを書名付きにする
すべてのリポジトリで署名付きコミットをデフォルトにする

コミット単位で書名付きコミットをする

コミット単位で書名付きコミットをするには、-Sオプションを利用する。

git commit -S -m "commit message"

リポジトリ内のすべてのコミットを書名付きにする

リポジトリ内のすべてのコミットを書名付きにするには、そのリポジトリのディレクトリ内で、Gitのlocalのconfigを変更する。

git config commit.gpgsign true

これにより、そのリポジトリでは、-Sオプションを付けずにコミットしても、署名付きコミットが行われる。

すべてのリポジトリで署名付きコミットをデフォルトにする

すべてのリポジトリで署名付きコミットをデフォルトにするには、Gitのglobalのconfigを変更する。

git config --global commit.gpgsign true

これにより、すべてのリポジトリで、-Sオプションを付けずにコミットしても、署名付きコミットが行われる。

署名付きコミットの確認

署名付きコミットを確認するには、git logコマンドを利用する。

git log --show-signature

GitHub上だと、コミットの右側にVerifiedと表示される。

Appendix | 署名付きタグの設定

書名付きのタグも作成できる。署名付きタグを作成するには、-sオプションを利用する。

git tag -s <tag-name>

git configの設定で、デフォルトでタグに署名をつけるように設定できる。

git config --global tag.gpgsign true

参考文献・URL

GPG で始める暗号・署名ライフ - blog.livewing.net

PGP (Pretty Good Privacy) の実装のひとつである GPG (GNU Privacy Guard) を使用して鍵を生成する方法をゼロから紹介します。また、ファイルを暗号化・署名してやりとりする方法や、 Git のコミットに署名をつける方法、エンジニアフレンドリーなパスワードマネージャー Pass によるパスワード管理の方法なども紹介します。メールでパスワードつき zip ...

blog.livewing.net

GPGキーの設定 (2023-10-13記録)

murnanaさんのスクラップ

Windows, WSL, DevContainerでコミットを署名する

GitHub 上で表示されるコミットを署名付きにする方法 - Qiita

実現できることこの記事の手順を実践すると、GitHub 上のコミット欄に "Verified" マークをつけることができる。単にマークをつけられるだけでなく、そのコミットが本人のものであるということを証明することができる。つまり、コミットの偽装防止ができる。環...

長いほうがセキュリティ的に良い。 ↩︎
生成時の鍵の種類の選択によっては、主鍵と副鍵のペアで作成されることもある。たとえば、鍵の種類をRSA と RSA (デフォルト)にした場合は、主鍵と副鍵のペアで作成される。 ↩︎
副鍵は主鍵に紐づいており、主鍵の証明書に副鍵の情報が含まれる。副鍵は主鍵によって署名されているため、副鍵が信頼できるかどうかは主鍵に依存する。 ↩︎

nuxt/eslint-configからESLint Moduleへ移行したときの手順メモ

Sat, 29 Jun 2024 15:03:33 +0900

これはなに

@nuxt/eslint-configを用いたeslintrcの設定から、ESLint Module（@nuxt/eslint）を用いたESLint flat configへ移行したときに取った手順のメモ。

手順

1. `.eslintrc.cjs`と`.eslintignore`を削除する

Flat configでは.eslintrc.cjsでなくeslint.config.mjsを使う。そのため、.eslintrc.cjsは削除する。

Flat configでは.eslintignoreは廃止され、無視するファイルもeslint.config.jsに記述する。そのため、.eslintignoreも削除する。

2. `package.json`から、ESLint関連のライブラリを削除する

@nuxt/eslint-configとeslintを削除する。

eslint-config-prettierを入れている場合は、これも削除する。@nuxt/eslintモジュールは、デフォルトではフォーマットを実行しないため、Prettierなど別のフォーマッタを使う場合でも競合を起こさない。

3. `@nuxt/eslint`モジュールをプロジェクトに追加する

下記コマンドで@nuxt/eslintとeslintを入れる。

npm install --save-dev @nuxt/eslint eslint

nuxt.config.tsに@nuxt/eslintモジュールを追加する。

nuxt.config.ts

// https://nuxt.com/docs/api/configuration/nuxt-config
export default defineNuxtConfig({
 // ...
 modules: [
 "@nuxtjs/tailwindcss",
 "@nuxtjs/color-mode",
 "@nuxtjs/i18n",
+ "@nuxt/eslint",
 ],
});

この状態で一度アプリを起動する。

npm run dev

すると、自動でeslint.config.mjsが生成される。

eslint.config.mjs

// @ts-check
import withNuxt from './.nuxt/eslint.config.mjs'

export default withNuxt(
 // Your custom configs here
)

これでESLintが有効になる。 eslint.config.mjsを編集することで独自のルールを設けられる。

`eslint.config.mjs`を編集してルールを追加する

eslint.config.mjsを編集することで、ルールを追加できる。例を次に示す。

eslint.config.mjs

// @ts-check
import withNuxt from './.nuxt/eslint.config.mjs'

export default withNuxt(
 {
 files: ['**/*.vue', '**/*.ts'],
 rules: {
 'no-console': 'warn',
 '@typescript-eslint/no-explicit-any': 'error',
 '@typescript-eslint/no-unused-vars': 'error',
 '@typescript-eslint/typedef': 'error',
 },
 },
 {
 files: ['**/*.vue'],
 ignores: ['pages/**/*.vue', 'layouts/**/*.vue'],
 rules: {
 'vue/multi-word-component-names': 'error',
 },
 },
 {
 files: ['**/*.vue'],
 rules: {
 'vue/no-multiple-template-root': 'error',
 'vue/require-v-for-key': 'error',
 'vue/no-use-v-if-with-v-for': 'error',
 'vue/no-v-html': 'error',
 'vue/require-default-prop': 'error',
 },
 },
)

`.gitignore`に書かれたファイルを無視する

.eslintrcを利用していた場合は、--ignore-path .gitignoreオプションで、.gitignoreファイルに書かれたファイルを無視できた。しかし、このオプションはESLint flat configには存在しないため、別途設定が必要になる。

.gitignoreを追加する設定は公式に記載されている。

Ignore Files - ESLint - Pluggable JavaScript Linter

eslint.org

下記の記述は上記サイトのコードをそのまま引用したものである。

eslint.config.mjs

// eslint.config.js
import { includeIgnoreFile } from "@eslint/compat";
import path from "node:path";
import { fileURLToPath } from "node:url";

const __filename = fileURLToPath(import.meta.url);
const __dirname = path.dirname(__filename);
const gitignorePath = path.resolve(__dirname, ".gitignore");

export default [
 includeIgnoreFile(gitignorePath),
 {
 // your overrides
 }
];

これをそのままeslint.config.mjsに追加すれば動作する。

なお、@eslint/compatはnpmでインストールする必要がある。

npm install @eslint/compat -D

Appendix | ESLint Stylisticを有効にする

@nuxt/eslintモジュールは、デフォルトではフォーマットを実行しない。そのため、Prettierなど別のフォーマッタを使う場合は特に追加の設定は必要ない。

ESLintにはESLint Stylisticという機能があり、これを有効にすると、ESLintがフォーマットを実行する。

ESLint Stylisticは、nuxt.config.tsのeslintモジュールのオプションで、config.stylisticをtrueに設定すると有効化できる。

nuxt.config.ts

export default defineNuxtConfig({
 // ...
 eslint: {
 config: {
 stylistic: true,
 },
 },
});

ルールをカスタマイズする場合は、stylisticオプションにルールを追加する。

参考文献・URL

ESLint Module - Nuxt ESLint

All-in-one ESLint integration for Nuxt. It generates a project-aware ESLint flat config and provides the ability to optionally run ESLint check along side the dev server.

eslint.nuxt.com

【Nuxt3】簡単！@nuxt/eslintを使ったESLintとフォーマッタの設定 ※2024年版 - Qiita

閲覧頂き、ありがとうございます🙇 この記事は @nuxt/eslint を用いた、 ESLint とフォーマッタの導入環境を作成していきます！前提 name version Nuxt.js(Vue.js) v3.x ESLint v8.x ...

Nuxt3で「eslintrcとprettier」から「flat configとeslint stylistic」へ移行した話

Flat Config導入完了！　新しいESLintの設定フォーマットを使ってみた

Gitのログの表示をカスタマイズする

Fri, 21 Jun 2024 01:36:04 +0900

Gitのログのカスタマイズ

Gitのログの表示はカスタマイズできる。たとえば、以下のようにエイリアスを設定すれば、git loggと打つだけで、カスタマイズされたログを表示できる。

git config --global alias.logg 'log --graph --abbrev-commit --pretty=format:"%C(yellow)%h%C(reset) - %C(cyan)%ad%C(reset) %C(green)(%ar)%C(reset)%C(auto)%d%C(reset)%n %C(white)%s%C(reset) %C(dim white)- %an%C(reset)%n"'

参考文献・URL

git logのオプションと綺麗にツリー表示するためのエイリアス - Qiita

要旨まず、git logコマンドの細かなオプションを説明します。最終的に、以下のようなコミットツリーの表示するためのオプションの指定方法を例示します。 # `git log`とは gitで管理しているリポジトリがあるディレクトリで`git log`を叩くと過去のコ...

Pretty Git branch graphs

I've seen some books and articles have some really pretty looking graphs of Git branches and commits. How can I make high-quality printable images of Git history?

stackoverflow.com

シェルのclearコマンドについてのメモ

Sun, 16 Jun 2024 11:57:39 +0900

これはなに

シェルのclearコマンドについてのメモ。

`clear` コマンドとは

clear コマンドは、ターミナルの画面をクリアするコマンドである。

clear コマンドを実行すると、ターミナルの画面がクリアされ、新しい画面が表示される。

Ctrl + Lでも同様の効果がある。

`clear` コマンドの実装

clear コマンドは、ANSIエスケープシーケンスを利用して、ターミナルの画面をクリアしている。

たとえば、clear コマンドを実行した結果をファイルにリダイレクトすると、ターミナルはクリアされない。

clear > clear.txt

代わりに、以下のような文字列がclear.txtへ書き込まれる。

 [H [2J [3J

この文字列は、ターミナルの画面をクリアするための特殊な文字列（ANSIエスケープシーケンス）である。ターミナルは、この文字列を「画面をクリアする指示」として解釈し、画面をクリアする。

上記で四角になってしまっている部分は、hexdumpコマンド¹で確認できる。

$ clear | hexdump -c
0000000 033 [ H 033 [ 2 J 033 [ 3 J
000000b

つまり、clearコマンドは、ターミナルの画面をクリアするための特殊な文字列"\033[H\033[2J\033[3J"をターミナルへ出力している。

hexdumpは、バイナリファイルを16進数で表示するコマンドである。-cオプションを指定することで、ASCII文字として表示できる。 ↩︎

シェルとターミナルの違い

Sun, 16 Jun 2024 11:38:36 +0900

シェルとは

シェルとは、コマンドを受け取り実行するプログラムである。

シェルは、OSとユーザーの間に立つインターフェースである。ユーザーからコマンドを受け取り、それをOSに渡して実行する。シェルからOSにコマンドを渡す際は、OSの提供するシステムコールを利用する。

つまり、シェルは、ユーザーが入力したコマンドを解釈し、それに対応するシステムコールを呼び出すプログラムである。

ターミナルとは

ターミナルとは、シェルとユーザーの間のインターフェースとなるデバイスである。

ターミナル自身はコマンドの実行機能を持たない。あくまでユーザーの入力をシェルに渡し、シェルからの出力をユーザーに表示する役割を持つデバイスである。

昔はターミナルと呼ばれる物理的なデバイスを利用していたが、現在はターミナルエミュレータというソフトウェアを利用するのが一般的である。

ターミナルの表示

シェルの出力はターミナルの機能で画面に表示される。そのため、ターミナルがシェルの出力をどう解釈するかによって、表示のされ方が異なる。

たとえば、出力に\nが含まれていると、大抵のシェルは改行する。これは、ターミナルが\nを「改行」と解釈して表示するためである。

細かいターミナル表示の制御をするために、ANSIエスケープシーケンスと呼ばれる特殊な文字列が存在する。これを利用することで、文字色や背景色の変更、カーソルの移動、画面のクリアなどが可能となる。

シェルがプロセスを実行するしくみ

Tue, 11 Jun 2024 23:58:51 +0900

シェルはプロセスを直接実行しない

カーネル以外のプロセスは、新しくプロセスを実行できない。そのため、シェルでプロセスを実行するためには、シェルからカーネルにプロセスの実行を依頼しなければならない。

カーネルへの依頼にはシステムコールを使う

カーネルになにかの処理を依頼するためには、システムコールを使う。システムコールは、ユーザプログラムがカーネルに処理を依頼するためのインターフェースである。

シェルからカーネルへのプロセスの実行依頼

シェルからカーネルへのプロセスの実行依頼は、forkシステムコールとexecveシステムコールを使って行う。なお、プログラミング言語からは、これらのシステムコールに対応するライブラリの関数を呼び出すことになる。

forkシステムコールを呼び出すと、カーネルは呼び出し元のプロセスのコピーを作成し、新しいプロセスを生成する。この時点で生成されるプロセスは呼び出し元のコピーであるため、呼び出し元のプロセスと同じプログラムを実行する。

pid = os.fork()

forkで生成したプロセスに新しいプログラムを実行させるには、execveシステムコールを呼び出す。execveシステムコールでは、プログラムのパス名と引数を指定する。これを呼び出すと、プロセスのプログラムが指定したプログラムに置き換わる。

if pid == 0: # Child process
 os.execve('/bin/ls', ['/bin/ls', '-l'], os.environ)

プロセスの入出力のリダイレクト

forkで複製された処理の標準入力・標準出力・標準エラー出力は、ファイルディスクリプタとして親プロセスから子プロセスへコピーされる。これにより、親プロセスと子プロセスは独立して処理できる。

子プロセスのファイルディスクリプタをリダイレクト先に変更することで、標準入力・標準出力・標準エラー出力をリダイレクトできる。

ファイルディスクリプタの変更は、dup2システムコールを使って行う。dup2システムコールは、指定したファイルディスクリプタを、指定したファイルディスクリプタ（の番号）へコピーする。

# 標準入力をリダイレクト
# stdin_fd: リダイレクト先のファイルディスクリプタ
# sys.stdin.fileno(): 標準入力のファイルディスクリプタ
os.dup2(stdin_fd, sys.stdin.fileno())

プロセスのパイプ

あるプロセスの出力を別のプロセスの入力につなぐことをパイプという。

パイプは、pipeシステムコールを使って作成する。pipeシステムコールを使うと、読み込み用と書き込み用の2つのファイルディスクリプタが生成される。

pipe_read, pipe_write = os.pipe()

これらのファイルディスクリプタをパイプ前の出力とパイプ後の入力にリダイレクトすることで、パイプを実現できる。

参考文献・URL

www.udemy.com にアクセスできません

www.udemy.com

シェルの出力をリダイレクトする方法

Mon, 10 Jun 2024 13:42:22 +0900

シェルの出力をリダイレクトする方法のメモ。

標準出力

標準出力とは、コマンドの実行結果のデフォルトの表示先である。標準出力は通常、端末（コンソール）である。

たとえば、echoコマンドを実行すると、標準出力にHello, World!という文字列が表示される。

$ echo "Hello, World!"
Hello, World!

標準出力のリダイレクト

シェルの標準出力をリダイレクトするには、次のように>演算子を使う。

echo "Hello, World!" > hello.txt

上記のコマンドを実行すると、hello.txtというファイルが作成され、その中にHello, World!という文字列が書き込まれる。

この>は、標準出力をリダイレクトする演算子である。>の右側に指定されたファイルへ出力が書き込まれる。

標準エラー出力

標準エラー出力とは、コマンド実行時のエラーメッセージの、デフォルトの表示先である。標準エラー出力は通常、端末（コンソール）である。

たとえば、存在しないファイルをcatコマンドで表示しようとすると、標準エラー出力にエラーメッセージが表示される。

$ cat not_exist.txt
cat: not_exist.txt: No such file or directory

標準エラー出力のリダイレクト

シェルの標準エラー出力をリダイレクトするには、次のように2>演算子を使う。

cat not_exist.txt 2> error.txt

上記のコマンドを実行すると、error.txtというファイルが作成され、その中にエラーメッセージが書き込まれる。

この2>は、標準エラー出力をリダイレクトする演算子である。2>の右側に指定されたファイルへエラー出力が書き込まれる。

標準出力と標準エラー出力を同時にリダイレクト

標準出力と標準エラー出力を同時にリダイレクトするには、次のように2>&1を使う。

cat not_exist.txt > output.txt 2>&1

上記のコマンドを実行すると、output.txtというファイルが作成され、そこに出力とエラーメッセージが両方書き込まれる。

この2>&1は、標準エラー出力を標準出力にリダイレクトする演算子である。2>&1と書くことで、標準エラー出力が標準出力と同じファイルに書き込まれる。

標準入力

標準入力とは、コマンドの実行時に入力されるデータのデフォルトの取得先である。標準入力は通常、端末（キーボード）である。

たとえば、catコマンドを実行すると、標準入力から入力されたデータが表示される。

$ cat
Hello, World!
Hello, World!

上記のコマンドを実行すると、Hello, World!という文字列を入力すると、その文字列が表示される。

標準入力のリダイレクト

シェルの標準入力をリダイレクトするには、次のように<演算子を使う。

cat < input.txt

上記のコマンドを実行すると、input.txtというファイルからデータを読み込み、それをcatコマンドに渡す。

この<は、標準入力をリダイレクトする演算子である。<の右側に指定されたファイルからデータを読み込み、それを標準入力としてコマンドに渡す。

パイプ

パイプとは、コマンドの出力を別のコマンドの入力として渡す機能である。パイプは|演算子を使って表現される。

たとえば、lsコマンドの出力をgrepコマンドに渡して、特定のファイルだけを表示する。

$ ls | grep .txt
hello.txt
input.txt
output.txt

上記のコマンドを実行すると、lsコマンドの出力がgrepコマンドに渡され、.txtという文字列を含むファイルだけが表示される。

まとめ

標準出力をリダイレクトするには、>演算子を使う。
標準エラー出力をリダイレクトするには、2>演算子を使う。
標準出力と標準エラー出力を同時にリダイレクトするには、2>&1を使う。
標準入力をリダイレクトするには、<演算子を使う。
パイプを使って、コマンドの出力を別のコマンドの入力として渡せる。

参考文献・URL

www.udemy.com にアクセスできません

www.udemy.com

シェルのコマンドの種類についてのメモ

Sun, 09 Jun 2024 17:15:39 +0900

シェルのコマンドは2種類ある

シェルのコマンドには、内部コマンド（組み込みコマンド）と外部コマンドがある。

コマンドの種類はtypeコマンドで確認できる。

type <コマンド名>

内部コマンド

内部コマンドは、シェルの機能として実装されているコマンドである。たとえば、cd, echo, pwd, typeなどが該当する。

cdコマンドが内部コマンドかtypeコマンドで確認すると、以下のように表示される。

$ type cd
cd is a shell builtin

これより、cdコマンドはシェルの内部コマンドであるとわかる。

外部コマンド

外部コマンドは、シェルの外部にあるプログラムファイルとして実装されているコマンドである。たとえば、ls, cat, grep, findなどが該当する。

lsコマンドが外部コマンドかtypeコマンドで確認すると、以下のように表示される。

$ type ls
ls is /usr/bin/ls

これより、lsコマンドはシェルの外部にあるプログラムファイル/usr/bin/lsとして実装されていることがわかる。つまり、lsコマンドが実行されるとき、シェルは/usr/bin/lsを実行する。

入力されたコマンドが内部コマンドでない場合、シェルは$PATH変数に設定されたディレクトリを順に検索し、最初に見つかったファイルを実行する。$PATH変数に設定されたディレクトリは、echo $PATHで確認できる。

$ echo $PATH
/vscode/vscode-server/bin/linux-x64/89de5a8d4d6205e5b11647eb6a74844ca23d2573/bin/remote-cli:/usr/local/nvm/versions/node/v20.14.0/bin:/usr/local/bin:/usr/local/sbin:/usr/local/bin:/usr/sbin:/usr/bin:/sbin:/bin

コロン区切りだと見づらいので、改行区切りで表示すると、次のようになる。

$ echo $PATH | tr ':' '\n'
/vscode/vscode-server/bin/linux-x64/89de5a8d4d6205e5b11647eb6a74844ca23d2573/bin/remote-cli
/usr/local/nvm/versions/node/v20.14.0/bin
/usr/local/bin
/usr/local/sbin
/usr/local/bin
/usr/sbin
/usr/bin
/sbin
/bin

シェルはこれらのディレクトリを順に検索し、最初に見つかったファイルを実行する。

参考文献・URL

www.udemy.com にアクセスできません

www.udemy.com

Vue 3.4以降のカスタムコンポーネントでv-modelを双方向バインディングする

Sun, 31 Mar 2024 15:03:38 +0900

これはなに

Vue 3.4以降で、カスタムコンポーネントでv-modelを双方向バインディングして使えるようにする方法のメモ。

方法

Vue 3.4以前の場合は、propsとemitを使って、v-modelの双方向バインディングを行っていた。

Vue 3.4以前の方法

<script setup>
const props = defineProps(['modelValue'])
const emit = defineEmits(['update:modelValue'])
</script>

<template>
 <input
 :value="props.modelValue"
 @input="emit('update:modelValue', $event.target.value)"
 />
</template>

しかし、Vue 3.4からはdefineModel()を使うことで、より簡単に双方向バインディングできる。

例を以下にあげる。以下の例はテキスト入力コンポーネントである。

InputText.vue

<template>
 <input
 :id="id"
 v-model="model"
 type="text"
 :placeholder="placeholder"
 />
</template>

<script lang="ts" setup>
 const model = defineModel<string>();

 interface Props {
 id: string;
 placeholder: string;
 }
 withDefaults(defineProps<Props>(), {});
</script>

const model = defineModel<string>();で作成したmodelを、v-modelにバインドする。

このコンポーネントを使うときは、次のようにする。

index.vue

<template>
 <InputText
 id="search"
 v-model="searchQuery"
 :placeholder="入力してください"
 />
</template>

<script lang="ts" setup>
 const searchQuery = ref('');
</script>

v-modelにsearchQueryをバインドすることで、InputTextコンポーネントで入力した値がsearchQueryに反映される。

参考文献・URL

Vue.js

Vue.js - The Progressive JavaScript Framework

vuejs.org

複数のリモートリポジトリへ同時にpushする

Fri, 29 Mar 2024 23:35:01 +0900

これはなに

とある事情でGitLabとGitHubの2つのリモートリポジトリへ同時にpushすることになったので、そのときとった方法のメモ。

注意

この方法はgit push origin mainで2つのリモートリポジトリへ同時にpushできる。しかし、git fetchやgit pullできるのは1つ目に登録したリモートリポジトリだけである。そのため、登録順を考慮してリモートリポジトリを登録すること。

方法

リモートリポジトリを異なる識別名で2つ登録してもよかったのだが、片方は開発目的ではなくWatching目的だったので、同じ識別名に2つのリモートリポジトリを登録した。

まず。リモートリポジトリを登録する。すでに登録してあるなら不要。

git remote add origin https://primary-repo-url.git

次に、Watching用のリモートリポジトリを追加する。

git remote set-url --add origin https://secondary-repo-url.git

すると、リモートリポジトリが2つ登録される。

$ git remote -v
origin https://primary-repo-url.git (fetch)
origin https://primary-repo-url.git (push)
origin https://secondary-repo-url.git (push)

あとは、通常通りgit push origin mainでpushする。

git push origin main

すると、2つのリモートリポジトリへ同時にpushできる。

参考文献・URL

このサイトへのリンクはカード生成をスキップしています。

コマンドプロンプトで特定の日付以降に更新されたファイルを一覧表示するコマンド

Mon, 12 Feb 2024 09:00:00 +0900

これはなに

コマンドプロンプトで特定の日付以降に更新されたファイルを一覧表示するコマンドのメモ。

コマンド

forfiles /p "対象ディレクトリのパス" /s /m *.* /d +2024/02/10 /c "cmd /c echo @path"

/p "対象ディレクトリのパス" : 対象ディレクトリのパス
/s : サブディレクトリも含めて検索
/m *.* : ファイル名のパターン
/d +2024/02/10 : この日付以降に更新されたファイルを検索
/c "cmd /c echo @path" : 検索結果のファイルパスを表示

Nuxt3の環境にPrettierを導入する

Sat, 03 Feb 2024 13:53:40 +0900

これはなに

Nuxt.js 3の環境にPrettierを導入する方法のメモ。

はじめに

本記事の執筆時点では、Nuxt.jsのドキュメントによると、ESLintはフォーマットを実行しない。そのため、フォーマットのためには、後述するようにPrettierなどのツールを利用するよう書かれている。

At the moment, this configuration will not format your files; you can set up Prettier or another tool to do so.

Prettierの利用についてはここで議論されていたようだが、どうやらESLintでフォーマットまで行うのをやめたようだ。

Prettierの導入

まず、Prettierをインストールする。

npm install --save-dev prettier

ESLintを導入している場合は、prettier eslint-config-prettierも入れる。これは、Prettierと競合するESLintの設定を無効化するconfigである。

npm install --save-dev eslint-config-prettier

また、ESLintを導入している場合は、ESLintの設定ファイル.eslintrc.cjsにPrettier用の設定を追加する。これを追加することで、ESLintとPrettierの住み分けができる。必ずextendsの一番最後に入れる。

.eslintrc.cjs

module.exports = {
 root: true,
 extends: ['@nuxt/eslint-config', 'prettier'],
};

次に、Prettierの設定ファイルである.prettierrc.jsonを作成し、任意のオプションを設定する。設定できるオプションの詳細はPrettier公式を参照してほしい。下記に例を示す。

.prettierrc.json

{
 "printWidth": 80,
 "tabWidth": 2,
 "semi": true,
 "singleQuote": true,
 "vueIndentScriptAndStyle": true
}

その後、package.jsonにフォーマット用のコマンドを追加する。下記では、fixコマンドも追加し、ESLintと同時に実行できるようにしている。

package.json

{
 "scripts": {
 "format": "prettier . --write",
 "fix": "eslint --fix --ignore-path .gitignore . && prettier . --write"
 },
}

これでPrettierによるフォーマットを実行できるはずなので、以下のコマンドを実行してみる。

npm run format

自動修正もできるか確認する。

npm run fix

VS CodeにPrettierの拡張機能をインストールし、以下のVS Codeの設定を追記すれば、ファイル保存時に自動でESLintを実行できる。

settings.json

{
 // formatter
 "editor.defaultFormatter": "esbenp.prettier-vscode",
 "editor.formatOnSave": true,
 "editor.formatOnPaste": true,
 "editor.formatOnType": true
}

ちなみにVS Codeの場合、Prettierを入れた直後はESLintとバッティングしてうまく動作しないことがある。その場合は、一度VS Codeを再起動する。

参考文献・URL

Code Style · Nuxt Concepts v4

Nuxt supports ESLint out of the box

nuxt.com

Next.jsでWebアプリを作るときの環境構築手順メモ

Next.js + Tailwind CSSで、ちらつかないダークモードを実装する

Sat, 20 Jan 2024 15:57:53 +0900

これはなに

Next.js 14のApp Routerでダークモードを実装したときのメモ。 Tailwind CSSを利用。アプリはSSRでレンダリングする。

下記のサイトをほぼそのまま実装した。

App Directory dark mode with tailwindcss and SSR · vercel next.js · Discussion #47952

Dark mode in app dir with tailwindcss and SSR Get theme from cookies in main layout // app/layout.tsx export default function RootLayout({ children, }: { children: React.ReactNode }) { const theme ...

LocalStorageを利用すると、ページをリロードしたときにちらついてしまう。そのため、Cookieを利用する。

手順

taiwind.config.jsの設定を変更する

tailwind.config.jsにdarkMode: 'class'を追加する。

tailwind.config.js

const config: Config = {
 // ...
+ darkMode: 'class',
};

cookieを取得する

app/layout.tsxでcookieからthemeの値を取得し、htmlタグのclassNameに設定する。

app/layout.tsx

import { cookies } from 'next/headers';

export default function RootLayout({
 children,
}: Readonly<{
 children: React.ReactNode;
}>) {
 const theme = cookies().get('theme');
 return (
 <html lang="ja" className={theme?.value}>
 {/* ... */}
 </html>
 );
}

3. テーマを定義する

typeとしてテーマを定義する。

app/_types/theme.ts

const Theme = {
 Light: 'light',
 Dark: 'dark',
} as const;

type Theme = (typeof Theme)[keyof typeof Theme];

export default Theme;

4. テーマ切り替えボタンを実装する

テーマを切り替えるためのボタンを実装する。

app/_components/ThemeSwitch.tsx

'use client';
import { useState } from 'react';

import Theme from '@/app/_types/theme';

interface ThemeSwitchProps {
 theme: Theme;
 className?: string;
}

export default function ThemeSwitch(props: Readonly<ThemeSwitchProps>) {
 const [theme, setTheme] = useState<Theme>(props.theme);

 const toggleTheme = () => {
 const root = document.getElementsByTagName('html')[0];
 root.classList.toggle(Theme.Dark);
 if (root.classList.contains(Theme.Dark)) {
 setTheme(Theme.Dark);
 document.cookie = `theme=${Theme.Dark}`;
 } else {
 setTheme(Theme.Light);
 document.cookie = `theme=${Theme.Light}`;
 }
 };

 return (
 <button
 className={['bg-gray-300 dark:bg-gray-700', props.className].join(' ')}
 onClick={toggleTheme}
 >
 {theme == Theme.Light ? Theme.Light : Theme.Dark}
 </button>
 );
}

5. テーマ切り替えボタンを表示する

ThemeSwitchを表示する。今回はapp/_components/MainHeader.tsxで表示する例を示すが、任意の場所で構わない。

app/_components/MainHeader.tsx

import { cookies } from 'next/headers';

import ThemeSwitch from './ThemeSwitch';
import Theme from '@/app/_types/theme';

export default function MainHeader() {
 const theme =
 cookies().get('theme')?.value === Theme.Dark ? Theme.Dark : Theme.Light;
 return (
 <header>
 <ThemeSwitch theme={theme} />
 </header>
 );
}

6. テーマを切り替える

テーマ切り替えボタンをクリックして、テーマが切り替わることを確認する。

参考文献・URL

App Directory dark mode with tailwindcss and SSR · vercel next.js · Discussion #47952

Next.jsでWebアプリを作るときの環境構築手順メモ

Fri, 19 Jan 2024 10:42:44 +0900

これはなに

Next.js 15でWebアプリを作る環境構築をしたときの手順メモ。

環境

WSL2 : Ubuntu-24.04
Docker version 28.4.0
VS Code 1.105.0 x64
Next.js 15.5.4
TypeScript 5.9.3
Prettier 3.6.2

VS Codeの改行設定を変更する

VSCodeの改行の設定を、念のためLFにする。

.vscode/settings.json

{
 "files.eol": "\n"
}

Dev Containersを用いたVS Code用開発環境を構築する

VS Codeの拡張機能Dev Containersを使って環境を構築する。

.devcontainerディレクトリを作成し、その中にdevcontainer.jsonとDockerfile、compose.yamlを作成する。

.
└── .devcontainer/
 ├── compose.yaml
 ├── devcontainer.json
 └── Dockerfile

compose.yamlを作成する

compose.yamlは次のように記述する。

.devcontainer/compose.yaml

services:
 app:
 build:
 context: ..
 dockerfile: .devcontainer/Dockerfile
 container_name: your-project-name
 command: sleep infinity
 logging:
 driver: json-file
 options:
 max-size: "1m"
 max-file: "3"
 volumes:
 - ../..:/workspaces:cached
 - ~/.gnupg:/home/node/.gnupg
 ports:
 - "3050:3000"
 environment:
 - GPG_TTY=/dev/pts/0
 - TZ=Asia/Tokyo
 - LANG=ja_JP.UTF-8
 - LANGUAGE=ja_JP:jp
 - LC_ALL=ja_JP.UTF-8

your-project-nameは任意のコンテナ名に変更する。
3050:3000の3050はホスト側のポート番号で、3000はコンテナ側のポート番号である。3050のほうは任意のポート番号に変更できるが、3000はNext.jsのデフォルトポートなので変更しない。
TZはタイムゾーン、LANG、LANGUAGE、LC_ALLはロケール設定である。必要に応じて変更する。

devcontainer.jsonを作成する

devcontainer.jsonは次のように記述する。

.devcontainer/devcontainer.json

{
 "name": "your-project-name",
 "dockerComposeFile": "./compose.yaml",
 "service": "app",
 "workspaceFolder": "/workspaces/${localWorkspaceFolderBasename}",
 "customizations": {
 "vscode": {
 "extensions": [
 "dbaeumer.vscode-eslint",
 "esbenp.prettier-vscode",
 "bradlc.vscode-tailwindcss",
 "formulahendry.auto-rename-tag",
 "christian-kohler.path-intellisense"
 ],
 "settings": {
 "editor.defaultFormatter": "esbenp.prettier-vscode",
 "editor.formatOnSave": true
 }
 }
 },
 "remoteUser": "node"
}

your-project-nameは任意の名前に変更する。
extensionsは必須の拡張機能を指定する。必要に応じて変更する。ちなみに、必須でない拡張機能は.vscode/extensions.jsonに記述するとよい。

Dockerfileを作成する

Dockerfileは次のように記述する。

.devcontainer/Dockerfile

FROM node:22-bookworm

# Install additional tools and dependencies
RUN apt-get update -y \
 && DEBIAN_FRONTEND=noninteractive \
 apt-get install -y --no-install-recommends \
 ca-certificates \
 curl \
 git \
 gnupg \
 locales \
 openssh-client \
 tzdata \
 xsel \
 && update-ca-certificates \
 && apt-get clean \
 && rm -rf /var/lib/apt/lists/*

# Set up available locales (can be controlled via compose.yaml)
RUN locale-gen en_US.UTF-8 ja_JP.UTF-8 \
 && localedef -f UTF-8 -i en_US en_US.UTF-8 \
 && localedef -f UTF-8 -i ja_JP ja_JP.UTF-8

# Install global npm packages
RUN npm install -g @anthropic-ai/claude-code

# Set working directory
WORKDIR /workspaces

# Expose Next.js default port
EXPOSE 3000

# Switch to non-root user
USER node

# Set default command
CMD ["bash"]

node:22-bookwormはNode.js 22のDockerイメージである。必要に応じて変更する。
claude-codeは必要に応じて削除する。

Dockerコンテナにアタッチする

VSCodeの拡張機能Dev Containersを使って、Dockerfileをビルドし、Dockerコンテナにアタッチする。

VS CodeでCtrl + Shift + Pを押してコマンドパレットを開き、Dev Containers: Reopen in Containerを実行する。これにより、Dockerfileがビルドされ、VS Codeがコンテナにアタッチされる。

推奨拡張機能をインストールする

VS Codeの拡張機能のタブで@recommendedと検索すると、.vscode/extensions.jsonに記述した拡張機能が表示される。必要に応じて拡張機能をインストールする。

Git管理する

プロジェクトをgit管理下に置く。

git init

branch名をデフォルトでmainにしていない場合はwarningが出るので、mainにしておく。

git branch -m main

アプリを作成する

コンテナ内でアプリ作成コマンドをたたく。

npx create-next-app@latest

create-next-appをインストールするか聞かれたらyを入力してインストールする。いろいろ聞かれるので、適宜プロジェクトに合わせて答える。

出力結果の例を示す。

出力の詳細

$ npx create-next-app@latest
Need to install the following packages:
create-next-app@15.5.4
Ok to proceed? (y) y

✔ What is your project named? … next-app
✔ Would you like to use TypeScript? … No / Yes
✔ Which linter would you like to use? › ESLint
✔ Would you like to use Tailwind CSS? … No / Yes
✔ Would you like your code inside a `src/` directory? … No / Yes
✔ Would you like to use App Router? (recommended) … No / Yes
✔ Would you like to use Turbopack? (recommended) … No / Yes
✔ Would you like to customize the import alias (`@/*` by default)? … No / Yes
Creating a new Next.js app in /workspaces/your-project-name/next-app.

Using npm.

Initializing project with template: app-tw


Installing dependencies:
- react
- react-dom
- next

Installing devDependencies:
- typescript
- @types/node
- @types/react
- @types/react-dom
- @tailwindcss/postcss
- tailwindcss
- eslint
- eslint-config-next
- @eslint/eslintrc


added 332 packages, and audited 333 packages in 20s

136 packages are looking for funding
 run `npm fund` for details

found 0 vulnerabilities
Success! Created next-app at /workspaces/your-project-name/next-app

アプリを起動する

作成されたアプリディレクトリへ移動し、アプリを起動する。

cd next-app
npm run dev

http://localhost:3050/にアクセスすると、Next.jsのデフォルトページが表示される。

ESLintのルールを変更する

必要に応じて、ESLintのルールを変更する。

Configuration Files - ESLint - Pluggable JavaScript Linter

eslint.org

変更したら、ESLintを実行して動作を確認する。

npm run lint

Prettierを入れる

FormatterとしてPrettierを入れる。

Configuration: ESLint | Next.js

Learn how to use and configure the ESLint plugin to catch common issues and problems in a Next.js application.

パッケージをインストールする。

npm install --save-dev prettier eslint-config-prettier

Prettierの設定ファイル.prettierrc.yamlを作る。

.prettierrc.yaml

{
 'semi': true,
 'trailingComma': 'all',
 'singleQuote': true,
 'printWidth': 80,
 'tabWidth': 2,
}

eslint.config.mjsにPrettierの設定を追加する。必ず最後に追加する。

eslint.config.mjs

// ...

const eslintConfig = [
 // ...
- ...compat.extends('next/core-web-vitals', 'next/typescript'),
+ ...compat.extends('next/core-web-vitals', 'next/typescript', 'prettier'),
 // ...
];
export default eslintConfig;

package.jsonにformatコマンドを追加する。

package.json

 "scripts": {
 "dev": "next dev",
 "build": "next build",
 "start": "next start",
 "lint": "next lint --ignore-path .gitignore",
+ "format": "prettier --write --ignore-path .gitignore ."
 },

Prettierを実行して動作を確認する。

npm run format

コミット時にlinterとformatterを自動実行する

コミット時にnpm run lintとnpm run formatを実行し、エラーが出る場合はコミットできないようにする。

まず、huskyをインストールする。

注意点として、Huskyは.gitディレクトリと同じ階層にインストールする必要がある。

npm install --save-dev husky

次に、husky-initコマンドを実行する。

このコマンドは環境により異なるため、実行するコマンドの詳細はhuskyの公式サイトを必ず参照すること。

Get started | Husky

Git hooks made easy

typicode.github.io

npx husky init

typicode.github.io にアクセスできません

成功すると、.huskyディレクトリが生成され、自動でpre-commitフックが追加される。

$ cat .husky/pre-commit
npm test

これを、npx lint-stagedを実行するように変更する。

$ cat .husky/pre-commit
npx lint-staged

特殊な環境でのhuskyのpre-commitフックの変更について

.gitディレクトリとpackage.jsonファイルが同じ階層に存在しない場合、下記のように、階層を移動するコマンドを追加する必要がある。

.husky/pre-commit

+ cd next-app # package.jsonのある階層に移動する

npx lint-staged

ここまでで、huskyの設定は完了である。

次に、lint-stagedをインストールする。

lint-stagedはNext.jsのアプリプロジェクト内へインストールすること。

npm install --save-dev lint-staged

package.jsonにlint-stagedの設定を追加する。

package.json

 "scripts": {
 "dev": "next dev --turbopack",
 "build": "next build --turbopack",
 "start": "next start",
 "lint": "eslint",
 "format": "prettier --write --ignore-path .gitignore ."
 },
+ "lint-staged": {
+ "*.{js,jsx,ts,tsx,json,css,md}": [
+ "npm run format",
+ "npm run lint"
+ ]
+ },

以上までの設定で、コミット時にlinterとformatterが自動で実行され、通らない場合はコミットできなくなる。

コミットメッセージを自動チェックして統一する

コミットメッセージのフォーマットを統一するため、commitlintを入れる。

commitlint

Lint commit messages

commitlint.js.org

まず、commitlintを入れる。

注意点として、commitlintは.gitディレクトリと同じ階層にインストールする。

コマンドは上記リンク先を参照すること。下記は一例である。

npm install -D @commitlint/cli @commitlint/config-conventional

次に、下記のコマンドを実行してcommitlint.config.jsを作成する。

echo "export default { extends: ['@commitlint/config-conventional'] };" > commitlint.config.js

作成されたcommitlint.config.jsは以下のようになる。

commitlint.config.js

export default { extends: ["@commitlint/config-conventional"] };

以上でcommitlintが動作するようになった。実行されるか確認する。

npx commitlint --from HEAD~1 --to HEAD --verbose

実行されれば、下記のようなログが出力される。

commitlintの実行結果

$ npx commitlint --from HEAD~1 --to HEAD --verbose
⧗ input: build(git): set up husky and lint-staged pre-commit
✔ found 0 problems, 0 warnings

続いて、コミット時にcommitlintを自動実行するように設定する。下記のコマンドを実行して、huskyにcommitlintを自動実行するcommit-msgフックを追加する。

echo "npx --no -- commitlint --edit \${1}" > .husky/commit-msg

これにより、.husky/commit-msgファイルが作成される。

.husky/commit-msg

npx --no -- commitlint --edit ${1}

これで、コミット時にcommitlintが実行されるようになる。

最後に、commitlintのルールを変更する。commitlintのルールは、commitlint.config.jsにルールを追記することで変更できる。

たとえば、subject-max-lengthを50に変更する場合は、下記のようにルールを追記する。

commitlint.config.js

module.exports = {
 extends: ['@commitlint/config-conventional'],

+ rules: {
+ 'subject-max-length': [2, 'always', 50],
+ },
};

commitlint の紹介 - Qiita

commitlint というツールをご紹介します。 commitlint とは、Git のコミット規約（commit convention）に従わせるための npm ツールです。ESLint のように、ルールを JavaScript で設定・開発できます。 com...

Udemy : 現役シリコンバレーエンジニアが教えるアルゴリズム・データ構造・コーディングテスト入門

ルールは、{ルール名}: [{レベル:0|1|2}, '{可否:always|never}', {値}]の形式で記述する。レベルは各数値が下記段階に該当する。

0: 無効
1: 警告
2: エラー

オレオレルールを下記に示す。

commitlint.config.js

module.exports = {
 extends: ['@commitlint/config-conventional'],

 rules: {
 'type-case': [2, 'always', 'lower-case'],
 'scope-case': [2, 'always', 'lower-case'],
 'subject-max-length': [2, 'always', 50],
 'body-full-stop': [2, 'always', '.'],
 'body-leading-blank': [2, 'always'],
 'body-max-line-length': [2, 'always', 72],
 'body-case': [2, 'always', 'sentence-case'],
 'footer-leading-blank': [2, 'always'],
 'footer-max-line-length': [2, 'always', 72],
 },
};

参考文献・URL

参考文献・URLは適宜記事内に示した。

Cocktail Sort

Sun, 24 Dec 2023 11:23:08 +0900

Cocktail Sortとは

Cocktail Sort（カクテルソート）とは、バブルソートの改良版である。シェーカーソートとも呼ばれる。安定なソートの一種。

アルゴリズム

先頭から2つずつ隣り合う要素を比較し、先頭側が小さくなるように入れ替える
- 数値を入れ替えたらフラグを立てる
末尾まで行き、フラグが立っていない場合は終了。フラグが立っている場合はフラグをリセットし、見る範囲の終端を1つ先頭側へずらす¹
末尾から2つずつ隣り合う要素を比較し、先頭側が小さくなるように入れ替える
- 数値を入れ替えたらフラグを立てる
先頭まで行き、フラグが立っていない場合は終了。フラグが立っている場合はフラグをリセットし、見る範囲の始端を1つ末尾側へずらす²
これをフラグが立たなくなるまで続ける

実装例

def swap_forward(numbers: list[int], idx_start: int, idx_end: int) -> bool:
 is_swapped = False
 for i in range(idx_start, idx_end):
 if numbers[i] > numbers[i + 1]:
 numbers[i], numbers[i + 1] = numbers[i + 1], numbers[i]
 is_swapped = True
 return is_swapped


def swap_backward(numbers: list[int], idx_start: int, idx_end: int) -> bool:
 is_swapped = False
 for i in range(idx_end, idx_start, -1):
 if numbers[i - 1] > numbers[i]:
 numbers[i - 1], numbers[i] = numbers[i], numbers[i - 1]
 is_swapped = True
 return is_swapped


def cocktail_sort(numbers: list[int]) -> list[int]:
 idx_start = 0
 idx_end = len(numbers) - 1

 while True:
 if not swap_forward(numbers, idx_start, idx_end):
 break
 idx_end -= 1

 if not swap_backward(numbers, idx_start, idx_end):
 break
 idx_start += 1

 return numbers

計算量

要素数を$n$とする。

	計算量
Average	$\mathrm{O}(n^2)$
Best	$\mathrm{O}(n)$
Worst	$\mathrm{O}(n^2)$

Pros

バブルソートに比べて、特定の状況下で効率的
- e.g. 末尾に小さい要素がある場合、先頭に大きい要素がある場合
- 双方向捜査のため、両方向に対して局所的な順序を改善できる
安定なソート

Cons

効率が悪い
計算量が大きいため速度は遅い
ほとんどの場合、他のソートアルゴリズムの方が良い
バブルソートに比べて実装が少し複雑

利用場面

要素数が少ない場合 : シンプルさと容易さが有利になることがある
教育目的 : アルゴリズムの理解を深めるために用いられることがある

末尾まで行った時点で、末尾には必ず最大値が格納されるため。 ↩︎
先頭まで行った時点で、先頭には必ず最小値が格納されるため。 ↩︎

Bubble Sort

Sun, 24 Dec 2023 00:57:03 +0900

Bubble Sortとは

Bubble Sort（バブルソート）とは、隣り合う要素を比較し交換することを繰り返してソートするアルゴリズム。安定なソートの一種。

アルゴリズム

先頭から隣り合う要素を2つずつ比較し、先頭側が小さくなるように入れ替える
末尾まで行ったら、見る範囲の終端を1つ先頭側へずらして¹、再度先頭から隣り合う要素を2つずつ比較し、先頭側が小さくなるように入れ替える
これを比較ができなくなるまで続ける
- 見る範囲の終端が先頭に達したら終了

一度もスワップが発生しなかった場合に、ソートが完了していると判断して終了するようにすると、計算量を多少改善できる。

実装例

def bubble_sort(numbers: list[int]) -> list[int]:
 for limit_idx in range(len(numbers), 1, -1):
 for i in range(1, limit_idx):
 if numbers[i - 1] > numbers[i]:
 numbers[i - 1], numbers[i] = numbers[i], numbers[i - 1]
 return numbers

計算量

要素数を$n$とする。

	計算量
Average	$\mathrm{O}(n^2)$
Best	$\mathrm{O}(n)$
Worst	$\mathrm{O}(n^2)$

Pros

アルゴリズムがシンプル
実装が簡単
安定なソート
メモリ使用量が少ない

Cons

効率が悪い
計算量が大きいため速度は遅い
ほとんどの場合、他のソートアルゴリズムの方が良い

利用場面

要素数が少ない場合 : シンプルさと容易さが有利になることがある
教育目的 : アルゴリズムの理解を深めるために用いられることがある
ほぼソートされているデータ : 他のソートアルゴリズムよりも速いことがある

末尾まで行った時点で、末尾には必ず最大値が格納されるため。 ↩︎

Bogo Sort

Sat, 23 Dec 2023 20:27:37 +0900

Bogo Sortとは

Bogo Sort（ボゴソート）とは、非効率で非実用的なソートアルゴリズムのひとつ。非安定なソートの一種。

ソートとしてこれを指すことはほぼない。教育目的やアルゴリズムの理解を深めるために用いられることがある。

アルゴリズム

適当に並び替える
ソートが完了しているか確認する
- 完了していなければ1に戻る

実装例

import random


def is_sorted(numbers: list[int]) -> bool:
 return all(numbers[i] <= numbers[i + 1] for i in range(len(numbers) - 1))


def bogo_sort(numbers: list[int]) -> list[int]:
 sorted_list = numbers.copy()
 while not is_sorted(sorted_list):
 random.shuffle(sorted_list)
 return sorted_list

計算量

要素数を$n$とする。

	計算量
Average	$\mathrm{O}((n+1)!)$
Best	$\mathrm{O}(n)$
Worst	Unbounded

Pros

アルゴリズムが単純

Cons

極端に非効率。実用的なソートアルゴリズムとしてはまったく適さない。
実行時間が不定。理論上、ソートが完了するまでに無限の時間がかかりうる。
計算リソースを無駄に消費する
非安定なソート

利用場面

教育目的 : 効率的なソートアルゴリズムと比較することで、アルゴリズムの理解を深められる

安定なソートと非安定なソートの違い

Sat, 23 Dec 2023 20:03:45 +0900

これはなに

安定なソートと非安定なソートの違いについてのメモ。

安定なソート

安定なソート（Stable Sort）では、同じキーを持つ要素の相対的な順序が、ソートの前後で保持される。

たとえば、(1,"A"), (3,"D"), (2,"B"), (2,"C")をソートしたとき、安定なソートでは(2,"B"), (2,"C")の順序は変わらない。ソート後は(1,"A"), (2,"B"), (2,"C"), (3,"D")となる。

安定なソートの例としては、バブルソート、マージソート、挿入ソートなどがある。

非安定なソート

非安定なソート（Unstable Sort）では、同じキーを持つ要素の相対的な順序が、ソートの過程で変わる可能性がある。

たとえば、(1,"A"), (3,"D"), (2,"B"), (2,"C")をソートしたとき、非安定なソートでは(2,"B"), (2,"C")の順序の変わる可能性がある。ソート後は(1,"A"), (2,"C"), (2,"B"), (3,"D")となる。

非安定なソートの例としては、クイックソート、ヒープソート、選択ソートなどがある。

まとめ

安定なソートと非安定なソートの違いは、同じキーを持つ要素の相対的な順序が、ソートの前後で保持されるかどうかである。

参考文献・URL

Dockerコンテナ内でgit pushしようとしたら怒られた

Mon, 06 Nov 2023 00:11:29 +0900

これはなに

Dockerコンテナ内でgit pushしようとしたら怒られたときの解決法メモ。具体的には下記のエラーが発生した。

$ git push
fatal: unable to access 'https://github.com/NakuRei/nakureis-reading-notes.git/': server certificate verification failed. CAfile: none CRLfile: none

解決法

Dockerコンテナ内にca-certificatesを入れてupdate-ca-certificatesしたら解決した。

apt-get install ca-certificates
update-ca-certificates

最初からDockerfileで下記のようにすればOK。

RUN apt-get update -y \
 && DEBIAN_FRONTEND=noninteractive \
 apt-get install -y --no-install-recommends \
 ca-certificates \
 git \
 && update-ca-certificates

git rebaseしようとしたら、エディタが起動しなくてハマった話

Sat, 04 Nov 2023 17:01:50 +0900

これはなに

git rebaseしようとしたら、エディタが起動しなくてハマったときの解決メモ。

要点

GitのエディタにVS Codeを設定するときは、下記コマンドのように--waitフラグを追加する必要がある。

git config --global core.editor "code --wait"

試行錯誤のメモ

git rebaseしようとしたら、エディタが起動しない。

$ git rebase -i HEAD~4
hint: Waiting for your editor to close the file... error: cannot run editor: No such file or directory
error: unable to start editor 'editor'

git configのcore.editorが設定されていなかったのが原因だった。そのため、下記コマンドでエディタをVS Codeに設定した。

git config --global core.editor "code"

しかし、再度git rebaseを実行すると、VS Codeは起動するもののgit-rebase-todoファイルを開けない。「ファイルが見つからなかったため、エディターを開くことができませんでした」と言われる始末。

シェル上では実行できたかのように表記された。

$ git rebase -i HEAD~4
Successfully rebased and updated refs/heads/develop.

VS CodeのPATHもきちんと通っている。

$ code -v
1.84.0
d037ac076cee195194f93ce6fe2bdfe2969cc82d
x64

調査の結果、git-rebase-todoファイルを開けなかったのは、どうやらVS Codeの挙動によるものらしい。VS CodeをGitエディタとして設定する際には、--waitフラグを追加して、Gitがコミットやリベースなどの操作を続行する前にエディタを閉じるのを待つ必要がある。つまり、git configに設定すべき値は下記になる。

git config --global core.editor "code --wait"

これにより、今度は正常にgit rebaseが実行できるようになった。めでたしめでたし。

Next.js 14のSSGの環境構築

Sat, 04 Nov 2023 04:57:33 +0900

これはなに

Next.js 14のSSGの環境構築をしたときのメモ。

環境

WSL2 Ubuntu 22.04.2 LTS
Docker version 24.0.6
VS Code 1.84.0
Next 14.0.1

環境構築

Dockerfileとdevcontainer.jsonを作って環境を構築する。

.devcontainer/Dockerfile

FROM node:20-slim

EXPOSE 3000

RUN apt-get update -y \
 && DEBIAN_FRONTEND=noninteractive \
 apt-get install -y --no-install-recommends \
 git \
 locales \
 tzdata \
 xsel \
 && apt-get clean \
 && rm -rf /var/lib/apt/lists/*

RUN locale-gen ja_JP.UTF-8 \
 && localedef -f UTF-8 -i ja_JP ja_JP.UTF-8
ENV TZ=Asia/Tokyo \
 LANG=ja_JP.UTF-8 \
 LANGUAGE=ja_JP:jp \
 LC_ALL=ja_JP.UTF-8

RUN npm install -g npm

USER node

.devcontainer/devcontainer.json

{
 "build": {
 "dockerfile": "./Dockerfile",
 "context": ".."
 },
 "forwardPorts": [
 3000
 ],
 "customizations": {
 "vscode": {
 "extensions": [
 "PulkitGangwar.nextjs-snippets",
 "dbaeumer.vscode-eslint",
 "esbenp.prettier-vscode"
 ]
 }
 }
}

必須の拡張機能はdevcontainer.jsonに書く。必須でないものは.vscode/extensions.jsonに記述する。.vscode/extensions.jsonに記述した後、VS Codeの拡張機能のタブにて@recommendedで検索すると、ワークスペースの推奨事項にそれらの拡張機能が表示される。

.vscode/extensions.json

{
 "recommendations": [
 "oderwat.indent-rainbow", // インデントに色を付ける
 "mohammadbaqer.better-folding", // 折り畳みを見やすくする
 "streetsidesoftware.code-spell-checker", // スペルチェック
 "naumovs.color-highlight", // カラーコードをその色でハイライト
 "igorsbitnev.error-gutters", // エラーが出ている横にアイコンをつける
 "saikou9901.evilinspector", // 全角スペース強調
 "mhutchie.git-graph", // Gitのコミット履歴を見やすくできる
 "donjayamanne.githistory", // ファイルごとの変更履歴を見やすくできる
 "github.copilot", // コード書くときのサポーター（有料）
 "kisstkondoros.vscode-gutter-preview",
 "christian-kohler.path-intellisense",
 "gruntfuggly.todo-tree", // TODOの強調
 "shardulm94.trailing-spaces", // 行末の半角スペース強調
 "visualstudioexptteam.vscodeintellicode" // TypeScript書くときに補助してくれる
 ]
}

VS Code拡張機能のDev Containersをローカルにインストールする。その後、Ctrl + Shift + Pでコマンドパレットを開き、Dev Containers: Reopen in Containerを実行する。これにより、Dockerfileがビルドされ、VS Codeがコンテナにアタッチされる。

Node.js環境の確認

コンテナにアタッチされたVS Codeのターミナルで、node -vとnpm -vを実行する。

$ node -v
v20.9.0
$ npm -v
10.2.3

Git管理する

プロジェクトをgit管理下に置く。

git init

branch名をデフォルトでmainにしていない場合はwarningが出るので、mainにしておく。

git branch -m main

アプリのひな型を作成する

Next.jsのアプリのひな型を作る。下記コマンドを実行する。

npx create-next-app@latest

プロジェクトの設定をいろいろ聞かれるので答える。

コンソール出力のログ

$ npx create-next-app@latest
Need to install the following packages:
create-next-app@14.0.1
Ok to proceed? (y) y
✔ What is your project named? … next-app
✔ Would you like to use TypeScript? … No / Yes
✔ Would you like to use ESLint? … No / Yes
✔ Would you like to use Tailwind CSS? … No / Yes
✔ Would you like to use `src/` directory? … No / Yes
✔ Would you like to use App Router? (recommended) … No / Yes
✔ Would you like to customize the default import alias (@/*)? … No / Yes
Creating a new Next.js app in /workspaces/path/next-app.

Using npm.

Initializing project with template: app-tw


Installing dependencies:
- react
- react-dom
- next

Installing devDependencies:
- typescript
- @types/node
- @types/react
- @types/react-dom
- autoprefixer
- postcss
- tailwindcss
- eslint
- eslint-config-next


added 331 packages, and audited 332 packages in 25s

116 packages are looking for funding
 run `npm fund` for details

found 0 vulnerabilities
Success! Created next-app at /workspaces/path/next-app

すると、プロジェクト名（上記だとnext-app）のディレクトリが作成され、アプリのひな形が作られる。下記コマンドで起動するか確認する。

cd next-app
npm run dev

http://localhost:3000にアクセスして、下記のようなデフォルトページが表示されることを確認する。

ページの表示はCtrl + Cで終了できる。

SSGのためのプロジェクトの設定を変更する

next.config.jsを変更し、reactStrictModeを有効にしておく。

next.config.js Options: reactStrictMode | Next.js

The complete Next.js runtime is now Strict Mode-compliant, learn how to opt-in

また、静的サイトにするため、output: 'export'を追加する。

Guides: Static Exports | Next.js

Next.js enables starting as a static site or Single-Page Application (SPA), then later optionally upgrading to use features that require a server.

変更後のnext.config.jsは下記のとおり。

next.config.js

/** @type {import('next').NextConfig} */
const nextConfig = {
 reactStrictMode: true,
 output: 'export',
}

module.exports = nextConfig

静的サイトの場合は、output: 'export'を設定した後にnpm run buildし、これにより、npx serve@latest outすることでビルドした静的サイトをプレビューできる。

npm run build

npm run buildのログ

$ npm run build

> next-app@0.1.0 build
> next build

 ▲ Next.js 14.0.1

 ✓ Creating an optimized production build
 ✓ Compiled successfully
 ✓ Linting and checking validity of types
 ✓ Collecting page data
 ✓ Generating static pages (5/5)
 ✓ Finalizing page optimization

Route (app) Size First Load JS
┌ ○ / 5.28 kB 90.4 kB
└ ○ /_not-found 882 B 86 kB
+ First Load JS shared by all 85.2 kB
 ├ chunks/472-39c72660b90e2701.js 30 kB
 ├ chunks/fd9d1056-39de21f001c52188.js 53.2 kB
 ├ chunks/main-app-5c586790629e224c.js 232 B
 └ chunks/webpack-2f0f07802d1106cf.js 1.69 kB


○ (Static) prerendered as static HTML

npx serve@latest out

npx serve@latest outのログ

$ npx serve@latest out
Need to install the following packages:
serve@14.2.1
Ok to proceed? (y) y

 ┌────────────────────────────────────────┐
 │ │
 │ Serving! │
 │ │
 │ - Local: http://localhost:3000 │
 │ - Network: http://172.17.0.3:3000 │
 │ │
 │ Copied local address to clipboard! │
 │ │
 └────────────────────────────────────────┘

 HTTP 2023/11/4 5:41:17 127.0.0.1 GET /
 HTTP 2023/11/4 5:41:17 127.0.0.1 Returned 200 in 7 ms
 HTTP 2023/11/4 5:41:17 127.0.0.1 GET /_next/static/media/c9a5bc6a7c948fb0-s.p.woff2
 HTTP 2023/11/4 5:41:17 127.0.0.1 Returned 200 in 1 ms
 ...

プレビューはCtrl + Cで終了できる。

毎回npx serve@latest outと打つのは面倒なので、package.jsonにコマンドを追加する。npm run serveでbuildした静的サイトをプレビューできる。

package.json

{
 "name": "next-app",
 "version": "0.1.0",
 "private": true,
 "scripts": {
 "dev": "next dev",
 "build": "next build",
 "start": "next start",
 "lint": "next lint",
+ "serve": "npx serve@latest out"
 },
 "dependencies": {
 "react": "^18",
 "react-dom": "^18",
 "next": "14.0.1"
 },
 "devDependencies": {
 "typescript": "^5",
 "@types/node": "^20",
 "@types/react": "^18",
 "@types/react-dom": "^18",
 "autoprefixer": "^10.0.1",
 "postcss": "^8",
 "tailwindcss": "^3.3.0",
 "eslint": "^8",
 "eslint-config-next": "14.0.1"
 }
}

Linterがtsxファイルのエラーも検知するようにする

npm run lint（あるいはnpx next lint）を実行してもTypeScriptのコードのエラーは表示されない。これを表示されるように変更する。

Next.js ESLint で TypeScript のエラーを表示するようにしたい - かもメモ

1. Next.js はデフォルトでは TypeScript のエラーが `npm run lint` では表示されない 2. ミニマムな TypeScript のエラーを表示させるには `@typescript-eslint/eslint-plugin` をインストールして `.eslintrc.json` にルールを追加する 3. 使用するルールに依っては `.eslintrc.json` に `parserOptions.project` プロパティを作成しプロジェクトの `tsconfig.json` のパスを指定する

chaika.hatenablog.com

Next.js13.4+TypeScript+ESLint+Prettier+Huskyのよくばりセットで環境を構築してみました

まず、必要なプラグインをインストールする。

npm i -D @typescript-eslint/eslint-plugin

次に、.eslintrc.jsonを変更する。extendsとparserOptionsの変更は必須。他は任意。

.eslintrc.json

{
 "root": true,
 "extends": [
 "plugin:@typescript-eslint/recommended",
 "next/core-web-vitals"
 ],
 "parserOptions": {
 "project": "./tsconfig.json"
 },
 "rules": {
 "@typescript-eslint/no-unused-vars": "error",
 "@typescript-eslint/no-explicit-any": "error",
 "@typescript-eslint/no-unsafe-call": "error",
 "@typescript-eslint/no-unsafe-member-access": "error",
 "@typescript-eslint/no-unsafe-return": "error"
 }
}

ここまで設定すれば、npm run lintで.tsxのエラーが表示されるようになる。これ以降の設定は、必要であれば設定する。

VSCodeの設定を変更して、linterがVS Codeでも正常に動くようにする。

.vscode/settings.json

{
 // Linter
 "eslint.workingDirectories": [
 "./next-app",
 ],
 "editor.codeActionsOnSave": {
 "source.fixAll": false,
 "source.fixAll.eslint": true
 }
}

package.jsonのlintコマンドを変更し、.gitignoreに指定しているファイルは無視するように変更する。

package.json

{
 "scripts": {
 "dev": "next dev",
 "build": "next build",
 "start": "next start",
- "lint": "next lint",
+ "lint": "next lint --ignore-path .gitignore",
 "serve": "npx serve@latest out"
 },
}

Prettierを入れる

FormatterとしてPrettierを入れる。まず、パッケージをインストールする。

npm i -D prettier eslint-config-prettier

次に、Prettierの設定ファイルを作る。この設定は好みや方針により異なる。

.prettierrc

{
 "semi": true,
 "trailingComma": "all",
 "singleQuote": true,
 "printWidth": 80,
 "tabWidth": 2
}

加えて、.eslintrc.jsonにPrettierを追加する。

.eslintrc.json

{
 "root": true,
 "extends": [
 "plugin:@typescript-eslint/recommended",
 "next/core-web-vitals",
+ "prettier"
 ],
 "parserOptions": {
 "project": "./tsconfig.json"
 },
 "rules": {
 "@typescript-eslint/no-unused-vars": "error",
 "@typescript-eslint/no-explicit-any": "error",
 "@typescript-eslint/no-unsafe-call": "error",
 "@typescript-eslint/no-unsafe-member-access": "error",
 "@typescript-eslint/no-unsafe-return": "error"
 }
}

最後に、package.jsonにformatコマンドを追加する。

package.json

{
 "scripts": {
 "dev": "next dev",
 "build": "next build",
 "start": "next start",
 "lint": "next lint --ignore-path .gitignore",
+ "format": "prettier --write --ignore-path .gitignore .",
 "serve": "npx serve@latest out"
 },
}

追加したらnpm run formatを実行して動作を確認する。

npm run format

VS Codeの場合は下記の設定を追加すると、保存時やタイプ時に自動でフォーマットされる。

.vscode/settings.json

{
 // formatter
 "editor.defaultFormatter": "esbenp.prettier-vscode",
 "editor.formatOnSave": true,
 "editor.formatOnPaste": true,
 "editor.formatOnType": true,
}

コミット時にlinterとformatterを自動実行する

コミット時にnpm run lintとnpm run formatを実行し、エラーが出る場合はコミットできないようにする。

Next.js13.4+TypeScript+ESLint+Prettier+Huskyのよくばりセットで環境を構築してみました

itc-engineering-blog.netlify.a …

Next.jsでhuskyを使ったcommit時lintエラー検出とGitHub Desktop対応

Next.js で husky と lint-staged を使って、commit 時に ESLint エラー検出の仕組みの解説と手順です。加えて、GitHub Desktop（Windows 10 x64）でも動作するようにしました。React の場合も手順を記載しました。

husky + lint-stagedでコミット前にLinterを実行させる

huskyとlint-stagedを入れる

まず、必要なパッケージをインストールする。

npm i -D husky lint-staged

次に、husky-initコマンドを実行する。環境によりコマンドが異なるため、実行するコマンドの詳細はhuskyの公式サイトを参照すること。

npx husky-init && npm install

typicode.github.io にアクセスできません

.gitディレクトリとpackage.jsonファイルが同じ階層に存在しない場合は、下記のようなエラーが発生する。

$ npx husky-init && npm install
Need to install the following packages:
husky-init@8.0.0
Ok to proceed? (y) y
husky-init updating package.json
 setting prepare script to command "husky install"
/home/node/.npm/_npx/1ab9c0f68ac2536e/node_modules/husky/lib/index.js:23
 throw new Error(`.git can't be found (see ${url})`);
 ^

Error: .git can't be found (see https://typicode.github.io/husky/#/?id=custom-directory)
 at install (/home/node/.npm/_npx/1ab9c0f68ac2536e/node_modules/husky/lib/index.js:23:15)
 at Object.<anonymous> (/home/node/.npm/_npx/1ab9c0f68ac2536e/node_modules/husky-init/lib/bin.js:16:21)
 at Module._compile (node:internal/modules/cjs/loader:1241:14)
 at Module._extensions..js (node:internal/modules/cjs/loader:1295:10)
 at Module.load (node:internal/modules/cjs/loader:1091:32)
 at Module._load (node:internal/modules/cjs/loader:938:12)
 at Function.executeUserEntryPoint [as runMain] (node:internal/modules/run_main:83:12)
 at node:internal/main/run_main_module:23:47

Node.js v20.9.0

このエラーへの対処法は、huskyの公式サイトに書かれているとおりで、npx husky-initによってpackage.jsonに追加されたprepareスクリプトを変更する。

typicode.github.io にアクセスできません

たとえば、プロジェクト名がnext-appの場合は下記のように変更する。

package.json

{
 "scripts": {
- "prepare": "husky install"
+ "prepare": "cd .. && husky install next-app/.husky"
 },
}

変更したら、再度npm i（あるいはnpm install）を実行する。

npm i

成功すると、.huskyディレクトリが生成される。

huskyにhookを追加する

.huskyディレクトリが生成されたら、自動実行のためのhookを追加する。今回は下記のコマンドでpre-commitのhookを追加する。

npx husky add .husky/pre-commit "npx lint-staged"

実行すると、.huskyディレクトリに下記のpre_commitファイルが生成される。

.husky/pre-commit

#!/usr/bin/env sh
. "$(dirname -- "$0")/_/husky.sh"

npx lint-staged

.gitディレクトリとpackage.jsonファイルが同じ階層に存在しない場合は、下記のように階層を移動するコマンドを追加する必要がある。

.husky/pre-commit

#!/usr/bin/env sh
. "$(dirname -- "$0")/_/husky.sh"

+ cd next-app # package.jsonのある階層に移動する
npx lint-staged

ここまでできたら、lint-stagedの設定に移る。

lint-stagedの設定をする

Next.jsにおけるlint-stagedの設定は特殊である。詳細はNext.jsの公式サイトを参照すること。

Configuration: ESLint | Next.js

Next.js reports ESLint errors and warnings during builds by default. Learn how to opt-out of this behavior here.

要するに、Next.jsにおいてnext lintとlint-stagedを共存させる場合は、.lintstagedrc.jsファイルを作成し、そこに設定を記す必要がある。

公式に載っている.lintstagedrc.jsは下記のとおり。

.lintstagedrc.js

const path = require('path')

const buildEslintCommand = (filenames) =>
 `next lint --fix --file ${filenames
 .map((f) => path.relative(process.cwd(), f))
 .join(' --file ')}`

module.exports = {
 '*.{js,jsx,ts,tsx}': [buildEslintCommand],
}

上記のように、module.exportsに、適用するファイルと実行するコマンドのペアを記述する。たとえば、自動修正しないlinterとformatterを実行する場合は、下記のようになる。

.lintstagedrc.js

const path = require('path');

const buildLintCommand = (filenames) =>
 `next lint --file ${filenames
 .map((f) => path.relative(process.cwd(), f))
 .join(' --file ')}`;

const buildFormatCommand = (filenames) =>
 `prettier --check --debug-check ${filenames
 .map((f) => path.relative(process.cwd(), f))
 .join(' ')}`;

module.exports = {
 'app/**/*.{js,jsx,ts,tsx}': [buildLintCommand],
 'pages/**/*.{js,jsx,ts,tsx}': [buildLintCommand],
 '*.{js,jsx,ts,tsx,json,css}': [buildFormatCommand],
};

以上までの設定で、コミット時にlinterとformatterが自動で実行され、通らない場合はコミットできなくなる。

コミットメッセージを自動チェックして統一する

コミットメッセージのフォーマットを統一するため、commitlintを入れる。

commitlint

Lint commit messages

commitlint.js.org

commitlintとCommitizenを使ってチーム開発におけるコミットメッセージを統一する

commitlintを入れる

まず、パッケージをインストールする。

npm install --save-dev @commitlint/{cli,config-conventional}

次に、下記のコマンドを実行してcommitlint.config.jsを作成する。

echo "module.exports = { extends: ['@commitlint/config-conventional'] };" > commitlint.config.js

作成されたcommitlint.config.jsは以下のようになる。

commitlint.config.js

module.exports = {
 extends: ['@commitlint/config-conventional'],
};

上記の代わりに、package.jsonに記述してもよい。

package.json

{
 "commitlint": {
 "extends": [
 "@commitlint/config-conventional"
 ]
 }
}

以上でcommitlintが動作するようになったので、実行されるか確認する。

npx commitlint --from HEAD~1 --to HEAD --verbose

実行されれば、下記のようなログが出力される。

commitlintの実行結果

$ npx commitlint --from HEAD~1 --to HEAD --verbose
⧗ input: build: set up husky and lint-staged pre-commit
✔ found 0 problems, 0 warnings

コミット時にcommitlintを自動実行する

コミット時にcommitlintが自動実行されるように設定する。commitlintはcommit-msgフックで実行する。下記のコマンドを実行して、huskyからcommit-msgフックを追加する。

npx husky add .husky/commit-msg 'npx --no -- commitlint --edit ${1}'

これにより、.husky/commit-msgファイルが作成される。

.husky/commit-msg

#!/usr/bin/env sh
. "$(dirname -- "$0")/_/husky.sh"

npx --no -- commitlint --edit ${1}

.gitディレクトリとpackage.jsonが同一階層にない場合は、下記のように階層を移動するコマンドを追加する必要がある。

.husky/commit-msg

#!/usr/bin/env sh
. "$(dirname -- "$0")/_/husky.sh"

+ cd next-app # package.jsonのある階層に移動する
npx --no -- commitlint --edit ${1}

これで、コミット時にcommitlintが実行されるようになる。

commitlintのルールを変更する

commitlintのルールは、commitlint.config.jsにルールを追記することで上書きできる。デフォルトの設定および上書き方法は、下記公式サイトに記述されている。

commitlint

Lint commit messages

commitlint.js.org

たとえば、subject-max-lengthを50に変更する場合は、下記のようにルールを追記する。

commitlint.config.js

module.exports = {
 extends: ['@commitlint/config-conventional'],

+ rules: {
+ 'subject-max-length': [2, 'always', 50],
+ },
};

commitlint の紹介 - Qiita

ルールは、{ルール名}: [{レベル:0|1|2}, '{可否:always|never}', {値}]の形式で記述する。レベルは各数値が下記段階に該当する。

0: 無効
1: 警告
2: エラー

オレオレルールはこんな感じ。

commitlint.config.js

module.exports = {
 extends: ['@commitlint/config-conventional'],

 rules: {
 'type-case': [2, 'always', 'lower-case'],
 'scope-case': [2, 'always', 'lower-case'],
 'subject-max-length': [2, 'always', 50],
 'body-full-stop': [2, 'always', '.'],
 'body-leading-blank': [2, 'always'],
 'body-max-line-length': [2, 'always', 72],
 'body-case': [2, 'always', 'sentence-case'],
 'footer-leading-blank': [2, 'always'],
 'footer-max-line-length': [2, 'always', 72],
 },
};

参考文献・URL

参考文献・URLは適宜記事内に示した。

VS Codeの設定を見直したときのメモ

Fri, 03 Nov 2023 18:48:11 +0900

これはなに

VS Codeの設定を見直したときのメモ。自分が何を何に設定しているかの整理。

環境

VS Code 1.109.0

エディタの見た目（Overall Style）

アイコン

settings.json

{
 "workbench.iconTheme": "catppuccin-mocha", // icon theme
 "vsicons.dontShowNewVersionMessage": true,
}

最近の好みはCatppuccin Icons。

Catppuccin Icons for VSCode - Visual Studio Marketplace

Extension for Visual Studio Code - 🦊 Soothing pastel icon theme for VSCode

もちろんMaterial Iconやvscode-iconsもわかりやすい。これらを使うこともある。

Material Icon Theme - Visual Studio Marketplace

Extension for Visual Studio Code - Material Design Icons for Visual Studio Code

vscode-icons - Visual Studio Marketplace

Extension for Visual Studio Code - Icons for Visual Studio Code

カラーテーマ

settings.json

{
 "workbench.colorTheme": "Night Owl", // color theme
}

好みと見やすさで選んでいる。最近はNight OwlかTokyo Nightをよく使っている。

Night Owl - Visual Studio Marketplace

Extension for Visual Studio Code - A VS Code theme for the night owls out there. Now introducing Light Owl theme for daytime usage. Decisions were based on meaningful contrast for reading comprehension and for optimal razzle dazzle. ✨

Tokyo Night - Visual Studio Marketplace

Extension for Visual Studio Code - A clean Visual Studio Code theme that celebrates the lights of Downtown Tokyo at night.

下記のテーマも好み。気分で変えることがある。

Nord Wave - Visual Studio Marketplace

Extension for Visual Studio Code - Darker version of the awesome Nord theme

Ayu - Visual Studio Marketplace

Extension for Visual Studio Code - A simple theme with bright colors and comes in three versions — dark, light and mirage for all day long comfortable work.

Winter is Coming Theme - Visual Studio Marketplace

Extension for Visual Studio Code - Preferred dark/light themes by John Papa

フォント

settings.json

{
 "editor.fontFamily": "Cica, 'Bizin Gothic', Firge, PlemolJP, Consolas, 'Yu Gothic', 'Meiryo', 'Courier New', monospace, 'Ricty Diminished'", // font
 "terminal.integrated.fontFamily": "'UDEV Gothic', 'HackGen Console', HackGen, PlemolJP, Cica", // terminal font
}

エディタのフォントはCicaを愛用している。好きなので。

GitHub - miiton/Cica: プログラミング用日本語等幅フォント Cica(シカ)

プログラミング用日本語等幅フォント Cica(シカ). Contribute to miiton/Cica development by creating an account on GitHub.

Bizin Gothicも好み。そもそもInconsolataが好みなので。

GitHub - yuru7/bizin-gothic: Bizin Gothic は、ユニバーサルデザインフォントの BIZ UDゴシックと英文フォント Inconsolata を合成したプログラミング向けフォントです。

Bizin Gothic は、ユニバーサルデザインフォントの BIZ UDゴシックと英文フォント Inconsolata を合成したプログラミング向けフォントです。 - yuru7/bizin-gothic

ターミナルはターミナル上で読みやすいと感じたフォントを使うようにしている。最近はUDEV GothicとHackGenを行ったり来たりしている。

GitHub - yuru7/udev-gothic: UDEV Gothic は、ユニバーサルデザインフォントのBIZ UDゴシックと、開発者向けフォントの JetBrains Mono を合成した、プログラミング向けフォントです。

UDEV Gothic は、ユニバーサルデザインフォントのBIZ UDゴシックと、開発者向けフォントの JetBrains Mono を合成した、プログラミング向けフォントです。 - yuru7/udev-gothic

GitHub - yuru7/HackGen: Hack と源柔ゴシックを合成したプログラミングフォント白源 (はくげん／HackGen)

Hack と源柔ゴシックを合成したプログラミングフォント白源 (はくげん／HackGen). Contribute to yuru7/HackGen development by creating an account on GitHub.

他に、気分で変えたくなったときにすぐ変えられるように、いくつかフォントを書いておいている。

色の調整

カラーテーマを気分で変えたときに見にくくならないように、ミニマップと選択範囲の色をカスタマイズしている。これを設定してから見にくさで困らなくなった。

settings.json

{
 // Custom color
 "workbench.colorCustomizations": {
 // Minimap
 "minimapSlider.activeBackground": "#4c4d03a0",
 "minimapSlider.background": "#4c4d03a0",
 "minimapSlider.hoverBackground": "#4c4d03a0",
 // Selection
 "editor.selectionBackground": "#535029",
 "editor.findMatchHighlightBackground": "#1d5f82f0",
 "editor.findMatchBackground": "#197331"
 },
}

カーソル

カーソルのスタイル。デフォルトだと個人的に見づらいので見やすくしている。

settings.json

{
 // Cursor
 "editor.cursorWidth": 5, // カーソルの太さ
 "editor.cursorBlinking": "phase", // カーソルの点滅方式
 "terminal.integrated.cursorBlinking": true, // ターミナルのカーソルを点滅
}

ミニマップ

ミニマップのハイライトを常に表示している。また、ミニマップの文字は読まないので、詳細な文字を表示しないようにしている。ハイライトの色がわかれば十分。

settings.json

{
 // Minimap
 "editor.minimap.showSlider": "always", // ミニマップのハイライトを常に表示
 "editor.minimap.renderCharacters": false, // ミニマップに文字を表示しない
}

ファイル作成時

ファイル作成時の挙動。とくに改行文字はautoにすると意図しない動作をしそうなので、明示的に指定している。環境や言語に依存するので、よくワークスペースの設定で上書きする。

settings.json

{
 // Create File
 "files.eol": "\n", // デフォルトの改行文字
 "editor.tabSize": 2, // tab size
 "workbench.editor.empty.hint": "hidden", // 新規ファイル作成時のヒントを非表示
}

ファイル保存時

ファイル保存時の挙動。余計な空白や改行は削除するようにしている。

settings.json

{
 // Save file
 "files.autoSave": "onWindowChange", // ファイル保存のタイミングを指定
 "files.insertFinalNewline": true, // ファイル末尾に改行を挿入
 "files.trimFinalNewlines": true, // ファイル末尾の最終行以外の空行を削除
 "files.trimTrailingWhitespace": true, // 行末およびファイル末尾の空白を削除
 "editor.trimAutoWhitespace": true, // インデント用の空白文字を、その行が空白文字だけの場合に削除する
}

下記の拡張機能も使っている。削除の面では必要ないが、残っている空白をハイライトしてくれるのが便利。諸事情でフォーマッターを保存時に走らせられない場合とくに重宝する。

Trailing Spaces - Visual Studio Marketplace

Extension for Visual Studio Code - Highlight trailing spaces and delete them in a flash!

ファイルスクロール時

stickyScrollはファイルスクロール時に関数名や見出しを保持してスクロールしてくれる便利機能。個人的にないと困る。

scrollBeyondLastLineとpadding.bottomを指定することで、最終行よりも下にスクロールできる度合いを調整している。これは好みの問題。

settings.json

{
 // Scroll file
 "editor.stickyScroll.enabled": true, // スクロール時に関数名などを保持
 "editor.scrollBeyondLastLine": false, // 最終行を超えてスクロールできなくする
 "editor.padding.bottom": 200, // 最終行より下に空白を追加
}

マウスホイールの挙動

マウスホイールでズームできると画面共有時に便利。タブ切り替えの設定は好み。

settings.json

{
 // Mouse wheel
 "editor.mouseWheelZoom": true, // マウスホイールでズームできるようにする
 "window.zoomLevel": -1, // ズームレベル
 "workbench.editor.scrollToSwitchTabs": true, // タブ上部でマウスホイール時に、shiftを押さなくてもタブを切り替える
}

エクスプローラを見やすくする

エクスプローラのインデントを調整し、見やすくしている。

settings.json

{
 // Explorer
 "workbench.tree.indent": 18, // エクスプローラのインデント幅
 "workbench.tree.renderIndentGuides": "always", // エクスプローラのインデントガイドを常に表示
}

特定文字の可視化/強調

可視化/強調できる文字は可能な限りそうする。

settings.json

{
 // Text emphasis
 "editor.renderWhitespace": "all", // 空白文字を常に可視化
 "editor.unicodeHighlight.nonBasicASCII": true, //基本ASCII以外の文字を強調表示
 "editor.renderControlCharacters": true, // 制御文字を表示
}

その他のエディタ機能の設定

その他の細かい設定。

括弧の色付けと縦線のガイドは必須といってもいいほど便利。

区切り文字の変更はデフォルトからハイフンを除外しているだけ。ダブルクリック時にハイフンを含めて選択できるようになるのが便利。

settings.json

{
 // Editor
 "workbench.editor.tabSizing": "shrink", // タブのサイズ
 "editor.rulers": [
 80
 ], // 80文字目に縦線を表示
 "editor.lineHeight": 1.2, // 行の高さを変更
 "editor.letterSpacing": 0.2, // 文字間のスペースを調整
 "editor.multiDocumentOccurrencesHighlight": true, // 複数のドキュメントにまたがるコードハイライト
 "workbench.editor.pinnedTabsOnSeparateRow": true, // ピン止めしたタブを別の行に表示
 "editor.bracketPairColorization.enabled": true, // 括弧に色を付ける
 "editor.guides.bracketPairs": true, // 対応する括弧のガイドを表示する
 "editor.wordSeparators": "`~!@#$%^&*()=+[{]}\\|;:'\",.<>/?", // 区切り文字を変更（ハイフンを除外）
 "telemetry.telemetryLevel": "off", // データ収集させない
 "editor.accessibilitySupport": "off", // スクリーンリーダーに最適化しない
 "window.title": "${dirty}${activeEditorMedium}${separator}${rootName}", // 検索欄に表示される文字列を変更
 "workbench.startupEditor": "none", // 起動時に表示する画面の変更
 "editor.inlineSuggest.enabled": true, // インライン候補を自動表示
 "editor.inlayHints.enabled": "on", // インラインヒントを表示
 // DiffEditor
 "diffEditor.ignoreTrimWhitespace": false, // 空白文字の変更を無視しない
 // Suggestion
 "editor.acceptSuggestionOnEnter": "off", // Enterで予測候補が入力されないようにする
 "editor.suggestSelection": "first", // 最初の候補を選択
 // Debug
 "debug.inlineValues": "on", // デバッグ中に行内に変数値を表示
 // File reading
 "files.readonlyInclude": {
 "node_modules": true,
 ".git": true
 },
}

Gitの挙動

autofetchを有効にすることでpullし忘れを防いでいる（まあ忘れるときは忘れる）。また、GitHubを使うことが多いので、プロトコルをsshに変更している。

署名付きコミットを使っている場合は他のツールも署名付きコミットを使うように設定する。

settings.json

{
 // Git
 "git.autofetch": "all", // 自動fetchをON
 "github.gitProtocol": "ssh", // gitのプロトコルをsshに変更
 "git.enableCommitSigning": true,
 "git-graph.repository.sign.commits": true,
 "gpgIndicator.enablePassphraseCache": true,
}

Git関連で使っている拡張機能は下記のとおり。

Git Graph - Visual Studio Marketplace

Extension for Visual Studio Code - View a Git Graph of your repository, and perform Git actions from the graph.

Git History - Visual Studio Marketplace

Extension for Visual Studio Code - View git log, file history, compare branches or commits

GitHubのPRをよく使うプロジェクトだと下記も使う。

GitHub Pull Requests - Visual Studio Marketplace

Extension for Visual Studio Code - Pull Request and Issue Provider for GitHub

署名付きコミットを使う場合で、かつdevcontainerを使っている場合は、下記の拡張機能でgpgキーのパスをキャッシュしている。これは自己責任で。

GPG Indicator - Visual Studio Marketplace

Extension for Visual Studio Code - Status indicator and unlocker for GPG signing key

GitHub Copilotの挙動

この設定は暫定。アップデートが激しい。

GitHub Copilotの設定（暫定）

settings.json

{
 // Github Copilot
 "chat.agent.enabled": true,
 "github.copilot.nextEditSuggestions.enabled": true,
 "github.copilot.chat.commitMessageGeneration.instructions": [
 {
 "file": ".github/instructions/commit-message.instruction.md"
 },
 {
 "text": "You must write in English."
 }
 ],
 "github.copilot.enable": {
 "*": true,
 "plaintext": true,
 "markdown": true,
 "scminput": false
 },
 "chat.tools.terminal.autoApprove": {
 "cd": true,
 "ls": true,
 "find": true,
 "head": true,
 "type": true,
 "mkdir": true,
 "touch": true,
 "/^uv\\s+--version$/": true,
 "/^uv\\s+init\\b/": true,
 "/^uv\\s+venv\\b/": true,
 "/^uv\\s+python\\s+pin\\b/": true,
 "/^uv\\s+add\\b/": true,
 "/^uv\\s+remove\\b/": true,
 "/^uv\\s+run\\b/": true,
 // False commands
 "rm": false,
 "del": false,
 "git": false,
 },
 "chat.tools.urls.autoApprove": {
 "https://raw.githubusercontent.com/github/gitignore/main/Python.gitignore": {
 "approveRequest": false,
 "approveResponse": true
 }
 },
}

拡張機能を入れる必要がある。

GitHub Copilot Chat - Visual Studio Marketplace

Extension for Visual Studio Code - AI chat features powered by Copilot

リモート接続

ポートを自動で転送するようにしている。

settings.json

{
 // Remote
 "remote.autoForwardPortsSource": "hybrid",
}

リモート関連の機能については、下記の拡張機能パッケージを入れておけばたいてい問題ない。

Remote Development - Visual Studio Marketplace

Extension for Visual Studio Code - An extension pack that lets you open any folder in a container, on a remote machine, or in WSL and take advantage of VS Code's full feature set.

devcontainerを使うときはDockerfileも書くことがあるので、Dockerの拡張機能も入れている。

Docker - Visual Studio Marketplace

Extension for Visual Studio Code - Makes it easy to create, manage, and debug containerized applications.

ターミナル

ターミナルを開いたときにデフォルトで起動するshellを変更している。

settings.json

{
 // Terminal
 "terminal.integrated.defaultProfile.windows": "Git Bash", // デフォルトのshellを変更
}

フォーマット

自動フォーマットの設定。デフォルトのフォーマッターは言語により異なるのでここには書いていない。

settings.json

{
 // Formatter
 "editor.formatOnSave": true, // 保存時にformatする
 "editor.formatOnType": true, // タイプ時にformatする
}

言語ごとの設定

Markdown

テキスト、とくにマークダウンは一番書くといっても過言ではない。そのため色々設定している。

settings.json

{
 // Markdown
 "textlint.autoFixOnSave": false,
 "[markdown]": {
 "editor.tabSize": 4,
 "editor.suggest.showWords": false,
 "editor.wordWrap": "on",
 "editor.quickSuggestions": {
 "comments": "on",
 "strings": "on",
 "other": "on",
 },
 "editor.snippetSuggestions": "top",
 "editor.defaultFormatter": "yzhang.markdown-all-in-one",
 "editor.unicodeHighlight.nonBasicASCII": false,
 },
 "markdown.preview.breaks": false,
 "markdown.preview.fontFamily": "'Yu Gothic','Meiryo', -apple-system, BlinkMacSystemFont, 'Segoe WPC', 'Segoe UI', system-ui, 'Ubuntu', 'Droid Sans', sans-serif",
 "markdownlint.config": {
 "MD007": false,
 "MD010": false,
 "MD025": false,
 "MD026": false,
 "MD033": false,
 },
 "markdown.extension.list.indentationSize": "inherit",
 "markdown.extension.orderedList.marker": "one",
 "markdown.extension.toc.orderedList": true,
 "markdown.extension.toc.levels": "2..6",
 "markdown.extension.toc.updateOnSave": false,
 "markdown-preview-enhanced.hideDefaultVSCodeMarkdownPreviewButtons": false,
 "markdown-preview-enhanced.mermaidTheme": "forest",
 "markdown-preview-enhanced.breakOnSingleNewLine": false,
 "markdown-pdf.styles": [
 "VSCode_mdPreview.css",
 ],
 "markdown.marp.html": "all",
}

マークダウン関連で使っている拡張機能は結構多い。下記は必須級。

Markdown All in One - Visual Studio Marketplace

Extension for Visual Studio Code - All you need to write Markdown (keyboard shortcuts, table of contents, auto preview and more)

markdownlint - Visual Studio Marketplace

Extension for Visual Studio Code - Markdown linting and style checking for Visual Studio Code

下記は必須ではないが、見出しのずれに気づけるので便利。

Markmap - Visual Studio Marketplace

Extension for Visual Studio Code - Visualize your markdown in VSCode

画像の貼り付けはPaste Imageを使っている。WSL環境でも動作するので便利。

Paste Image - Visual Studio Marketplace

Extension for Visual Studio Code - paste image from clipboard directly

読みやすい文章を書くためにチェックツールも使っている。

textlint - Visual Studio Marketplace

Extension for Visual Studio Code - Integrates textlint into VS Code.

表外漢字チェッカー - Visual Studio Marketplace

Extension for Visual Studio Code - テキスト内の表外漢字（人名用漢字を含む常用外漢字）を強調表示させます。

マークダウンすら知らない人に渡すとき、あるいは文書改ざんを防ぎたいときはPDFにしている。

Markdown PDF - Visual Studio Marketplace

Extension for Visual Studio Code - Convert Markdown to PDF

Marpを使うときは下記を入れる。

Marp for VS Code - Visual Studio Marketplace

Extension for Visual Studio Code - Create slide deck written in Marp Markdown on VS Code

プレーンテキスト

settings.json

{
 // Plain text
 "[plaintext]": {
 "editor.suggest.showWords": false
 },
}

JSON/JSONC

フォーマットの設定だけ。

settings.json

{
 // JSON
 "[json]": {
 "editor.defaultFormatter": "esbenp.prettier-vscode"
 },
 "[jsonc]": {
 "editor.defaultFormatter": "esbenp.prettier-vscode"
 },
}

Python

settings.json

{
 // Python settings
 "[python]": {
 "editor.tabSize": 4,
 "editor.wordBasedSuggestions": "off",
 "editor.defaultFormatter": "charliermarsh.ruff",
 },
 "python.analysis.inlayHints.callArgumentNames": "all",
 "python.analysis.inlayHints.functionReturnTypes": true,
 "python.analysis.inlayHints.variableTypes": true,
 "python.analysis.inlayHints.pytestParameters": true,
 "flake8.args": [
 "--ignore=E203,W503,E704",
 "--max-line-length=80"
 ],
 "notebook.cellToolbarLocation": {
 "default": "right",
 "jupyter-notebook": "left"
 },
 "python.analysis.typeCheckingMode": "strict",
 "python.analysis.diagnosticSeverityOverrides": {
 "reportMissingImports": "error",
 "reportMissingSuperCall": "error",
 "reportMissingParameterType": "error",
 "reportMissingModuleSource": "error",
 "reportMissingTypeArgument": "error",
 "reportMissingTypeStubs": "information",
 },
}

最近は基本的にruffを使っているので、flake8の設定は昔の設定だが、念のため残してある。また、プロジェクトにpyrightconfig.jsonを設定していることが多いので、一部の設定はたいていpyrightconfig.jsonで上書きしている。

Ruff - Visual Studio Marketplace

Extension for Visual Studio Code - A Visual Studio Code extension with support for the Ruff linter and formatter for Python.

Pythonの拡張機能は必須。

Python - Visual Studio Marketplace

Extension for Visual Studio Code - Python language support with extension access points for IntelliSense (Pylance), Debugging (Python Debugger), linting, formatting, refactoring, unit tests, and more.

Mypyも基本的に使っている。

Mypy Type Checker - Visual Studio Marketplace

Extension for Visual Studio Code - Type checking support for Python files using Mypy.

ドキュメントをきちんと書くときはプレビューツールも使う。

Live Preview - Visual Studio Marketplace

Extension for Visual Studio Code - Hosts a local server in your workspace for you to preview your webpages on.

C++

フォーマットスタイルの指定をしている。

settings.json

{
 "C_Cpp.clang_format_style": "{ BasedOnStyle: LLVM, AccessModifierOffset: -4, BreakBeforeBraces: Attach, IndentWidth: 4, PointerAlignment: Left }",
 "liveServer.settings.donotShowInfoMsg": true,
}

Web関連

Auto close tagに変わる設定と、Auto rename tagに変わる設定を有効にしている。

settings.json

{
 // Auto close tag
 "html.autoClosingTags": true,
 "javascript.autoClosingTags": true,
 "typescript.autoClosingTags": true,
 // Auto rename tag
 "editor.linkedEditing": true,
 // Web related
 "[html]": {
 "editor.tabSize": 2,
 "editor.defaultFormatter": "esbenp.prettier-vscode"
 },
 "[css]": {
 "editor.tabSize": 2,
 "editor.defaultFormatter": "esbenp.prettier-vscode"
 },
 "[scss]": {
 "editor.tabSize": 2
 },
 "javascript.updateImportsOnFileMove.enabled": "never",
 "[javascript]": {
 "editor.tabSize": 2,
 "editor.defaultFormatter": "esbenp.prettier-vscode"
 },
 "typescript.updateImportsOnFileMove.enabled": "never",
 "[typescript]": {
 "editor.defaultFormatter": "esbenp.prettier-vscode",
 },
 "[typescriptreact]": {
 "editor.defaultFormatter": "esbenp.prettier-vscode",
 },
}

大抵はESLintとPrettierを使う。もちろんNext.jsやVue.jsなどのフレームワーク固有の設定もプロジェクトごとに行っている。

ESLint - Visual Studio Marketplace

Extension for Visual Studio Code - Integrates ESLint JavaScript into VS Code.

Prettier - Code formatter - Visual Studio Marketplace

Extension for Visual Studio Code - Code formatter using prettier

Highlight Matching Tagも便利。

Highlight Matching Tag - Visual Studio Marketplace

Extension for Visual Studio Code - Highlights matching closing and opening tags

たまにプレビュー機能も使う。下記のどちらがより良いのかはよくわかっていない。

Live Server - Visual Studio Marketplace

Extension for Visual Studio Code - Launch a development local Server with live reload feature for static & dynamic pages

Live Preview - Visual Studio Marketplace

Extension for Visual Studio Code - Hosts a local server in your workspace for you to preview your webpages on.

SVGを使うときは、拡張機能をいれてプレビューできるようにしている。

Svg Preview - Visual Studio Marketplace

Extension for Visual Studio Code - Preview for Svg files

ただ、これはダークテーマと相性が悪いので、設定も追加している。

settings.json

{
 // SVG Preview
 "svgPreview.autoOpen": false,
 "svgPreview.style": {
 "html": {
 "background": "white"
 }
 },
}

LaTeX

最近はマークダウンから変換しているので全然書いていない。だからこの設定も古いままだと思われる。参考まで。

タイトル

settings.json

{
 "[latex]": {
 "editor.wordWrap": "on",
 "editor.wordSeparators": "./\\()\"'-:,.;<>~!@#$%^&*|+=[]{}`~?．。，、（）「」［］｛｝《》てにをはがのともへでや",
 "editor.suggestSelection": "recentlyUsedByPrefix",
 "editor.suggest.snippetsPreventQuickSuggestions": false,
 "editor.quickSuggestions": {
 "other": true,
 "comments": false,
 "strings": false
 },
 "editor.tabSize": 2
 },
 "[tex]": {
 "editor.suggest.snippetsPreventQuickSuggestions": false,
 "editor.tabSize": 2
 },
 "[bibtex]": {
 "editor.tabSize": 2
 },
 "latex-workshop.latex.autoBuild.run": "never",
 "latex-workshop.intellisense.package.enabled": true,
 "latex-workshop.view.pdf.viewer": "tab",
 "latex-workshop.docker.enabled": false,
 "latex-workshop.docker.image.latex": "latexindent",
 "latex-workshop.latex.outDir": "./latex-output",
 "latex-workshop.view.pdf.zoom": "page-width",
 "latex-workshop.latex.recipe.default": "lastUsed",
 "latex-workshop.latex.autoClean.run": "onFailed",
 "latex-workshop.latex.clean.fileTypes": [
 "*.aux",
 "*.bbl",
 "*.blg",
 "*.idx",
 "*.ind",
 "*.lof",
 "*.lot",
 "*.out",
 "*.toc",
 "*.acn",
 "*.acr",
 "*.alg",
 "*.glg",
 "*.glo",
 "*.gls",
 "*.ist",
 "*.fls",
 "*.fdb_latexmk",
 "*_minted*",
 "*.snm",
 "*.nav",
 "*.vrb",
 "*.dvi",
 "*.synctex.gz",
 "*.bcf", // ADD
 "*.run.xml" // ADD
 ],
 "latex-workshop.latex.recipes": [
 {
 "name": "LuaLaTeX with BibLaTeX",
 "tools": [
 "lualatex_non-synctex",
 "biblatex",
 "lualatex_non-synctex",
 "lualatex"
 ]
 },
 {
 "name": "LuaLaTeX",
 "tools": ["lualatex_non-synctex", "lualatex"]
 }
 ],
 "latex-workshop.latex.tools": [
 {
 // LuaLaTeX non-SyncTeX mode
 "name": "lualatex_non-synctex",
 "command": "lualatex",
 "args": [
 "-interaction=nonstopmode",
 "-file-line-error",
 "-halt-on-error",
 "--output-directory=%OUTDIR%",
 "%DOC%"
 ]
 },
 {
 // LuaLaTeX
 "name": "lualatex",
 "command": "lualatex",
 "args": [
 "-synctex=1",
 "-interaction=nonstopmode",
 "-file-line-error",
 "-halt-on-error",
 "--output-directory=%OUTDIR%",
 "%DOC%"
 ]
 },
 {
 // BibLaTeX
 "name": "biblatex",
 "command": "biber",
 "args": [
 "%DOCFILE%",
 "--bblencoding=utf8",
 "-u",
 "-U",
 "--output_safechars",
 "--output-directory=%OUTDIR%"
 ]
 }
 ],
}

拡張機能特有の設定

Highlight

任意の用語をハイライトするのに使っている拡張機能。主に読みやすい日本語を書くために直したほうが良い表現をハイライトしている。

Highlight - Visual Studio Marketplace

Extension for Visual Studio Code - Advanced text highlighter based on regexes. Useful for todos, annotations, colors etc.

Highlightの設定（長いので畳む）

settings.json

{
 // Highlight
 "highlight.regexes": {
 // URL強調
 "(https?|ftp)(://[-_.!~*\\'()a-zA-Z0-9;/?:\\@&=+\\$,%#]+)": [
 {
 "color": "#9FA8DA"
 },
 {
 "color": "#9FA8DA"
 }
 ],
 // 全角英数字
 "([０-９Ａ-Ｚ])": [
 {
 "backgroundColor": "#455A64",
 "color": "#C62828"
 }
 ],
 // 二重否定強調（参考：https://qiita.com/azu/items/60764ed6f415d3c748bf）
 "(なくはない|なくはありません|ないでもない|ないでもありません|ないものではない|ないものではありません|ないことはない|ないことはありません|ないわけではない|ないわけではありません|ないとはいいきれない|ないとはいいきれません|ないとはかぎらない|ないとはかぎりません)": [
 {
 "backgroundColor": "#455A64",
 "color": "#C62828"
 }
 ],
 // 冗長表現（害悪）1
 "(ことが可能|ことも可能|ことができ|こともでき|ことはでき|可能で|可能と)": [
 {
 "backgroundColor": "#455A64",
 "color": "#C62828"
 }
 ],
 // 冗長表現（害悪）2
 "(を行う|を行います|を行った|を行いました|を行える|を行って|を行った|ことによって|ことにより|となって|させること|おいては|ということ)": [
 {
 "backgroundColor": "#455A64",
 "color": "#C62828"
 }
 ],
 // 二重表現
 "(一番最初|まずはじめ|まず、はじめ|まず初|まず、初|まず最初|まず、最初|では次に|では、次に|必ず必要|必ず、必要)": [
 {
 "backgroundColor": "#455A64",
 "color": "#C62828"
 }
 ],
 // 冗長表現（害悪）3
 "(その結果として|する方法で|するのです|いますので|いますため)": [
 {
 "backgroundColor": "#455A64",
 "color": "#C62828"
 }
 ],
 // 口語表現
 "(なんか|。なので|にて|なのか|なんて|といった|こっち|そっち|どっち|ちゃんと|でも、|だけど|けど|やっぱり|とっても|いっぱい|なきゃ|じゃなくて|じゃない|すごく|から、|全然|いろんな|だったりする|だったりします|一応|こんな|やっと)": [
 {
 "backgroundColor": "#455A64",
 "color": "#C62828"
 }
 ],
 // よく間違える表現
 "(づつ)": [
 {
 "backgroundColor": "#455A64",
 "color": "#C62828"
 }
 ],
 // 言い回しをどうにかしろ
 "(なのだといえ|なのだと言え|であるといえ|であると言え|であるから)": [
 {
 "backgroundColor": "#455A64",
 "color": "#C62828"
 }
 ],
 // 冗長表現（減らしたほうが良い）
 "(という|こと|ので|ため|また、|したがって、|よって、|ゆえに、|ようにする)": [
 {
 "color": "#C0CA33"
 }
 ],
 // 弱い表現
 "(と考えられる|と考えられます|かもしれない|かもしれません|と思う|と思います|と思われる|と思っている|と思われます|きっと|であろう|でしょう|のようである|のようです|と見ても良い|と見てもよい|と見てもいい|とみても良い|とみてもよい|とみてもいい|ほぼ|ような|らしい|みたいな|な感じ|かな|的に|的な)": [
 {
 "backgroundColor": "#1A237E"
 }
 ],
 // 「ら」抜き、「い」抜き言葉
 "(通してる|行ってる|見れ|食べれ|着れ|考えれ)": [
 {
 "backgroundColor": "#1A237E"
 }
 ],
 // 2文に分けられるのでは？
 "(し、|であり、|して、|だが、|ですが、|せず、|おらず、|なく、)": [
 {
 "backgroundColor": "#827717"
 }
 ],
 // 曖昧接続詞
 "(あり、|おり、|が、|き、|し、|て、|く、|ず、|で、)": [
 {
 "backgroundColor": "#827717"
 }
 ],
 // 言い換えられるのでは？
 "(になります|になる|の方|のほう|中で、|されてくる|に対して)": [
 {
 "backgroundColor": "#004D40"
 }
 ],
 // ひらがなにしよう！1
 "(沢山|共に|出来る|出来た|出来て|出来な|下さい|更に|暫く|既に|偶に|時々|及び|且つ|但し|尚|並びに|又は|全て|初めに|始めに|分かる|分から|分かっ)": [
 {
 "color": "#E65100"
 }
 ],
 // ひらがなにしよう！2（参考：https://github.com/lostandfound/textlint-rule-ja-hiragana-keishikimeishi）
 "(る上|た上|の上|る事|た事|の事|る度|た度|の度|る方|た方|の方|る時|た時|の時|る毎|た毎|の毎|る為|た為|の為|る訳|た訳|の訳|る所|た所|の所|る通り|た通り|の通り|る物|た物|の物|る他|た他|の他)": [
 {
 "color": "#E65100"
 }
 ],
 // ひらがなにしよう！3
 "(為|致します|無い|頂き|頂く|等|如何|何時も|何故|所謂|乍ら|様々な|然し|若し|次第|是非|度々|取り敢えず|前以て|前以って|先ず|殆ど|し易い|の様に|以下の通り)": [
 {
 "color": "#E65100"
 }
 ],
 // 目標設定用
 "(DONE)": [
 {
 "color": "#00897B"
 }
 ],
 "(DELAY|INCOMPLETE)": [
 {
 "color": "#C62828"
 }
 ],
 "(PENDING)": [
 {
 "color": "#827717"
 }
 ],
 "(NOW)": [
 {
 "color": "#E65100"
 }
 ],
 "(PROBLEM)": [
 {
 "backgroundColor": "#C62828",
 "color": "#E0F2F1"
 }
 ],
 "(FUTURE)": [
 {
 "color": "#59bae0"
 }
 ]
 },
}

Todo Tree

Todo Tree - Visual Studio Marketplace

Extension for Visual Studio Code - Show TODO, FIXME, etc. comment tags in a tree view

重要度に合わせて色を付けている。タグにコロンを付けないと反応しないようにしている。

Todo Treeの設定（長いので畳む）

settings.json

{
 "todo-tree.general.debug": true,
 "todo-tree.general.tags": [
 "BUG:", // 動かない
 "XXX:", // 動くがなぜ動くかわからない
 "FIXME:", // 既知の不具合があり、修正が必要
 "TODO:", // 追加/修正するべき機能がある
 "REVIEW:", // 意図したとおりに動くか要確認
 "WARNING:", // 注意
 "OPTIMIZE:", // ボトルネックになっている
 "HACK:", // あまりきれいではなく、リファクタリングが必要
 "CHANGED:", // コードをどのように変更したかのメモ
 "NOTE:" // メモ
 ],
 "todo-tree.regex.regex": "((//|#|<!--|;|/\\*|^)\\s*($TAGS)|^//\\s*\\[x\\]|^//\\s*\\[ \\])",
 "todo-tree.highlights.defaultHighlight": {
 "type": "text-and-comment",
 "icon": "alert",
 "foreground": "#00897B",
 "background": "#E0F2F1",
 "iconColour": "#00897B",
 "gutterIcon": true,
 },
 "todo-tree.highlights.customHighlight": {
 "BUG:": {
 // 動かない
 "icon": "bug",
 "background": "#ffcdd2",
 "foreground": "#d32f2f",
 "fontWeight": "bold",
 "iconColour": "#e53935"
 },
 "XXX:": {
 // 動くけどなぜ動くか分からないやべー奴
 "icon": "x-circle-fill",
 "background": "#ffcdd2",
 "foreground": "#d32f2f",
 "fontWeight": "bold",
 "iconColour": "#e53935"
 },
 "FIXME:": {
 // 既知の不具合があり、修正が必要
 "icon": "flame",
 "background": "#ffcdd2",
 "foreground": "#d32f2f",
 "fontWeight": "bold",
 "iconColour": "#e53935"
 },
 "TODO:": {
 // 追加/修正するべき機能がある
 "icon": "tools",
 "foreground": "#33691E",
 "background": "#DCEDC8",
 "iconColour": "#81C784"
 },
 "REVIEW:": {
 // 意図したとおりに動くか要確認
 "icon": "eye",
 "foreground": "#E65100",
 "background": "#FFE0B2",
 "iconColour": "#F57C00"
 },
 "WARNING:": {
 // 注意
 "icon": "alert",
 "foreground": "#E65100",
 "background": "#FFE0B2",
 "iconColour": "#F57C00"
 },
 "OPTIMIZE:": {
 // ボトルネックになっている
 "icon": "hourglass",
 "foreground": "#E65100",
 "background": "#FFE0B2",
 "iconColour": "#F57C00"
 },
 "HACK:": {
 // あまりきれいではなく、リファクタリングが必要
 "icon": "pin",
 "foreground": "#E65100",
 "background": "#FFE0B2",
 "iconColour": "#F57C00"
 },
 "CHANGED:": {
 // コードをどのように変更したかのメモ
 "icon": "issue-reopened",
 "foreground": "#1A237E",
 "background": "#C5CAE9",
 "iconColour": "#F9A825"
 },
 "NOTE:": {
 // メモ
 "icon": "pencil",
 "hideFromTree": true
 //"gutterIcon": false,
 }
 },
}

VSNotes

VSNotes - Visual Studio Marketplace

Extension for Visual Studio Code - Simple VS Code extension for plain text note taking.

デフォルトのパスと、作成されるファイル名のフォーマットを設定している。

VSNotesの設定

settings.json

{
 // VSNotes
 "vsnotes.defaultNotePath": "path/to/VSNotes",
 "vsnotes.tokens": [
 {
 "type": "datetime",
 "token": "{dt}",
 "format": "YYYYMMDD",
 "description": "Insert formatted datetime."
 },
 {
 "type": "title",
 "token": "{title}",
 "description": "Insert note title from input box.",
 "format": "Untitled"
 },
 {
 "type": "extension",
 "token": "{ext}",
 "description": "Insert file extension.",
 "format": "md"
 }
 ],
}

その他の拡張機能

優先度高

パスの候補を表示する拡張機能。これがあるだけで手間が格段に減る。

Path Intellisense - Visual Studio Marketplace

Extension for Visual Studio Code - Visual Studio Code plugin that autocompletes filenames

スペルチェックの拡張機能。タイプミスにも気づけるので、プログラミングには必須。

Code Spell Checker - Visual Studio Marketplace

Extension for Visual Studio Code - Spelling checker for source code

エラーをエディタ上に表示してくれる拡張機能。毎回ターミナルの問題を読まずに済む。

Error Lens - Visual Studio Marketplace

Extension for Visual Studio Code - Improve highlighting of errors, warnings and other language diagnostics.

インデントに色を付ける拡張機能。Pythonを読み書きするときはないと困る。重いらしいが、個人的には気になったことはない。

indent-rainbow - Visual Studio Marketplace

Extension for Visual Studio Code - Makes indentation easier to read

優先度中

カラーコードを書くとその色でハイライトしてくれる拡張機能。意外とカラーコードを書くことはあるので、書いている最中に色を確認できるのは便利。標準のハイライトよりもわかりやすくて好き。

Color Highlight - Visual Studio Marketplace

Extension for Visual Studio Code - Highlight web colors in your editor

日本語にする拡張機能。日本語にしたいときは日本語にしている。

Japanese Language Pack for Visual Studio Code - Visual Studio Marketplace

Extension for Visual Studio Code - Language pack extension for Japanese

音声ファイルの詳細をVS Codeで確認できる拡張機能。音声処理をするときに非常に便利。

audio-preview - Visual Studio Marketplace

Extension for Visual Studio Code - play & preview audio file in VS Code. (wav,mp3,ogg,aac,flac,...etc)

優先度低

VS CodeでPDFを見れるようにする拡張機能。とくにLaTeXで文章を書くとき確認で使う。

vscode-pdf - Visual Studio Marketplace

Extension for Visual Studio Code - Display pdf file in VSCode.

マークダウンで文章を書いているときにどういう画像が貼られているかをプレビューする拡張機能。そんなに使わないが、あると便利なこともある。

Image preview - Visual Studio Marketplace

Extension for Visual Studio Code - Shows image preview in the gutter and on hover

CSVファイルを見やすくする拡張機能。そんなに使わないが、あると便利なこともある。

Rainbow CSV - Visual Studio Marketplace

Extension for Visual Studio Code - Highlight CSV and TSV files, Run SQL-like queries

右下に猫を飼える。

Bongo Cat - Visual Studio Marketplace

Extension for Visual Studio Code - Adds a tiny bongo cat to your status bar 😼

MATLABでファイルパスからファイル名を取得する関数の実装

Sat, 28 Oct 2023 22:17:21 +0900

毎回似たような実装をしている気がしたので、ある程度きちんと実装したときのコードをメモしておく。

実装

getFilenameFromFilepath.m

function filename_string = getFilenameFromFilepath(filepath)
 % getFilenameFromFilepath: Extracts the filename (including extension) from a given filepath.
 %
 % Input:
 % - filepath: A char or string representing the full path to a file.
 %
 % Output:
 % - filename_string: A string representing the filename extracted from the filepath.
 %
 % Note: The filename is first generated as a char array to allow for easy modifications
 % in the future if a char type output becomes necessary.

 arguments
 filepath (1, :) {mustBeText} % ensures that filepath is either char or string
 end

 [~, name, ext] = fileparts(filepath);
 filename_char = strcat(name, ext);
 filename_string = string(filename_char);
end

参考文献・URL

jp.mathworks.com にアクセスできません

jp.mathworks.com

jp.mathworks.com にアクセスできません

jp.mathworks.com

jp.mathworks.com にアクセスできません

jp.mathworks.com

Dockerコンテナにrootユーザーでattachする方法のメモ

Sat, 07 Oct 2023 23:07:52 +0900

メモ

Dockerコンテナにrootユーザーでattachするには、以下のコマンドを実行する。

docker exec -it --user root <コンテナ名> /bin/bash

ただし、対象のコンテナが起動していなければならない。

参考文献・URL

Docker: コンテナにrootログイン - Qiita

$ docker exec -it --user root {コンテナ名} /bin/bash コンテナ名は docker ps -a で調べてよね

bytesとstrを同時に使わない - Effective Python 項目3

Mon, 18 Sep 2023 10:01:30 +0900

これはなに

Effective Python 第2版、項目3「bytesとstrの違いを知っておく」のまとめ。

ポイント

bytesとstrはまったく異なるため、同時に使わないようにしよう
ヘルパー関数を使って、入力が期待する文字列型か確認しよう
ファイルにUnicodeデータを読み書きするときは、open時にencodingパラメータを明示的に指定しよう

`bytes`と`str`はまったく異なる

Python3には、文字列データを表すのにbytesとstrの2種類がある。ただし、bytesはバイナリデータ、strはテキストデータであるため、この2つはまったく異なる。

`bytes`

bytesはバイト型であり、生の符号なし8ビット値からなる。通常はASCIIエンコーディングで表示される。

bytesのリテラルはbプレフィックスを伴うクオーテーションで定義できる。

a = b"hello"
print(a) # b'hello'
print(list(a)) # [104, 101, 108, 108, 111] (ASCIIコード)

bytesはバイナリのため、バイト文字列を扱える。

b = b"\x65" # 16進数で表されたバイト 16進数の65は、10進数で101に等しい
print(b) # b'e' ASCIIコードの101は文字eに対応している
print(list(b)) # [101]

bytesはテキストエンコーディングを持たない。そのため、これをテキストデータとして扱うには、bytesのdecodeメソッドを呼び出さなければならない。

a = b"hello"
c = a.decode()
print(c) # hello
print(type(c)) # <class 'str'>

`str`

strは文字列型であり、テキスト文字を表すUnicodeコードポイントを含む。

a = "hello"
print(a) # hello
print(list(a)) # ['h', 'e', 'l', 'l', 'o']

Unicodeデータのため、Unicode文字列を扱える。

b = "a\u0300"
print(b) # à
print(list(b)) # ['a', '̀']

strはバイナリエンコーディングを持たない。そのため、これをバイナリデータとして扱うには、strのencodeメソッドを呼び出さなければならない。

a = "hello"
c = a.encode()
print(c) # b'hello'
print(type(c)) # <class 'bytes'>

文字列データの扱い方

Pythonプログラムの核心部分ではUnicodeデータのstrを利用し、文字の符号化に関して一切の仮定をしてはならない。そうすることで、他の文字符号化を受け入れつつ、出力文字の符号化¹を統一できる。

核心部分でstrを利用するために、Pythonプログラムを書くときは、インターフェースのもっとも遠い箇所でUnicodeの符号化と複合化をすることが重要である。この方式はUnicodeサンドイッチと呼ばれる。

文字列データを扱うためのヘルパー関数

Pythonでは文字列型が2種類あるため、次の2つの状況がよく起こる。

特定の符号化¹文字の生の8ビット値を操作する
符号化を指定しないUnicode文字列を操作する

本書では、この2つの文字型を変換して、入力値の種類がコードの期待するものとなるようにする2つのヘルパー関数が示されている。

def to_str(bytes_or_str: bytes | str):
 if isinstance(bytes_or_str, bytes):
 return bytes_or_str.decode("utf-8")
 return bytes_or_str

def to_bytes(bytes_or_str: bytes | str):
 if isinstance(bytes_or_str, str):
 return bytes_or_str.encode("utf-8")
 return bytes_or_str

`bytes`と`str`を扱うときの注意点

Pythonでbytes（生の8ビット文字列）とstr（Unicode文字）を扱うときに、理解しておくべき大事なことが2つある。

bytesとstrを一緒に使えるとは限らない
ファイルハンドルに絡む操作では、デフォルトでUnicode文字列が必要である

`bytes`と`str`を一緒に使えるとは限らない

bytesとstrは同じように動作するが、一緒に使えるとは限らない。たとえば、bytes同士やstr同士は+演算子で結合できるが、strとbytesは結合できない。

print(b"one" + b"two") # できる
print("one" + "two") # できる
print("one" + b"two") # できない（TypeError: can only concatenate str (not "bytes") to str）
print(b"one" + "two") # できない（TypeError: can't concat str to bytes）

同様に、二項演算子による大小比較も、bytesとstrでは比較できない。

print(b"one" > b"two") # できる
print("one" > "two") # できる
print(b"one" > "two") # できない（TypeError: '>' not supported between instances of 'bytes' and 'str'）
print("one" > b"two") # できない（TypeError: '>' not supported between instances of 'str' and 'bytes'）

==により等しいかどうか比較すると、bytesとstrでは、同じ文字列であっても評価値がFalseになる。

print(b"foo" == "foo") # False

フォーマット文字列における%演算子も、bytesのフォーマット文字列にstrを渡すとエラーになる。これは、Pythonがどのバイナリテキスト符号化を使うべきかわからないためである。

print(b"red %s" % "blue")
# TypeError: %b requires a bytes-like object, or an object that implements __bytes__, not 'str'

また、strのフォーマット文字列にbytesを渡すと、エラーにはならないが期待する結果にもならない。これは、bytesインスタンスが__repr__メソッドを呼び出し、その結果で%sを置き換えるためである。

print("red %s" % b"blue") # red b'blue'

# このとき%sに入る文字列は、`repr`関数で得られる結果に等しい
print(repr(b"blue")) # b'blue'

ファイルハンドルに絡む操作では、デフォルトでUnicode文字列が必要である

Pythonの組み込み関数openは、テキストモードの場合Unicode文字列が必要である。

たとえば、バイナリデータをファイルに書き込む場合、下記のコードはエラーになる。

with open("data.bin", "w") as f:
 f.write(b"\xf1\xf2\xf3\xf4\xf5")
 # TypeError: write() argument must be str, not bytes

これは、ファイルがテキスト書き込みモード"w"で開かれたためである。テキストモードで開かれたファイルのwriteメソッドは、Unicodeデータであるstrインスタンスを期待する。bytesデータを書き込みたい場合は、オープンモードを"wb"にする必要がある。

- with open("data.bin", "w") as f:
+ with open("data.bin", "wb") as f:
 f.write(b"\xf1\xf2\xf3\xf4\xf5")

これは読み込みの場合も同じである。ファイルをテキスト読み込みモード"r"で開くと、encoding引数を明示的に与えていない場合、システムのデフォルトのテキスト符号化でデータを解釈する。ほとんどのシステムではデフォルトの符号化はUTF-8であるため、バイナリデータを扱えず、エラーが発生する。

with open("data.bin", "r") as f:
 data = f.read()
 # UnicodeDecodeError: 'utf-8' codec can't decode byte 0xf1 in position 0: invalid continuation byte

そのため、バイナリデータを読み込む場合は、オープンモードを"rb"にする必要がある。

- with open("data.bin", "r") as f:
+ with open("data.bin", "rb") as f:
 data = f.read()

`open`時に`encoding`を明示的に指定する

open関数はencoding引数を明示的に与えていない場合、システムのデフォルトのテキスト符号化でデータを解釈する。これはプラットフォーム依存である。

システムのデフォルトのエンコーディングは、locale.getencoding()で取得できる。

import locale

print(locale.getencoding()) # UTF-8

プラットフォーム依存の振る舞いをなくすために、open関数でencodingパラメータを指定するとよい。こうすることで、期待する符号化と異なる符号化でファイルが開かれることを防げる。

with open("data.bin", "w", encoding="utf-8") as f:
 f.write("hello")

with open("data.bin", "r", encoding="utf-8") as f:
 data = f.read()

参考文献・URL

Effective Python 第2版

組み込み関数

Python インタプリタには数多くの関数と型が組み込まれており、いつでも利用できます。それらをここにアルファベット順に挙げます。,,,, 組み込み関数,,, A, abs(), aiter(), all(), anext(), any(), ascii(),, B, bin(), bool(), breakpoint(), bytearray(), bytes(),, C, callabl...

docs.python.org

理想はUTF-8。 ↩︎ ↩︎

PEP 8スタイルガイドに従おう - Effective Python 項目2

Sun, 17 Sep 2023 18:01:13 +0900

これはなに

Effective Python 第2版、項目2「PEP 8スタイルガイドに従う」のまとめ。

ポイント

常にPEP 8スタイルガイドに従ってPythonコードを書こう
大きなコミュニティの共通スタイルを共有すれば、協働作業がはかどる
一貫したスタイルは、後の修正しやすさにつながる

PEP 8とは

PEP 8とは、Python拡張提案（Python Enhancement Proposal）の8番目の文章である。これは、Pythonのコードをどのようにフォーマットするかのスタイルガイドである。明確なPythonコードの書き方に関する詳細な説明が豊富に記されている。

PEP 8は下記のリンクから読める。これはPython言語の進化とともに継続的に更新されている。

PEP 8 – Style Guide for Python Code | peps.python.org

This document gives coding conventions for the Python code comprising the standard library in the main Python distribution. Please see the companion informational PEP describing style guidelines for the C code in the C implementation of Python.

peps.python.org

スタイルガイドの必要性

Pythonのコードは正しい構文であればどのように書いてもよいが、一貫したスタイルに従うと下記の利点がある。

コードがより扱いやすく、より読みやすくなる
他のPythonプログラマと共通のスタイルを分かち合うことで、プロジェクトでの協働作業がはかどる
コードを読む人が自分以外にいなくても、後の変更作業が容易になる

従うべき主なルール

空白

インデントは空白4個
1行79文字以下
長い式を改行する場合は1つインデントする
関数とクラスは2行空ける、クラス内メソッドは1行空ける
辞書
- キーとコロンの間はスペースを空けない
- 同じ行に値を書く場合は、値の前に空白を1つ空ける
変数代入の前後には空白を1つ空ける、2つ以上空けない
型ヒント（型アノテーション）
- 変数名の直後にコロンを置く
- 型情報の前に空白を1つ置く

名前付け

対象	名前付けルール	例
関数、変数、属性	lower_snake_case	`lowercase_underscore`
protected属性	アンダースコアを1つ先頭につける	`_leading_underscore`
private属性	アンダースコアを2つ先頭につける	`__double_underscore`
クラス、例外	UpperCamelCase	`CapitalizedWord`
モジュールでの定数	UPPER_SNAKE_CASE	`ALL_CAPS`

クラスのインスタンスメソッドでは、第一引数の名前にselfを使う
クラスメソッドは、第一引数の名前にclsを使う

式と文

Pythonでimport thisを実行すると、「The Zen of Python」が表示される。これは、Pythonプログラマの心構えを簡潔に記したものである。

「The Zen of Python」には「明らかなやり方が1つ、できれば1つだけあるのがいい」という下記の記述がある。

There should be one– and preferably only one –obvious way to do it.

PEP 8では、これを式と文のガイダンスで実現している。

式の否定（if not a is b）ではなく内側の項の否定（if a is not b）を使う
空値の判定はif not somelistを使う
- 空値が暗黙にFalseと評価されることを使う
- コンテナやシーケンスの長さ（lf len(somelist) == 0）で空値（[], ''）を判定しない
非空値の判定はif somelistを使う
- 非空値について、if somelistは暗黙にTrueと評価される
if文、for文、while文、except複合文を1行で書かない
式が1行に収まらない場合は、括弧でくくり複数行にして、読みやすくインデントする
- \で行分けするより、括弧を使って複数の式を囲むほうが良い

インポート

import文は常にファイルの先頭に置く
インポートするときは常にモジュールの絶対名を使う
- 現モジュールのパスからの相対名は使わない
相対インポートを使わなければならない場合は、明示的な構文from . import fooを使う
インポートは①標準ライブラリ、②サードパーティー、③自作モジュール、の順に行う
- それぞれの部分はアルファベット順にインポートする

PEP 8に従っているか確認する

PythonにはLinter（e.g. pylint, flake8）がある。これらは、自動でPEP 8スタイルガイドに沿っているか確認して、かつ、Pythonプログラムでよく見られる他の種類のエラーを検出する。また、多くのエディタやIDEにも同様の機能がある。

参考文献・URL

Effective Python 第2版

PEP 8 – Style Guide for Python Code | peps.python.org

peps.python.org

Lintのルール - Google Python Style Guide 項目2.1

Sun, 17 Sep 2023 16:33:48 +0900

これはなに

Google Python Style Guide、項目2.1 Lintのまとめ。

ポイント

Linterを使う
問題を隠さなければ、不適切な警告は抑制してよい
未使用引数の警告は、関数の先頭で変数を削除（del）して抑制する

Linterとは

Linterとはソースコードのバグやスタイルの問題を見つけるためのツールである。基本的にはベストプラクティスな書き方に則っていない部分を警告するツールだが、コードスタイルのチェックも行ってくれるものもある。

Linterは静的型付け言語のコンパイラが検出するような問題を警告する。しかし、Pythonは動的型付け言語のため、いくつかの警告は正しくない可能性がある。

Google Python Style Guideでは、Linterとして、特定のpylintrcに則ったpylintの利用を推奨している。pylintrcのファイルは元サイトで示されており、誰でもダウンロードできる。

長所と短所

Linterを利用すれば見逃しやすいミスを見逃さずにすむ。しかし、Linterは完璧ではない。ゆえに、警告を抑制したり修正したりする必要がある。

どうするべきか

まずはLinterが実行されていることを確認する。

問題を隠さなければ、不適切な警告は抑制してよい。警告を抑制する場合は行レベルでコメントを設定する。pylintの場合は下記のようになる。

def do_PUT(self): # WSGI name, so pylint: disable=invalid-name

flake8の場合は下記のようになる。

example = lambda: 'example' # noqa: E731

pylintを利用する場合、警告はシンボル名で識別される。抑制理由がシンボル名から明らかでない場合は、説明を追加する。これにより、Linterの警告抑制を簡単に検索して再確認できる。

未使用の引数について

未使用引数の警告は、関数の先頭で変数を削除すると抑制できる。

def viking_cafe_order(spam: str, beans: str, eggs: str | None = None) -> str:
 del beans, eggs # Unused by vikings.
 return spam + spam + spam

この場合は、必ず「なぜ削除するのか」を説明するコメントを入れる。“Unused.“で十分。

未使用引数の警告を抑制する方法はほかにもある。

未使用の引数の識別子として’_‘を使う
引数名の前に’unused_‘を付ける
‘_‘に代入する

これらのスタイルは許可されるが、推奨されない。なぜなら、これらは引数を名前で渡す呼び出し元を破り、引数が実際に未使用であることを強制しないためである。

参考文献・URL

styleguide

Style guides for Google-originated open-source projects

google.github.io

Selecting and Ignoring Violations — flake8 7.3.0 documentation

flake8.pycqa.org

Pythonのジェネレータを理解する

Fri, 08 Sep 2023 22:52:54 +0900

これはなに

Pythonのジェネレータとは何かを調べたメモ。

ジェネレータとは

Pythonにおけるジェネレータとは、遅延評価の性質を持つ特別なイテレータの一種である。

ジェネレータはイテレータであるため、__iter__()と__next__()の2つのメソッドを持つ。また、遅延評価の性質を持つため、__next__()メソッドが呼ばれるまで次の要素を生成しない。__next__()メソッドが呼ばれてはじめて次の要素を生成する。

ジェネレータの定義方法

ジェネレータの作成方法は下記の2つがある。

ジェネレータ式の利用
ジェネレータ関数の利用

ジェネレータ式とは

ジェネレータ式はジェネレータを返す記法である。基本的な形は以下のようになる。リスト内法表記と似ている。

generator = (expression for item in iterable)

たとえば、下記コードは与えられたリストの各要素を2乗するジェネレータである。

numbers = [1, 2, 3, 4, 5]
squared = (x * x for x in numbers)

for number in squared:
 print(number) # 1 4 9 16 25

ジェネレータ式に条件を設けることもできる。たとえば、上記のリストから偶数だけを取り出して2乗するジェネレータは次のようになる。

even_squared = (x * x for x in numbers if x % 2 == 0)

for number in even_squared:
 print(number) # 4 16

ジェネレータ関数とは

ジェネレータ関数とは、ジェネレータを生成する関数である。通常の関数と同様にdefで定義するが、returnの代わりにyieldを使用する。yieldを使用すると、関数はジェネレータイテレータを返す。

基本的なジェネレータ関数の例を以下に示す。これは、0からlimitに指定した数までの整数を順に返す。

def count_up_to(limit):
 count = 0
 while count <= limit:
 yield count
 count += 1

counter = count_up_to(5)
for number in counter:
 print(number) # 1 2 3 4 5

ジェネレータ関数は実行状態を保持する。そのため、次回の呼び出し時には前回の状態から続けて実行できる。また、ジェネレータ関数はジェネレータを返すため、要素を必要とするタイミングでのみ評価される。

ジェネレータの利点

ジェネレータは__next__()メソッドが呼ばれるまで次の要素を生成しないため、メモリ効率が良い。また、一度にすべてのデータをメモリに保持する必要がないため、大量のデータを扱う際にも役立つ。

ジェネレータの利用シーン

大規模なデータセット
無限長のシーケンス
計算量の大きいシーケンス

ジェネレータの注意点

一度next()で呼び出した値は破棄される。そのため、一度イテレートした後に再度イテレートする場合は、新たにジェネレータインスタンスを生成しなければならない
ジェネレータ関数はyield文を実行した時点で一時停止する。そのため、次の呼び出しあるいは関数の終了まで関数の実行は保持される

参考文献・URL

6. 式 (expression)

この章では、Python の式における個々の要素の意味について解説します。表記法に関する注意: この章と以降の章での拡張BNF (extended BNF) 表記は、字句解析規則ではなく、構文規則を記述するために用いられています。ある構文規則 (のある表現方法) が、以下の形式で記述されていて、この構文特有の意味付け (semantics) が記述されていない場合、 name の形式をと...

docs.python.org

イテレータでループさせつつインデックスも取得する - Effective Python 項目7

Tue, 05 Sep 2023 23:23:15 +0900

これはなに

Effective Python 第2版、項目7「rangeではなくenumerateを使う」のまとめ。

ポイント

enumerateを使えば、イテレータでループしつつ、要素のインデックスも取り出せる
rangeでインデックスをループさせるより、enumerateを使ったほうが簡潔
enumerateの第2引数で、インデックスの開始番号を指定できる

`range`とは

rangeはPythonの組み込み関数のひとつ。ループ処理に便利。

for i in range(10):
 print(i)

リストをループさせる

Pythonのlistは配列。これをループさせるときは、シーケンスを直接ループできる。

languages = ["python", "golang", "VHDL", "C++"]
for lang in languages:
 print(lang)

リストをループさせつつ、インデックスも取り出すことを考える

リストをループさせつつ要素のインデックスを得たい場合を考える。 rangeを使うと下記のように書ける。

languages = ["python", "golang", "VHDL", "C++"]
for i in range(len(languages)):
 lang = languages[i]
 print(f"{i + 1} : {lang}")

ただし、上記の書き方はステップが多く読みにくい。 Pythonには、こういう時に便利な組み込み関数enumerateがある。

`enumerate`とは

enumerateはPythonの組み込み関数のひとつ。遅延評価ジェネレータでイテレータをラップし、ループのインデックスとイテレータの次の値の対をyieldする。

公式ドキュメントによると、下記の記述と等価らしい。

def enumerate(iterable, start=0):
 n = start
 for elem in iterable:
 yield n, elem
 n += 1

つまり、enumerateは、「ループのインデックスとイテレータの次の値の対」を呼び出すたびに生成（遅延評価）するジェネレータを生成する。呼び出すたびに生成するため、メモリを圧迫せずに処理できる。

enumerateはジェネレータを生成するため、nextを用いて次の値を取得できる。

languages = ["python", "golang", "VHDL", "C++"]
it = enumerate(languages)

print(next(it)) # (0, 'python')
print(next(it)) # (1, 'golang')

`range`ではなく`enumerate`を使う

リストをループさせつつ要素のインデックスを得たい場合、enumerateを使うと下記のように書ける。

languages = ["python", "golang", "VHDL", "C++"]
for i, lang in enumerate(languages):
 print(f"{i + 1} : {lang}")

rangeを使った場合と比較すると、enumerateを使ったほうが簡潔に書ける。

languages = ["python", "golang", "VHDL", "C++"]

# enumerateを使う
for i, lang in enumerate(languages):
 print(f"{i + 1} : {lang}")

# rangeを使う
for i in range(len(languages)):
 lang = languages[i]
 print(f"{i + 1} : {lang}")

`enumerate`のカウント開始の数を変更する

enumerateの第2引数にカウントを開始する数を指定できる。これを利用すると、先のコードはより簡潔に書ける。

languages = ["python", "golang", "VHDL", "C++"]
for i, lang in enumerate(languages, 1):
 print(f"{i} : {lang}")

参考文献・URL

Effective Python 第2版

組み込み関数

docs.python.org

Pythonのバージョンを知る - Effective Python 項目1

Tue, 05 Sep 2023 22:05:27 +0900

これはなに

Effective Python 第2版、項目1「使用するPythonのバージョンを知っておく」のまとめ。

ポイント

現時点の最新バージョンであるPython3を使おう
コマンドラインで実行するPythonが、想定通りのバージョンか確認しよう
Python2はサポートが終了しているため、使うのは避けよう

コマンドラインでPythonのバージョンを確認する

コマンドラインでpythonと入力したときのデフォルトは決まっていない。 Pythonのバージョンはpythonコマンドに--versionフラグを付ければ確認できる。

python --version

--versionフラグは-Vでもよい。

python -V

実行すると以下のように表示される。

$ python --version
Python 3.11.4

Linux環境では、Python3はpython3コマンドで使えることがある。 Windows環境では、Pythonをインストールしないと利用できない。

Python実行時にPythonのバージョンを確認する

Python実行時は、組み込みモジュールsysを利用すれば、Pythonのバージョンを確認できる。

import sys

print(sys.version_info)
print(sys.version)

上記コードを実行すると、下記のようにPythonの情報が表示される。

sys.version_info(major=3, minor=11, micro=4, releaselevel='final', serial=0)
3.11.4 (main, Aug 16 2023, 05:23:18) [GCC 12.2.0]

現時点ではオープンソースライブラリのほとんどがPython3準拠である。本書ではすべてのPythonプロジェクトでPython3を利用することを強く勧めている。

Python2は、2020/04/20にPython 2.7.18がリリースされ、以降すべての開発が終了している。つまり、Python2の公式な保守はもう行われない。ゆえに利用は自己責任である。現時点の最新バージョンであるPython3を使おう。

参考文献・URL

Effective Python 第2版

forest.watch.impress.co.jp

「Python 2.7.18」がリリース～「Python 2」シリーズの最終版／以降は「Python 3」シリーズが積極的にメンテナンスされる唯一の「CPython」に

　Python Software Foundationは4月20日、「Python 2.7.18」をリリースした。「Python 2」シリーズは、本バージョンが最終。すべての開発は終了し、以降は「Python 3」シリーズが不具合や脆弱性の修正が積極的に行われる唯一の「CPython」となる。

WSL2でVS Codeが急に起動しなくなったときにとった手段の備忘録

Mon, 14 Aug 2023 19:07:02 +0900

生じた問題

WSL2でVS Codeを開こうとしたら、下記のエラーが発生して開けなかった。

$ code .
/mnt/c/Users/user/AppData/Local/Programs/Microsoft VS Code/bin/code: 61: /mnt/c/Users/user/AppData/Local/Programs/Microsoft VS Code/Code.exe: Exec format error

apt updateとapt upgradeを不用意に実行したせいだと思われる。

環境

Windows 11 Pro
WSL2のディストリビューションはUbuntu

$ wsl --version
WSL バージョン: 1.2.5.0
カーネル バージョン: 5.15.90.1
WSLg バージョン: 1.0.51
MSRDC バージョン: 1.2.3770
Direct3D バージョン: 1.608.2-61064218
DXCore バージョン: 10.0.25131.1002-220531-1700.rs-onecore-base2-hyp
Windows バージョン: 10.0.22621.2134

解決策

状況としては下記リンクとほぼ同じだった。

WSL2 - Code.exe: Exec format error · Issue #189694 · microsoft/vscode

Does this issue occur when all extensions are disabled?: Yes VS Code Version: Version: 1.81.0 (user setup) Commit: 6445d93c81ebe42c4cbd7a60712e0b17d9463e97 Date: 2023-08-02T12:37:13.485Z Electron: ...

解決策は下記リンク先で議論されていた。

WSL2 (Preview) cannot run .exe files: exec format error: wsl.exe · Issue #8952 · microsoft/WSL

Version Microsoft Windows [Version 10.0.22621.521] WSL Version WSL 2 WSL 1 Kernel Version 5.15.62.1-microsoft-standard-WSL2 Distro Version Ubuntu 22.04 Other Software systemd 249.11-0ubuntu3.3 WSL ...

とりあえず、ディストリビューションのsystemdを無効にすることで、無事問題が解決した。

やったこと

WSL2のディストリビューション内にある/etc/wsl.confファイルを書き換えて、systemdを無効にした。

/etc/wsl.conf

[boot]
- systemd=true
+ systemd=false

その後、WSL自体を再起動した。

wsl --shutdown

Ubuntuのdockerイメージでgit cloneしようとしたら"server certificate verification failed. CAfile: none CRLfile: none"と言われた

Sat, 17 Jun 2023 19:20:53 +0900

起きた問題

Ubuntuのdockerイメージでgit cloneしようとしたら以下のエラーを吐かれてcloneできなかった。

git clone https://github.com/hoge/fuga.git
Cloning into 'fuga'...
fatal: unable to access 'https://github.com/hoge/fuga.git/': server certificate verification failed. CAfile: none CRLfile: none

ただし、https://github.com/hoge/fuga.gitのパスは正しいものとする。

解決策

Dockerfileでca-certificatesをインストールするようにしたら、無事にcloneできるようになった。たとえば、以下のようにする。

Dockerfile

RUN apt-get update -y \
 && DEBIAN_FRONTEND=noninteractive \
 apt-get install -y --no-install-recommends \
 git \
 ca-certificates

ほかの解決策

sudoが実行できるユーザーを作成しているなら、コンテナ内でsudo apt install --reinstall ca-certificatesしてもよさそう。

コンテナidがわかっていて、そのコンテナだけ対応させたいなら、rootユーザーでコンテナに入る。

docker exec -it -u root <container id> bash

その後、コンテナ内にca-certificatesを再度インストールする。

sudo apt install --reinstall ca-certificates

参考文献・URL

muoilog.xyz にアクセスできません

muoilog.xyz

Ubuntu（WSL2の）でgit cloneしたらserver certificate verification failed - zuntan02のはてなブログ

【概要】 Ubuntu/WSL2でgit cloneしたらけられた fatal: unable to access 'https://ほげほげ': server certificate verification failed. CAfile: none CRLfile: none 【解決に至るメモ】メッセージによれば証明書ファイルがないとのことなのでインストール apt-get install --reinstall ca-certificates→エラー W: An error occurred during the signature verification. The reposito…

zuntan02.hateblo.jp

【Docker】コンテナにROOTで入る方法

目次 1. 【Docker】コンテナにROOTで入る方法1.1. 参考用のdocker-compose.yml1.2. docker-composeで入る方法1.3. コンテナIDを指定してdockerで入る方法1.4. まとめ【Dock

qol-kk.com

PythonでRSSから最新の記事を取得する

Mon, 12 Jun 2023 23:26:35 +0900

これはなに

PythonでRSSから最新の記事を取得するために書いたコードのメモ。

必要なモジュール

RSSをPythonで解析できるようにするため、feedparserというPythonモジュールを利用する。feedparserはpipでインストールできる。

pip install feedparser

メモ

feedparserでは、以下のようにしてRSSのURLから情報を取得できる。

feed = feedparser.parse(rss_url)

feedparserで取得した情報は、pprintを利用するときれいに表示できる。

feedparserで取得した情報空記事の情報を取得する場合はentriesメンバにアクセスする。entriesはリストで、複数の記事の情報が入っている。たいていのRSSでは新しい記事から順になっている。この場合、たとえばfeed.entries[0].titleで最新記事のタイトルを取得できる。

linkやsummaryも取得できるが、RSSによっては設定されていないこともあるため注意が必要。また、このサイトのRSSはsummaryに記事の全文が入っているが、たとえばZennのRSSはsummaryに本文が途中まで入っていて、全文は入っていない。そのためsummaryを取得したからといって、記事の内容がすべて手に入るわけではない。

最終的なコード

RSSから取得されるentriesが日時順になっていれば、次のコードで新しい記事からcheck_article_num個の記事の情報を取得できる。この場合、check_article_num = 1にすれば最新の記事を取得できる。

get_latest_article_from_rss.py

import feedparser
import time


def get_latest_articles_from_rss(
 rss_url: str,
 check_article_num: int = 1,
):
 """Get the latest articles from an RSS feed.
 Parameters
 ----------
 rss_url : str
 The URL of the RSS feed.
 check_article_num : int, optional
 The number of articles to check, by default 5.
 Returns
 -------
 list[feedparser.FeedParserDict]
 The list of latest articles.
 """
 feed = feedparser.parse(rss_url)
 articles = []
 for i in range(check_article_num):
 feed_published_time: time.struct_time = feed.entries[i].published_parsed
 print(f"{feed.entries[i].title} : {feed_published_time}")
 articles.append(feed.entries[i])
 if len(articles) == 0:
 print("No new articles found.")
 return None
 return articles


if __name__ == "__main__":
 rss_url = "https://notes.nakurei.com/index.xml"
 get_latest_articles_from_rss(
 rss_url=rss_url,
 check_article_num=1,
 )

feed_published_timeのように、記事がいつ公開されたかもRSSから取得できる。そのためこれを基準時刻と比較すれば、ある日時以降に公開された記事の情報を取得できそう。

参考文献・URL

Python, feedparserでRSS, Atomフィードを解析 | note.nkmk.me

Pythonのサードパーティライブラリfeedparserを使うと、RSS / Atomフィードを解析（パース）してサイトの新着記事などの情報を抽出できる。フォーマットの仕様の違いをfeedparserが吸収してくれるので、どんなフォー ...

note.nkmk.me

localhostにアクセスしたら昔のサイトが表示されて困った（解決した）

Mon, 29 May 2023 23:11:10 +0900

生じた問題

Next.js (Next 3)でアプリを作ってnpm run devで起動しhttp://localhost:3000/にアクセスしたら、前に作っていたNuxt.jsのアプリの画面が出てしまった。F5でブラウザを更新しても新しいNext.jsの画面にならない。

環境

Brave 1.51.118
Windows 11

ChatGPTに聞いた

質問

braveでhttp://localhost:3000/にアクセスすると、昔のデータが表示されてしまいます。どうやったら新しいデータを表示できますか？

回答

ローカルホストのページに古いデータが表示されるという問題は、一般的にキャッシュの問題や、動的に更新されるデータが正しく更新されていないなど、いくつかの可能性が考えられます。以下の手順で問題の解決を試みてみてください。

キャッシュをクリアする: Braveブラウザでは、キャッシュとブラウジングデータをクリアすることができます。以下の手順に従ってください：
- Braveブラウザを開きます。
- 右上にある「その他」ボタン（三つの水平線アイコン）をクリックします。
- メニューから「設定」を選択します。
- 「プライバシーとセキュリティ」セクションをクリックします。
- 「ブラウジングデータをクリア」をクリックします。
- 「時間範囲」を「すべての時間」に設定し、「キャッシュされた画像とファイル」のチェックボックスをオンにします。
- 最後に、「データをクリア」をクリックします。
ページをハードリロードする: キャッシュが原因である場合、キャッシュをクリアした後にページをハードリロードすることで、問題が解決する可能性があります。ハードリロードは、ページをリロードする際にブラウザのキャッシュを無視します。Braveブラウザでは、Ctrl + Shift + R（Windows）または Command + Shift + R（Mac）を押すことでハードリロードを実行できます。
ローカルサーバーをリスタートする: 動的に更新されるデータが正しく更新されていない可能性があります。これは特に、データベースに対する変更がリアルタイムで反映されない場合に発生します。この場合、ローカルサーバーをリスタートすることで問題が解決する可能性があります。

これらの手順を試した後でも問題が解決しない場合は、更に詳細な情報が必要になるかもしれません。例えば、使用している開発ツールやフレームワーク、データがどのように更新されるべきかなど、具体的なシナリオについての詳細が役立つでしょう。

解決策

ChatGPTに言われたように、過去7日間の閲覧履歴・Cookie・キャッシュを削除したのち、http://localhost:3000/でCtrl + Shift + Rしてハードリセットしたら直った。

ありがとうChatGPT。

Ubuntu + 任意バージョンのPython3環境をDockerで構築する

Sun, 21 May 2023 09:35:27 +0900

これはなに

Ubuntu 18.04 + Python 3.7の環境を作らなければならなかったときに、Dockerで環境を構築したときの備忘録。

最終的なDockerfile

先に結論を示す。以下のDockerfileをビルドすれば、Ubuntu 18.04 + Python 3.7の環境を構築できる。Ubuntuのバージョンを変えたい場合は、FROM ubuntu:18.04をUbuntu Official Imageにある任意のバージョンのタグに変更する。Pythonのバージョンを変えたい場合は、ARG python_version="3.7.16"を、Pythonのソースコード置き場にある任意のバージョンに変更する。

Dockerfile

FROM ubuntu:18.04

ARG python_version="3.7.16"

# Set locale
RUN apt update -y \
 && apt install -y --no-install-recommends \
 language-pack-en
ENV LANG en_US.UTF-8
ENV LANGUAGE en_US:en
ENV LC_ALL en_US.UTF-8
RUN ln -snf /usr/share/zoneinfo/America/New_York /etc/localtime
RUN apt update -y \
 && apt install -y --no-install-recommends \
 tzdata

# Install packages
# Ref: https://github.com/pyenv/pyenv/wiki#suggested-build-environment
RUN apt update -y \
 && apt install -y --no-install-recommends \
 git \
 wget \
 xz-utils \
 build-essential libssl-dev zlib1g-dev \
 libbz2-dev libreadline-dev libsqlite3-dev curl \
 libncursesw5-dev xz-utils tk-dev libxml2-dev libxmlsec1-dev libffi-dev liblzma-dev \
 libgdbm-dev libdb-dev uuid-dev

# Install Python
RUN cd /usr/local/src \
 && wget --no-check-certificate https://www.python.org/ftp/python/${python_version}/Python-${python_version}.tar.xz \
 && tar -Jxvf Python-${python_version}.tar.xz \
 && cd Python-${python_version} \
 && ./configure --with-ensurepip \
 && make \
 && make install

# Set alias
RUN echo 'alias python=python3' >> ~/.bashrc
RUN echo 'alias pip=pip3' >> ~/.bashrc
RUN . ~/.bashrc

RUN apt autoremove -y

Dockerfileの説明

Dockerfileでやっていることを説明する。

localeとタイムゾーンを設定する

最初にlocaleとタイムゾーンを設定している。この設定は任意だが、設定しておかないと後々面倒になる（と個人的に思っている）ので設定している。

# Set locale
RUN apt update -y \
 && apt install -y --no-install-recommends \
 language-pack-en
ENV LANG en_US.UTF-8
ENV LANGUAGE en_US:en
ENV LC_ALL en_US.UTF-8
RUN ln -snf /usr/share/zoneinfo/America/New_York /etc/localtime
RUN apt update -y \
 && apt install -y --no-install-recommends \
 tzdata

日本語かつ日本時間に設定する場合は、以下のようになる。

# Set locale
RUN apt update -y \
 && apt install -y --no-install-recommends \
 language-pack-ja-base
ENV LANG ja_JP.UTF-8
ENV LANGUAGE ja_JP:ja
ENV LC_ALL ja_JP.UTF-8
RUN ln -snf /usr/share/zoneinfo/Asia/Tokyo /etc/localtime
RUN apt update -y \
 && apt install -y --no-install-recommends \
 tzdata

ちなみに、localeだけ設定してタイムゾーンを設定しないと、docker buildがタイムゾーンの入力で止まってしまうので注意。

Dockerfileのビルドがタイムゾーンの入力で止まってしまう問題を回避する方法

Ubuntuに任意のバージョンのPythonをインストールする

apt upgradeやapt install python3だと、任意バージョンのPythonや最新バージョンのPythonをインストールできない。よって、今回はPythonのソースコードをビルドしてインストールしている。

ソースコードのビルドに必要なパッケージをインストールする

Pythonのソースコードをビルドするのに必要なパッケージをインストールする。今回は、pyenvが推奨するビルド環境を参考にパッケージをインストールしている。

# Install packages
# Ref: https://github.com/pyenv/pyenv/wiki#suggested-build-environment
RUN apt update -y \
 && apt install -y --no-install-recommends \
 git \
 wget \
 build-essential libssl-dev zlib1g-dev \
 libbz2-dev libreadline-dev libsqlite3-dev curl \
 libncursesw5-dev xz-utils tk-dev libxml2-dev libxmlsec1-dev libffi-dev liblzma-dev \
 libgdbm-dev libdb-dev uuid-dev

ソースコードをダウンロードする

以下の部分でPythonのソースコードをダウンロードしている。

# Install Python
RUN cd /usr/local/src \
 && wget --no-check-certificate https://www.python.org/ftp/python/${python_version}/Python-${python_version}.tar.xz \
 && tar -Jxvf Python-${python_version}.tar.xz \
 && cd Python-${python_version} \
 && ./configure --with-ensurepip \
 && make \
 && make install

特定のバージョンのPythonのソースコードは、https://www.python.org/ftp/python/から入手できる。

Index of /ftp/python/

www.python.org

たとえば、Python 3.7.16なら、https://www.python.org/ftp/python/3.7.16/からダウンロードできる。今回はPython-3.7.16.tar.xzをダウンロードしている。

wget --no-check-certificate https://www.python.org/ftp/python/3.7.16/Python-3.7.16.tar.xz

ダウンロードしたらtarコマンドで解凍する。

tar -Jxvf Python-3.7.16.tar.xz

ソースコードをビルドする

以下の部分で、ダウンロードしたPythonのソースコードをビルドしている。

# Install Python
RUN cd /usr/local/src \
 && wget --no-check-certificate https://www.python.org/ftp/python/${python_version}/Python-${python_version}.tar.xz \
 && tar -Jxvf Python-${python_version}.tar.xz \
 && cd Python-${python_version} \
 && ./configure --with-ensurepip \
 && make \
 && make install

まず、configureを実行する。これにより、設定に応じたMakefileが生成される。

configureを実行する際にはオプションを指定できる。オプションは以下のコマンドで確認できる。

./configure --help

今回は--with-ensurepipというオプションを指定している。これによりビルド時にpipを有効化できる。

Makefileができたら、makeコマンドでソースコードをビルドし、make installコマンドでコンパイルする。

エイリアスを設定する

この設定は任意。pythonコマンドでpython3を実行するように指定している。また、pipコマンドでpip3を実行するように指定している。

# Set alias
RUN echo 'alias python=python3' >> ~/.bashrc
RUN echo 'alias pip=pip3' >> ~/.bashrc
RUN . ~/.bashrc

参考文献・URL

Ubuntu環境のPython - python.jp

Ubuntu には最初からPythonがインストールされており、そのまま利用可能です。しかし、このPython は、 OS がさまざまな機能を提供するために使用しています。ユーザが勝手にパッケージを導入したりすると、 OS の安定性を損なうことも考えられますので、別途

www.python.jp

Ubuntuに最新バージョンのPythonをインストールする

Ubuntu（Linuxすべて）にデフォルトでインストールされているPythonをそのまま使っていませんか？それは、ヤバイことだと知っていましたか？この記事では、デフォルトのPythonを使うことのリスクを説明して、新しいPythonをインストールする方法を解説しています。

self-development.info

UbuntuでPythonをソースからインストール - Qiita

Python 3.8 が公開されました。Ubuntu 18.04 の場合、Python 3.8 のパッケージが用意されることはないので、Ubuntu の LTS で Python 3.8 を使おうとしたら来年の4月に公開される Ubuntu 20.04 まで待つ必要がありま...

https://kyrieee.com/wsl-error/2109/ https://shikiyura.com/2022/11/systemd_supported_in_wsl/

WSL2内のDockerコンテナでGPUを使えるようにする

Sun, 21 May 2023 00:40:02 +0900

これはなに

WSL2内のDockerコンテナからNVIDIA GPUを利用するための設定方法のメモ。

環境

OS: Windows 11
WSL2 : Ubuntu distribution (22.04.1 LTS)
GPU: RTX 3060Ti
Docker Desktop for Windows、またはDocker Engine in WSL2

WSL2のDockerでGPUを活用するための環境構築手順

前提条件を満たすか確認する

まずは、WSL2とDockerでGPUを使用できるようにするための前提条件を確認する。以下のサイトに前提条件が書かれている。

docs.nvidia.com

執筆当時の前提条件は以下のとおりだった。

GNU/Linux x86_64 with kernel version > 3.10
Docker >= 19.03 (recommended, but some distributions may include older versions of Docker. The minimum supported version is 1.12)
NVIDIA GPU with Architecture >= Kepler (or compute capability 3.0)
NVIDIA Linux drivers >= 418.81.07 (Note that older driver releases or branches are unsupported.)

よって、前提条件を満たすかコマンドで確認する。

Linux kernelのバージョンは、WSLのバージョンの確認でわかる。

PowerShell

$ wsl --version
WSL バージョン: 1.2.5.0
カーネル バージョン: 5.15.90.1
WSLg バージョン: 1.0.51
MSRDC バージョン: 1.2.3770
Direct3D バージョン: 1.608.2-61064218
DXCore バージョン: 10.0.25131.1002-220531-1700.rs-onecore-base2-hyp
Windows バージョン: 10.0.22621.1702

Dockerのバージョンはdockerコマンドで表示できる。

WSL2

$ docker -v
Docker version 23.0.5, build bc4487a

NVIDIA Driverが入っているかどうかと、そのバージョンの確認は、nvidia-smiコマンドで確認できる。何も表示されない場合はNVIDIA Driverが入っていないので、NVIDIAの公式サイトからダウンロードしてインストールする。

WSL2

$ nvidia-smi
Sun May 21 01:06:40 2023
+---------------------------------------------------------------------------------------+
| NVIDIA-SMI 530.50 Driver Version: 531.79 CUDA Version: 12.1 |
|-----------------------------------------+----------------------+----------------------+
| GPU Name Persistence-M| Bus-Id Disp.A | Volatile Uncorr. ECC |
| Fan Temp Perf Pwr:Usage/Cap| Memory-Usage | GPU-Util Compute M. |
| | | MIG M. |
|=========================================+======================+======================|
| 0 NVIDIA GeForce RTX 3060 Ti On | 00000000:01:00.0 On | N/A |
| 60% 53C P5 29W / 200W| 2855MiB / 8192MiB | 24% Default |
| | | N/A |
+-----------------------------------------+----------------------+----------------------+

+---------------------------------------------------------------------------------------+
| Processes: |
| GPU GI CI PID Type Process name GPU Memory |
| ID ID Usage |
|=======================================================================================|
| No running processes found |
+---------------------------------------------------------------------------------------+

それぞれのツールのインストールとバージョンが前提条件を満たしていることを確認したら、次へ進む。

NVIDIA Container Toolkitをインストールする

次に、NVIDIA Container Toolkitをインストールする。このToolkitはDockerと密接に連携し、コンテナからNVIDIA GPUを活用できるようにする。

インストールは公式ドキュメントの手順に従う。公式ドキュメントの方法が最新の方法なので、それに従うのがベストである。

docs.nvidia.com

念のため執筆時のインストール方法を残しておく

パッケージリポジトリとGPGキーをセットアップする。

distribution=$(. /etc/os-release;echo $ID$VERSION_ID) \
 && curl -fsSL https://nvidia.github.io/libnvidia-container/gpgkey | sudo gpg --dearmor -o /usr/share/keyrings/nvidia-container-toolkit-keyring.gpg \
 && curl -s -L https://nvidia.github.io/libnvidia-container/$distribution/libnvidia-container.list | \
 sed 's#deb https://#deb [signed-by=/usr/share/keyrings/nvidia-container-toolkit-keyring.gpg] https://#g' | \
 sudo tee /etc/apt/sources.list.d/nvidia-container-toolkit.list

パッケージリストを更新する。

sudo apt update

nvidia-container-toolkitパッケージ（および依存関係）をインストールする。

sudo apt install -y nvidia-container-toolkit

NVIDIA Container Toolkitのインストールを確認する。

nvidia-container-cli info

DockerデーモンがNVIDIA Container Runtimeを認識するように設定する。 Docker Desktop for Windowsを利用している場合は、この手順だけ飛ばしてよい。

sudo nvidia-ctk runtime configure --runtime=docker

最後に、Dockerデーモンを再起動する。 Docker Desktop for Windowsを利用している場合は、コマンドではなくDocker DesktopのほうでDockerデーモンを再起動する。

sudo systemctl restart docker

ちなみに、systemctlが使えない場合は次のエラーが出る。

$ sudo systemctl restart docker
System has not been booted with systemd as init system (PID 1). Can't operate.
Failed to connect to bus: Host is down

この場合は下記リンクの内容に従って対処すること。

GPUが認識されるか確認する

環境が正しく設定され、DockerコンテナからGPUが適切に認識されるか確認する。

sudo docker run --rm --runtime=nvidia --gpus all nvidia/cuda:11.6.2-base-ubuntu20.04 nvidia-smi

docker: Error response from daemon: unknown or invalid runtime name: nvidia.というエラーが出る場合は、--runtime=nvidiaを削除して実行する。

[WSL2]docker: Error response from daemon: Unknown runtime specified nvidia. の対処法 - Qiita

--runtime=nvidia を --gpus all に変更する。参考: https://github.com/NVIDIA/nvidia-docker/issues/838#issuecomment-558962338 他にもいろいろな解決法が書いてある環境 ...

以下のように結果が表示されれば成功。

+---------------------------------------------------------------------------------------+
| NVIDIA-SMI 530.41.03 Driver Version: 531.41 CUDA Version: 12.1 |
|-----------------------------------------+----------------------+----------------------+
| GPU Name Persistence-M| Bus-Id Disp.A | Volatile Uncorr. ECC |
| Fan Temp Perf Pwr:Usage/Cap| Memory-Usage | GPU-Util Compute M. |
| | | MIG M. |
|=========================================+======================+======================|
| 0 NVIDIA GeForce RTX 3060 Ti On | 00000000:01:00.0 On | N/A |
| 0% 55C P8 24W / 200W| 1846MiB / 8192MiB | 11% Default |
| | | N/A |
+-----------------------------------------+----------------------+----------------------+

+---------------------------------------------------------------------------------------+
| Processes: |
| GPU GI CI PID Type Process name GPU Memory |
| ID ID Usage |
|=======================================================================================|
| 0 N/A N/A 23 G /Xwayland N/A |
+---------------------------------------------------------------------------------------+

DockerコンテナからGPUを利用する

あとは、GPUを利用したいコンテナを実行するときに、以下のコマンドのように--gpus allあるいは--gpus=allのオプションをつけて実行すればよい。

sudo docker run --rm --gpus all nvidia/cuda:11.6.2-base-ubuntu20.04 nvidia-smi

参考文献・URL

Dockerを使って爆速でGPUを設定する方法 - Qiita

はじめに機械学習をやろうと思ったら、まずやってくるのが GPUの設定ですよね。ドライバインストールしてCUDAとcudnnインストールして、、、。これが本当にめんどくさい！そんな方には Dockerを用いた設定をオススメします。マジで爆速です。しかも、PyTorchや...

Dockerを使ってpytorch+cudaの環境を構築する - やったことの説明

はじめに研究をやっていると査読対応のために実験を追加したいが，環境をいじってしまっている既存手法を実行するために，tensorflowの特定のバージョンを使いたい．それに伴って特定のバージョンのcudaをインストールしなければならないみたいなことが発生する． pythonだけならcondaやpipenvでなんとかなるが，cudaなどが絡んでくると色々めんどくさくなる．そこで，Dockerを使って環境を構築することでこの問題を解決することを試みる．もう1台のパソコンや会社のPCで同じことをやるので記録を残す． cuda+dockerで検索するとnvidia-docker2を使うように…

ksknw.hatenablog.com

Nuxt 3にVuetify 3を追加した後の細かい設定のメモ

Sat, 20 May 2023 13:09:46 +0900

これはなに

Nuxt 3にVuetify 3を導入した後に設定した、細かい設定のメモ。

Vuetify自体の導入については、以下の記事を参照のこと。

Nuxt 3の環境にVuetify 3を追加する

変更前のVuetifyの設定

Vuetifyのコンポーネントとdirectivesを読み込み、Material Design Iconsのうち必要なアイコンだけをインポートする設定をしている。

plugins/vuetify.ts

import { createVuetify } from 'vuetify';
import * as components from 'vuetify/components';
import * as directives from 'vuetify/directives';
import { aliases, mdi } from 'vuetify/iconsets/mdi-svg';

export default defineNuxtPlugin((nuxtApp) => {
 const vuetify = createVuetify({
 ssr: true,
 components,
 directives,
 icons: {
 defaultSet: 'mdi',
 aliases,
 sets: {
 mdi,
 },
 },
 });

 nuxtApp.vueApp.use(vuetify);
});

blueprintを指定

Vuetifyはマテリアルデザインに準拠している。マテリアルデザインは、2014年にMaterial Designが定義されたのち、2017年にMaterial Design 2へ仕様が変更され、2022年にはMaterial Design 3が登場した。Vuetifyでは、これらのデザインの仕様のうちどれを利用するかを、blueprintというconfigで変更できる。たとえば、Material Design 3を利用する場合は、以下のようにmd3を指定する。

plugins/vuetify.ts

import { md3 } from 'vuetify/blueprints';

export default defineNuxtPlugin((nuxtApp) => {
 const vuetify = createVuetify({
 blueprint: md3,
 });
});

blueprintの指定によってどのようにデザインが変わるかに関する詳細は、以下のリンクを参照してほしい。

Blueprints — Vuetify

Setup your entire application with pre-made or custom styling and designs

vuetifyjs.com

テーマの色を変更

カラーテーマを変更

カラーテーマの色を変更する。公式のやり方に準じる。

Theme — Vuetify

Setup your application's theme and supplemental colors in a flash.

まず、任意のディレクトリにtheme.tsを作成する。 theme.tsにテーマを以下のように定義する。

theme.ts

import { ThemeDefinition } from 'vuetify';

// #689F38
export const lightTheme: ThemeDefinition = {
 dark: false,
 colors: {
 background: '#fdfdf5',
 surface: '#fdfdf5',
 primary: '#386b01',
 secondary: '#57624a',
 success: '#386664',
 warning: '#ffdad6',
 error: '#ba1a1a',
 info: '#bbece9',
 'on-background': '#1a1c18',
 'on-surface': '#1a1c18',
 'on-primary': '#ffffff',
 'on-secondary': '#ffffff',
 'on-success': '#ffffff',
 'on-warning': '#410002',
 'on-error': '#ffffff',
 'on-info': '#00201f',
 },
};

export const darkTheme: ThemeDefinition = {
 dark: true,
 colors: {
 background: '#1a1c18',
 surface: '#1a1c18',
 primary: '#9cd769',
 secondary: '#becbae',
 success: '#a0cfcd',
 warning: '#93000a',
 error: '#ffb4ab',
 info: '#1e4e4d',
 'on-background': '#e3e3dc',
 'on-surface': '#e3e3dc',
 'on-primary': '#1a3700',
 'on-secondary': '#29341f',
 'on-success': '#003736',
 'on-warning': '#ffdad6',
 'on-error': '#690005',
 'on-info': '#bbece9',
 },
};

上で示したコードの色のkey（backgroundとかsurfaceとか）はThemeDefinitionで定義されているもので、Vuetifyのコンポーネントで自動的に利用される。なお、すべての色を定義する必要はないし、ThemeDefinitionで定義されているkeyのほかに任意のkeyも設定できる。

ちなみに、テーマの色決めには以下のサイトが有用である。

Material Theme Builder

Theming for Material Design 3

m3.material.io

テーマを定義したら、それを利用するために、定義したテーマをcreateVuetifyに渡す。

plugins/vuetify.ts

import { createVuetify } from 'vuetify';

import { lightTheme, darkTheme } from '@/helpers/vuetify/themes';

export default defineNuxtPlugin((nuxtApp) => {
 const vuetify = createVuetify({
 defaultTheme: 'light',
 theme: {
 themes: { light: lightTheme, dark: darkTheme },
 },
 });
});

このテーマをアプリ全体に適用するには、theme.global.name.valueの値を設定したテーマ名（上記の場合はlightかdark）に変更する。例を下記に示す。

app.vue

<script setup lang="ts">
import { useTheme } from 'vuetify';
import { mdiWeatherNight, mdiWeatherSunny } from '@mdi/js';

// params
const theme = useTheme();
const themeIcon = computed(
 () => theme.global.current.value.dark
 ? mdiWeatherNight
 : mdiWeatherSunny,
);

// functions
const toggleTheme = () => {
 theme.global.name.value = theme.global.current.value.dark ? 'light' : 'dark';
};
</script>

<template>
 <v-app>
 <v-main>
 <v-container>
 <v-btn :icon="themeIcon" @click="toggleTheme()" />
 </v-container>
 </v-main>
 </v-app>
</template>

上記のコードを実行すると、ボタンクリックでテーマを変更できる。

Your browser doesn't support HTML5 video. Here is a link to the video instead.

また、テーマは特定のコンポーネントだけにも適用できる。たとえば以下のようにv-btnのthemeに"light"を指定すると、そのボタンには常に"light"テーマが適用される。

<v-btn theme="light">
 TEST
</v-btn>

この書き方だと常に"light"テーマが適用されるため、theme.global.name.valueの変更の影響を受けなくなる。

Your browser doesn't support HTML5 video. Here is a link to the video instead.

Validationを定義

Vuetifyのカラーシステムを利用すると、テーマの色に対して、色のバリエーションを任意の数生成できる。

Theme — Vuetify

Setup your application's theme and supplemental colors in a flash.

たとえば、以下のように書くと、primary、secondary、successのそれぞれの色に対して、6つのlightenと3つのdarkenのValidationが定義される。

plugins/vuetify.ts

import { createVuetify } from 'vuetify';

import { lightTheme, darkTheme } from '@/helpers/vuetify/themes';

export default defineNuxtPlugin((nuxtApp) => {
 const vuetify = createVuetify({
 theme: {
 defaultTheme: 'light',
 variations: {
 colors: ['primary', 'secondary', 'success'],
 lighten: 6,
 darken: 3,
 },
 themes: {
 light: lightTheme,
 dark: darkTheme,
 },
 },
 });
});

生成したValidationはclassで利用できる。たとえば、以下のようにボタンを定義すると、それぞれ色が変わる。

index.vue

<template>
 <div>
 <div class="mb-5">
 <v-btn class="mr-3 bg-primary-lighten-6" text="test" />
 <v-btn class="mr-3 bg-primary-lighten-5" text="test" />
 <v-btn class="mr-3 bg-primary-lighten-4" text="test" />
 <v-btn class="mr-3 bg-primary-lighten-3" text="test" />
 <v-btn class="mr-3 bg-primary-lighten-2" text="test" />
 <v-btn class="mr-3 bg-primary-lighten-1" text="test" />
 <v-btn class="mr-3 bg-primary" text="test" />
 <v-btn class="mr-3 bg-primary-darken-1" text="test" />
 <v-btn class="mr-3 bg-primary-darken-2" text="test" />
 <v-btn class="mr-3 bg-primary-darken-3" text="test" />
 </div>

 <div class="mb-5">
 <v-btn class="mr-3 bg-secondary-lighten-6" text="test" />
 <v-btn class="mr-3 bg-secondary-lighten-5" text="test" />
 <v-btn class="mr-3 bg-secondary-lighten-4" text="test" />
 <v-btn class="mr-3 bg-secondary-lighten-3" text="test" />
 <v-btn class="mr-3 bg-secondary-lighten-2" text="test" />
 <v-btn class="mr-3 bg-secondary-lighten-1" text="test" />
 <v-btn class="mr-3 bg-secondary" text="test" />
 <v-btn class="mr-3 bg-secondary-darken-1" text="test" />
 <v-btn class="mr-3 bg-secondary-darken-2" text="test" />
 <v-btn class="mr-3 bg-secondary-darken-3" text="test" />
 </div>

 <div class="mb-5">
 <template v-for="n in 6" :key="n">
 <v-btn :class="'mr-3 bg-success-lighten-'+(7-n)" text="test" />
 </template>
 <v-btn class="mr-3 bg-success" text="test" />
 <template v-for="n in 3" :key="n">
 <v-btn :class="'mr-3 bg-success-darken-'+n" text="test" />
 </template>
 </div>
 </div>
</template>

Vuetifyのコンポーネントのカスタマイズファイルを作成

Vuetifyのコンポーネントは、個々の属性を付与することでスタイルを変更できる。このスタイルをコンポーネントごとに一括で変更できるようにする。

まず、Vuetifyのコンポーネントのデフォルトを設定するファイルを作成する。今回はdefaults.tsという名前で作成した。次に、そこにデフォルトの設定を書き込む。設定の例を以下に示す。

defaults.ts

import { DefaultsInstance } from 'vuetify/lib/framework.mjs';

export const defaults: DefaultsInstance = {
 VBtn: { density: 'compact', elevation: 1 },
};

そして、作成した設定をcreateVuetifyに渡して読み込む。

plugins/vuetify.ts

import { createVuetify } from 'vuetify';
import * as components from 'vuetify/components';
import * as directives from 'vuetify/directives';

import { defaults } from '@/helpers/vuetify/defaults';

export default defineNuxtPlugin((nuxtApp) => {
 const vuetify = createVuetify({
 components,
 directives,
 defaults,
 });
});

これにより、Vuetifyのコンポーネントに一括で設定を付与できる。

最終的なVuetifyの設定

最後に、設定ファイル全体を示しておく。

plugins/vuetify.ts

import { createVuetify } from 'vuetify';
import * as components from 'vuetify/components';
import * as directives from 'vuetify/directives';
import { aliases, mdi } from 'vuetify/iconsets/mdi-svg';
import { md3 } from 'vuetify/blueprints';

import { lightTheme, darkTheme } from '@/helpers/vuetify/themes';
import { defaults } from '@/helpers/vuetify/defaults';

export default defineNuxtPlugin((nuxtApp) => {
 const vuetify = createVuetify({
 ssr: true,
 blueprint: md3,
 components,
 directives,
 defaults,
 icons: {
 defaultSet: 'mdi',
 aliases,
 sets: {
 mdi,
 },
 },
 theme: {
 defaultTheme: 'light',
 variations: {
 colors: ['primary', 'secondary', 'success'],
 lighten: 6,
 darken: 3,
 },
 themes: {
 light: lightTheme,
 dark: darkTheme,
 },
 },
 });

 nuxtApp.vueApp.use(vuetify);
});

参考文献・URL

Blueprints — Vuetify

Setup your entire application with pre-made or custom styling and designs

vuetifyjs.com

Theme — Vuetify

Setup your application's theme and supplemental colors in a flash.

Nuxt 3 で Vuetify 3 を使う

Dockerfileのビルドがタイムゾーンの入力で止まってしまう問題を回避する方法

Thu, 18 May 2023 21:21:56 +0900

これはなに

Dockerfileをビルドした際に、docker buildがタイムゾーンの入力で止まってしまう問題に遭遇した。これを回避する方法のメモ。

問題を再現する

以下のDockerfileをビルドする。

Dockerfile

FROM ubuntu:18.04

RUN apt update -y \
 && apt install -y --no-install-recommends \
 language-pack-en
ENV LANG en_US.UTF-8
ENV LANGUAGE en_US.en
ENV LC_ALL en_US.UTF-8

RUN apt update -y \
 && apt install -y --no-install-recommends \
 tk-dev

すると、localeを設定した後のapt installで、以下のようにタイムゾーンの入力を要求されてしまい、ビルドが途中で止まってしまう。

 => [dev_container_auto_added_stage_label 3/3] RUN apt update -y && apt instal 425.7s
 => => # questions will narrow this down by presenting a list of cities, representing
 => => # the time zones in which they are located.
 => => # 1. Africa 4. Australia 7. Atlantic 10. Pacific 13. Etc
 => => # 2. America 5. Arctic 8. Europe 11. SystemV
 => => # 3. Antarctica 6. Asia 9. Indian 12. US
 => => # Geographic area:

ちなみにlocaleを設定しない場合は、タイムゾーンの設定も要求されないため、ビルドが途中で止まる事態にはならない。

回避方法

回避方法1 | DEBIAN_FRONTEND=noninteractiveをつける

ビルドが途中で止まってしまう原因は入力のダイアログが表示されてしまうことである。そのため、apt installの前にDEBIAN_FRONTEND=noninteractiveをつける。これをつけると対話式の命令をスキップできる。

Dockerfile

FROM ubuntu:18.04

RUN apt update -y \
 && apt install -y --no-install-recommends \
 language-pack-en
ENV LANG en_US.UTF-8
ENV LANGUAGE en_US.en
ENV LC_ALL en_US.UTF-8

RUN apt update -y \
- && apt install -y --no-install-recommends \
+ && DEBIAN_FRONTEND=noninteractive apt install -y --no-install-recommends \
 tk-dev

DEBIAN_FRONTENDは、aptのユーザーインターフェースを構成するために使用される環境変数である。そのため、DEBIAN_FRONTENDの値は環境変数としても指定できる。

ENV DEBIAN_FRONTEND=noninteractive

ただし、環境変数で指定する方法は、そのDockerイメージで生成されるすべてのコンテナに影響を与えてしまう。そのため、たとえばそのイメージを使う人がソフトウェアをインタラクティブに設定する際、ダイアログが表示されず、問題が生じうる。公式のドキュメントでも推奨されていない。

docs.docker.com にアクセスできません

よって、DEBIAN_FRONTEND=noninteractive apt installとして一時的に変更し使用するのが良い。万が一環境変数で指定する場合は、必ず最後にDEBIAN_FRONTENDをデフォルト値に戻す。

回避方法2 | タイムゾーンを設定する

今回はタイムゾーンの設定ダイアログによってビルドが途中で止まってしまっている。そのため、その前にタイムゾーンを設定すれば回避できる。

Dockerfile

FROM ubuntu:18.04

RUN apt update -y \
 && apt install -y --no-install-recommends \
 language-pack-en
ENV LANG en_US.UTF-8
ENV LANGUAGE en_US.en
ENV LC_ALL en_US.UTF-8
+ RUN ln -snf /usr/share/zoneinfo/America/New_York /etc/localtime

RUN apt update -y \
 && apt install -y --no-install-recommends \
 tk-dev

タイムゾーンの設定方法は複数あるが、今回は/etc/localtimeに/usr/share/zoneinfo/ディレクトリのファイルのシンボリックリンクを貼ってタイムゾーンを設定した。Ubuntuのタイムゾーンを設定する方法は下記の記事が参考になる。

[Linux(Ubuntu)]タイムゾーンを日本時間にする5つの方法まとめ

参考文献・URL

docs.docker.com にアクセスできません

mukiudo.dev にアクセスできません

mukiudo.dev

DEBIAN_FRONTEND=noninteractive

flyingbarbarianさんのスクラップ

linuc.org

[Linux(Ubuntu)]タイムゾーンを日本時間にする5つの方法まとめ

Vuetifyのコンポーネントでリンクがnuxt-linkであると指定する

Tue, 16 May 2023 00:04:46 +0900

これはなに

Vuetifyのコンポーネントでリンクがnuxt-linkであると指定する方法のメモ。

メモ

Vuetifyのコンポーネントで、toによる遷移を<NuxtLink>による遷移と同じ扱いにするには、そのコンポーネントにnuxt属性を追加する。たとえば、<v-list-item>のtoで指定したリンクをNuxtLinkと同じ扱いにするには、<v-list-item>にnuxt属性を追加すればよい。

<v-list-item
 nuxt
 title="about"
 :value="about"
 :to="/about"
/>

これによりリンクがnuxt-linkであると指定でき、ページの中で更新が必要な箇所だけ更新されるようになる。

参考文献・URL

Vuetify — A Material Design Framework for Vue.js

Vuetify is a Material Design component framework for Vue.js. It aims to provide all the tools necessary to create beautiful content rich applications.

v2.vuetifyjs.com

Vuetifyのコンポーネントをnuxt-linkの要素みたく扱う - Minerva

minerva.mamansoft.net

Nuxt3開発環境にStylelintを導入する

Sat, 13 May 2023 20:23:02 +0900

これはなに

Nuxt3で構築したWebアプリの環境にStylelintをインストールし設定する方法のメモ。 VS Codeで自動実行までさせる。

環境

Nuxt 3.4.3
Stylelint 15.6.1

インストール

Stylelintパッケージをインストールする。

npm i -D stylelint

.vueファイル内の<style>タグ内もリントできるように、以下のパッケージも入れる。

npm i -D postcss-html

Stylelintの設定presetも入れる。

npm i -D stylelint-config-standard stylelint-config-recommended-vue

Stylelintの設定

Stylelintの設定ファイル.stylelintrc.jsonを作成し、以下の内容を記入する。

.stylelintrc.json

{
 "extends": [
 "stylelint-config-standard",
 "stylelint-config-recommended-vue"
 ],
 "overrides": [
 {
 "files": ["**/*.vue"],
 "customSyntax": "postcss-html"
 }
 ]
}

Stylelintを実行するコマンドを、package.jsonに追加する。

package.json

{
 "scripts": {
 "lint": "stylelint --ignore-path .gitignore **/*.{css,vue}",
 "fix": "stylelint --fix --ignore-path .gitignore **/*.{css,vue}"
 },
}

これで、npm run lintおよびnpm run fixでStylelintを実行できる。

VS Codeの設定

開発にVS Codeを利用している場合は、VS Codeで保存時に修正とフォーマットを自動実行できる。

Stylelintの拡張機能をVS Codeにインストールし、以下の設定をVS Codeの設定ファイルに追記する。今回のプロジェクトのみに適用したい場合は、プロジェクトのルートディレクトリに.vscode/setting.jsonを作成し、そこに下記の内容を記入すればよい。

settings.json

{
 "editor.codeActionsOnSave": {
 "source.fixAll": "never",
 "source.fixAll.stylelint": "explicit"
 },
 "stylelint.validate": ["vue", "css", "less", "postcss"],
}

プロジェクトのルートディレクトリよりも深い階層にStylelintをインストールした場合は、stylelint.configBasedirにStylelintをインストールしたディレクトリを指定する。

settings.json

{
 "stylelint.configBasedir": "./app",
}

参考文献・URL

GitHub - nuxt-modules/stylelint: Stylelint module for Nuxt.js

Stylelint module for Nuxt.js. Contribute to nuxt-modules/stylelint development by creating an account on GitHub.

Vuetify 3+TypeScript+ESLintのWebアプリにPrettierとStyleLintを導入する

[Stylelint] tsxファイルの解析でCssSyntaxErrorが発生する場合の対処方法 | 零弐壱蜂

状況stylelint ./components//.tsx stylelintを tsx ファイルに対して実行すると下記のようなエラーが発生した。/components/TheHeader.tsx: When linting something other than CSS, you should install a

b.0218.jp

Nuxt3開発環境にESLintを導入する

Sat, 13 May 2023 20:22:51 +0900

本記事の内容は古くなっている。最新版はこちらを参照してほしい。

Nuxt 3の開発環境にESLintを導入する

これはなに

Nuxt3で構築したWebアプリの環境にESLintをインストールし設定する方法のメモ。 VS Codeで自動実行までさせる。

環境

Nuxt 3.4.3
ESLint 8.40.0

インストールと設定方法

Nuxtのドキュメントでは、LintとFormatの両方を、@nuxt/eslint-configを用いたESLintで実施することが推奨されている。また、開発ツールとしてVS Codeを使用している場合は、ESLint拡張機能の利用が推奨されている。

Contribution · Nuxt Community v4

Nuxt is a community project - and so we love contributions of all kinds! ❤️

nuxt.com

そのため、@nuxt/eslint-configのReadmeに従ってESLintを設定する。

GitHub - nuxt/eslint: Collection of ESLint-related packages for Nuxt

Collection of ESLint-related packages for Nuxt. Contribute to nuxt/eslint development by creating an account on GitHub.

まず、必要なパッケージをインストールする。 Nuxt3はTypeScriptをサポートしているため、TypeScript用のconfigを入れる。

npm i -D eslint @nuxtjs/eslint-config-typescript

次に、ESLintの設定ファイル.eslintrc.jsを作成し、以下の内容を記述する。

.eslintrc.js

module.exports = {
 root: true,
 extends: ['@nuxtjs/eslint-config-typescript'],
}

必要に応じて、ESLintのルールを変更する。

.eslintrc.js

module.exports = {
 rules: {
 'comma-dangle': ['error', 'always-multiline'],
 'for-direction': 'error',
 indent: ['error', 2, { SwitchCase: 1, VariableDeclarator: 'first' }],
 'max-len': ['error', { code: 80, ignoreUrls: true }],
 quotes: ['error', 'single'],
 semi: ['error', 'always'],
 },
};

その後、package.jsonにLint用のコマンドを追加する。

package.json

{
 "scripts": {
 "lint": "eslint --ignore-path .gitignore ./**/*.{js,ts,vue}",
 "fix": "eslint --fix --ignore-path .gitignore ./**/*.{js,ts,vue}"
 },
}

これで、VS Codeのターミナルからnpm run lintでリントを実行、npm run fixで自動修正が行えるようになる。

しかし、毎回コマンドを打つのは面倒である。そのため、VS CodeにESLintの拡張機能をインストールし、以下のVS Codeの設定を追記して、ファイル保存時に自動でESLintを実行させる。

settings.json

{
 // Linter
 "eslint.workingDirectories": [
 "./app"
 ],
 "editor.codeActionsOnSave": {
 "source.fixAll": false,
 "source.fixAll.eslint": true,
 },
}

さらに、Nuxtのドキュメントでは、ESLintでフォーマットするため、Prettierは無効にすることが推奨されている。そのため、Prettierによるフォーマットを避けるために、.prettierignoreですべてのファイルを指定する。.prettierignoreファイルを作成し、以下の内容を記入する。

.prettierignore

**

以上で、Nuxt3を用いてWebアプリを開発する際のVS Code環境に、ESLintが適切に設定される。

参考文献・URL

GitHub - nuxt/eslint: Collection of ESLint-related packages for Nuxt

Collection of ESLint-related packages for Nuxt. Contribute to nuxt/eslint development by creating an account on GitHub.

Nuxt3環境でのコードチェック及び、コードフォーマットの設定

Nuxt 3 の Stable 版がリリースされたので触ってみる - 電通総研テックブログ

本記事は電通国際情報サービス Advent Calendar 2022の8日目の記事です。執筆者は Xイノベーション本部 AI トランスフォーメーションセンター所属の山田です。この記事では先日（2022年11月中旬）に安定版がリリースされた Nuxt 3 について紹介します。なお、執筆時点での私たちのチームでは、本番プロジェクトへの Nuxt 3 の導入には至っていません。本記事は、あくまで技術調査をしながら簡単なアプリケーションを開発してみた内容をまとめたものになります。本記事で紹介するソースコードは以下のリポジトリで公開しています。 github.com Nuxt 3 について …

tech.isid.co.jp

Nuxt 3の環境にVuetify 3を追加する

Fri, 12 May 2023 22:33:43 +0900

これはなに

Nuxt 3のModulesに公式のVuetify 3モジュールがないので、自力で追加したときのメモ。

環境

Nuxt 3.4.3
Vuetify 3.2.4

Nuxt 3の環境作成

Nuxt 3のアプリ実装環境はNuxtのドキュメントに従って作成した。

nuxt.com

npx nuxi init app
cd app
npm install
npm run dev

Vuetify 3のインストールと設定

インストール

Vuetify本体をインストールする。

npm i vuetify

sassパッケージを入れていない場合は追加する。

npm i -D sass

プラグインの作成

NuxtのプラグインとしてVuetifyを使う。基本的には、VuetifyのManual stepsに従う。

Get started with Vuetify 4 — Vuetify

Details for v4 release - faq, changes, and upgrading.

pluginsディレクトリにvuetify.tsを作成し、以下の設定を書き込む。pluginsディレクトリがない場合は作成する。

plugins/vuetify.ts

import { createVuetify } from 'vuetify';
import * as components from 'vuetify/components';
import * as directives from 'vuetify/directives';

export default defineNuxtPlugin((nuxtApp) => {
 const vuetify = createVuetify({
 ssr: true,
 components,
 directives,
 });

 nuxtApp.vueApp.use(vuetify);
});

Vue3にはSSRが使用されているかどうかを自動的に検出する方法がない。そのため、ssrの値は、手動でnuxt.config.tsのssrと同じにする必要がある。nuxt.config.tsのssrはデフォルトでtrueなので、nuxt.config.tsのssrが何も設定されていないなら、plugins/vuetify.tsのssrをtrueにする。

'vuetify/styles'は、後述するnuxt.config.tsの修正で追加する。

ちなみに、Nuxt3では、pluginsディレクトリにプラグインファイルを作成すると、アプケーションの起動時に自動で登録してくれる。そのため、plugins/vuetify.tsを読み込むような記述は不要である。

nuxt.config.tsの修正

Vuetifyを追加したことをNuxtに知らせるため、nuxt.config.tsに以下の内容を追記する。

nuxt.config.ts

// https://nuxt.com/docs/api/configuration/nuxt-config
export default defineNuxtConfig({
 build: {
 transpile: ['vuetify'],
 },
 css: ['vuetify/styles'],
 vite: {
 ssr: {
 noExternal: ['vuetify'],
 },
 },
});

build.transpileにVuetifyを追加して、Nuxtにこれらのライブラリをインポートしようとしないように指示する。

ES Modules · Nuxt Concepts v4

Nuxt uses native ES modules.

nuxt.com

cssにVuetifyのCSSファイルを指定し、読み込ませる。これは先ほどスキップした'vuetify/styles'の追加に当たる。
vite.ssr.noExternalにVuetifyを追加して、VuetifyがSSRのために外部化されるのを防ぐ。（ssr: trueのときに設定する）

SSR Options

Next Generation Frontend Tooling

vitejs.dev

ここまでの設定で、Vuetifyのコンポーネントは利用できるようになる。

<template>
 <div>
 <v-btn class="mx-5 my-2" color="primary" text="my-btn" />
 </div>
</template>

ただし、ここまでだとアイコンボタンなどのアイコンを利用したコンポーネントは正常に処理されないため、アイコンを追加する。

アイコンの設定

今回はMaterial Design Iconsを利用する。また、利用するアイコンだけ読み込む形でアイコンを設定する。基本的に公式が提示するやり方のとおりに設定すれば問題ない。

Icon Fonts — Vuetify

Vuetify supports Material Design Icons, Font awesome and other icon sets through prefixes and global options.

まず、plugins/vuetify.tsに、アイコンの設定を追記する。

plugins/vuetify.ts

import { createVuetify } from 'vuetify';
import * as components from 'vuetify/components';
import * as directives from 'vuetify/directives';
+ import { aliases, mdi } from 'vuetify/iconsets/mdi-svg';

export default defineNuxtPlugin((nuxtApp) => {
 const vuetify = createVuetify({
 ssr: true,
 components,
 directives,
+ icons: {
+ defaultSet: 'mdi',
+ aliases,
+ sets: {
+ mdi,
+ },
+ },
 });

 nuxtApp.vueApp.use(vuetify);
});

次に、アイコンのパッケージをインストールする。

npm i -D @mdi/js

そして、アイコンを利用したい.vueファイルで、利用したいアイコンをimportして使う。

<script setup lang="ts">
import { mdiHome, mdiDotsVertical } from '@mdi/js';
</script>

<template>
 <div>
 <v-btn class="mx-5 my-2" :icon="mdiDotsVertical" />
 <v-icon class="mx-5 my-2" :icon="mdiHome" />
 </div>
</template>

Vuetifyに関するその他の設定

長くなったので別記事にまとめた。

Nuxt 3にVuetify 3を追加した後の細かい設定のメモ

参考文献・URL

Icon Fonts — Vuetify

Vuetify supports Material Design Icons, Font awesome and other icon sets through prefixes and global options.

Vuetify3でマテリアルアイコン(mdi)を使う際のベストプラクティス

Nuxt3でVuetify3の環境構築をする

Vite+Vue3+Vuetify3+Expressのプロジェクトを1から作成する（ESLint、Prettier、Node.jsをPJに含めたモノレポ？構成） - Qiita

はじめに個人開発で使うプロジェクトをVue-CLIから移行して、Vueも3.xに上げて新しくテンプレ化してみようと思った。その新プロジェクトの作成時の手順を備忘録として残しておきたく。完成したプロジェクトは以下。 yarn create viteで初期プロジェ...

Nuxt 3のcomponentsディレクトリ内のサブディレクトリを自動インポートの対象にする方法

Thu, 11 May 2023 10:38:26 +0900

Nuxt 3のデフォルトでは、~/componentsディレクトリのみが自動でスキャンされ、自動インポートされる。この~/componentsディレクトリ内にサブディレクトリを作成して階層を掘っても、そのディレクトリは自動インポートの対象にならない。

~/componentsディレクトリ内のサブディレクトリも自動インポートの対象にするには、nuxt.config.tsに追加のディレクトリを記述する必要がある。たとえば、~/components内にlayoutsディレクトリを作成した場合は、nuxt.config.tsに下記を追記する。

nuxt.config.ts

export default defineNuxtConfig({
 components: [
 { path: '~/components/layouts' },
 '~/components'
 ]
})

参考文献・URL

nuxt.com

Dockerコンテナで構築したNuxt 3製Webアプリでホットリロードが効かないときの対処法

Thu, 11 May 2023 08:43:06 +0900

これはなに

Docker Desktop for WindowsでNuxt.jsを用いてWebアプリケーションを作成した際に、ホットリロードが効かなかった際の対処法を残す。

環境

Windows 11
Docker Desktop for Windows v4.19.0
Nuxt.js 3.4.3
Node.js v19.9.0
npm 9.6.3

どうやらDocker Desktop for Windowsを利用してホストマシン（Windows）でNuxtアプリケーションを実行すると発生する問題のようだ。ホストマシンがWindowsでも、WSL2内でDockerコンテナを立てWSL2内のコンテナから実行する場合は、ホットリロードが効かない問題は発生していない。

忙しい人のための結論

まず、24678番のポートをポートフォワーディングする。たとえば、docker runの際に-p 24678:24678のオプションを追加すればよい。

次に、nuxt.config.tsに以下の記述を追加する。

nuxt.config.ts

export default defineNuxtConfig({
 vite: {
 server: {
 watch: {
 usePolling: true,
 },
 },
 },
})

これでホットリロードが効くようになる。

ホットリロードとは

ホットリロードとは、コードを変更したときに自動的に反映してくれる機能のことである。コードを書いている最中に、ブラウザの画面が自動的に更新されるので、変更内容をすぐに確認できる。

ホットリロードが効かない問題を再現する最小限の手順

まず、Nuxt.jsでWebアプリケーションを開発するための環境をDocker Desktop for Windowsで構築する。以下のDockerfileをつくる。

Dockerfile

FROM node:19-bullseye-slim

USER node
WORKDIR /home/node

EXPOSE 3000

作ったDockerfileをビルドする。

docker build -t test-nuxt .

ビルドしたイメージを用いてコンテナを立ち上げる。

docker run --name test-nuxt-app -it --rm -p 3000:3000 -v ${pwd}:/home/node test-nuxt /bin/bash

次に、Nuxt.jsのWebアプリケーションを生成し起動する。

コンテナ内で実行する

cd ~/
npx nuxi init my-nuxt-app
cd my-nuxt-app
npm install
npm run dev

この時点で、ソースコードを変更し、ホットリロードが効くか確認する。ソースコードの変更がリアルタイムで反映されない場合、ホットリロードが機能していないとわかる。

解決法

まず、24678番のポートをポートフォワーディングする。Nuxt3では、ホットリロード用に24678ポートで接続を待ち受けるためである。ポートフォワーディングは、たとえば、docker runの際に-p 24678:24678のオプションを追加すればよい。Docker Composeを利用しているなら、portsに24678:24678を追加する¹。

docker run --name test-nuxt-app -it --rm -p 3000:3000 24678:24678 -v ${pwd}:/home/node test-nuxt /bin/bash

次に、nuxt.config.tsに以下の記述を追加する。

nuxt.config.ts

export default defineNuxtConfig({
 vite: {
 server: {
 watch: {
 usePolling: true,
 },
 },
 },
})

このコードにより、ホットリロードが有効化され、ソースコードの変更がリアルタイムで反映されるようになる。

手順が正しく行われ、ホットリロードが有効になったかを確認するには、npm run devでアプリケーションを起動し、ソースコードを変更してみれば良い。ソースコードを変更すると、その変更がリアルタイムで反映され、手動でリロードすることなくアプリケーションの挙動を確認できる。

参考文献・URL

Nuxt3で実務想定の実装環境を構築する - Qiita

TL;DR 実際に案件で使うであろうモジュールを導入して、実務用の環境整備を行うための手順メモです。今回使えるようにするもの Nuxt3 Scss TypeScript ESLint Storybook Vitest 手順 Nuxt3のインストール $ np...