https://ozaki25.hatenadiary.jp/entry/2018/02/01/220000

2018/2/1
https://reactjs-meetup.connpass.com/event/76375/

Opening Talk (10min)

React17

componentWillMount系幾つか非推奨になる
- v17で消える
代替があるわけではない
- willmountはconstructorとかでかけと
context api
https://reactjs.org/docs/how-to-contribute.html

Talk: Static sites with create-react-app and Junctions (20min)

@james_k_nelson
https://reactarmory.com

15分でアプリを作る

create-react-app
junctions
- https://junctions.js.org
create-react-appだとビルドしたあとのhtmlの中はscriptタグだけ
- SNSとかにはっても何も出ない
- junctionsつかうと対応できる
junctions staticを使うと複数のhtmlを生成できる
mdファイル読み込んでcomponent生成できる
surge
- アプリを公開出来る
- https://surge.sh/

Panel Discussion about React (40min)

@james_k_nelson
@yosuke_furukawa
@yoshiko_pg
@koba04 (moderator)

Reactに足りないもの

業務的にformを作ることが多い
- 入力項目多いときとか
SSRとその後の画面行く時にスムーズにいかない？
アニメーションが大変
ルーター
裏側でsetStateして準備できてから遷移とか最近できてきてる

サードパーティライブラリ

@yoshiko_pg
- reduxは入れる
- redux-formも
- uiは使わないように
@james_k_nelson
- axios
- classNames
  - https://github.com/JedWatson/classnames
@yosuke_furukawa
- react-router
  - v3からv4で大きく変わった
  - onEnterというページに入る直前のフックがなくなっちゃった
- formic
  - https://github.com/jamiecopeland/react-formic
- virtualize
  - 全部renderしなくてよくて、見えてるとこだけrenderできるようにする
  - https://github.com/bvaughn/react-virtualized
ドラッグアンドドロップ
- https://github.com/react-dnd/react-dnd
ルーターの管理はreactの外側の世界で管理した方がきれいになる

CSSどうしてる

@yoshiko_pg
- styled-component
- ひとりで全部作るならいい
- デザイナーさんとかいるとうまくできない
- 普通にSCSSでBEMでなんとかなってる
- CSSの見た目が維持されてる方が好きとか
  - JSオブジェクトではなく
  - CSS生成するツールとかで対応しづらくなるから
@james_k_nelson
- LESSとCSS modules
- CSS in JSセキュリティ問題ある
  - tooltipでxssできちゃうとか最近出でる
@yosuke_furukawa
- SASSとかSCSS
- SSRするときコードが多いとスプリットしないで同期ロードしてる
  - SSRのときのほうが早くCSSあたる

React教える時

Reduxもまとめて教えちゃう
- 古川さんはReduxおし
Reactだけでも作れる
- jsxもなくてもいい
- babelとかもいらなくなる
複雑にしてるのはレイヤーを分けたいから
- 色んな人が関わって作るからルールを作って強制している効果がある
html,css分かる人相手の時と、JS自体は書ける人相手のときとか

ロジックどこにおく

本当にピュアなロジックならUtil
- componentのutilsとか
- npm_modulesにしちゃうとかも
でもドメインからむことが多い
- それはReduxの世界へ
apiからもらったものをreducerで使う時変換したいとき
- selectorってのを使う
  - RDBでいうところのビュー
- プロパティ省いたり変換したり

Reactの読み方(仮) (10min)

@malloc007
ryota-murakami
https://speakerdeck.com/ryotamurakami/10-min-reactdom-codebase-overview

Reactのリポジトリ

monorepo
- packageの中にいろいろ

Redux のディレクトリ管理を考える (10min)

Reduxのディレクトリ構成悩む

コントリビューターも悩んでる

論点

component設計
store設計

component設計

container
- reduxと繋ぐ部分
- viewを書くとこではない
presentational
- viewのみ
- reactのみ
- reduxを意識しないもの

store設計

rails-style
domain-style
ducks

rails-style

役割ごとにわけるタイプ
railsに似てるから
チュートリアルもこれ

domain-style

ドメイン単位でディレクトリ
store-domain-action&reducer

ducks

action,reducer同じファイルに入れちゃおうってやつ

まとめ

actionとreducerを分けて考えるべきではない

中大規模開発をReactで行う現場から伝えたいこと (10min)

現場での泥臭い話

B2B
管理画面作ってる
react + redux
enzymeでテスト

テスト

書かないとのちのち苦しむ
何ヶ月も前に作ったものを手動でテストはつらい
書くようにするにはどうすればいいか
- TDD
- できるだけ並行でテスト書く
- CIでテスト結果確認できるようにする
- 新規実装時に同時にspecファイルつくるようにする

共通コンポーネントを可視化

新しい開発者が同じの作っちゃうとか
共通コンポーネントあるか都度聞く聞かれるのも大変
storybook必須

ドキュメント

開発環境のバージョン開発環境の立ち上げ手順
コーディングガイド
- JSDoc
- 変数名
テストの書き方
PRレビューの指針になるようなドキュメントにする
wikiに書いてたけど１つのリポジトリにした
多すぎてそれも見づらくなった
今はgitbook使ってる

バージョン変更

小刻みにあげること
習慣的に行う
2週に一度バージョン更新
nodeはLTSのバージョンが更新された時
依存パッケージはlockしておくこと