【勉強会メモ】React Beer Bash!

react-beer-bash.connpass.com

• 日時：2018/03/07(水) 19:00 〜 21:00
• 場所：さくらインターネット本社 オープンエリア

大阪でもReactを盛り上げようという勉強会です。初開催ということもあり基礎知識的な話や別のコミュニティやサービスの事例紹介などもあってボリューム的には多かったのですが、メモを残したのは技術的なテーマだけだったので他のテーマは割愛します。

Reactの案件で感じた成功と反省

Gemcook 前田さん

Reactの実例紹介

名簿管理サービス

• グラフ
• メール送信
• 検索機能
• 地図と連動

ディレクトリ構成

• Reduxの構成要素
  • actions
  • containers
  • reducers
• 部品
  • components⇒共通コンポーネント
  • route.jsx⇒ルーティング
• その他
  • settings⇒アプリの設定
  • stylesheets⇒css
  • utils⇒共通関数

サロン商品発注

• 受発注
• CSV

ディレクトリ構成

• Reduxの構成要素
  • actions
  • containers
  • models
  • reducers
• 部品
  • components⇒共通コンポーネント
  • route.jsx⇒ルーティング
• その他
  • config
  • styles⇒css
  • utils⇒共通関数

⇒ActionからModelを分離

• Redux Actionsを使うことでActionのコードが減る
• 学習コストは上がる

※メモ qiita.com

ライブラリ

• Semantic UI React ⇒シンプルなUI
• Recharts ⇒グラフ
• Reapop ⇒通知
• Redux Form⇒Form関連（フォームの作成、バリデーションなど）
• react-bootstrap-table ⇒Bootstrap式のデータテーブル

成功と失敗

• ページ、コンポーネント単位での分割した作業ができる
• 既存ライブラリを探しておくほうがいい
• Reactのバージョンアップによるライブラリの仕様変更についていくのが大変
• 日々ベストプラクティスが変わるので毎日調査が必要

React x Fluxで脱jQueryコード

ねっこ さん

Juicer

• フロント：React, Flux
• BFF：Lambda Go, API Gateway
• 検索：Elasticsearch

背景

• PHP+twig⇒Rest APIへのサーバサイドアーキテクチャの変更
• Amgularと違って他のライブラリを組み合わせることができる
• サーバサイドにビューを持つことをやめたい

React × Flux

Flux

• Reactのために作られたアーキテクチャ
• Viewが肥大化しないための仕組み
• フレームワーク的に立ち振まいつつReactのメリットを活かす

※メモ

qiita.com

Flux Utilsの利用

facebook.github.io

注意点

• 単一方向データフローを基本は遵守する
• Fluxは二重にDispacheできない
  • どうしても行う場合はsetTimeoutを0秒に設定してDispacheする
• アニメーションが絡んでくると期待通りの動きにならない
  • 必要な場合はレンダリングを発生させずにステータスの更新を行う
• レンダリングチューニングのためのshoundComponentUpdateメソッドは必ずデフォルトにしない
• keyに気をつける…ReactがViewを管理するために重要

脱jQuery

• jQuery=Reactではない
• DOM操作やjQueryアニメーションはまだまだ利用用途がある
• デザイナーやコーダ目線からみたらまだjQueryを完全に捨てきれない

どう共存するか？

jquery

• 状態管理を処理しないアニメーション⇒jQueryにやらせる
  • 順次表示するだけはOK
  • 5件まで表示してボタンを押すと6件目以降を表示する場合などは状態管理が必要なのでNG

React

• jQueryを使うから意識することはない

ReactでDecoratorを使う

平野 さん

speakerdeck.com

Decoratorsとは

• EcmaScriptドラフトの機能
• 処理の追加や置き換え
• @ マークを付ける
• Javaのアノテーションのような記述

例）プロパティの追加

@name("React")

• nameのプロパティが追加される

Decoratorsの使い方

• Babel
• TypeScript

Decoratorsの事例

• react-redux
  • @connect で簡潔に書ける
• Mobx
  • stateを管理
  • @observalbe でobservableにしてくれる
• react-log-decorator
  • @logで props と state の引数をconsoleログに出す
• pure-deep-equal
  • shouldComponentUpdate の中でdeep compare
  • 参照：SPAをパフォーマンス・チューニングした話 // Speaker Deck

まとめ

• コードが簡潔になる
• アスペクト指向的に使う
• まだ提案中なので自己責任で