新ジャンルのjavascript圧縮難読化に挑戦 ～jojofy-js

新ジャンルの JavaScript圧縮難読化に挑戦By Hitoshi Kondo

khit99@gmail.com

最近の JS とビルド

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

最近の JS とビルド構文チェックJSHint, ESLint

altJS コンパイルtsify, coffeeify

ES2015 コンパイルBabel, Babelify

• JavaScript ビルドでは例えばこんなことをします。

依存性解決Browserify

altCSS コンパイルstylify, sassify

テンプレート処理Reactify,Mithrilify,Riotify

圧縮 / 難読化Uglify, minify

UT/ 操作テストKarma, mochify

※ ベースのビルドツールにより名称は異なります。

そんな中でのお気に入り• Sushi-fy

• キャッチフレーズは

• 圧縮・難読化ツール (Uglify2 の亜種 )

JavaScript を寿司のネタに握り直すツール

https://www.npmjs.com/package/sushify-js

そんな中でのお気に入り• Sushi-fy

Before After

そんな中でのお気に入り• Sushi-fy

• これをパクって今回のネタにしました。しかし後発の製品がヒットするためには• より強烈なインパクト• キラーコンテンツ

が必要

そして…できました。

jojofy

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

jojofy

jojofy の使い方は簡単• インストールnpm install jojofy-js –g

• 実行 (Uglify と一緒 )jojofyjs [source] -m -o [outfile]

実演

dojo を jojo にかえてみます

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

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

• 逆に先輩などにコードに対する率直な意見を聞きたいときは花京院を使いましょう• --green の例

※ 花京院のスタンド、　　ハイエロファント・グリーンに由来

その他、厳選された jojo-AA をご利用いただけます。

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

効果検証

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

難読化

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

圧縮

dojo.js dojo.jojo.js

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

http://www.slideshare.net/khit9/javascriptjs2016