Nix で作る Zenn 執筆環境 - Nix を使い始めたきっかけ・試行錯誤した事

Nix ~Nix で作る Zenn 執筆環境 を使い始めたきっかけ・試行錯誤した事~ ryu 2025/10/18 Nix meetup #4 [Nix 日本語コミュニティ]

日本語コミュニティ] 自己紹介: ryu Nix meetup #4 [Nix バックグラウンド: 非 IT 系企業の社内 SE エンジニア歴 1 年 C#/Python/Docker/Terraform Azure/Snowflake/RPA Nix 歴: 3 か月（2025/7～） GItHub: ryuryu333 Zenn: trifolium 2025/10/18 ryu(@ryu_trifolium) 2

Nix meetup #4 [Nix 日本語コミュニティ] 今日話すこと を使い始めたきっかけ Nix で作成した Zenn 執筆環境の紹介 Nix 2025/10/18 ryu(@ryu_trifolium) 3

Nix meetup #4 [Nix 日本語コミュニティ] 今日話すこと ＞Nix を使い始めたきっかけ Nix で作成した Zenn 執筆環境の紹介 2025/10/18 ryu(@ryu_trifolium) 4

Nix meetup #4 [Nix 日本語コミュニティ] テックブログ 書いていますか？ 2025/10/18 ryu(@ryu_trifolium) 5

Nix meetup #4 [Nix 日本語コミュニティ] 私は Zenn で記事を書いています メディアキット https://zenn.dev/mediakit 2025/10/18 ryu(@ryu_trifolium) “ “ Zenn 6

• https://zenn.dev/mediakit

日本語コミュニティ] ブラウザ（Zenn）での記事作成画面 Nix meetup #4 [Nix 2025/10/18 ryu(@ryu_trifolium) 7

Nix meetup #4 [Nix 日本語コミュニティ] ローカルエディタも利用可能！！ 2025/10/18 ryu(@ryu_trifolium) 8

日本語コミュニティ] ブラウザでの記事執筆と比べると... Nix meetup #4 [Nix 管理できる 好きなエディタが使える（e.g. VSCode, Vim, etc.） Linter が利用可能 その他カスタマイズの可能性は無限大 “ cf. Zenn の 2 種類の執筆方法について（ Zenn 公式） Git 2025/10/18 ryu(@ryu_trifolium) “ https://zenn.dev/zenn/articles/editor-guide 9

• https://zenn.dev/zenn/articles/editor-guide

Nix meetup #4 [Nix 日本語コミュニティ] VSCode での作成画面 2025/10/18 ryu(@ryu_trifolium) 10

日本語コミュニティ] ローカル環境で書くために... Nix meetup #4 [Nix Node.js のパッケージである Zenn CLI が必要 npm install zenn-cli 2025/10/18 ryu(@ryu_trifolium) 11

Nix meetup #4 [Nix 日本語コミュニティ] ローカル PC に Zenn でしか使わない Node.js パッケージを入れるのは嫌だな... 2025/10/18 ryu(@ryu_trifolium) 12

Nix meetup #4 [Nix 日本語コミュニティ] Docker で Zenn 専用の環境を作るぞ ↓ 実際に作ってみた で始める快適 執筆環境 Dev Containers Zenn https://zenn.dev/trifolium/articles/5e7cd43586b68a 2025/10/18 ryu(@ryu_trifolium) 13

• https://zenn.dev/trifolium/articles/5e7cd43586b68a

Nix meetup #4 [Nix 日本語コミュニティ] わざわざコンテナを作成するのは非効率では？ コンテナ内で Git を使うのですら一苦労 ホスト PC（Winodws） -> WSL（Ubuntu） -> Docker Container -> GUI はホスト PC の VSCode 経路が複雑でエラー調査が大変だった を隔離したい でも Git などはホスト側を使って楽がしたい Zenn CLI 2025/10/18 ryu(@ryu_trifolium) 14

Nix meetup #4 [Nix 日本語コミュニティ] Nix の devShell というのが便利らしい... ↓ 実際に使ってみた で作る ローカル執筆環境 WSL × Nix × VSCode Zenn https://zenn.dev/trifolium/articles/007bff63247432 https://github.com/ryuryu333/zenn_contents_nix_env_template 2025/10/18 ryu(@ryu_trifolium) 15

