モノクロタイム

I'm from the future!

【pnpm】pnpmを使うと規定ではないバージョンのNode.jsを使おうとする問題【Volta】

フロントエンド開発 Web

大変伝わりづらいのですがタイトルのとおりです。

年末年始にひとつWebサービスを開発したのですが、その環境構築で詰まりました。

具体的に言うと、あるパッケージがv22.x以降のNode.jsにしか対応していなかったのでVoltaを使ってNode.jsのバージョンアップを実施したところ、pnpmが使用しているNode.jsのバージョンがどうやっても新しいものに切り替わらずにパッケージのインストールに失敗し続けるという現象が起きました。

経緯

$ node -v
v24.12.0 # Node.jsのバージョンは24.12.0が入っている

$ pnpm node
Welcome to Node.js v24.12.0.      # pnpmもNode.jsのバージョンは24.12.0を使用しているはず
Type ".help" for more information.
>

$ pnpm i
 WARN  Ignoring broken lockfile at H:\dev\git\myapp: Lockfile H:\dev\git\myapp\pnpm-lock.yaml not compatible with current pnpm
 ERR_PNPM_UNSUPPORTED_ENGINE  Unsupported environment (bad pnpm and/or Node.js version)

This error happened while installing the dependencies of eslint-plugin-svelte@3.13.1

Your pnpm version is incompatible with "registry.npmjs.org/svelte-eslint-parser/1.4.1".

Expected version: 10.24.0 # pnpm10.x系は24.12.0系のNode.jsをサポートしているはずなのでNode.jsのバージョンと噛み合っていない可能性がある
Got: 8.15.4

This is happening because the package's manifest has an engines.pnpm field specified.
To fix this issue, install the required pnpm version globally.

To install the latest version of pnpm, run "pnpm i -g pnpm".
To check your pnpm version, run "pnpm -v".
Progress: resolved 85, reused 9, downloaded 0, added 0
続きを読む

技術書典19オフラインイベントお疲れさまでした

告知 イベント

毎度おなじみ技術書典に参加してきました。今回で19回目の開催！

techbookfest.org

前回の参加ログはこちらから。

reiji1020.hatenablog.com

今回の新刊

前回からハンドメイド×ITをテーマに本を作っています。前回は刺繍の図案や刺繍糸のサジェストにAIを使うという内容の本を書いたのですが、今回はエンジニアリング寄りの内容に軸を移し、

「自分がハンドメイド趣味を楽しむときに役立つツールを作ろう！」と思い立ってVibeCodingで爆速でサービス開発したときのTips本を書きました。

techbookfest.org

gyaopan.booth.pm

そもそもどんなサービスを作ったのか

ハンドメイドする人あるあるだと思うのですが、買い出しに来たはいいものの家にどんな資材があったか忘れてしまう・品番がわからなくなってしまうみたいな経験ありませんか？

特に私は整理整頓が大の苦手なので同じ色の刺繍糸を何本も買ってしまったり、似た色のビーズを取り違えて購入してしまうことが多くありました。常々自分の家に今なんの材料があるか手元でわかるようなサービスがあればいいのに…と思っていたところに現れたのがVibeCodingという開発手法でした。

私はフロントエンドエンジニアとして働いているのでAI抜きでもWebサービスのフロントエンド部分を作ることはできるのですが、DB設計やAPI設計などは明るくない分野です。ここをAIに部分的に手伝ってもらうことでおよそ一週間～二週間で自分だけのハンドメイド資材管理ツール「Beace」を開発することができました！

UI設計には自前のSvelteUIコンポーネントライブラリ「cclkit4svelte」を採用することで、CANDYCHUPSLab.ブランドだと一目でわかるデザインの画面を実現しました。

サイトマップ

Beaceのログイン後の画面

※図は新刊の中でも使用しているものと同じです

本職エンジニアのオレオレツール開発×VibeCodingはかなり相性がいい

実際に仕事中でも開発を行っているエンジニアは業務の一環でセキュアプログラミングやセキュリティリスクのないシステム設計を行う方法について自然と身についている方が多いと思います。例えばVibeCodingという開発手法ではコーディングのすべてをAIに一任しているせいでDBのアクセスキーやAPIキーをハードコーディングしたままリモートリポジトリ上にPushしてしまったりなどの問題が指摘されていますが、本職エンジニアの多くにはこういったAI起因の問題を先回りして回避する能力があります。

私もこれまでの開発経験をフル活用して「とにかくスピーディーな実装✕セキュリティリスクのない設計」をテーマにBeaceの開発を行いました。

新刊のダイジェスト音声解説も公開しています

本書の内容をNotebookLMに解説させた動画もあります。

youtu.be

今回の新しい試み

ソーイングセットのノベルティを作った

技術書典というイベントに来場される参加者の特性上どうしてもハンドメイド主体となると興味を持たれづらいのでブース前を素通りされることが多いです。

ただうちはこれから数回の技術書典では何が何でもハンドメイドでゴリ押しするぞ！！！という気持ちでノベルティを作りました。

