難読化とMinifyについて

はじめに（調べるに至った経緯）

ども！ワンピースの光月おでんがカッコよすぎて日々アニメを漁りながら自宅待機中の光月ギノキンです。

（・・・ではでは）

さっそく調べるに至った経緯ですが、近頃はフロント業務をやらせてもらっていて、Sentry（監視ツール）に届いたエラーをchromeのdevツールで検証しているのですが、devツール上でmain.jsの中身を見てみるとソースコードの記述とは違う乱数があり、

なんだこれ。。エラー追えないやん。。。

ってなったので調べてみると、「難読化」、「Minify」を行っているらしかったので調べるに至りました。

難読化とは

プログラマーがソースコードなどを意図的に読みにくく記述することで、可読性を著しく下げたり、解析し辛くする技術を「難読化」と呼びます。プログラムやアルゴリズムを隠したり不明瞭にすることにより、攻撃者にソフトウェアプログラムをリバースエンジニアリングされることを防止できます。
参照元：「難読化」でリバースエンジニアリングを阻止しよう！

メリット

• 可読性を下げることよってリバースエンジニアリングを防止することができる
• 盗難防止のためにソースコードの公開を避ける
• サイズが小さくなるのでデータの読み込み速度が向上する
• 変数名が小さくなるのでローディング速度が向上する
• メモリ使用量が減少するため、キャッシュ回数が減り、速度が向上する

リバースエンジニアリング・・・ソフトウェアを厳密に分析しソースコードなどの情報を明らかにする行為のこと

デメリット

• デバックが複雑になる
  • JSファイル全て難読化せず、関数の中だけを難読化する
    =>function毎に分けて難読化することで、それぞれ管理しやすくなり、デバックもしやすくなる。

Minify(ミニファイ)とは

JavaScript（以下、JSと略記）やCSSのコード内の不要な改行やインデントを削除して、動作はそのままの状態で、圧縮・軽量化することをいいます。
参照元：Minify（ミニファイ）とは何か？圧縮方法とJS・CSSの軽量化のメリットを解説

メリット

• webページ速度が上がる
• ソースコードの解読を難しくし、盗用防止

デメリット

• デバック時の可読性が下がる

難読化とMinifyの違い

調べたが大きな違いは無いようで、理解としては下記の様な理解で問題なさそう。

難読化とは
変数名を乱数で短縮したり、可読性を下げて盗用を防止する

minifyとは
人間用のコメントやインデントなどを消して無駄を無くす

最後に

難読化については、関数単位で難読化すればデバックしやすくなるみたいなので、もうちょい調べてみようと思います。
セキュリティ面やパフォーマンスを維持しつつ、保守性も考えて開発をしていけたらみんなハッピー！！