KaomojifyJSとかいうUglifyJSの亜種を試してみた

5 Minites of JavaScriptで紹介されていたKaomojifyJSをちょっと触ってみたという記事。

GitHub - Nekuromento/UglifyJS: JavaScript parser / mangler / compressor / beautifier library for NodeJS

はじめに

そもそもuglifyjsはjsのスペースとか改行などを取り除いたり、変数名を短くしてコードを圧縮するツールです。

生成されたコードは人間が読めないようなものになるので、難読化するツールとも言えます。

kaomojifyjsは難読化する際に、変数名などを顔文字化するツールです。
つまりネタツールのようです。

ちょっと触ってみた感じ、単に動かすだけならコマンドライン上で実行するのが
簡単だったので動かす手順を紹介します。

React入門用に簡単なアプリケーション作ってみる

React入門系の記事はもう結構出尽くしてる感ありますがせっかくなので私も。

今回はReact v0.13RC2を使って↓のアプリケーションを写経してみます。（Authorは私ではありません）

見ての通り、抵抗の値を計算するアプリケーションです。
Reactで書かれていたり、SVG使ってたり面白いソースですね。
ちなみに抵抗の色の仕様はこのようになってます。

抵抗のカラーコード

はじめに

React v0.13RC2を使う理由は現時点で最新版ということと、v0.13.0beta1でES6のclass構文が使えるようになったからです。

jsfiddleのソースは1ファイルにまとめて書かれていますが、これを1コンポーネント1ファイルに分割して書いてみます。

React(JSX)のビルドにはBabelが使えるので、前回作ったスケルトンの上に作っていきます。

フロントエンドでもES6構文使ってみる【webpack+babel-loader（旧6to5-loader）】

【--- 追記（2015/02/22）---】

2/15に6to5がBabelと名称変更したので、記事の内容もBabelを使うよう変更しました。

Not Born to Die · Babel

【--- 追記ここまで ---】

2/7にnode.js v0.12.0がリリースされました。
Node v0.12.0 (Stable)

安定版のメジャーアップデートでES6構文がいよいよ一般的になるのではないでしょうか。

そして最近良く聞くBabel(旧6to5)。

ES6+のコードをES5に変換してくれるということで、ES6構文を動かせる環境が浸透していないフロントエンドで役立つライブラリです。

Babelはgrunt, gulp, browserifyなど多数のビルドツールで扱えるプラグインが提供されているので、jsのビルド工程があるプロジェクトであれば簡単に導入できると思います。

今回は前の記事で作ったgulp+webpackプロジェクトをES6構文で動くようにしてみます。

はじめに

ES6で新しく使えるようになった構文はたくさんあるので、この記事では

• クラス
• モジュール
• Promise

だけ軽く触れます。（メインはES6構文を使えるようになることですので）

ちなみにES6で追加された機能はこちら。
lukehoban/es6features · GitHub

最終的なコードはこちらに上げておきました。
sskyu/gulp-webpack-skeleton at blog-20150207v2 · GitHub

gulp.jsを使ってフロントエンドのビルドをする【webpack, stylus】

この記事はIwate Developers Advent Calendar 2014の6日目の記事です。

Iwate Developers Advent Calendar 2014 - Qiita

記事の内容はというと、岩手にまったく関係ありません。

学生の頃はフロントエンドを軽視してクソコードを量産していたので、今の学生の方にこんな風に作り始めるといいよって紹介する感じで書きたいと思います。

はじめに

昨今のフロントエンド開発はとにかく複雑になってきていて、学習コストが半端なくなってきてます。

angularとかbackbone.jsとか、最近ではreact+fluxなど、トレンドの移り変わりが激しいです。

またGruntやgulp.jsなどのタスクランナーの活用がフロントエンドでは欠かせなくなっていて、使ってないなら今すぐ導入すべき、とも言えます。

最近gulp.jsを使っていて、gulp.jsのタスクを書く時にこんな感じで書いていくとメンテしやすいかもと思えてきたので紹介してみようと思います。

この記事でやること

gulp.jsを使って

• WebpackでJSをビルドする
• Stylusをビルドする

最終的なコードはこちらに上げておきました。

sskyu/gulp-webpack-skeleton at blog-20141206 · GitHub

gulpでsassをコンパイルするタスクを作る

何番煎じかわからないけど、gulpを使ってみたら中々良かったのでまとめてみます。

gulp.jsとは

gulp.js はフロントエンド用のタスクランナーってやつです。

同じタスクランナーの競合に Grunt がありますが、後発だけあってストリームを駆使して可読性の良い設定ファイルが書けます。

Gruntでできることは大体gulpでもできるので、どちらを使ったら良いかは好みの問題かも知れません。

この記事ではsassのコンパイルをするタスクと、関連してベンダープレフィックスを自動で付与するところまで紹介します。