
2025.02.18
「売上をスケールする」AIの使い道とは アルペンが挑む、kintone×生成AIの接客データ活用法
React Hooks公開から1年で得られた知見(全1記事)
リンクをコピー
記事をブックマーク
西村爽氏:西村です。よろしくお願いします。『React Hooks公開から1年で得られた知見』ということで、株式会社ジェムクック(Gemcook)でHooksを導入するまでの経緯と導入後のメリットを語りたいと思います。
まず僕のプロフィールです。ジェムクックでフロントエンドエンジニアをしている西村爽です。ふだん主に使っているのはTypeScript、React、React Native、それからAWSです。最近はReact Nativeを書いていることが多いです。
趣味は囲碁をやっています。5歳くらいからやっていて、一時期棋院生でした。今でもオンラインで対局とかしているので、囲碁友達募集しています。
今日のアジェンダです。React Hooks概要ということで、React Hooksの基本的なことやメリットなどをおさらいします。次にGemcookのコンポーネントとHooksの歴史で、Hooks導入までの経緯とHooksを導入して何が変わったかを中心に話します。最後にまとめとして、今日のおさらいをします。
React Hooksの概要です。React Hooksは、React16.8.0以降で利用可能な関数コンポーネントのAPIです。かれこれ公開から1年ほど経っているので、使っている人も多いと思いますが、まず復習したいと思います。
その前に、なぜ関数コンポーネントなのか? というところを振り返っていきたいと思います。関数コンポーネントの何がいいのかを自分でももう1回考え直してみたんですけど、クラスコンポーネントはClass構文を使用していたり、thisやbindなどちょっと独特な構文を意識しないといけなくて、ちょっと複雑になりがちなのが煩わしかったというのも1つありました。
それに比べて、関数コンポーネントは、そのまま関数なので、非常にシンプルな記述ができてわかりやすいのがメリットだと思います。ただし、Hooks登場以前は、state、つまり状態をもつことができなかったので、そこがよくなかった。
React Hooksの登場で、stateが使えるようになりました。Hooksの登場で、関数コンポーネントが高機能になって、見通しのいいコードのままstateをもったりできるようになったので、コンポーネント間のロジックを簡単に再利用できるようになりました。
個人的には、ここのメリットが一番大きいなというふうに感じています。複雑になりがちなライフサイクルイベントや、フォームとかデータテーブルとかのちょっと複雑なロジックも共通化できるようになりました。
さらにテーブルとかで言うと、サービスごとにUIに依存せず、ロジックだけを書きたいなっていうところも大きいので、共通化して使用できるというのは、すごく便利になりました。
基本的なHookを少し紹介したいと思います。React公式にも書かれているんですが、これらの関数・Hookが提供されることによって、関数コンポーネントでもいろいろなことができるようになりました。あと、ここで書かれていないもので言うと、useRefやuseCallbackなども使うことが多いです。
useStateの基本的な使い方です。useStateに初期値を渡して、配列の分割代入を使用して、stateとそれを更新するための関数を受け取って使用する、というような書き方が基本です。
ここからが本題のジェムクックのコンポーネントの歴史です。ジェムクックも、初期はクラスコンポーネントとビューを返すだけの、簡単な関数コンポーネントを使用していました。
ただ中期になると、Recomposeというライブラリが公開されたので、それを使用しました。クラスコンポーネントはもう使わず、関数コンポーネント+Recomposeです。そしてようやくHooksが登場して、関数コンポーネント+Hooksという構成になりました。
Recomposeの採用について。Recomposeというのは、関数コンポーネントに今まで使えなかった状態の付与とか、ライフサイクルの実行などの機能を与えてくれるHOCのライブラリ。Hooks以前のHOCのライブラリですね。
このHOCは、コンポーネントを引数に渡してコンポーネントを返してくれる関数です。ちょっとややこしいですが、これによってクラスコンポーネントを排除できて、関数コンポーネントだけになりました。となったんですが、ただこれで「やったー」ということだけではなくて、Recomposeでもつらいところが、ちょっとだけありました。
Recomposeのつらいところなんですけど、RecomposeはHOCでコンポーネントをコンポーネントでラップするので、コンポーネントがどんどん増えていってソースが見づらくなってデバッグしにくくなったりっていうのがちょっとつらいなって思っていたところでした。
それとstateを定義するだけでも、HOCを使わないといけないので、ちょっと面倒くさいなんてことを思っていたところに、React Hooksが公開されました。
Hooksの登場です。Hooksの導入によって、HOCが少なくなってシンプルな構成になりました。あとはuseContextとかでpropsのバケツリレーがなくなって……まあなくなったわけではないですけど、ちょっと減ってすごくシンプルな構成になりました。そしてカスタムフックを作成することで、コンポーネント内のロジックを再利用できるようになりました。
これからのHooksです。Hooks以前はクラスコンポーネントもHOCもコンポーネントを再利用して共通化するような手法だったんですけど、Hooksの登場によって、コンポーネント内のロジックをカスタムフックという単位で再利用できるようになりました。
今のライブラリの流れを見ていても、カスタムフックを提供するライブラリがすごく増えているので、これからもそれが主流になっていくんじゃないかと思います。
ジェムクックでも使っているHooks対応のライブラリを紹介したいと思います。
react-useは、めちゃくちゃ便利なカスタムフックをいっぱい提供してくれるutilのライブラリです。GitHubにストーリーブックとかもあるので、眺めているだけでもけっこう楽しいライブラリなんですけど、ジェムクックでも多用しているというか、お世話になっています。
react-tableは、バージョン7以降からHooks対応したテーブルのライブラリです。実際自分で使ってみても、Hooks以前とHooks以降でもう書き方がまったく違うので、最初はちょっと面食らったんですけど、代わりにUIの構築にすごく集中できるようになったので、Hooksいいなぁと再認識したライブラリです。
そしてFormik。バージョン2以降からHooks対応したフォームのライブラリなんですけど、これもジェムクックでも使っています。あとここには書いていないんですけど、Redux Hook、React Routerとか、React Navigation。こちらはモバイルのReact Nativeのほうですね。これとかもHooks対応しています。ライブラリのHooks化は、これからもどんどん進んでいくんじゃないかなと思います。
今日のまとめです。Hooksの登場で関数コンポーネントが主流になりました。今まではクラスコンポーネントだとか、あるいはRecomposeでHOCで書くというような書き方でしたが、新しいプロジェクトとかこれからの主流は、関数コンポーネント+Hooksになっていきます。
Hooksを使用することで、コンポーネント間のロジックを共通化できるようになったのも1つ大きなところです。これまでは、ライブラリとかでもコンポーネントを提供するかたちだったんですけど、カスタムフックを提供するライブラリが主流になって、さらに柔軟なReactの書き方ができるようになっていくんじゃないかな、と思います。
ご視聴ありがとうございました。
関連タグ:
2025.02.13
“最近の新人は報連相をしない”という、管理職の他責思考 部下に対する「NG指示」から見る、認識のズレを防ぐコツ
2025.02.13
AIを使いこなせない人が直面する本当の課題 元マッキンゼー・赤羽雄二氏が“英語の情報”を追い続ける理由
2025.02.06
すかいらーく創業者が、社長を辞めて75歳で再起業したわけ “あえて長居させるコーヒー店”の経営に込めるこだわり
2025.02.12
マネージャーは「プレイング3割」が適切 チームの業績を上げるためのマネジメントと業務の比率
2025.02.14
報連相ができない部下に対するコミュニケーションの取り方 「部下が悪い」で終わらせない、管理職のスキル向上のポイント
2025.02.13
上司からは丸投げ、部下からはハラスメント扱い、業務は増加…プレイングマネジャーを苦しめる「6つの圧力」とは
2025.02.12
何度言っても変わらない人への指示のポイント 相手が主体的に動き出す“お願い”の仕方
2025.02.13
「みんなで決めたから」を言い訳にして仲良しクラブで終わる組織 インパクトも多様性も両立させるソース原理
2025.02.10
32歳で「すかいらーく」を創業、75歳で「高倉町珈琲」で再起業 「失敗したからすかいらーくができた」横川竟氏流の経営哲学
2025.01.07
1月から始めたい「日記」を書く習慣 ビジネスパーソンにおすすめな3つの理由
着想から2か月でローンチ!爆速で新規事業を立ち上げる方法
2025.01.21 - 2025.01.21
新人の報連相スキルはマネージメントで引きあげろ!~管理職の「他責思考」を排除~
2025.01.29 - 2025.01.29
【手放すTALK LIVE#45】人と組織のポテンシャルが継承されるソース原理 ~人と組織のポテンシャルが花開く「ソース原理」とは~
2024.12.09 - 2024.12.09
『これで採用はうまくいく』著者が語る、今こそ採用担当に届けたい「口説く」力のすべて
2024.11.29 - 2024.11.29
第20回エクゼクティブメンターイベント「今、「ひと」と組織が共創する〜働き方の未来へ」
2024.12.07 - 2024.12.07