ワイはおーぷん2ちゃんねるのなんでも実況J（ジュピター）板の住民、おんJ民や。
よろしく頼むで
🤔 何を作ったのか
HTMLの<canvas>って、レイヤー機能がないやん？
だからワイ、レイヤー付きのお絵かきライブラリを作ってnpmで公開したんやで。
パッケージ名はこれや：pnpm i @onjmin/oekaki
DEMO
(DEMOは Svelte + @onjmin/oekaki の例やが多分他のFWでも使えるやで)
🎯 背景と動機
実はワイ、掲示板アプリを作ってるんやけど、
その１機能として 「お絵描き機能」 を搭載したかったんや。
お絵かき系のnpmパッケージやと fabric.js が有名や。
でも、レイヤー管理しようとするとめっちゃ面倒くさい。
🥺🥺🥺🥺🥺🥺🥺🥺🥺🥺🥺🥺🥺🥺🥺🥺
- canvasを複数重ねて自前でレイヤー風に管理
- 各レイヤーの状態保存・切り替え・描画制御
🥺🥺🥺🥺🥺🥺🥺🥺🥺🥺🥺🥺🥺🥺🥺🥺
とかやろうとすると、 「これもう自分で作った方が早いやろ」 ってなったんや。
だから fabric.js を捨てて、TypeScriptでフルスクラッチ実装したんやで。
当初は、お絵描きのロジックをそのまま アプリ内libディレクトリっぽい場所に置いてたんやけど、
気づいたら 4ファイル にまで肥大化してもうて
これリポジトリごと分離した方が良くね？
ってことで、 お絵描きライブラリ部分だけnpmパッケージとして独立＆公開 したんや。
結果的に管理も開発もかなりスッキリしたんやで 🫵😎
開発環境のセットアップ
1. GitHubでリポジトリを作成
まずはパッケージ用にGitHubで新しいリポジトリを作成。
自動で生成された初期コミット付きのリポジトリをgit cloneして、ローカルで開発を始めたで。
2. 開発に必要なパッケージのインストール
以下のパッケージを使ったで：
-
typescript：TypeScriptで書くなら当然これがベースや。 -
@biomejs/biome：フォーマット・リントこなせる便利ツール。
eslintやprettierを組み合わせるよりも楽。 -
tsup：超高速なTypeScript用バンドラー。
バンドラーでググって上位に出てきたやつを選んだだけやで -
typedoc：TypeScriptの型から自動でドキュメントを生成してくれるやつ。
資料を作るのに時間かけてられんからな
📚完成したドキュメント：https://onjmin.github.io/oekaki
"devDependencies": {
"@biomejs/biome": "1.9.4",
"tsup": "8.5.0",
"typedoc": "0.28.4",
"typescript": "5.8.3"
}
💩不要と判断したモノ💩
-
ビルド不要のTS実行環境 →
tsx
デバッグしながら書くならtsxは便利なんやけど
もう出来上がってたから要らね -
🧪 テストツール →
jest
リント（biome）で型・構文エラーをきっちり潰せば正直十分じゃねーの？
3. npm公開までの流れ
アカウントだけ作れば誰でも公開できるやで
名前空間も取り放題や
"scripts": {
"build": "tsup",
"lint": "biome check .",
"format": "biome format . --write",
"docs": "typedoc src/index.ts --out docs",
"release": "pnpm run build && pnpm run lint && pnpm run format && pnpm run docs",
"patch": "pnpm version patch",
"publish-dangerous-dont-use-this-command": "pnpm publish --access public"
}
基本的には更新がしたくなったら３回コマンド叩けば済むようにしてるで
pnpm run release：ビルド + リントチェック + 整形 + ドキュメント生成
pnpm run patch：npmパッケージのバージョンを上げる
pnpm publish --access public：更新後の内容を公開
おわり
意外と簡単やな😳