React+FluxでTodoMVCを作ってFluxについて学んでみた
ちょっと前にReactを使って簡単なアプリケーションを作ってみたのですが
React入門用に簡単なアプリケーション作ってみる - yutaponのブログ
今回はFluxアーキテクチャについて学びたいと思ったので、TodoMVCを題材に写経してみました。
構成・ロジックは参考にしつつ、ES6構文で書くようにしてます。
参考にしたコードはfacebook/fluxのexamplesのコードになります。
- flux/examples/flux-todomvc at master · facebook/flux · GitHub
- https://github.com/facebook/flux/tree/master/examples/flux-chat
作ったコードはここに置いていて、
https://github.com/sskyu/react-flux-todomvc-example/tree/blog-20150427
動かすといつものTODOリストが表示されます。
KaomojifyJSとかいうUglifyJSの亜種を試してみた
5 Minites of JavaScriptで紹介されていたKaomojifyJSをちょっと触ってみたという記事。
はじめに
そもそも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を使うよう変更しました。
【--- 追記ここまで ---】
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
続きを読む