React v15のUnknown prop warningにはlodash.omitが便利

Reactをv0.14.xからv15.x.x系にアップデートしたところ、以下のようなWarningが多発するようになった。

Warning: Unknown prop hogefuga on <button> tag. Remove this prop from the element. For details, see https://fb.me/react-unknown-prop for details.

https://gyazo.com/0fe6be4ea94d52fd8f14dc9f516ac905

これは、今までは無視されていた未定義のpropを渡してはいけないという仕様が追加されたために発生している。

Unknown Prop Warning | React

これを解消するには、lodashの_.omitを使うと便利。omitは、オブジェクトから指定したキーを除外した結果を返してくれる。

https://lodash.com/docs#omit

omitを使えば、こんな感じで書ける:

import {omit} from 'lodash'

render () {
  const buttonProps = omit(this.props, ['hogefuga'])
  return <button {...props} />
}

ちなみに以下のように分割代入に ... を使って指定されてない残りを取り出す方法はES7からしか使えない。
(参考: https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Operators/Destructuring_assignment )

({hogefuga, ...buttonProps} = this.props)

ReactBootstrapでOverlayTriggerを使ったTooltipをフォーカスを得た時に隠す

React + react-bootstrapの時、ホバーしていたツールチップを、クリックしたら消す、みたいな処理を書きたい時のメモ。ポイントは、OverlayTriggerのtriggerを、[‘hover’, ‘focus’]とnullで切り替えて、refsを使って直接hide()を呼び出すこと。ちなみにmanuallyに呼び出したい時はthis.refs.tooltipTrigger.show()とかでも呼べる。

onFocus (e) {
  this.setState({
    editing: true
  }, () => {
    this.refs.tooltipTrigger.hide()
  })
}

onBlur (e) {
  this.setState({
    editing: false
  })
}
const tooltip = (
  <Tooltip id='tooltip'>
    ここをクリックして編集
  </Tooltip>
)

<OverlayTrigger
  ref='tooltipTrigger'
  overlay={tooltip}
  trigger={this.state.editing ? null : ['hover', 'focus']}>
  <FormControl
    componentClass='input'
    onFocus={this.onFocus}
    onBlur={this.onBlur}
    />
</OverlayTrigger>

Color Oracle: 超簡単に使える色覚シミュレータ

https://gyazo.com/a032b78edd46b5b066d725c3ed312756

Color OracleというWindows/OSX/Linuxで動作する色覚シミュレータの紹介。

色盲と言われる色覚を持つ人がいる。日本眼科学会によると日本人男性の20人に1人が該当するらしい。日本眼科学会の表現では色覚異常なので、こちらが学術的な名称なのかもしれない。色弱という表現もある。

Webサービスやアプリケーションを開発していると、この色覚をシミュレートしたいことがある。なにせ男性だけでも5%が対象なので、下手なブラウザやOSよりも影響が大きい。

Color Oracleはそんな色覚をシミュレートできるソフト。サイトのデザインは古いけれど、Mac OS X Yosemite 10.10.5で動作することを確認できた。

http://colororacle.org

色覚シミュレータは色々あるけれど、ブラウザに依存せずにすぐにどんな画面でも色覚シミュレートできるのでとても便利。

Paypalのメールアドレスが更新できない

https://gyazo.com/8070752afcc46abf01750a3038c5544e

Paypalのメールアドレスを変更しようとしたら、以下のようなエラーが表示された。

申し訳ございません。問題が発生しました。問題が解決しない場合は、カスタマーサービスにお問い合わせください。

カスタマーサポートに問い合わせたところ、2012年の法令改正でアカウント情報の変更にロックがかかっているらしく、2012年以前に作ったアカウントの人は身分証をPaypalに提出しなければならないようだった。

電話で問い合わせたのだけれど、通常1~2週間かかる確認が「今日か明日ぐらいに完了します」とのことだったので、すぐ直りそうでよかった。

High-Fidelity Wireframe: 操作可能なワイヤフレーム

Sketchとか使って操作可能なワイヤフレームをつくることがあるのだけれど、操作可能なワイヤフレームのことを英語で「High-Fidelity Wireframe」と言うらしい。

http://uxmovement.com/wireframes/4-things-no-one-told-me-about-high-fidelity-wireframes/

OSXの回線速度を落とすNetwork Link Conditionerがデバッグに便利

iOS アプリの UI でこれだけはおさえたい、読み込み中の体験を向上させる基本 UI パターン3つ – クックパッド開発者ブログを読んでいて、OSXの回線速度を3GやADSLやWiFiをシミュレートできるNetwork Link Conditionerを知った。iOSにも似たような機能が標準で付いてるんだけど、OSXはApple公式の別アプリとしてリリースされていた。

クックパッドの記事だとmatttさんのブログ記事にリンクが貼ってあるんだけど、スクショでは”Network Link Conditioner”を検索しているのに対して本文では”Hardware IO Tools for Xcode”を検索するよう指示しているというトラップがあるので、要注意。

https://gyazo.com/112a056e686e772e63f3d45d7bf13006

Hardware IO Toolsを探せばその中にNetwork Link Conditionerが入ってます。分かりづらいので以下のリンクからどうぞ。

https://developer.apple.com/downloads/?name=Hardware%20IO%20Tools

余談

リンスっぽいとおもいました。