TypeScript で react-router + Redux を使う(mapStateToProps編)

react-router と Redux を組み合わせるときは、withRouter を使うことでコンポーネントhistorylocation (URLパスやクエリ) などを渡すことができる。 それを Redux の mapStateToProps でゴニョゴニョすることでURLパスやクエリとStoreのデータを組み合わせることができる。

その際、mapStateToProps = (state, props) => {...}props にどのような型をつければいいか調べたのでメモ

TL;DR

RouteComponentProps を使う。

使い方

通常のURLの場合、RouteComponentProps<{}> とする。

"/users/:userId" のような形で、URL内にユーザーIDなどのパラメータがある場合、RouteComponentProps<{userId: string}> のように、パラメータの型を引数に与える。

import { connect } from 'react-redux'
import { RouteComponentProps, withRouter } from 'react-router-dom'

// URLにパラメータがない場合
const mapStateToProps = (_, props: RouteComponentProps<{}>) => {
    console.log(props)
    return {
      ...
    }
  }

// URLにパラメータがある場合
const mapStateToProps = (_, props: RouteComponentProps<{userId: string}>) => {
    console.log(props)
    return {
      ...
    }
  }

解説

react-router の index.d.ts を抜粋すると以下のようになっている。

import * as H from 'history';

export interface RouteComponentProps<P, C extends StaticContext = StaticContext> {
  history: H.History;
  location: H.Location;
  match: match<P>;
  staticContext: C | undefined;
}

export interface match<P> {
  params: P;
  isExact: boolean;
  path: string;
  url: string;
}

この RouteComponentProps が、 withRouter が渡す引数の型とドンピシャなのでこれを使う。 よくみると第一引数 Pmatch<> に渡しており、この P でURLパラメータの型を指定できる。

『再現可能性のすゝめ ―RStudioによるデータ解析とレポート作成― 』を読みました

f:id:ksmzn:20180504034211j:plain

共立出版様よりご恵増いただきました。ありがとうございます。

データ解析プロセスを学びたいかたは必読、というか真っ先に読むと良い本。

再現可能性のすゝめ

再現可能性のすゝめ

個人的に残念なのは、この本を5月に手にしてしまったこと。 4月であれば、新人研修で「コレ読みましょう」で済んだのに。

本書『再現可能性のすゝめ ―RStudio によるデータ解析とレポート作成― 』は、再現可能なデータ解析とレポート作成の意義と実践方法について、これ以上無いほど丁寧に記した一冊。 再現可能性とは『いつでもどこでもだれでも同じモノを再現できること』。データ解析の文脈では、『同じデータがあったときに、いつでもどこでもだれでも同じ解析結果を再現できること』

この本が凄いのは、RStudio を使ったことがない方でも本書を通して使い方を学ぶうちに、再現可能性の高いデータ解析方法を知ることができる点である。 「身に付ける」ためには実際に自分の手を動かしてデータ分析してみる必要があるが、本書と同じ手順で解析すれば再現可能性の高いデータ解析ができるはず。 本書自体が「再現可能性が高い」という仕掛けになっている。

『Wonderful R』 シリーズは、他の本もそうだが、著者の言語化能力がハンパない。 データ解析者が何を考えてそのツールを使ったりコードを書いているのか、ささいなこともきっちりと記している。 RStudio 自体の使い方はネットにいくらでもあるが、再現可能性の観点においてどう活用すべきか(または活用すべきでないか)を知れるのは本書ならではである。 そのため、初心者はもちろん R 中級者でも本書から学ぶ点はあるはずだし、第 6 章や第 7 章の RStudio 応用をマスターしている人は少ないように思う。 自分自身は、「(Rmd ファイルでなく) R スクリプトからレポート作成」は知らなかったし、RStudio によるプロファイルやデバッグは使いこなせていないので非常に勉強になった。

本書を読み改めて思ったのが、(R というより)RStudio がいかに再現可能なデータ解析の文脈において優れているかということ。 再現可能性の必要性を感じている人は多いであろうし、 JupyterNotebook などを使ってレポートを作成するなどして、同様のことを R を使わずに実現している現場も多いはず。 しかし、本書の言葉を借りれば、『できるできないか、という問題ではなく、やりやすいかやりにくいか、という問題であり』、 RStudio を用いることで『圧倒的にやりやすくなることは間違いない』のだ。 データ分析初学者は本書と RStudio を片手に出発し、再現可能性の重要性を理解してから別のツールや言語に手を出すとスムーズだと思う。

ここまで大絶賛しているが、それは、 実は自分が担当した『データサイエンティスト養成読本 登竜門編』 の前処理章の内容を、本書で遥かにわかりやすく実践的に身に付けることができるからである。 さすが @kohske 先生...。
(とはいえ『登竜門編』の前処理章は awksed の話や実際のデータを使った前処理手順があるし、何より他の方が担当した章も素晴らしい内容が詰まっているので、よければ読んでみてください)

前述したとおり、本書は再現可能性の話だけでなく、 RStudio や RMarkdown の実践的な使い方も豊富である。 実際にレポートを書くときに遭遇しそうな、RMarkdown で後ろ向き参照する方法など、痒いところにも手が届く仕様になっている。 これらの濃い内容をたった 160P 強で学べるというのはお得にも程があるんじゃないだろうか。 再現可能なレポートを書いて @kohske 先生に「グッジョブ」と言われたい方は是非(何度か本書に出てくる)。

以下、本書の内容からのメモ(一部)。

序 実は再現可能性という観点からは、『ドキュメント・プレゼンテーション生成』の当時と比べて現在でもやれることはそう多くは変わっていない。変わったのはやりやすさである。
p23 再現性の観点からはマウスをクリックしてデータを読み込むことは避けたほうがよい
p28 印刷。地球環境のためにも、使わないほうがよい。
p45 もちろん、プロジェクト機能を使わなくてもこのようなフォルダ構造にすることができる。
しかしこれは、できるできないか、という問題ではなく、やりやすいかやりにくいか、という問題であり、プロジェクト機能を用いることで圧倒的にやりやすくなることは間違いない。
p79 ワンダフルワンダフル。
p110 ちなみに開発者はイケメンである。
p131 つまりこのRマークダウン自体は、等分散性を仮定する状態と仮定しない状態が重なったものと考えることができる。Schrödinger's cat!!

shinydashboard(AdminLTE)でスクロールバーが2つできちゃう問題を直す

ウルトラ小ネタです。

スクロールバーが2つできちゃう

shinydashboard を使って開発中、ブラウザの右端のスクロールバーが2つできてしまってレイアウトが崩れるのに気が付きました。

f:id:ksmzn:20180203185140p:plain

どうも原因は、SidebarとBodyの両方がブラウザの縦幅を超えるほど長い場合に起こるようです。 僕が開発中のアプリの場合、サイドバーのメニューを開いたときにブラウザの縦幅を超えるため、メニューを開閉するたびにレイアウトがズレてしまい、なんとかする必要がありました。

CSS を上書きする

解決方法は、以下に書かれていました。

Two scroll bars! #1418

shinydashboardは AdminLTE という管理画面用Bootstrapテーマを使用しており、そちらのCSSのバグのようです。 つまり、cssを上書きすればOKなので、shinyアプリに使っているcssファイルに、

.wrapper {
    overflow-y: hidden;
}

と書けばOKです。

以上です。