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
続きを読むTypeScriptを使ったBackbone.jsアプリケーションの書き方
先日TypeScript使ってBackbone.jsのアプリケーションを書いて、いろいろハマったので備忘録的に書いておきます。
はじめに
既にTypeScript+Backbone.jsのサンプルはいくつか上がってたりします。
有名なのはTypeScript+Backbone.jsでTodoアプリケーションを作るやつ。
tastejs/todomvc
非常に簡単そうなのですが、型定義を独自に書いてあります。
個人的には、型定義はDefinitelyTypedでホストされているやつを使いたく、上述したサンプルコードではあまり参考にならなかったりします。
あとどうせならコンパイルオプションの--module amd
を試したかったので、RequireJSを使ってモジュール管理をしようと思います。
(browserifyの使い方ちゃんとわかってない)