yutaponのブログ

javascript界隈の興味あるネタを備忘録的に残しておく場所

フロントエンドでも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)
f:id:sskyu:20150222173946p:plain

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とは

f:id:sskyu:20140910195209p:plain

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

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

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

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

続きを読む