$30 off During Our Annual Pro Sale. View Details »

文学作品「檸檬」をReactで読む

 文学作品「檸檬」をReactで読む

Reactでごちゃこちゃやった話。React LT会 @Informetis (2019-07-03) で発表。
ソースコード:https://github.com/mqtsuo02/lemon-with-react
詳細な解説:https://qiita.com/mqtsuo02/items/5a4b7a5e3379c75116f3

Matsuo Obu

July 03, 2019
Tweet

More Decks by Matsuo Obu

Other Decks in Technology

Transcript

  1. by mqtsuo02 2019-07-03 React LT会 @Informetis 文学作品「 檸檬 」を React

    で読む
  2. 自己紹介 - フリーランスのWebエンジニア - 仕事も個人制作もReact - 趣味を聞かれると何を話していいか分からない - Emotionにはまっている

  3. 最近のはなし Reactでゲームを作りたくなった

  4. 何故Reactで? いつも使わないAPIとかの勉強になりそうだから

  5. 何故Reactで? ドヤれそうだから

  6. 手始めに メッセージボックス実装してみた

  7. 作ったもの mqtsuo02 / lemon-with-react

  8. 仕様的なもの mqtsuo02 / lemon-with-react - 文字が流れる - 全文表示後に ▼ が点滅する

    - クリックすると次の文章が表示される - 途中でクリックすると全文表示される
  9. 当初の構想 stateに文字ぶちこんでいけばいいか …...

  10. 当初の構想 stateに文字ぶちこんでいけばいいか …... ↓ 再描画が走りまくってやばい ( ピカピカする )

  11. 新たな構想 Reactに内緒でやろう

  12. 新たな構想 - 流れる文字はstateではなく、インスタンスのプロパティでもつ - setTimeout()で再帰的に文字を結合していく - refを取得して、innerTextで文字を直接DOMにぶちこむ いかにReactに気づかれずにやるかがキモ

  13. 実装 メッセージの初期化 InitializeMessage() { this.messageChars = this.props.message.split(""); this.charCount = 0;

    this.message = ""; }
  14. 実装 再帰的な文字結合 streamMessage() { setTimeout(() => { this.message += this.messageChars[this.charCount];

    this.charCount++; this.messageRef.current.innerText = this.message; this.streamMessage(); }, 50); }
  15. 結果 stateがいない世界観

  16. その他の実装 shouldComponentUpdateを実装して 再描画をブロック shouldComponentUpdate(nextProps) { return nextProps.message === this.props.message ?

    false : true; }
  17. その他の実装 点滅する▼はEmotionでアニメーションを実装 const blink = keyframes` 0% {...} 50% {...}

    100% {...} `; const nextStyle = css` animation: 1s linear infinite ${blink}; `; const NextSymbol = () => <span css={nextStyle}>▼</span>;
  18. その他の実装 テキストのフォーマットと配列化 const formatText = text => text.replace(/\r?\n/g, "").replace(/ /g, "");

    const splitText = text => text .replace(/。/g, "。,") .replace(/」/g, "」,") .split(",");
  19. 気になる方は mqtsuo02 / lemon-with-react ぜひぜひチェックしてみてください

  20. 普段Reactでやらないようなことするのは楽しい 再描画まわりに詳しくなった ゲーム完成したら遊んでください このLTで伝えたかったこと Reactのお仕事おまちしてます!

  21. E N D