はじめまして、Rui Tools（ルイツールズ）の開発者です。
昨今のWebフロントエンド開発では、ReactやVue、Next.jsなどのモダンフレームワークを採用するのがすっかり当たり前になりました。しかし、当サイトで公開している計算ツール群（単価比較、割引計算、割り勘、文字数カウント、ランダムルーレット）は、外部ライブラリやビルドツールを一切使わず、プレーンなHTML5 / Vanilla JavaScript / CSSだけで制作されています。
なぜ現代において敢えてこのクラシックな技術スタックを選んだのか、その開発の舞台裏とこだわりの設計哲学をお話しします。
1. 「店頭で3秒で起動する」ためのゼロ・オーバーヘッド
単価比較や割引計算ツールが最も使われるのは、「スーパーやドラッグストアの店頭、スマートフォンのモバイル回線」です。地下の食品売り場など、電波が不安定な場所で重いJavaScriptのダウンロード待ちは致命的です。
- 初回転送量：HTML+CSS+JSを合わせてもわずか20KB未満（一般的なSPAフレームワークの数百KB〜数MBに比べ圧倒的）。
- パース＆実行コスト：仮想DOMの初期化やハイドレーションがなく、ブラウザのメインスレッドが即座に解放。
- 依存関係ゼロ（Zero Dependency）：npmパッケージの脆弱性やライブラリの破壊的バージョンアップに悩まされない。
「使いたい」と思ったその瞬間に電卓感覚でパッと開き、瞬時に答えが出る。この圧倒的なレスポンス速度こそが、道具としての最大の価値だと考えています。
2. インラインCSSを外部化したらサイト全体で約600行削れた話
初期バージョンではスピードを最優先したため、各ツールのHTML内に直接 <style> タグでインラインCSSを記述していました。
しかしツールが増えるにつれてメンテナンスが大変になり、先日思い切ってすべてのスタイルを単一の css/style.css に集約する大規模なリファクタリングを実施しました。
結果として、重複していたボイラープレートCSSが約600行も削減され、ブラウザキャッシュが全ページで効くようになり、2ページ目以降の読み込み速度がさらに劇的に向上しました。
- PCローカル直接起動への対応：開発時も本番も、ダブルクリックで開けるよう相対パスで徹底管理。
- スマートな戻る動線：
sessionStorageを活用し、解説記事や固定ページから直前のツールへ賢く戻れる仕組みを構築。 - 広告で画面を埋め尽くさない：操作を邪魔するポップアップを廃止し、下部のフリースペースのみに限定。
3. 今後のロードマップと展望
Rui Toolsは「日々の暮らしをちょっと身軽にする」をテーマに、これからも小さな便利ツールを順次追加していく予定です。また、現在はスマートフォンでの使いやすさを最優先に設計していますが、今後はPC大画面でもさらに快適に使えるよう、2カラムレイアウトやキーボードショートカットなどのレスポンシブ最適化も進めていきます。
「こんな計算ツールが欲しい！」「この単位も追加してほしい」といったリクエストがありましたら、フッターの「お問い合わせ」からいつでも気軽にお声がけください！