qsonaのブログ

プログラマーです。Node.jsでのサーバサイド開発の国内事例を増やすのが目標。

第65回 HTML5とか勉強会 ー React最新情報 に参加したメモ

リンク

公式

eventdots.jp

安定のりぃさんログ

lealog.hateblo.jp

togetter

togetter.com

もう十分まとまってた。

感想

自分の立ち位置としては、フロントエンジニアではないけどJavaScript自体には詳しい方で、社内でReact/Reduxで動いてるPJがあるのもあって興味はある(いずれ書けるようになる必要がある)。Reactやfluxが何なのか的なのは理解するよう努力している。最新情報を普段から追うのは難しい。CSSは書いたことない。という感じでしたが、どのトピックも非常にストレートに自分のためになりました。

各セッション

React現状確認 by @koba04

speakerdeck.com

Reactの最新情報盛りだくさん。今後非推奨になる項目は特にチェックしておかなければです。

具体的なところだとPropTypesが非推奨っぽくなる話が特に気になった。flowやTypeScript使う、あるいはPropTypesは別パッケージへ。

なぜReduxを使うのか by @kuy

speakerdeck.com

Storeの役割を分割して名前をつけた、というのには納得。

Reduxの役割は状態管理に特化していて、外れるところがmiddlewareに切り出されエコシステムになっているというのは良い面でありつつ、・・・

スライド中にも入っている以下の議論。

togetter.com

このあたりについて、懇親会でkuyさんと古川会長と話すことができた。

フロントエンドの役割をもつサーバを挟み(BFF: Backends for Frontends などと呼ばれる) middlewareでやっているような処理はそこで持たせる、というようなことを話されていた。ちょうど、フロントサーバを導入したときにそういうフロントのための処理をどの程度やるべきなのか、ということを社内でも話していたところ。

Relay by @hokaccha

speakerdeck.com

GraphQL を中心として、サーバ・フロントまで含めたフルスタックなフレームワークとして期待される。データの取得を宣言的に書ける、というメリットは確かに納得。

下の記事のように、自分はちょうど社内でフロントエンドサーバーを絶賛検討中で、GraphQLも検討中。フルスクラッチでは書けないのでRelayを導入するのは辛そうですが、考え方等は勉強になりました。

qiita.com

How to style React components by @Quramy

How to style React components

CSSは今までに10行くらいしか書いたことがなく、ちょうどCSSの構造化の話に興味があったところだったので、有難すぎる話でした。

経験なさすぎて大した感想を述べられないのが残念ですが、CSS in modulesが良さそう(小並感

今回BEMは触れられませんでしたが、こういうのもありますよね。

GitHub - axross/bemmer: BEM-like simple classname builder.

まだ標準がないだけに色々な苦労がありそう(小並感

Atomic Design powered by React @ AbemaTV by @ygoto3_

www.slideshare.net

Atomic Designについては初めて知った。実例では、思った以上に本当に細かい粒度に分けていたのが印象的。

Stateless Componentでかつ粒度が小さく、ロジックがほぼ含まれないものであれば、デザイナーにとってもjsxを書く敷居が低くなる。確かに。

こちらの記事も参考になる。

ygoto3.com

その他

Reactの勉強会でしたが、AngularJSで有名な金井さんが受付のお手伝いをされていた。実は3年前くらいに本当に右も左も分からなかった時代、初めて行った勉強会はなぜかAngularJSのもので、金井さんがお話しされてたのでとてもよく覚えています、という話を金井さんにしたら、烏龍茶2Lを頂きました。

ygoto3さんは僕の前職であるサイバーエージェントの方で、チームの方々といらっしゃっていた。そのうちの1人は同期で、久しぶりに会った。技術的にもチームメンバーにも恵まれて、楽しそうで良かったなと思いました。