Slide 1
Slide 1 text
by mqtsuo02
2019-07-03 React LT会 @Informetis
文学作品「 檸檬 」を React で読む
Slide 2
Slide 2 text
自己紹介
- フリーランスのWebエンジニア
- 仕事も個人制作もReact
- 趣味を聞かれると何を話していいか分からない
- Emotionにはまっている
Slide 3
Slide 3 text
最近のはなし
Reactでゲームを作りたくなった
Slide 4
Slide 4 text
何故Reactで？
いつも使わないAPIとかの勉強になりそうだから
Slide 5
Slide 5 text
何故Reactで？
ドヤれそうだから
Slide 6
Slide 6 text
手始めに
メッセージボックス実装してみた
Slide 7
Slide 7 text
作ったもの
mqtsuo02 / lemon-with-react
Slide 8
Slide 8 text
仕様的なもの
mqtsuo02 / lemon-with-react
- 文字が流れる
- 全文表示後に ▼ が点滅する
- クリックすると次の文章が表示される
- 途中でクリックすると全文表示される
Slide 9
Slide 9 text
当初の構想
stateに文字ぶちこんでいけばいいか …...
Slide 10
Slide 10 text
当初の構想
stateに文字ぶちこんでいけばいいか …...
↓
再描画が走りまくってやばい
（ ピカピカする ）
Slide 11
Slide 11 text
新たな構想
Reactに内緒でやろう
Slide 12
Slide 12 text
新たな構想
- 流れる文字はstateではなく、インスタンスのプロパティでもつ
- setTimeout()で再帰的に文字を結合していく
- refを取得して、innerTextで文字を直接DOMにぶちこむ
いかにReactに気づかれずにやるかがキモ
Slide 13
Slide 13 text
実装
メッセージの初期化
InitializeMessage() {
this.messageChars = this.props.message.split("");
this.charCount = 0;
this.message = "";
}
Slide 14
Slide 14 text
実装
再帰的な文字結合
streamMessage() {
setTimeout(() => {
this.message += this.messageChars[this.charCount];
this.charCount++;
this.messageRef.current.innerText = this.message;
this.streamMessage();
}, 50);
}
Slide 15
Slide 15 text
結果
stateがいない世界観
Slide 16
Slide 16 text
その他の実装
shouldComponentUpdateを実装して
再描画をブロック
shouldComponentUpdate(nextProps) {
return nextProps.message === this.props.message ? false : true;
}
Slide 17
Slide 17 text
その他の実装
点滅する▼はEmotionでアニメーションを実装
const blink = keyframes`
0% {...} 50% {...} 100% {...}
`;
const nextStyle = css`
animation: 1s linear infinite ${blink};
`;
const NextSymbol = () => ▼;
Slide 18
Slide 18 text
その他の実装
テキストのフォーマットと配列化
const formatText = text =>
text.replace(/\r?\n/g, "").replace(/ /g, "");
const splitText = text =>
text
.replace(/。/g, "。,")
.replace(/」/g, "」,")
.split(",");
Slide 19
Slide 19 text
気になる方は
mqtsuo02 / lemon-with-react
ぜひぜひチェックしてみてください
Slide 20
Slide 20 text
普段Reactでやらないようなことするのは楽しい
再描画まわりに詳しくなった
ゲーム完成したら遊んでください
このLTで伝えたかったこと
Reactのお仕事おまちしてます！
Slide 21
Slide 21 text
E N D