フロントエンドでもES6構文使ってみる【webpack+babel-loader（旧6to5-loader）】
【--- 追記（2015/02/22）---】
2/15に6to5がBabelと名称変更したので、記事の内容も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
続きを読む
TypeScriptを使ったBackbone.jsアプリケーションの書き方
先日TypeScript使ってBackbone.jsのアプリケーションを書いて、いろいろハマったので備忘録的に書いておきます。
はじめに
既にTypeScript+Backbone.jsのサンプルはいくつか上がってたりします。
有名なのはTypeScript+Backbone.jsでTodoアプリケーションを作るやつ。
tastejs/todomvc
非常に簡単そうなのですが、型定義を独自に書いてあります。
個人的には、型定義はDefinitelyTypedでホストされているやつを使いたく、上述したサンプルコードではあまり参考にならなかったりします。
あとどうせならコンパイルオプションの--module amdを試したかったので、RequireJSを使ってモジュール管理をしようと思います。
(browserifyの使い方ちゃんとわかってない)
Hubot+HipChat+Yukkuroidで喋るBotを作る
Hubotのスクリプトを作るときに、Yukkuroidと連携するとすぐに声を加えることができるのでオススメ。
やってみたら簡単にできました。
環境について
今回の動作環境はこちら。
Yukkuroidの話なので、Macじゃない方はあまり参考にならないかも。
- MacOSX 10.9
- Yukkuroid 0.6
- Node.js 0.10.26
- Hubot 2.7.5
- NodObjC 0.0.15
Yukkuroidとは
ゆっくりの声で文章を再生できるソフトのことです。
MAC用テキスト読み上げソフト「ゆっくろいど」
今回はHubotを喋らせるのにこれを使いました。
(sayコマンドで頑張るって手もある）
また、今回の記事の内容はこちらの記事を参考に進めました。 node.jsからゆっくりボイスをしゃべらせる
続きを読む