退職しました & タイ・バンコクの会社に転職します

実は9月某日で、新卒で入社した会社を退職していました。 充電期間を終え、11月からタイのバンコクに移住し、エンジニアをやっていくことになりました。 分析コンサル会社から、広告系中心の事業会社です。わかる人には会社名わかりそうですね。 担当領域は、データサイエンスやフロントエンドに限らず、いろいろとやる予定です。サーバーサイドとかも。

いつか海外で働きたいとはボンヤリ思っていたのですが、まさかこんなに早く実現するとは思いませんでした。 はじめての海外生活なので正直ビビってるのですが、 日本人も多いバンコクなので、生活面はなんとかなるんじゃないかと高をくくっています。

問題は語学面で、エンジニアリング部署は英語で会話するそうです。 英語力が駄目駄目なので、働きながら語学力を身につけなければなりません。 とはいえ、私の英語力でいきなりアメリカとかの英語圏だったら厳しかったですが、 バンコクに集まるエンジニア内での会話なのでまだなんとかなるかもしれません。最初は痛い目にあうでしょうけど。。

英語力ゴミ状態の私を採用していただいた転職先に感謝します。 タイ語も勉強していきたいですね。

移住後は、現地コミュニティに参加したり、GAOGAO を見学したりしたいです。 タイでのR言語の浸透ぐあいはよくわからなかったので、ひっそりとR言語やShinyを布教したいですね。

転職についての詳しい経緯とかはTwitterやブログでちょいちょい書くかもしれないですし、書かないかもしれません。 ホームシックになる可能性もあるので、ときどき日本に帰ってきた際は絡んでいただければ泣いて喜びます。

約束しているお仕事で関わっている方々には、もろもろ遅れておりご迷惑をおかけしております。 充電終わったのでなんとか取り戻します。

今後とも宜しくお願いいたします。

↓アサマシくも例のリスト
http://amzn.asia/h71JfQF

ShinyアプリをDockerでhttps化する

公開中の Shiny アプリ 「確率分布Viewer」 を、この度 https 化しました。 新しい URL はこちらです。

https://statdist.ksmzn.com/

ドメインは設定済みの前提で、そのやり方を備忘録として記載します。

Dockerの用意

まず、Shiny を Docker で起動できるようにする必要があります。 私はもともと rocker/shiny イメージを使用して、本番環境にDockerを採用していました。

そのあたりは過去の記事をご参照ください。

ksmzn.hatenablog.com

https-portal を使う

Docker アプリの https 化には、 https-portal が便利です。 https-portal は、証明書周りの手続きを全て自動化してくれる超凄い Docker イメージです。 公式ページの設定からほとんど変えなくても、https 化できてしまったので超オススメです。

詳しい使い方は GitHub および このあたりの記事 をご参照ください。

github.com

以下、私の設定の備忘録です。

Shinyアプリと https-portal を組み合わせるために、docker-compose を使います。

docker-compose.yml に、以下のように記載してください。

https-portal:
  image: steveltn/https-portal:1
  ports:
    - '80:80'
    - '443:443'
  links:
    - yourapp
  restart: always
  environment:
    DOMAINS: 'yourdomain.com -> http://yourapp:3838' # <- rockerを使う場合は3838が必要!
    # STAGE: 'production' # <- 本番環境ではコメントアウトを外す

yourapp:
  build: . # Shinyアプリ用のDockerfile

基本的には、公式ページの設定とほとんど同じです。

唯一注意することは、rocker/shiny3838 ポートを使用しているため、DOMAINS にもポートを記載する必要があるということです。

DockerComposeの実行

準備ができましたら、本番環境のサーバに対し、

docker-compose build
docker-compose up -d

と実行しましょう。

しばらく待てば、無事 https 化完了しているはずです。

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パラメータの型を指定できる。