1つのレビューコメントがブログ記事になった話

© 2025 Dinii Inc. 1つのレビューコメントがブログ記事になった話 noren.ts #2 13 Jun,
2025 ta21cos

株式会社ダイニー © 2025 Dinii Inc. ※こちらの枠内に詳細や、画像を記載/貼り付けしてください。白枠は、必要に応じて消していただいても大丈夫です。 1つのレビューコメントがブログ記事になった話自己紹介
所属 • 株式会社ダイニー • プロダクトエンジニア • ファイナンス事業本部 @ta21cos (坂口達彦) 趣味 • ゲーム • コーヒー

株式会社ダイニー © 2025 Dinii Inc. オペレーションなしで売上UP! AIと専属スタッフにお任せお客様を
自動で会員化自動販促メッセージアンケート自動回収店員へのチップ/投げ銭圧倒的な使いやすさで客単価UP ロイヤルティプログラム顧客情報を接客に活用株式会社ダイニー | 1つのレビューコメントがブログ記事になった話

TypeScript, React による言語・フレームワークの統一ダイニーについて複数プロダクトを跨った機能修正でも、一つのチームで担当することができる © 2025 Dinii Inc. 株式会社ダイニー
| 1つのレビューコメントがブログ記事になった話

本日のテーマ

株式会社ダイニー © 2025 Dinii Inc. 01 なぜコンポーネントの中でコンポーネントを定義するのは良くないのか？ 1つのレビューコメントがブログ記事になった話
02 03 ブログという形でレビューでの学びを活かすまとめ

株式会社ダイニー © 2025 Dinii Inc. なぜコンポーネントの中でコンポーネントを定義するのは良くないのか？ 01
1つのレビューコメントがブログ記事になった話

株式会社ダイニー © 2025 Dinii Inc. ダイアログを書きたい（よくある例） 1つのレビューコメントがブログ記事になった話 render 関数を
用意する

株式会社ダイニー © 2025 Dinii Inc. ダイアログを書きたい（今回書いたコード） 1つのレビューコメントがブログ記事になった話こうすればコンポーネントっぽ
く書けるのでは…？

株式会社ダイニー © 2025 Dinii Inc. レビューのやり取り 1つのレビューコメントがブログ記事になった話レビューコメントをいただいた基本的には
「よく見る書き方」で書いたほうが良いというコメント

株式会社ダイニー © 2025 Dinii Inc. React が Component を解釈する仕組み
1つのレビューコメントがブログ記事になった話 React は ReactElement という形でコンポーネントを保持する ※こちらの枠内に詳細や、画像を記載/貼り付けしてください。白枠は、必要に応じて消していただいても大丈夫です。

株式会社ダイニー © 2025 Dinii Inc. 1つのレビューコメントがブログ記事になった話 2つの Dialog のコード
<Component /> の場合 {renderComponent()} の場合

株式会社ダイニー © 2025 Dinii Inc. 1つのレビューコメントがブログ記事になった話 <Dialog /> と書いた場合
<Dialog /> の場合

株式会社ダイニー © 2025 Dinii Inc. 1つのレビューコメントがブログ記事になった話 {renderDialog()} と書いた場合先に
renderDialog 関数が評価される {renderDialog()} の場合

株式会社ダイニー © 2025 Dinii Inc. 1つのレビューコメントがブログ記事になった話 <Dialog /> と書いた場合
state が変わったので Dialog 関数も新しくなる全く新しい関数になったので、全く新しいコンポーネントとみなされる <Dialog /> の場合

株式会社ダイニー © 2025 Dinii Inc. 1つのレビューコメントがブログ記事になった話 {renderDialog()} と書いた場合 DialogContent
自体は Component の外 → Component 目線は常に同じ参照 DialogContent 側で適切に再描画される（強制的な全体再描画にならない） {renderDialog()} の場合

株式会社ダイニー © 2025 Dinii Inc. 1つのレビューコメントがブログ記事になった話 {renderDialog()} と書いた場合 {renderDialog()}
の場合（極端な例）再描画されない！再描画される

株式会社ダイニー © 2025 Dinii Inc. { type: Component, //
コンポーネントは関数で表現される props: {...}, key: null, childern: ..., ... } 1つのレビューコメントがブログ記事になった話まとめ { type: "p", key: null props: { ... children: "Hello! }, ... } props が変わるたびに Dialog 全体が再描画される <Component /> の場合先に関数が評価され、返り値が使われる props が変わった場所だけが再描画される（実際は DialogContent の実装に依存する） {renderComponent()} の場合

株式会社ダイニー © 2025 Dinii Inc. { type: Component, //
コンポーネントは関数で表現される props: {...}, key: null, childern: ..., ... } 1つのレビューコメントがブログ記事になった話まとめ { type: "p", key: null props: { ... children: "Hello! }, ... } props が変わるたびに Dialog 全体が再描画される <Component /> の場合先に関数が評価され、返り値が使われる props が変わった場所だけが再描画される（実際は DialogContent の実装に依存する） {renderComponent()} の場合再描画が抑制できる！コンポーネントの中でコンポーネントを定義

動的に要素を置きたい場合 {render()} を使おう！

株式会社ダイニー © 2025 Dinii Inc. その1 1つのレビューコメントがブログ記事になった話専門性の高いレビュー +
活発な議論 • コードオーナーが「Platform チーム」という技術のプロフェッショナルチーム • 再描画の仕組みについて適切な指摘をもらえた重要な指摘をもらえた + 何がわからないかを理解できた • PR 上・Slack・対面での質疑応答・議論

株式会社ダイニー © 2025 Dinii Inc. その2 1つのレビューコメントがブログ記事になった話興味 +
学びの深堀り • SNS で見た本を読んでみる • 解説記事を読む https://learning.oreilly.com/library/cover/9781098138707/250w/ 学びを確かなものにできた

株式会社ダイニー © 2025 Dinii Inc. その3 1つのレビューコメントがブログ記事になった話ブログ委員会 •
偶然自分もそのメンバーに選ばれた • 基本は月1回、ブログを書く活動をしている • ブログのネタを探していたとき、レビューの内容を提案してもらえた書かざるを得ない環境に立てた

株式会社ダイニー © 2025 Dinii Inc. まとめレビューは学びの宝庫活発な議論も大事専門性の高いレビュー
+ 議論自分で深ぼってこそ知識になるエンジニアの醍醐味興味 + 学びの深堀り書かざるを得ない状況は後押しをしてくれるアウトプットで知識をさらに深めるブログ委員会 1つのレビューコメントがブログ記事になった話

株式会社ダイニー © 2025 Dinii Inc. ▪ 自分が得た学びをコミュニティに共有できた ▪ ブログを書くモチベーションが上がった
▪ 成果物として ▪ （会社の広報にもなった？） 1つのレビューコメントがブログ記事になった話アウトカムブログを書いて得られたもの

レビューには学びの種がたくさんある！

株式会社ダイニー © 2025 Dinii Inc. ▪ React では、コンポーネントの中ではコンポーネントを定義しない
1つのレビューコメントがブログ記事になった話まとめ本発表のまとめ ▪ アウトプットによって、様々なアウトカムを得られた ▪ レビューでの学びをブログ化する際、次が大切だった • 専門性の高いレビュー + 議論 • 興味 + 学びの深堀り • ブログ委員会

1つのレビューコメントがブログ記事になった話

1つのレビューコメントがブログ記事になった話

Other Decks in Programming

Featured

Transcript