React+FluxでTodoMVCを作ってFluxについて学んでみた - yutaponのブログ
ちょっと前に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
gulp.jsを使ってフロントエンドのビルドをする【webpack, stylus】 - yutaponのブログ
この記事はIwate Developers Advent Calendar 2014の6日目の記事です。 Iwate Developers Advent Calendar 2014 - Qiita 記事の内容はというと、岩手にまったく関係ありません。 学生の頃はフロントエンドを軽視してクソコードを量産していたので、今の学生の方にこんな風に作り始めるといいよって紹介する感じで書きたいと思います。 はじめに 昨今のフロントエンド開発はとにかく複雑になってきていて、学習コストが半端なくなってきてます。 angularとかbackbone.jsとか、最近ではreact+fluxなど、トレンドの移り変わりが激しいです。 またGruntやgulp.jsなどのタスクランナーの活用がフロントエンドでは欠かせなくなっていて、使ってないなら今すぐ導入すべき、とも言えます。 最近gulp.jsを使っていて、gu
フロントエンドでもES6構文使ってみる【webpack+babel-loader（旧6to5-loader）】 - yutaponのブログ
【--- 追記（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のビルド工程があるプロジェクトであれば簡単に導入できると思います。 今回は前
React入門用に簡単なアプリケーション作ってみる - yutaponのブログ
React入門系の記事はもう結構出尽くしてる感ありますがせっかくなので私も。 今回はReact v0.13RC2を使って↓のアプリケーションを写経してみます。（Authorは私ではありません） 見ての通り、抵抗の値を計算するアプリケーションです。 Reactで書かれていたり、SVG使ってたり面白いソースですね。 ちなみに抵抗の色の仕様はこのようになってます。 抵抗のカラーコード はじめに React v0.13RC2を使う理由は現時点で最新版ということと、v0.13.0beta1でES6のclass構文が使えるようになったからです。 jsfiddleのソースは1ファイルにまとめて書かれていますが、これを1コンポーネント1ファイルに分割して書いてみます。 React(JSX)のビルドにはBabelが使えるので、前回作ったスケルトンの上に作っていきます。 設計 jsfiddleのJSソースの一
Backbone.jsに入門してみる【サーバー通信編 (Model, Collection)】 - yutaponのブログ
今回はBackbone.ModelとBackbone.Collectionを使って サーバーサイドとRESTな通信をしてみます。 サーバーとの通信ですが、別に難しいことはありません。 jQueryでいう $.get(), $.post() をBackbone.js風に使うだけです。 はじめに サーバーとの通信ですが、今回は/usersというURLに対して行うことにします。 サーバー側はクライアント側からのRESTメソッドに対応した実装がされている前提です。 /usersというURLは名前からuserの集合を表していることがわかるかと思いますが、 このuserの集合というリソースに対してクライアント側から 任意のリソースを要求したり、リソースを作成したりできるのがRESTなAPIです。 この/usersに対してそれぞれのメソッドでリクエストした場合、 以下のような意味になります。 サーバー側
Backbone.jsに入門してみる【Router編】 - yutaponのブログ
久しぶりのBackbone.js入門。 Backbone.jsガイドブックを見ながらまとめてますが、 後半は試行錯誤のたまもの。 Backbone.Routerとは Backbone.RouterはサーバーサイドMVCフレームワークでいうところのCにあたる部分、でもありますし、VCでもあります。 Backbone.ViewがDOMを監視するのに対して、Backbone.Routerはブラウザのハッシュ（URL欄）を監視します（厳密に言うとhashChangeイベントとpopStateイベントを監視）。 Backbone.Routerにハッシュとそれに対応する操作を設定しておくことで、 アプリケーション全体のコントローラみたいなふるまいをします。 Backbone.Routerの使い方 何はともあれサンプルコードを。 // @file router_sample.js var Router
Backbone.js+D3.jsでデータの可視化【準備編】 - yutaponのブログ
先週はnode.jsでニコ動のランキング情報をJSON取得するコードを書きましたが、 今回はそのデータを使って棒グラフを書くってところまでやります。 （d3.jsの事前知識は公式のチュートリアルを読んだくらいです。） 普通にd3.js使っても面白く無いので、Backbone.jsとRequireJS使ってやってみました。 ソースを全部上げるには大きくなってきたのでgithubに置いときました。 yussk/nicoranking2d3 · GitHub ※まだまだ未完成、なので準備編。 現状で出力されるグラフはこんな感じ。（マイリスの絶対数のグラフ） しょぼい。 はじめに 先週書いたnode.js側のソースを少し修正してます。 アクセスのたびに100件の動画詳細を取りに行くXHRを防ぐため、 2回目以降はローカルのjsonを取得するよう変更しました。 タグ情報を返す部分も文字列型とオブジェ
1
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
