JavaScriptの中にはコードをもっとシンプルで見やすくできるパターンがあるのに、あまり使われていないものがあります。皆さんも Function.prototype.bind はご存じでしょう。頻繁に使われていた var that = this や var self = this の代わりになる関数です。よくあるのが以下のような例です。 this.setup = function () { this.on('event', this.handleEvent.bind(this)); }; 第1引数が bind （束縛）され、返される関数内で this として働きます。あまり知られていませんが bind は複数の仮引数を取ることができ、 bind された関数が呼び出されると bind される後続のすべての仮引数は、その仮引数リストの前に付加されます。 つまり以下のように、関数を部分適用す

急に寒くなってきたこの頃、いかがお過ごしでしょうか。 鼻水やらくしゃみやら頭痛やら止まらなくて調べたら「寒暖差アレルギー」なんじゃないかと思い始めました。 とっしぃです。 Uncaught TypeError: Cannot read property 'setState' of undefined ところで、業務に関係ありそうでなさそうな適当なツールをChromeのextensionで作ってみようと思い、 どうせ外に出すわけでもないツールだし以前から興味のあったReactで書いていたわけです。 更にどうせならES6で書かない理由もないということで、 var CommentBox = React.createClass({ ... ではなく class CommentBox extends React.Component { ... って感じ。 でもそこで class CommentBox

概要 開発者にとってはメリットがありそうだけどユーザーにとってはいまいちメリットがよく分からないES6。ひとまずどのくらい開発者にとってメリットがあるのかを実際に把握するため、ES5のReact.jsソースをES6ベースに書き換えてみました。 対象のソースは、投稿[react-router v2.xとcontext]のサンプルソース（https://github.com/kunitak/react-router-1to2）です。 参考 React TutorialをES6で書きなおしてみた - console.blog(self); http://sadah.hatenablog.com/entry/2015/08/03/085828 Babelで理解するEcmaScript6の import / export http://qiita.com/inuscript/items/41168a

var Hello = React.createClass({ getDefaultProps: function() { return {name: "Default Props"}; }, render: function() { return <div>Hello {this.props.name}</div>; } }); class Hello extends React.Component { constructor(props) { super(props); console.log(props); console.log(this.props); this.state = {name: this.props.initialName}; } render() { return <div>Hello {this.state.name}</div>; } } Hello.defa

はじめに 初心者による初心者のための記事 React.js公式チュートリアルの和訳風 ES6 さらっと仮想DOM調べてみたよ、ぐらいの人向けです。 JavaScript初心者、ES6初心者、React初心者向けかつ僕がそうです。 なので間違いがあるかもしれません。見つけたら教えて下さい。 公式のチュートリアルはこちらです。 React Tutorial React チュートリアル (和訳) 公式Documentのソース (Markdown) 環境 Mac OSX Node.js v0.12.7 Gulp 3.9.0 React 0.13.3 作るもの 公式のTutorialに沿って、シンプルなコメントボックスをReactで作成します。 次の機能を提供するものです。 すべてのコメントの表示機能 コメント投稿フォーム バックエンドサーバーとの連携 また、次の特徴を持っています。 更新最適化:

ECMAScriptとは ECMAScriptはJavaScriptの中核仕様を抜き出して標準化したもの 開発当初のJavascriptは、ブラウザによる独自の拡張が多く、互換性が低かったため、Ecma Internationalが中心となりECMAScriptが開発された ES2015 (ES6)とは 先日策定された、ECMASCriptの6th Editionのことであり、当初はES6と呼ばれているが、正式名称をECMASCript2015(ES2015と呼ばれる)とし、今後は年単位のリリースを予定しているとのこと [公式サイト]http://www.ecma-international.org/ecma-262/6.0/index.html ES2015で可能となる新たなシンタックス let・constキーワードによる変数宣言 class構文 関数の引数のデフォルトパラメータ（Def

桜の花びらが舞う2015年4月、PADDLERS COFFEE（パドラーズコーヒー）が幡ヶ谷と代々木上原の間にある西原商店街のはずれに、旗艦店をオープンしました。 PADDLERS COFFEEは2013年にスタートし、そこから2年間、参宮橋と神宮前でコーヒースタンドとして活動してきました。 今回オープンした新店舗では、サードウェーブをけん引し続けるアメリカ・ポートランド発 STUMPTOWN COFFEE ROASTERS の新鮮なコーヒー豆を使った、日本初で唯一のエスプレッソを味わうことができます。 真鍮、ウォルナット、ホワイトオークの3つの要素をメインとしたウッディな空間に、コーヒーの香りが溶け込みます。 PADDLERS COFFEE を訪れるならば、朝が断然オススメです。店内にはアナログレコードの音楽が流れていて、朝の新鮮な空気との相性がすごくいい。そして、心地いい。