JavaScript

yarnに乗り換えてみた

Facebook OSSの話題に触れてるうちに、yarnにしてみっかなと。yarnのライセンスはFacebook OSSの特徴となったBSD-3-ClauseではなくBSD-2-Clauseですけど、そこはかとなくFacebookな匂いの子です。今までニーズがなかったから入れ替えてなかったけど、むしろ…

FlowにImmutable.jsの型定義を取り込む

Immutable.jsの型定義の取り込みできた。今後は応用して他のライブラリも手動で取り込みできよう。 # .flowconfig [ignore] # .*/node_modules/* こいつが邪魔してた .*/node_modules/eslint-plugin-jsx-a11y/* .*/node_modules/react-event-listener/* .*/s…

Flow-Typedで型定義をまとめて取り込む

Flowはいまのところマジ大変。どうやら一番成長の速い時期にぶつかってしまったらしく、わからないことを調べても皆がバラバラなことを言ってたりして困る。サンプルで数行のお試しコードを書いてる分にはハマりどころも少ないんだけど、ちゃんと出来上がっ…

Flowでの型チェック環境を設定する

flow.org ちょっと前に、redux-formのリポジトリで「🎉 Flow Typing 🎉 (#3138)」と絵文字まじりのコミットログを見つけて気になって(絵文字を)調べたついでから、JSの型チェックを行うFlowを知りました。型はコードの堅牢性を高めると信じてるので大好きなの…

Material-uiがreact-tap-event-pluginを廃止してた

リリースノートを見るとすでに二週間近く前のことですが、Material-UIが0.19.0をリリースし、長年引っ張っていたreact-tap-event-pluginを廃止していました。onTouchTapと各所にあったものがonClickに置き換わっています。後方互換のためかonTouchTapのまま…

Jest+EnzymeでReactコンポーネントをテストする

JestはそもそもReactアプリをテストするためにあるのだと思うのですよ。作り手が同じFacebookだし、ドキュメントにもそういうことを言ってます。そこでJestでReactをテストしようとドキュメントにあたるとAirbnbの作るEnzymeを使うことを推奨されていました…

Jestのモック機能を活用する

テスト環境をJasmineからJestに入れ替えましたので、カバレッジを上げるためおよびTDD的にもこちらの活用を行っていきたいと思います。一年ぐらい、いや二年?、目を離した間にモック機能がかなり成熟していました。 そのまえにeslint react/jsx-boolean-val…

ReactとReduxのためのChrome拡張機能

さらに昨日の続き。 chrome.google.com かねてよりChrome拡張機能でReactアプリケーションのリアルタイムコンポーネント構造を見るためのReact Developper Toolsを用いていましたが、HMR環境でも問題なく活用できています。HMRで部分再描画ができてる時にはT…

HMRの完成度アップ、ReducerのHMRも

昨日までで完成かと思ってたら、さらに続きが! HMR環境で開発してたら、react-reduxのProviderコンポーネントが以下の警告をブラウザのstdoutに出してました。 does not support changing `store` on the fly. It is most likely that you see this error b…

react-reduxのHMRできた!

ここ連日の続き、完結です。 react-router v4での完全再描画を伴わない、変更箇所だけ表示が更新されるHMR(Hot Module Replace)ができました。理由はreact-reduxのProviderコンポーネントの置き場所。連日のアプリケーションが以下のように変わって完成。…

いよいよreact-router-redux v5へ

一昨日、昨日の続きです。 react-routerをv4へマイグレーションすると同時に、react-router-reduxもv5に上げます。こちらはまだアルファ版ということですが、十分に機能するしとてもシンプルなためにコード読んですぐ分かる内容ですから、危険視するほどでは…

react-router v3 to v4移行

昨日の続きです。 path-to-regexp まずはMISC。 github.com react-routerのv3 to v4マイグレーション中に遭遇。v3までreact-routerが自前にURLをパースしていたのに代えてライブラリを使うようになってました。Expressスタイルというらしいコロン前置のパラ…

ReactのHMR環境を作る

昨今のトランスパイルやバンドル作業が行われるWEBフロント開発では書いたコードがそのままブラウザで動かないために、WEBブラウザで実行確認するためにはビルド・ブラウザリロードの手間が必要です。HMR(Hot Module Replacement)環境を構築すると、コードが…

しばらく見ない間にES6開発ツールセットが良くなってた

WEBのフロントエンドをES6でreact + redux + react-router + Material-UI利用して書いてますが、このビルド環境をそれまでのGulp + Browserifyからnpm + webpackに置き換えました。しばらく見ない間にツール毎の進化があって組み合わせがシンプル化できるよ…

react-routerが都合よくAPIを公開してくれた!(がダメだった)

mk.hatenablog.com かなり前ですけど、react-routerのURLをreduxで管理していい感じ、というコード書きました。こちらはreact-routerの非公開関数を利用していたので将来危険だなあと思ってましたが、react-router 4.xでやっぱりダメになりました。しかしそ…

reduxとreact-routerの間でURLとstateの同期を行う

reactのルーティング機能?というかテンプレートシステムというか?にreact-routerがあります。リクエストパスに応じて画面構成要素を組み立てるのでreact-routerを使ってアプリケーションを作ると当然URLと画面は同期することができます。URLを直打ちしても…

reduxはredux-actionsギプスをつけて養成

reactアプリケーション開発においてコンポーネントに引数として渡されるpropsと、スコープの大きな実行時変数としてのcontextに加えて、もっぱらコンポーネント内部の状態管理としてのstateをあれこれ操作するのがデータフローの基本だったのですが、ここ一…

material-uiのSVGアイコンを作る

Googleはマテリアルデザインのガイドラインを提供するほかに、CSS+ JavaScriptのライブラリ(Material Design Lite)やフォント(Roboto/Notoなど)も用意し、アイコンもまたまとまった数のものがあります。 design.google.com このアイコンは最も使われるだ…

JsDOM+React TestUtilsの使い方を改良

TestUtilsにはいろいろ便利なメソッドがあるのを見つけてテストの書き方を変えたら、UserAgentが設定されていないということでエラーが出るようになってしまいました。かといって直接にnavigator.userAgentを設定しようにもGetterしかないと弾かれてしまいま…

素のnodeでES6の多くが動く

ECMAScript 2015 (ES6) | Node.js 今、BabelでES6とJSXをトランスパイルしてますが、そのBabelを起動するGulp(gulpfile.js)についてはES5で書いてました。しかしすでにnode v5.xではV8エンジンの対応状況が進んできているためにES6の仕様の多くが動いちゃ…

Reactコンポーネント内からkeyが取れない仕様だった

http://facebook.github.io/react/blog/2014/10/16/react-v0.12-rc1.html#breaking-change-key-and-ref-removed-from-this.props すでに0.12での仕様変更でしたから、私がReactに触れてからはずっとそうなってたのですが、自分で書いたコードの謎バグに悩ま…

gulp-jasmineでES6で書いたReactコンポーネントとReactステートレスコンポネントさらにはExpressルーターを同時にテストできるようにする

一通りハマって模索した結果、それぞれしっかり原因判明やりきって解決するまでの質ではないのですが、ES6 で書いたReactコンポーネントとステートレスコンポーネントをテストするとともに、ES6で書いたExpressルーターもまとめてテストできるプロジェクト設…

react-router v2リリース

しばらくrc版を用いて開発していましたが、react-router v2が昨日か一昨日ぐらいにリリースされていました。ドキュメントも新しくv2になってます。 react-router/ComponentLifecycle.md at latest · rackt/react-router · GitHub いつからあったかは定かでは…

TestUtilsが関数コンポーネントダメだって

'use strict'; /*global jest*/ jest.dontMock('../BootstrapResponsive'); const React = require('react'); const ReactDOM = require('react-dom'); const TestUtils = require('react-addons-test-utils'); import {ResponsiveCol} from '../BootstrapRe…

BootstrapのGridをReactに持ってきてみた。

material-uiを気にいって、それでReactアプリ書いてます。発展途上ではあるも開発者の方々がこまめにがっつり頑張ってくれてて、日々npm updateをかけるのが楽しみです。そんなmaterial-uiも今の所はGridレイアウトのコンポーネントはありません。Google謹製…

ReactのES6-classでのコンテキスト

class PutContext extends React.Component { getChildContext() { return {color: '#03a9f4'}; } render() { return <div>{this.props.children}</div>; } } // childContextTypesはpropTypesと同じスタイルの設定 PutContext.childContextTypes = {color: React.PropT…

WebStormでESLintを使う

数日、バタバタと調査しては考えが変わる毎日ですが、ES6-classでReactアプリを書く前提が整ってきました。 classボディ外に、propTypes/contextTypes/childContextTypesを書くのも、そういうものと思えばまあいいか MixinはAOP的なラッパーコンポーネントを…

Reactコンポーネント名の規則

つまらないハマりがあったので。 const foo = React.createClass({ render() { return <div>Foo</div>; } }); console.log("JSX:" + ReactDOMServer.renderToStaticMarkup(<foo/>)); console.log("API:" + ReactDOMServer.renderToStaticMarkup(React.createElement(foo))); </foo/>…

ReactのES6-classが所詮糖衣構文しかも甘くない

(承前:昨日の追記) react-mixin(https://github.com/brigand/react-mixin)でES6のclass構文を試してみました。書いてから気がついたのは、短時間で試したぐらいの中ではちょっとコード書き直すだけでどんどん筋が悪い体裁になっていくので、時期尚早とい…

関数型的なJS

JavaScriptで学ぶ関数型プログラミング作者: Michael Fogus,和田祐一郎出版社/メーカー: オライリージャパン発売日: 2014/01/18メディア: 単行本(ソフトカバー)この商品を含むブログ (5件) を見る ECMAScript6まじりのJavaScriptに手が馴染んできました。R…