プログラミング | 秋山ブログ

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.

これは、今までは無視されていた未定義の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>

Mongoidのcallbackの実行順序

以下のgistが超わかりやすかった。リンク先のコメント欄にはMongoid 5.0.1の場合も追記されている。

https://gist.github.com/jingoro/3015664#gistcomment-1629159

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”を検索するよう指示しているというトラップがあるので、要注意。

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

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

余談

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

ES2015のPromiseのチュートリアル

ES6/ES2015のPromiseのチュートリアル・学習

Promiseが実装された – JS.next http://js-next.hatenablog.com/entry/2013/11/28/093230
JavaScript Promiseの本 http://azu.github.io/promises-book/
Promise – JavaScript | MDN https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Promise

ElectronでBonjourに登録されたIPアドレスを取得する

最初にmdnsというnpmパッケージが目についたんだけど、実行すると以下のようなエラーがでてうまく動かない。

$ electron .
[1108/014127:ERROR:http_transport_mac.mm(186)] Could not connect to the server. (NSURLErrorDomain -1004)

Bonjourでブラウズ(デバイスの検索)するだけなら、mdns-jsというnpmパッケージが素晴らしく簡単に動いた。

https://www.npmjs.com/package/mdns-js
https://github.com/kmpm/node-mdns-js

githubリポジトリに書かれてるように、以下のサンプルコードがそのまま動く。

var mdns = require('mdns-js');

var browser = mdns.createBrowser();

browser.on('ready', function () {
    browser.discover(); 
});

browser.on('update', function (data) {
    console.log('data:', data);
});

JavaScriptからCSSファイルに書かれた定義を取得する

JavaScriptからCSSの値を取得するには、たいていの場合はjQueryのcssメソッドを使えばOK.

$('#item').css('background-color');

ただし、これがCSSファイルに書かれたmax-widthやmax-heightの場合だとChromeやFirefoxごとに実装が違っていて、%で返ってきたり計算済みのpxで返ってきたりと面倒くさい。こうなる前のCSSファイルに書かれた最初のCSSの値をとる方法について書く。

続きを読む JavaScriptからCSSファイルに書かれた定義を取得する

FirefoxでSVGからBlobを生成するとfilterが適用されない

※本記事は解決していない内容のメモです。

svgからBlobを生成すると、imgに直接画像を入れたりcssの画像URLとして取り扱ったりできる。その中でぼかし効果のあるフィルターを適用していたところ、Chromeでは適用されるのにFirefoxでは適用されなかった。「feGaussianBlur blob firefox」とかで検索しても関係しそうなWebページが見つからなかったので、メモを残す。

続きを読む FirefoxでSVGからBlobを生成するとfilterが適用されない

ChromeのDeveloper Toolsで画面を固める

Tooltipの表示とかアニメーションの開発中、ChromeのDeveloper ToolsのElementsを途中で一時停止したい時、[F8]キーを押せばフリーズする。

Paused in debuggerの横の再生ボタンを押せば再開できる。

ngrok: localhostにドメインを割り当てる

ローカルで開発しているWebサービスに、どうしても外部サービスからアクセスさせたい時がある。例えばtwitterやfacebookで共有した時にどのような見た目になるか、を検証する時などはhttp://localhost:3000/を共有するわけにもいかない。

そんな時はngrokを使うと、超便利。ngrokをインストールしたら、以下のようにするだけでhttpアクセスを3000番ポートに飛ばすプロキシサーバーが生成される。

$ ngrok http 3000
ngrok by @inconshreveable                                                                                      (Ctrl+C to quit)

Tunnel Status                 online
Version                       2.0.19/2.0.19
Web Interface                 http://127.0.0.1:4040
Forwarding                    http://7c7*****.ngrok.io -> localhost:3000
Forwarding                    https://7c7*****.ngrok.io -> localhost:3000

Connections                   ttl     opn     rt1     rt5     p50     p90
                              0       0       0.00    0.00    0.00    0.00

超便利！！