💻 Dottiq Code Kit 開発ログ
HTML・CSS・JavaScriptなどのコードを整理して、きれいに整えてから保存したい。 Web制作やプログラミングをしていると、そう感じる場面が本当に多くあります。
これまでも、オンラインで使えるコード整形ツールをいくつかブックマークして使っていましたが、 「動くけど見た目が味気ない」「UIがごちゃついていて直感的に使いにくい」と感じることが多く、 自分用にカスタムしたくなったのがきっかけです。
🎯 自分がよく使うからこそ、気持ちよく使いたい
頻繁に使うツールこそ、自分の好みに合わせて気持ちよく使えるようにしたい。 同じことができるなら、見た目がかっこいい方が絶対にいい。 そう思って、自分専用のコード整形ツール「Dottiq Code Kit」をつくることにしました。
💡 コード整形ライブラリの存在にびっくり
最初は、正規表現などを駆使して自分で整形ロジックを書く必要があると思っていたのですが、 調べてみると、JavaScriptで使える強力な整形ライブラリがあることを知って驚きました。
- Prettier：設定は少なめ、意見のある一貫した整形スタイル
- js-beautify：かなり細かくカスタマイズ可能、柔軟性が高い
最初は「細かく調整できた方がいい」と思って js-beautify を選びました。
⚠️ js-beautifyでは思い通りにならなかった
実際に使ってみると、思ったように整形されないケースが多くて苦戦しました。
- <script> や <style> タグの中身が崩れる
- 行末で変な位置に改行される
- HTMLファイル全体を整形するとタグの順番が変わる
indent_inner_html や wrap_attributes などのオプションを色々試しましたが、 安定して理想の見た目に整形するのは難しく、 HTMLとJSを分けて処理するような回避策も限界がありました。
🔁 Prettier に切り替えて一発解決
第二候補だった Prettier に切り替えてみたところ、これが大正解。 細かい設定はできませんが、毎回一貫した美しい整形結果が得られるのがとても快適です。 「とりあえず整形して読みやすくしたい」という用途には、むしろシンプルな方がちょうどいいと感じました。
🛠 機能とその実装
Dottiq Code Kit には、以下のようなシンプルなボタンを用意しています。
▶️ 整形する
Prettierを使って、選択した言語（HTML / CSS / JS）で整形を実行します。
prettier.format(code, { parser: selectedLanguage, plugins: prettierPlugins });📋 コピー
整形後のコードをクリップボードにコピーします。「Copied!」の表示が一瞬出てフィードバックされます。
navigator.clipboard.writeText(output.value).then(() => { copyButton.textContent = "Copied!"; setTimeout(() => copyButton.textContent = "Copy", 1000); });🧼 クリア
入力欄・出力欄の内容をすべて削除します。
input.value = ''; output.value = '';🔄 入れ替え
出力欄の内容をそのまま入力欄に移して、繰り返し整形できるようにします。
input.value = output.value; output.value = '';📋 コピー機能が便利すぎたので、Text Kit にも導入
この「コピー」ボタンが思いのほか便利だったので、以前つくった Dottiq Text Kit にも同じ機能を追加しました。 ツール間で共通機能を流用できるのも、自作ツールの醍醐味ですね。
🌱 小さく育てていく開発スタイルが楽しい
Dottiq Text Kit と同じく、Dottiq Code Kit も最初は最低限の機能だけでスタートしました。 そこから「これもあった方が便利だな」と思ったタイミングで少しずつ育てていくこのスタイルが、 自分にとって一番楽しく、自然な開発の形だと感じています。
🚀 今後追加したい機能
- ダークモード対応
- 整形後のコードをファイルで自動ダウンロード
- サンプルコードの自動挿入
- URLパラメータでコードを事前入力
🧩 まとめ
Dottiq Code Kit は、コードを美しく整形することに特化したシンプルなツールです。 見た目の心地よさ、操作のしやすさ、自分にとって気持ちのいい設計。 「どうせなら使っていて楽しいツールがいいよね」という気持ちから生まれました。
今後も気が向いたときに少しずつ手を加えていきながら、 自分自身が気持ちよく使えるツールとして育てていきたいと思っています。