こちらのノベルティはまだ在庫のご用意があります。BOOTHでのご購入のご予定がある方はぜひ！

iPadで実際にツールを触ってもらう

個人用アプリケーションなので外部向けに公開していない（ログイン制御あり）のですが、当日ブースではiPadをおいて実際のBeaceが稼働しているところを見ていただきました。

「おおーすごい！」「持ち物管理ツールいいよね」などなどの声をかけていただけました！

今後の予定

技術書典20、出るぞ！

まずはBeaceの機能拡張をして、次はBeaceと連携して「作った作品の写真と使った材料を記録するノートサービス」を作ろうと考えています。すでにFigmaで画面デザインを作り始めていて、こちらもシステム設計についてはAIと相談しながら進めていく予定です。

次回は技術書典も記念すべき20回！ということでなにか特別な本を作りたいですね…！ハンドメイド本総集編とか？次回はクロスステッチ×AI本が最有力ですが、果たして…！

引き続き商業誌をやりたい！

もう少し内容を一般化させて「趣味✕VibeCoding=最強！」みたいなテーマで商業誌を書きたいです。

文章を書くのは苦でないし寧ろ好きなのでぜひやりたいです。やらせてくださいっ！！

おわりに

完全に余談なのですが今回「お洋服すてきです！」と褒めてくださった方がいらっしゃいました！め～～～～～～っちゃうれし～～～～！！！ありがとうございました！！！

CANDYCHUPSLab.名義でサークル参加するときはとにかくサークル名やサークルの印象だけでも覚えてほしいので派手な格好をしています。

写真がなくて申し訳ないのですが当日の服装はこんな感じでした！

  • ワンピース：PINKHOUSE 2022年 aoki misakoコラボプリントロングワンピース（アカ）

  • ペチコート：PINKHOUSE 2024年 BerryRose 刺繍入りパッチワークスカート（ピンク）

  • コート：PINKHOUSE 2025年 ハロウィーンワンダーランドワッペン使いゼッケン付きブルゾン（クロ）

  • ネックレス： BABY, THE STARS SHINE BRIGHT 2025年 HEART TRUMPネックレス（ゴールド×エンジ×クロ）

  • ハット：Hoshibako Works ホイップクリームホールケーキ　ハット（いちご）

  • ソックス：しまむら×眞白ありすコラボ　リボン柄ハイソックス（アカ）

スペースに遊びに来てくださった方＆新刊を手に取っていただいた方ありがとうございました！技術書典はあと一週間とすこし続くんじゃ！

【vvvv gamma】GPT-5はビジュアルプログラミングの習得を手助けしてくれるか【GPT-5】

vvvv VibeCoding

GPT-5が出ましたね。

openai.com

会社でもとにかくAI使え！みたいなお達しが出まして、有償プランをプライベートでも使えるように補助金が出ているので色々使うようにしています。

エンジニアでAI活用といえば専らAIコーディング＆AIコードレビューですが、いわゆる文字列による構文が決まっているタイプのプログラミング言語には特効があり、特にフロントエンド系の業務をしているともう手放せない存在となりつつあるのではないでしょうか。私はそうです。

HTMLやCSSが書けることはわかった。プロジェクトを作れることもわかった。ジュニアエンジニアの教育目的として使えることもわかりました。

では構文がない(と言ったら語弊がありますが…)『ビジュアルプログラミング言語』を使うときAIは手助けをしてくれるのでしょうか？

今回はビジュアルプログラミング言語に「vvvv gamma」、AIモデルに「GPT-5(時々Thinking)」を採用しました。

vvvv gammaとはプロトタイピングに特化したビジュアルプログラミング言語の一種であり、特にCGを得意分野としています。

vvvv.org

続きを読む

【Gemini CLI】Gemini CLIを使って自作コンポーネントライブラリの開発効率を上げる

Svelte VibeCoding フロントエンド開発

Gemini CLIが発表されて数週間が経ち、その性能や挙動などがSNS上で多く共有されています。

会社から補助金が出ているのでChatGPTのPlusプランを契約しており、Gemini CLIが登場するまではcodexを使って一部のコードを書かせていましたがやはりコンソールから直接利用できるAIは違った便利さがありますね。使用方法が両者とも異なるのでシーンに合わせて使い分けています。

私はSvelte製のUIコンポーネントライブラリ「ccl-component-kit4svelte」を開発しているのですが、オレオレライブラリということもありユーザーは私一人かつ保守運用も私一人で実施しています。気楽に開発できていいけど欲しいコンポーネントは必ず自分で用意しなくてはいけないということもあり、新しくサービスを作ろうとするとまずコンポーネントライブラリ側の整備から始める…といったことがしばしば起こります。

github.com

コーディング特化のAIが出てきたことで、この「本来の開発をするまでの前準備」が劇的に楽になりました。同時に使い方のコツなどもなんとなくわかってきたのでまとめておきます。

※このブログ記事は全て人力で書いてます。AI使ってないよ！

続きを読む