yama-dev

JavaScriptライブラリやChrome拡張機能など、
小さなツールや日々扱っている技術スタックをまとめています。

GitHub を見る
Modules

JavaScript Modules

依存なしのバニラJSモジュール群。各カードはデモページへ移動します。
player-module-brightcove
Brightcove動画・音声プレイヤーを扱いやすくラップしたモジュール。再生速度や音量操作も公開。
GitHub デモ ↗
modal-module
モーダルダイアログを軽量に実装するためのモジュール。開閉制御とコールバックに対応。
デモ ↗
scroll-effect-module
スクロール連動でフェードイン・ズームインなどの演出を要素に付与するモジュール。
Document デモ ↗
canvas-downloader
テキスト・背景・画像をCanvas上で合成し、その場でプレビュー＆画像として書き出せるツール。
デモ ↗
count-module
数値をスクロールやトリガーに合わせてカウントアップ表示するモジュール。
Document デモ ↗
tab-ui
横/縦・ARIA・キーボード操作に対応したアクセシブルなタブUIコンポーネント。
Document デモ ↗
calendar-module
カレンダー表示と日付選択を提供するバニラJSモジュール。
Document デモ ↗
match-height-vanilla
要素の高さを揃えるユーティリティ。jQuery不要のVanilla実装。
Document デモ ↗
Extensions

Chrome Extensions

日々の作業を少し楽にする、小さな拡張機能。
Encode Utility
エンコード／デコードをすばやく行うユーティリティ。
デモ ↗
Quick Memo Clip
ブラウザ上でサクッとメモを残せるクリップツール。
デモ ↗
Table → JSON Converter
表データをワンクリックでJSONに変換。
デモ ↗
Duplicate Tab Sentinel
重複タブを検知して整理する常駐ツール。
デモ ↗
Stack

Tech Stack

Core
JavaScriptTypeScriptVueViteNode.js
Frontend
HTMLEJSEtaCSSSCSSWebGLThree.jsPixiJSReactNext.jsNuxt.jsPiniaVuetify
Backend / CMS
Node.jsPHPWordPressREST APIJWTMySQLSlimLaravelEloquentTwig
Tools / App
ElectronNode.js CLIChrome Extensionnpm PackageInternal Tools
Quality
ESLintPrettierStylelintVitestPlaywrightLighthouseaxeDOMPurify
Infrastructure
AWSLightsailEC2S3CloudFrontGitHub PagesVercelApacheDocker
Workflow
NeovimWezTermzshfzfripgrepfdbatlazygitGitGitHubGitHub ActionsRaycast
Documentation
MarkdownMarpBacklogSlackMicrosoft 365 (Teams / SharePoint / Lists)