• https://zenn.dev/trifolium/articles/007bff63247432
• https://github.com/ryuryu333/zenn_contents_nix_env_template

Nix meetup #4 [Nix 日本語コミュニティ] 今日話すこと を使い始めたきっかけ ＞Nix で作成した Zenn 執筆環境の紹介 Nix 2025/10/18 ryu(@ryu_trifolium) 16

日本語コミュニティ] 作成した Zenn 執筆環境の特徴 Nix meetup #4 [Nix ：git などは WSL 側のものをそのまま使用 direnv ： devShell を自動起動 Node.js 24 固定 + lockfile から 構築 go-task で作業簡略化： / / / VSCode task ：フォルダを開くと 自動実行 treefmt で Linter 一括実行： markdownlint ・ textlint ・ cspell... devShell node_modules lint update install uninstall zenn preview 2025/10/18 ryu(@ryu_trifolium) 17

Nix meetup #4 [Nix 日本語コミュニティ] 色々と書きましたが メジャーなツールを組み合わせているだけです ↓ Nix 関連を中心に紹介していきます 2025/10/18 ryu(@ryu_trifolium) 18

Nix meetup #4 [Nix 日本語コミュニティ] devShell 開発用のシェル環境を作成 環境外の既存ツールを利用可能（便利！） 今回は Zenn 執筆用 + Node パッケージ管理用の 2 環境を用意 2025/10/18 ryu(@ryu_trifolium) 19

Nix meetup #4 [Nix 日本語コミュニティ] devShell # flake.nix devShells.default = pkgs.mkShell { packages = [pkgs.zenn-cli]; }; $ zenn --help zenn: command not found # devShell を起動すると zenn コマンドが利用可能になる $ nix develop $ which zenn /nix/store/g3311a4zplf96vmmp3ygia615y52lsln-zenn-cli-env-node-modules-1.0.0/node_modules/.bin/zenn # devShell 外のツールも使える $ which git /home/ryu/.nix-profile/bin/git 2025/10/18 ryu(@ryu_trifolium) 20

Nix meetup #4 [Nix 毎回 日本語コミュニティ] nix develop 2025/10/18 ryu(@ryu_trifolium) を実行するのは面倒だな... 21

Nix meetup #4 [Nix 日本語コミュニティ] direnv ・nix-direnv direnv ディレクトリごとに自動で環境変数やシェル環境を切り替える devShell を自動起動する（direnv が必要） “ https://direnv.net/ https://github.com/nix-community/nix-direnv 2025/10/18 ryu(@ryu_trifolium) “ nix-direnv 22

• https://direnv.net/
• https://github.com/nix-community/nix-direnv

Nix meetup #4 [Nix 日本語コミュニティ] や 毎回 git direnv も Nix で管理したいな... に書くのも面倒だな... flake.nix 2025/10/18 ryu(@ryu_trifolium) 23

Nix meetup #4 [Nix 日本語コミュニティ] home-manager を用いてユーザーのホーム環境を管理する （設定ファイル・ツール構成など） Git や direnv など汎用的に利用するツールを管理 Nix 書いた記事： WSL x home-manager で dotfiles を管理する - 4手法の比較と使用方法 - https://zenn.dev/trifolium/articles/642043cbae5f21 2025/10/18 ryu(@ryu_trifolium) “ “ “ “ https://github.com/nix-community/home-manager 24

• https://github.com/nix-community/home-manager
• https://zenn.dev/trifolium/articles/642043cbae5f21

Nix meetup #4 [Nix

日本語コミュニティ]

home-manager
{ config, pkgs, ... }:
{
home.packages = with pkgs; [
git
bash
direnv
nix-direnv
];
home.file = {
".gitconfig".source = git/.gitconfig;
".bashrc".source = bash/.bashrc;
".profile".source = bash/.profile;
};
}
2025/10/18 ryu(@ryu_trifolium)

25

Nix meetup #4 [Nix 日本語コミュニティ] Nixpkgs で利用可能なパッケージの大規模コレクション 大抵のツールはここに登録されている Zenn-CLI も登録済み！！ NixOS Search - Packages で検索すると楽 Nix https://search.nixos.org/packages 2025/10/18 ryu(@ryu_trifolium) “ “ https://github.com/NixOS/nixpkgs 26

