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でやっぱりダメになりました。しかしそ…

Make: Electronics ―作ってわかる電気と電子回路の基礎

Make: Electronics ―作ってわかる電気と電子回路の基礎 ((Make:PROJECTS))作者: Charles Platt,鴨澤眞夫出版社/メーカー: オライリージャパン発売日: 2010/11/29メディア: 大型本購入: 6人 クリック: 207回この商品を含むブログ (22件) を見る 入門用に電子…

Intel EditsonとRaspberry PI Camera

Intel Edison やはり、小さいです。まずは標準アプリを母艦としたMBPに入れ初期設定しました。アプリでは、ファームアップデート・パスワード設定・WiFi設定の三つだけをやるもので、GUI操作だけで簡単にセットアップは終わります。動くところまで、Raspberr…

Ubuntu Core断念

Raspberry PIでサクッといっちゃったんで物足りずに、活用云々よりも先に違うLinuxディストロをいれてみようかと。で断念しました。 Snappy Ubuntu Core Raspberry Pi 2/3 | Ubuntu developer portal Raspberry PIの公式サイトでは公式の中の公式としてRaspb…

Raspberry PIを箱から出してGoアプリを動かす

Hello Raspberry! 8th gradeの長女(Mayaa)が最近いきなり電子工作に興味をもってブレッドボードなどを買ってきたので、対抗してRaspberry PIをはじめました。幸いにまだ臭いとかは言わないまでも、いずれ生ゴミ扱い仕掛けて来かねない思春期の娘に対して、…

macOS Sierra上でGAE/Go SDKが動くようになった

https://storage.googleapis.com/appengine-sdks/featured/go_appengine_sdk_darwin_amd64-1.9.46.zip gcloudツールからのコンポーネント管理では現時点アップデートされていませんでしたが、GAE/Go単体SDKはGo1.6.3ベースにアップデートされていました。 再…

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

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

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

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

goji.ioで正規表現Pattern

ハンドラのとこはgoji.ioで書いてます。見ると標準のnet/httpとgolang.org/x/net/contextをうまいこと活かしたからこその極薄なライブラリなのですが、リクエストパスでハンドラを切り替えるのに簡潔利便なので私はお好みです。しかし薄すぎて足りないところ…

可搬性の高いGoのVendoring環境整備

GAE/Goでも、package main/func mainのGoでも、プロジェクトはdirenvをつかってVendoringを実現すると可搬性高くて最高というメモ。 direnv シェルの実行パスに置かれたローカル設定を動的に反映させてくれるかしこいツール。素敵。インストールはHomeBrewで…

Sierraの上に仮想ElCapitanを作る

およそOKだったので、本体もSierraにアップデートしてしまいました。 試した範囲でおよそ問題なかったのですが、アップデートしてから動かなくなってしまったのに気がついたのが一つ、Go for Google App EngineのSDKです。こちら内部にGo 1.6.2を抱え込んで…

仮想Sierra環境を作る

Mac環境を汚さないように壊れてよい仮想なMacを作ります。どうせいまなら出たばかりのSierraで。Mac on MacはVMWareをつかうと超簡単と聞きますが、追加無償でも十分!VirtualBoxで作ります。ホストはEl Capitan。トータルで2時間半ぐらいかかりましたが、ほ…

SONY MDR-100ABN/Yを買った

長らくBeats Studio WirelessのTitaniumカラーを愛用してきましたが、急に激しい物欲が発作したのと、それを正当化する理由がいくつか出てきたので新しいヘッドホンを購入しました。選んだのはSONY MDR-100ABN/Yで、外れたら返品すればいいやと他の候補とは…

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…