見出し画像

7/10 minifyツール作ってます(JS/CSS/HTML対応)

はおはお。

minifyツールを作ってます。


minifyって何?

まずは用語の意味を確認しましょう。

こんなの。

とにかく不要なものを削除して軽くしよう!というのが目的です。

軽くなるといいことあるの?

基本的にJSはそのまま素直に解析していくので、使用されることのない空白やコメントもパースしていきます。

小さければ大した影響にはなりませんが、チリも積もればで負荷が増えていきます。そうなると表示されるまでに時間がかかったり、崩れながらの表示になってしまいます。また、速度(起動時)という観点から、SEOにも好影響が出てきます。

もう便利なサイトやソフトがあるけど?

探せばいくらでもありますが、使用に際し、要件を満たすものがなかったのが実情です。

既成ツールを探してみるとオンラインのものが多く、オフラインではなかなかこれというものがない。できることならスタンドアロンがいい。

それに処理できるファイルの単位が単体だったり、JS CSS HTMLのどれかだったりと、まとめて一括!というのが理想です。

スクリーンショット(製作中)

minifyしている様子

必須要件(最低限)

  • OSに依存しない

  • 複数ファイルを処理できる

  • 操作が簡単

  • オフライン(スタンドアロン)

  • JavaScript CSS HTMLに対応

  • 入力と出力は別(オリジナルデータの保護)

意外と全てを満たしているものってないんですよね。OSに依存しないという制約から、ブラウザで動くアプリにしたいと思います。

基本やること(実装プロセス)

少し端折りながら実装プロセスを。それぞれの工程には同時にUIを追加したりしています。

まずは、

  • JS, CSS, HTMLの不要な空白やインデント、改行などをバッサリ消す

があれば一応minify? これに追加で、

  • 変数名を短くしたりする簡略化

変数名などを簡略化することで名前が短くなり速度的にも有利になります。また、簡易的な難読化としても使用できます。

  • 何が書いてあるのかわかりにくくする難読化

変数名などを書き換えられるところをわかりにくく書き換えて難読化するものです。簡略化とは違い、変数名を短くしたりするわけではないためギリギリまでの容量削減に使用したい場合には向きません。

ここまでの機能追加で一般的な仕様に耐えうるのではないかと思います。

実験的機能の追加

さらに最適化をしたい場合の機能です。

  • JSのドット記法をブラケット記法にする(object.property→object["property"])。プロパティ・マングルというやつですね。こうするとプロパティが文字列になるので 、_v0 とかの定数にして文字数を減らす方法

  • 重複している文字列リテラルを定数化し、文字数を減らす。ストリング・マングルというやつですね。可読性や未検証のため未実装

これらは最適化には適していますが、やはり可読性は下がります。

他との差別化のための機能⭐️

まぁ、JS, CSS, HTMLに対応しているだけでも、それなりにいいんじゃない?と思ったりしてますが、さらに追加で、

  • HTMLにJSとかCSSをくっつけて1ファイル化

なんて機能も実装します。単純にまとめるだけなので複雑なものには適していません。以下のような一つのHTMLに複数のJSといったものに適しています。

my-web-app/
│
├── index.html          # アプリのメイン
├── style.css           # デザイン・レイアウト
└── script.js           # 動き・ロジック

これをまとめると

my-web-app/
│
└── index.html          # アプリのメイン(JSやCSSを内包)

このようになりシングルファイルアプリケーションにすることができます。

minifyツールもパッケージングした形での公開になる予定です(セルフパッケージング)。

注意する点としては、Blobを使用しますのでCSP(Content Security Policy)など気になる場合は適切な対応をするか、使用自体を避けることを推奨しています。

今後の展望

比較的自由度の高いツールなので実験的機能を含め、新しい機能の追加などをしていく予定です。それでいて簡単な使い方にしていきます。

コンテンツの整備を含め、WPFアプリ化を進めてVectorなどのサイトにも登録していきたいです。

ひとこと

リリースしたらぜひ使ってみてください!

ライセンス

MIT License

Copyright (c) 2026 遊月 (Yu-zuki)

Permission is hereby granted, free of charge, to any person obtaining a copy
of this software and associated documentation files (the "Software"), to deal
in the Software without restriction, including without limitation the rights
to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
copies of the Software, and to permit persons to whom the Software is
furnished to do so, subject to the following conditions:

The above copyright notice and this permission notice shall be included in all
copies or substantial portions of the Software.

THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
SOFTWARE.

--------------------------------------------------------------------------------
Third-Party Software Licenses
--------------------------------------------------------------------------------

This software includes or makes use of the following third-party components. 
The respective licenses for these components are as follows:

1. javascript-obfuscator (obfuscator.js)
   - License: BSD 2-Clause "Simplified" License
   - Copyright (c) 2016 Timofey Kachalov
   
   Redistribution and use in source and binary forms, with or without
   modification, are permitted provided that the following conditions are met:

   * Redistributions of source code must retain the above copyright notice, this
     list of conditions and the following disclaimer.
   * Redistributions in binary form must reproduce the above copyright notice,
     this list of conditions and the following disclaimer in the documentation
     and/or other materials provided with the distribution.

   THIS SOFTWARE IS PROVIDED BY THE COPYRIGHT HOLDERS AND CONTRIBUTORS "AS IS"
   AND ANY EXPRESS OR IMPLIED WARRANTIES, INCLUDING, BUT NOT LIMITED TO, THE
   IMPLIED WARRANTIES OF MERCHANTABILITY AND FITNESS FOR A PARTICULAR PURPOSE ARE
   DISCLAIMED. IN NO EVENT SHALL THE COPYRIGHT HOLDER OR CONTRIBUTORS BE LIABLE
   FOR ANY DIRECT, INDIRECT, INCIDENTAL, SPECIAL, EXEMPLARY, OR CONSEQUENTIAL
   DAMAGES (INCLUDING, BUT NOT LIMITED TO, PROCUREMENT OF SUBSTITUTE GOODS OR
   SERVICES; LOSS OF USE, DATA, OR PROFITS; OR BUSINESS INTERRUPTION) HOWEVER
   CAUSED AND ON ANY THEORY OF LIABILITY, WHETHER IN CONTRACT, STRICT LIABILITY,
   OR TORT (INCLUDING NEGLIGENCE OR OTHERWISE) ARISING IN ANY WAY OUT OF THE USE
   OF THIS SOFTWARE, EVEN IF ADVISED OF THE POSSIBILITY OF SUCH DAMAGE.

2. JSZip (jszip.min.js)
   - License: MIT License
   - Copyright (c) 2009-2016 Stuart Knightley, David Duponchel, Franz Buchinger, António Afonso

   Permission is hereby granted, free of charge, to any person obtaining a copy
   of this software and associated documentation files (the "Software"), to deal
   in the Software without restriction, including without limitation the rights
   to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
   copies of the Software, and to permit persons to whom the Software is
   furnished to do so, subject to the following conditions:

   The above copyright notice and this permission notice shall be included in all
   copies or substantial portions of the Software.

   THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
   IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
   FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
   AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
   LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
   OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
   SOFTWARE.



いいなと思ったら応援しよう!

遊月 悉く書を信ずれば則ち書無きに如かず