TypeScriptで「Reactを自作しよう」をやってみた

最近2分間コーディングのすすめ、コードを書く習慣のハードルを下げるに触発されて2分間コーディングをやってみている。まずは昔興味が出ていたReactを自作しようをやってみたのでメモ。

やった様子は https://github.com/shibayu36/building-own-react に置いた。メインファイルは https://github.com/shibayu36/building-own-react/blob/main/src/index.tsx

create-react-appしたままだと色々おかしくなったのでejectして手直ししたり、JSXのtranspileを置き換えるためにwebpackの設定を少しいじったりしたところが苦労した。そのあたりについては https://github.com/shibayu36/building-own-react/commits/main を眺めると様子がわかると思う。

学べたこと

• Fiberという仕組みによって細かく作業単位を分割しながらレンダリングし、ユーザーのインタラクションを妨げないようにしている仕組みについて理解が深まった
  • 参考: http://blog.koba04.com/post/2017/04/25/a-state-of-react-fiber/
• Reactの型構造について理解が深まった
  • 参考: https://dackdive.hateblo.jp/entry/2019/08/07/090000
• JSXの解釈を自分で実装する方法が学べた
• requestIdleCallbackを使った無限ループっぽい仕組みによって、変更を監視する手法を学べた
• ReactのRender PhaseとCommit Phaseそれぞれでやっていることの理解が深まった
• 差分検出の簡単な流れについて理解が深まった

数百行くらいのコードで、JSXのtranspile・render・差分検出・関数コンポーネント・useStateが簡単に使えるものが出来上がるのはすごい。作った後にReactを使っているコードのスタックトレースを眺めていたら、今回作った関数名などが出てきて理解しやすくなったなと感じた。

参考

• 2分間コーディングのすすめ、コードを書く習慣のハードルを下げる
• Reactを自作しよう
• React Fiber現状確認
• TypeScript: ReactNode型とReactElement型とReactChild型 - dackdive's blog

AirPods ProとKrispでリモートミーティングの音声を快適に

最近家族と同室でリモートワークをしている。自分と家族は別々で仕事をしているので、家族が電話中の時に自分はミーティングをしていることがよくある。その時、家族の声によってミーティングの声が聞き取りにくくなったり、家族の声がミーティングに入ってしまうと、快適なミーティングができなくなってしまう。

この問題に対処するため色々試したところ、AirPods ProとKrispを使うと非常に快適になるということが分かったので紹介。

家族の声でミーティングの声が聞き取りにくくなることを防ぐ

これは単純でAirPods Proのノイズキャンセリング機能がかなり優秀なので、それをONにするだけで終了。

Apple AirPods Pro ワイヤレス充電対応

ただノイズキャンセリング機能を使うと自分の声が聞き取りづらくなるという問題もあるので、静かな時は外部音取り込みモードにしている。AirPods Proはイヤホンを長押しすれば、外部音取り込みモードとノイズキャンセルモードを瞬時に切り替えられるので便利。

家族の声がミーティングに入ってしまうことを防ぐ

次に家族の声がミーティングに入ってしまうことを防ぎたい。

まずAirPods Proは、PC付属のマイクと違ってそこまで周りの音を集音しないので、それだけでもだいぶ家族の声が入るのを防いでくれる。その上で大きめな声だと少しだけ入ってしまうので、Krispを導入して、よりノイズキャンセルするようにした。

jp.vcube.com

AirPods Pro + Krispを使うことで、部屋の中で自分と家族が会話していたとしても、自分の声しかミーティングには入らない状況にできて満足している。

こちらも、そもそも静かな時は全部の音を伝えた方が臨場感も出るかなと思い、静かな時はノイズキャンセリングをオフにしている。Krispは1クリックでオンオフを切り替えられるので良い。

参考: 他の人の音声のノイズを消す

これはKrispを導入するまで知らなかったのだけど、Krispは他の人の音声のノイズを消すこともできる。これも非常に便利で、例えば一時的に外出している人と通話をしていて会話が聞こえづらい場合に、こちら側でノイズキャンセリングを有効にすることで会話が捗った。