• https://search.nixos.org/packages
• https://github.com/NixOS/nixpkgs

Nix meetup #4 [Nix 日本語コミュニティ] Nixpkgs に無い場合はどうするんだ...？ 今回だと、一部の Node.js パッケージが無かった e.g. textlint 2025/10/18 ryu(@ryu_trifolium) のルールプリセット 27

Nix meetup #4 [Nix 日本語コミュニティ] importNpmLock importNpmLock.buildNodeModules : から node-modules を構築 : プロジェクトルートに node_modules のシンボリックリンクを作成 package-lock.json importNpmLock.hooks.linkNodeModulesHook $ ls flake.nix node_modules ... $ ls -l node_modules | grep "zenn-cli ->" zenn-cli -> /nix/store/g3311a4zplf96vmmp3ygia615y52lsln-zenn-cli-env-node-modules-1.0.0/node_modules/zenn-cli “ “ https://github.com/NixOS/nixpkgs/tree/master/pkgs/buildsupport/node/import-npm-lock 2025/10/18 ryu(@ryu_trifolium) 28

• https://github.com/NixOS/nixpkgs/tree/master/pkgs/build-support/node/import-npm-lock

Nix meetup #4 [Nix 日本語コミュニティ] importNpmLock # flake.nix devShells.default = pkgs.mkShell { packages = [ importNpmLock.hooks.linkNodeModulesHook ]; npmDeps = importNpmLock.buildNodeModules { inherit npmRoot nodejs; }; }; 2025/10/18 ryu(@ryu_trifolium) 29

Nix meetup #4 [Nix 日本語コミュニティ] node modules を再現するまでの流れ を利用して package.json、package-lock.json を更新 npm を利用するための devShell を定義しました npm nix develop .#node -c npm install -D zenn-cli --package-lockonly nix develop が構築される （不定期）nuc を利用してパッケージの更新チェック node_modules nix develop .#node -c ncu -u 2025/10/18 ryu(@ryu_trifolium) 30

日本語コミュニティ] 参考資料 Nix meetup #4 [Nix レポジトリの に言語ごとのガイドがある NixOS languages-frameworks/javascript.section.md https://github.com/NixOS/nixpkgs/blob/master/doc%2Flanguagesframeworks%2Fjavascript.section.md#javascript-language-javascript 2025/10/18 ryu(@ryu_trifolium) 31

• https://github.com/NixOS/nixpkgs/blob/master/doc/languages-frameworks/javascript.section.md#javascript-language-javascript

Nix meetup #4 [Nix 日本語コミュニティ] 細かい解説はこちらの記事に書きました ライブラリを管理する 環境構築 “ Nix × Node.js https://zenn.dev/trifolium/articles/6678b0c0fb0d27 2025/10/18 ryu(@ryu_trifolium) “ 非登録の “ で “ node2nix Nixpkgs Node https://zenn.dev/trifolium/articles/32ff89d4e14815 32

• https://zenn.dev/trifolium/articles/32ff89d4e14815
• https://zenn.dev/trifolium/articles/6678b0c0fb0d27

Nix meetup #4 [Nix 日本語コミュニティ] パッケージの更新管理 毎回、長いコマンドを打つのは面倒... Node.js nix develop .#node -c npm install -D zenn-cli --package-lock-only 更新の度に devShell を再起動するのも面倒... direnv reload 2025/10/18 ryu(@ryu_trifolium) 33

Nix meetup #4 [Nix 日本語コミュニティ] go-task タスクランナー、長いコマンドを簡潔なコマンドで実行する As-is: nix develop .#node -c npm install -D zenn-cli --package-lockonly direnv reload To-be: task install --zenn-cli 2025/10/18 ryu(@ryu_trifolium) “ “ https://github.com/go-task/task 34

• https://github.com/go-task/task

日本語コミュニティ] 作ったタスク Nix meetup #4 [Nix $ task task: Available tasks for this project: * check: -> node:update:check * install: -> node:install & utl:reload (aliases: add) * lint: -> utl:lint * reload: -> utl:reload (aliases: re) * uninstall: -> node:uninstall & utl:reload (aliases: remove, rm) * update: -> node:update & utl:reload (aliases: up) * node:install: Add package to package.json and package-lock.json (requires args e.g. <PackageName>@<Version>) * node:uninstall: Remove package from package.json and package-lock.json (requires args e.g. <PackageName>) * node:update: Update packages and refresh package-lock.json * node:update:check: Check for outdated packages * node:update:lockfile: Refresh package-lock.json from package.json * node:update:packages: Update packages to the latest version (only package.json) * utl:lint: Run linters * utl:reload: Reload Nix devShell environment 2025/10/18 ryu(@ryu_trifolium) 35

