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

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

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