まとめ

今回はAirPods Pro + Krispでリモートミーティングの音声を快適にする体験について書いてみた。参考になれば嬉しいです。

プロジェクト初期は理想日見積もりし、徐々に相対見積もりへ移行する

プロジェクトマネジメントにおいて、見積もりをどのように行うかは結構難しい。僕は理想日見積もりの形式も、相対見積もり(ストーリーポイント)の形式も試したことがあるが、どちらも一長一短であった。

最近色々試す中で、プロジェクト初期は理想日見積もりし、徐々に相対見積もりへ移行するという方式がやりやすいと感じた。今回はその様子を紹介してみる。

理想日見積もりと相対見積もりそれぞれのメリット・デメリット

見積もりの基礎知識と「ストーリーポイント vs 理想日」の考察の記事を読むと、理想日見積もりと相対見積もり(ストーリーポイント)それぞれのメリット・デメリットがさっと把握しやすい。自分としては、それぞれ以下のように思っている。

• 理想日見積もり : 他の割り込みが全くなく、1日中タスクに取り組んだ場合を1理想日とする見積もり方式
  • メリット: 他に基準となるタスクがなくてもとりあえず雑に出せる。相対見積もりの概念を把握しなくても出せる。
  • デメリット: 人によってバラバラになる可能性がある。プロジェクトが進みメンバーのスキルが高くなるなどで、基準がぶれがち。
• 相対見積もり : 基準となるタスクを決め、相対的に見積もりをする方式
  • メリット: 人や能力の変化によって見積もりのばらつきが生まれにくい。
  • デメリット: みんなが理解できる基準を見つけにくい。

このようなメリット・デメリットから、理想的には相対見積もりの方が良いはずだが、プロジェクトの初めから相対見積もりにするとなかなか難しいと感じていた。

それぞれのデメリットを緩和するための作戦

メリット・デメリットを考えてみると、実は相対見積もりのデメリットはプロジェクト初期の全員が理解できる基準を見つけていない時だけだと分かる。そこでプロジェクト初期の基準が分かりにくい時には理想日見積もりを使い、プロジェクトが少し進んで基準が分かりやすくなった時に相対見積もりへ切り替えるという作戦にする。

プロジェクト初期は理想日見積もりする

プロジェクト初期は直近でやるべきタスクをプロジェクト所属の人全員で理想日見積もりする。1タスクごとに

• 見積もりできるように、どうなったらタスクが完了かを明確にする。分からないことがあればみんなでどんどん質問しながら完了条件を詰めていく
• プラニングポーカーを使って全員で見積もりを出す
• 見積もりが大きくずれたら、ずれた理由について会話し、再度見積もりを出す

という流れになるだろう。

プロジェクトが進むにつれて徐々に相対見積もりに変える

その後しばらく経っていくつかのタスクが終わったら相対見積もりに変えていく。基準を決められれば良いので、基準となるタスクをいくつかピックアップしていく。この時、全員が見積もりしやすくなるように、ピックアップするタスクはアサインがバラバラになっていると良いだろう。例えば次の画像のように、ポイントごとにタスクとアサインを並べて一覧にする。

このように基準さえできてしまえば、その後の相対見積もりは簡単だ。1タスクごとに

• 見積もりできるように、どうなったらタスクが完了かを明確にする。分からないことがあればみんなでどんどん質問しながら完了条件を詰めていく
• 基準をまとめたドキュメントを眺めながら、プラニングポーカーを使って全員で見積もりを出す
• 見積もりが大きくずれたら、基準を元に会話し、再見積もりする

まとめ

今回は、プロジェクト初期は理想日見積もりし、徐々に相対見積もりへ移行するという方式を試した内容を紹介した。プロジェクトの形によって適切な見積もり方法は変わるが、今回の方法も参考になれば嬉しい。

参考資料

見積もりの基礎知識と「ストーリーポイント vs 理想日」の考察 - yigarashiのブログ