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

今年の出来事

1月〜3月

  • Unity 5.3から5.4にアップグレードした
  • 古いNGUIが対応してなくてもアプデすることになる

    • NGUIもAnimatorが死にまくった
    • il2cppも変わったようで所々クラッシュする箇所が出てきた
  • 開発体制の見直しを行った

4月~7月

Unite 2017 参加した☆

メインPCをArch Linuxにした。

ところがUnityをいじれない期間を経験してUnityが動く環境が恋しくなってMacに戻した.

でも、ゼロからLinux環境構築した経験なんかなかったのでとても勉強になった。

普段全然意識してなかっただけでWinやMacにどれだけお世話になっていたかを実感した。

  • 画像処理

  • CygamesがOpenCVで受け入れテスト自動化したスライドを公開したので真似してた.

speakerdeck.com

  • 完全なコピーじゃないけど、似たようなことはできた☆

8月〜9月

ZBrushCoreはじめた。

10月〜12月

色々あってiOSScalaAPI書き始めた!

最後にiPhoneアプリをSwiftで作ったのが2014年の秋だったので3年分のChangeLogを一気にマイグレーションした。

感想としては想像以上に困らなかった。

ぶっちゃけ、他の分野で培った言語やランタイムの知識や基礎が思いっきり流用できたのでUIKitの謎挙動くらいしかはまった記憶がない。

過去2年では流行の新技術よりも基礎的な所や抽象的なことを考えることが多かったからかな?とりあえずなんとかなってる。

総じて

改めて振り返ると想像以上に過去2年の経験に鍛えられてたんだなーって染み染みと感じました。