ytnk531の日記

日々調べたことを書きます。

勉強会レポート UIT#6 進化する React.js

UIT#6

フロントエンド開発の勉強会。LINE株式会社が運営していて、1クォーターに1回のペースで開催している。

  • テーマ: 進化する React.js
  • 場所: LINE本社 カフェテラス(新宿ミライナタワー23階)
  • 参加費: 0円
  • 参加人数: 100人
  • 参加方法: connpassで抽選

https://uit.connpass.com/event/119594/

Hooks で作る React.FC

Takepepe / DeNA/デザイン本部・デザインエンジニアリンググループ

https://speakerdeck.com/takefumiyoshii/hooks-tezuo-ru-react-dot-fc

Hooksというreactの新機能を使ってアニメーションを実装できますよという話。 従来はFunction Componentに実装しなければ行けなくて、それが結構辛かったけど、Hooksならもう少しきれいに書けるみたい。 そもそもなんでアニメーションにそこまでこだわって実装するの?に対して深い考察がされていた。要は、コンテキストによってアニメーションが重要となる場合があり、場所を見極めて適切に使うことで機能価値を高められるかもしれませんよ、という話だった。詳細はスライドを見てくださいぜひ。

Page Stack again in React

sunderls / LINE株式会社 - フィナンシャル開発室

https://speakerdeck.com/sunderls/pagestack-in-react-again

  • ユーザーはweb(ブラウザ)よりnative(アプリ)を好む傾向にある
    • そもそもサービス提供者側がアプリ推し
    • とはいえ起動速度、新規ページのロード速度はあまり変わらない
    • ページ繊維時のサクサク感、特に前画面への戻りは圧倒的にnativeのほうが良い
  • nativeのサクサク感をwebに取り入れるために、Page Stackを開発した
    • 表示したのページのDOMをページごとに記録するスタックを持つReactComponentを作った
    • 戻るときはスタックから取り出すのでサクサク!
    • 画面遷移が多いとスタックが多くなりすぎて重たくなってしまうので、アプリの性質によって使えたり使えなかったりする
    • スタックのサイズは設定できる

native > webの構図に対して一石投じたい!という取り組みでした。どうしてそんな構図になってるか?に対する考察が大変興味深かったです。 nativeとwebでページロードがそんなに変わらないっていうのが、動画で比較されててめちゃくちゃわかりやすかったです。

現場から届けるReactの悩みと改善

sakito / ヤフー株式会社 https://speakerdeck.com/mukai21/xian-chang-karajie-kerureactpuroziekutofalsenao-mitogai-shan

開発していく中で、UIまわりのコードが複雑になりすぎて開発スピードが落ちてきていたので、いろいろ技術を導入して解決しようと奮闘した話。 - TypeScript - Emotion - Formik - Re-ducks - Immer

アプリに対して適切な技術を取り入れて改善していくの、かなり大変だと思うけど、どんどんやっていけるのはsakitoさんのパワーかなと思った。すごい。 導入する前の準備を他のエンジニアを巻き込んで丁寧にやっていたみたいなので、そのへんの根回しというか技術からちょっと外れてるけどすごく大事なノウハウを聞けたのすごく良かった。もうすこし踏み込んで話し聞ければよかったな(質問すればよかった)

所感

どの発表も、なぜそれをやるのか、どんな価値があるのかというところを丁寧に説明していたのが印象的だった。UIに対してどんな貢献があるのか、UIが変わるとユーザーがどう嬉しいのかという点について発表者の考察が聞けたのでわかりやすかった。今回はreact.jsが副題に入ってはいるが、そこまでreact.jsに特化した話でもなかった(ように聞けるプレゼンだった)。

懇親会への参加は20名程度。ピザとかオードブルがたくさん出てきてとても豪華でした。

potato4dさんが司会なさってました。司会上手でした。すごい。