es6でreactを使うときのメモ
reactを触ってみた
せっかくなので新しい形で使いたくes6の形にしたら、reactの元の書き方では動かないところがあったのでメモしておく
1. getInitialState
# es6以前 var Component = React.createClass({ getInitialState: function() { return {data: []}; },
es6ではgetInitialStateというメソッドを定義しても動かない。以下のように定義する。
# es6 class Component extends React.Component { constructor() { super(); this.state = { data: [], }; }
2. props
render: function() { <Component id=1 /> }
このように呼び出されるComponentがあった場合、
# es6以前 var Component = React.createClass({ getInitialState: function() { return {data: Store.getData(this.props.id)}; },
# es6 class Component extends React.Component { constructor(props) { super(props); this.state = { data: Store.getData(props.id)}, }; }
es6ではconstructor内でpropsにアクセスするために引数として受け取る必要がある
3. callbackのthis
callbackとして登録したメソッド内で呼ばれるthisがundefinedになる
例えば、es6で以下のように書いてcallbackとして登録すると実行時にthisがundefinedとなる
render() { return <button onClick={this.callback} /> } callback(event) { console.log(this.state.data); }
なので以下のようにbindを利用する
render() { return <button onClick={this.callback.bind(this)} /> }
参考
- http://qiita.com/cubdesign/items/ee8bff7073ebe1979936
- http://qiita.com/koba04/items/bc13d1f42964278ae14e
入門 React ―コンポーネントベースのWebフロントエンド開発
- 作者: Frankie Bagnardi,Jonathan Beebe,Richard Feldman,Tom Hallett,Simon HØjberg,Karl Mikkelsen,宮崎空
- 出版社/メーカー: オライリージャパン
- 発売日: 2015/04/03
- メディア: 大型本
- この商品を含むブログ (2件) を見る
macでmatplotlibによる画像出力
mac上でskimageを入れた際にエラーになったのでメモ
pyenvにてinstallしたpython3.5にて、pipで入れたskimageによって画像を出力しようとした際エラーになった
発生したエラーはこちら
>from skimage import io >image = io.imread('example.png') >io.imshow(image) RuntimeError: No suitable plugin registered for imshow
描画に必要なライブラリを入れる必要があるのかと考え、matplotlibでグラフを表示できるか試してみるとこれもエラー
>>> import matplotlib.pyplot as plt RuntimeError: Python is not installed as a framework. The Mac OS X backend will not be able to function correctly if Python is not installed as a framework. See the Python documentation for more information on installing Python as a framework on Mac OS X. Please eith er reinstall Python as a framework, or try one of the other backends. If you are Working with Matplotlib in a virtual enviroment see 'Working with Matplotlib in Virtual environments' in the Matplotlib FAQ
ググッてみるとこんなのを見つけた http://qiita.com/katryo/items/918667f28301fdec89ba
今回のケースと同じようなのでこれに従ってbackendを別のものを使うよう変更してみる
$ cat 'backend : TkAgg' >> ~/.matplotlib/matplotlibrc $ python -c 'import matplotlib.pyplot as pyplot; pyplot.pie([1,2,3]); pyplot.show()'
これで無事グラフが表示された
もともとやりたかったexample.pngの出力もうまくいくようになった
vimでnon-greedyなマッチ
vimでnon-greedyなマッチを行うために正規表現を調べたのでメモ
non-greedyなマッチを使いたい場合のusecase
以下の行でクォーテーション毎にそれぞれマッチしたい場合
'hoge', 'fuga'
アスタリスクを使って書くと行頭から行末まで全体にマッチしてしまう
# greedy /\v'.*' => match "'hoge', 'fuga'" # non-greedy /\v'.{-}' => match "'hoge'" and "'fuga'" separately
{}
は繰り返し回数を指定する場合の正規表現の書き方だが、その頭にハイフンを付けることでnon-greedyという意味になる
例えば{-2,5}
とすれば2~5回の繰り返し(non-greedy)を表せる
ちなみに\v
を置くことでalphabet, number, underscore以外の文字を特殊な意味で使う場合にescapeする必要がなくなる
\Vとすれば逆にすべての文字をescapeなしで文字通りのまま扱える
cf. :h magic
- 作者: Drew Neil,新丈径
- 出版社/メーカー: アスキー・メディアワークス
- 発売日: 2013/08/29
- メディア: 単行本(ソフトカバー)
- この商品を含むブログ (15件) を見る