ReactなんでもLT会 #2 in LCDCに参加して

前回 ReactなんでもLT会#1 に引き続き、Reactの勉強会に参加してきました。
今回もその中から自分が気になったこと、ためになったことをピックアップしてまとめていきます。

ドメイン駆動なステート設計

最初に断っておくのですが、ステート設計の部分に関しては結果的に私の理解が追いつかなかっので、今回は「ドメイン駆動」と「ドメイン駆動設計（DDD）」について軽くまとめます。

ドメイン駆動とは

ドメイン駆動（ドメイン駆動設計）とは

ドメインの知識に焦点をあてた設計手法
という説明がどの本やサイトにも大体書いてあります。

では、「ドメイン」とはなんなのか。

英単語で「ドメイン」は「領域」を表す単語です。
つまりプログラムを適用する対象となる領域を指します。
ここではそのドメインの領域に何が属するかが重要になります。

すなわちプログラムでなんの問題を解決したいのかが重要になってくる分けです。

ドメインモデリング

この画像が比較的わかりやすいかと思います。
解決したい事象、問題を「ドメイン」とし、ドメインに対する関連する事象などを列挙して「モデル」を形成します。

例：メモをとる
- 紙、ペン、聞く耳、理解する言語能力...

とかですね。

次に列挙したモデルを元に継続的にソフトウェアに反映していきます。
先程の「メモをとる」という事象に対して、列挙したモデルは果たして完璧でしょうか？

紙とペンがあっても書く手が無いとメモは取れません。
このように常にモデルが完璧か否かを吟味しながらソフトウェアに反映していきます。

というようにDDDを理解するためには、前段階がすごい大変なんだなぁというのが今回の印象。
ただ、質の良いソフトウェアを作る上では避けては通れない考え方だと思いました。

今回発表していただいた方のスライドはこちらになります。
↓
ドメイン駆動なステート設計
 比較的参考になったQiita

Suspense使ってみた

SuspenseはReact v16.6から実装された機能で、非同期処理などでRenderを待機させたいstateがある場合に、データが揃うまでrenderをストップさせておくことができる機能です。

React official docs

メリット

renderを待たないで非同期処理を開始できるので早い
コンポーネントの遅延ロードを簡単に実装できる

デメリット

学習コストが高い
Promiseで再ロードされてしまうのでuseState, useEffect, useMemoなどの値が破棄されてしまい、使用できない。
非同期処理時にエラー(reject)が吐かれると処理が止まる。

印象としては便利そうではあるものの、まだ安定板での供給ではないので実用度は低そうですが、今後のアップデートではかなり使えるものになる思います。

ReactのKeysについて

Reactでリストを作った時など、よくユニークなキーを設定しないとwarningで怒られます。挙動は大概問題なく動くのですが、一応エラーなのでその理由を今回知ることができて基礎的なことではありますがいい収穫でした。

なぜユニークなキーを設定する必要があるのか

Reactには変更された箇所だけを検知してそこだけ更新する機能が備わっています。
それを実現するためにKeyが使用されています。
よって、リストなど同じような要素が並んでいる場合にKeyが正しく設定されていないと全件更新することになる場合が発生し、パフォーマンスの低下につながります。
inputなどで動的に追加する場合など、要素に入っている値が正しく更新されない場合もあるので、致命的なバグにつながる場合があります。

視覚的にめちゃくちゃわかりやすいサンプル