Nix meetup #4 [Nix 日本語コミュニティ] ここからは Nix と無関係なツールです 2025/10/18 ryu(@ryu_trifolium) 36

Nix meetup #4 [Nix 日本語コミュニティ] ブラウザでのプレビューの度に を実行するのは面倒... zenn preview 2025/10/18 ryu(@ryu_trifolium) 37

Nix meetup #4 [Nix 日本語コミュニティ] VSCode task のタスク機能を利用して、ディレクトリを開く際に を自動実行 ※ブラウザでプレビューするのに実行が必要 VSCode zenn preview 2025/10/18 ryu(@ryu_trifolium) 38

Nix meetup #4 [Nix 日本語コミュニティ] せっかくだから Linter を用意したい... 良い感じにリアルタイム検出してほしい... 2025/10/18 ryu(@ryu_trifolium) 39

Nix meetup #4 [Nix 日本語コミュニティ] Linter （Markdown の文法チェック） textlint （日本語の文書校正） markdownlint （リンターでチェックしない領域を指定） textlint-rule-preset-ja-spacing （日本語周りにおけるスペースの有無を指定） textlint-rule-preset-ja-technical-writing （技術文書向けのルールプリセット） textlint-rule-terminology （英語の技術文書内の用語のスペルをチェック） textlint-filter-rule-comments - cspell （スペルミスの検出） - lychee（URL リンク切れチェック） 2025/10/18 ryu(@ryu_trifolium) 40

Nix meetup #4 [Nix 日本語コミュニティ] 2025/10/18 ryu(@ryu_trifolium) 41

Nix meetup #4 [Nix 日本語コミュニティ] CLI で Linter を実行するのが手間だな... Linter の種類多すぎ 2025/10/18 ryu(@ryu_trifolium) 42

Nix meetup #4 [Nix 日本語コミュニティ] treefmt リンター・フォーマッターを一括実行する [formatter.md] command = "markdownlint-cli2" options = ["--config", "linter/.markdownlint-cli2.jsonc"] includes = ["articles/*.md"] priority = 1 [global] excludes = ["articles/00341ed49b7935.md", ...] 2025/10/18 ryu(@ryu_trifolium) “ “ https://github.com/numtide/treefmt 43

• https://github.com/numtide/treefmt

Nix meetup #4 [Nix 日本語コミュニティ] 各リンターの紹介・Zenn 用の設定など こちらの記事にまとめています 執筆用リンターを整備する で一括実行 Zenn - treefmt https://zenn.dev/trifolium/articles/5b01a68b80808b 2025/10/18 ryu(@ryu_trifolium) 44

• https://zenn.dev/trifolium/articles/5b01a68b80808b

Nix meetup #4 [Nix 日本語コミュニティ] 今日話したこと を使い始めたきっかけ Nix で作成した Zenn 執筆環境の紹介 Nix 2025/10/18 ryu(@ryu_trifolium) 45

日本語コミュニティ] 作成した Zenn 執筆環境の特徴（再掲） Nix meetup #4 [Nix ：git などは WSL 側のものをそのまま使用 direnv ： devShell を自動起動 Node.js 24 固定 + lockfile から 構築 go-task で作業簡略化： / / / VSCode task ：フォルダを開くと 自動実行 treefmt で Linter 一括実行： markdownlint ・ textlint ・ cspell... devShell node_modules lint update install uninstall zenn preview https://zenn.dev/trifolium/articles/007bff63247432 https://github.com/ryuryu333/zenn_contents_nix_env_template 2025/10/18 ryu(@ryu_trifolium) 46

• https://zenn.dev/trifolium/articles/007bff63247432
• https://github.com/ryuryu333/zenn_contents_nix_env_template

Nix meetup #4 [Nix 日本語コミュニティ] ご清聴ありがとうございました 2025/10/18 ryu(@ryu_trifolium) 47