TypeScriptでrender props を書いてみた

JavaScriptで書いたことがあったけど、TypeScriptでは初めてだったので。

React Render Props in TypeScript - James Ravenscroft - Medium

Render Props - React

import { storiesOf } from '@storybook/react';
import * as React from 'react';

interface NumberHolderInjectionProps {
  num?: number;
  onChange(num: number): void;
}

interface NumberHolderProps {
  children(injection: NumberHolderInjectionProps): JSX.Element;
}

interface NumberHolderState {
  num?: Number;
}

class NumberHolder extends React.Component<NumberHolderProps, NumberHolderState> {
  state = {
    num: undefined
  };

  onChange = (num: number) => {
    this.setState({
      num
    });
  }

  render(): JSX.Element {
    return this.props.children({
      num: this.state.num,
      onChange: this.onChange
    });
  }
}

interface NumberRendererProps extends NumberHolderInjectionProps {}

let isFirst = true;

const NumberRenderer: React.SFC<NumberRendererProps> = (props) => {
    // コレがないと無限ループする
  if (isFirst) {
    props.onChange(777);
    isFirst = false;
  }

  return (
    <div>
      <p>{ (props.num || 10000) } </p>
    </div>
  );
};

const WrappedNumberRenderer: React.SFC<{}> = (_) => (
  <NumberHolder>
    {(injection: NumberHolderInjectionProps) => <NumberRenderer {...injection} />}
  </NumberHolder>
);

storiesOf('TypeScript&RenderPropsの実験', module)
  .add('Simple実装', () => (
    <WrappedNumberRenderer />
  ));

PromiseとかRxとか検討してる人が読んでほしい資料

RxとかPromise、event/delegate をどう選択すれば良いんだよってお話の一つの解答

www.slideshare.net

どういうアーキテクチャでどういう非同期処理を行うのかイメージした後できめましょー

目についたもの

超ウルトラ耳が痛いブログ記事 yshibata.blog.so-net.ne.jp

行きたい president.jp

めちゃんこ面白そうな本

初版から好きだったので3版も読みたい.

今更ノワールのSwitch版が出たことを知る.久々にやりたい.

tumblrから移植

結局戻ってきた

https://ozw-sei.tumblr.com/post/174228104575/お宮の松
ozw-sei.tumblr.com

https://ozw-sei.tumblr.com/post/174228055325/zenjectで苦しんだ
ozw-sei.tumblr.com

https://ozw-sei.tumblr.com/post/172740952255/playmakerとarbor使ってみた
ozw-sei.tumblr.com

https://ozw-sei.tumblr.com/post/172239198870/seijiroraytracer
ozw-sei.tumblr.com

https://ozw-sei.tumblr.com/post/171487480030/継承はクソだ
ozw-sei.tumblr.com

https://ozw-sei.tumblr.com/post/171197224235/htc-vive買った
ozw-sei.tumblr.com

近況

新しいPC組んだ

 

Core i7 8700k 

RAM 16GB 

ssd 256 くるーしゃる

GForce 1070ti 

ファンやケース、電源は適当に選んだ

 

6年くらいマカーだったんだけど、VR やりたさとゲーム、Apple へのヘイトが溜まりWindowsに帰ってきた

 

用途はゲーム、VR 、サーバーサイドプログラミング、Unity、Unrealブラウジング

 

サーバーはDocker 建てればいいしVisualStudio 快適。

ターミナルはまだお気に入りを見つけられてないけど、Powershellを使ってる。

 

zsh 使いたい。

 

最初はいろいろツール揃ってなくて大変だったけど、今はほぼ不満なく使えてる。

 

後からhdd 2T を買い足した。

 

後悔してるのはssd 256 では足りなかったこと。

 

日常的に使うソフトはssd に入れておきたいのだが、sdk が容量食いすぎで

iMac 買うより安かったし。

 

iPhone アプリ作らなくて、Linux 大好きじゃなければWin でいいわ。

Photonで遊んでみた

リアルタイムな通信するゲーム作ろうと思ってPhotonを使った覚書

重要なこと PhotonViewはゲームオブジェクトの位置や拡縮などの同期をとるための機能で順番の保証や最後まで通信が完了される保証はない。 また、RPCもサポートされており、例えばイベントの発生タイミングだけ同期をとり移動はそれぞれのクライアントで対応するようなことをしたい場合はRPCが使える。

送る内容も名前とターゲットの取り方のみでとてもシンプルにまとまってて使いやすかった。

成果物

github.com