第3のビール的なジャンルの圧縮難読化ツール作りに挑戦してみました

1. 新ジャンルのJavaScript圧縮
難読化に挑戦
By Hitoshi Kondo
khit99@gmail.com

2. 最近のJSとビルド
本来JavaScriptにコンパイルなどのビルドは必須ではありませんが…
いまどきのJavaScriptアプリではビルドが重要です。

3. 最近のJSとビルド
構文チェック
JSHint, ESLint
altJSコンパイル
tsify, coffeeify
ES2015コンパイル
Babel, Babelify
• JavaScriptビルドでは例えばこんなことをします。
依存性解決
Browserify
altCSSコンパイル
stylify, sassify
テンプレート処理
Reactify,Mithrilify,Riotify
圧縮/難読化
Uglify, minify
UT/操作テスト
Karma, mochify
※ベースのビルドツールにより名称は異なります。

4. そんな中でのお気に入り
• Sushi-fy
• キャッチフレーズは
• 圧縮・難読化ツール(Uglify2の亜種)
JavaScriptを寿司のネタに握り直すツール
https://www.npmjs.com/package/sushify-js

5. そんな中でのお気に入り
• Sushi-fy
Before After

6. そんな中でのお気に入り
• Sushi-fy
• これをパクって今回のネタにしました。
しかし後発の製品がヒットするためには
• より強烈なインパクト
• キラーコンテンツ
が必要

7. そして…できました。

8. jojofy

9. ジョ●ョの奇妙な難読化ツール
jojofy

10. jojofyの使い方は簡単
• インストール
npm install jojofy-js –g
• 実行 (Uglifyと一緒)
jojofyjs [source] -m -o [outfile]

11. 実演
dojoをjojoにかえてみます

13. キラーコンテンツ
従来のUglify2にはなかった新機能
• --dio
• --world
• --silver
• --green
• --exactly

14. • コードを盗んで楽をしようという輩にはdio様を使います。
• --dio の例

15. • 逆に先輩などにコードに対する率直な意見を聞きたいときは花京院を使
いましょう
• --green の例
※花京院のスタンド、
ハイエロファント・グリーンに由来
その他、厳選されたjojo-AAをご利用いただけます。

16. ※AAの確認にはプロポーショナルフォント(MS-PGothicなど)が必要です

17. 効果検証

18. 実際にやってみてわかりましたが、読む気がなくなる
心理的効果があるようです。
難読化

19. 圧縮効果はあまりありませんでした。（従来比80～90%)
圧縮
dojo.js dojo.jojo.js

20. JavaScriptビルドに興味のある方
• キャッチアップJavaScriptビルド ～ビルドから見るJSの今/2016春
いろいろな**fyを浅く広く知ることでJavaScriptの今を把握します
http://www.slideshare.net/khit9/javascriptjs2016