Recommended
More Related Content
Similar to Reactにflowtypeを組み合わせることで、我々は何を楽にできたか
Similar to Reactにflowtypeを組み合わせることで、我々は何を楽にできたか (20)
More from LINE Corporation
More from LINE Corporation (20)
Recently uploaded
Recently uploaded (14)
Reactにflowtypeを組み合わせることで、我々は何を楽にできたか
- 3. 自己紹介 米原 斉美 (@h_demon) LINE Fukuoka株式会社 開発室 UITチーム フロントエンド全般を担当。 Iターンで2年前に福岡に来ました。
- 4. • 我々は何に苦労していたのか • Flowtypeでどの過程が 保証できるのか • まとめ Agenda
- 5. 我々は何に苦労していたのか • 以前、React + Fluxの大規模開発で失敗。 • 複数画面のモバイル用Webアプリ。 • 無限にでるバグ • そもそも動かない • UIが破綻する • APIがエラーを返す
- 6. Business Logic 我々は何に苦労していたのか Web API Client-side Storage UI UI Web API Client-side Storage
- 7. Business Logic 我々は何に苦労していたのか Web API Client-side Storage UI UI Web API Client-side Storage
- 8. Business Logic 我々は何に苦労していたのか Web API Client-side Storage UI UI Web API Client-side Storage
- 9. Business Logic 我々は何に苦労していたのか Web API Client-side Storage UI UI Web API Client-side Storage
- 10. 今回作ったチャットツールの構成 • １画面だけのWebチャットクライアント • React + Flux Utils • Redux風の設計 • Single State • Reducerはstateを受け取り、stateを返す
- 12. Action Creator Store Reducer Components pass state interaction Comp Comp Comp pass state pass props dispatch type P = { text: string }; const MyComponent = (props: P) => <div>{props.text}</div>;
- 13. Action Creator Store Reducer Components pass state interaction Comp Comp Comp pass state pass props dispatch type S = { /* Stateの型を定義 */ }; type A = { /* Actionの型を定義 */ }; const someReducer = (state: S, action: A): S => { // 新しいstateを作って返す return newState; };
- 14. Action Creator Store Reducer Components pass state interaction Comp Comp Comp pass state pass props dispatch type A = { type: “add”, payload: {…} } | { type: “remove”, payload: {…} }; … // action: Aで渡されたとする if (action.type == “remove”) { // “add”のpayloadを前提にしたコード }
- 15. Action Creator Store Reducer Components pass state interaction Comp Comp Comp pass state pass props dispatch type S = { +messages: $ReadOnlyArray<string> }; const initialState: S = { messages: [“hello!”] }; // Error initialState.messages.push(“hi”);
- 16. まとめ • Flowtypeで実行時エラーを防ぐのが楽に。 • Flux（or Redux）のフローの多くの部分は、 Flowtypeで静的に型の整合性が保証できる。 • できない部分もある！
- 17. Thank you
Editor's Notes
- 私は今回、LINE占いというプロジェクトで簡単なチャットツールを作りました。 そのツールの詳細は
- まず今回の発表の背景をお話します。 以前私は、あるサービスでReactとFluxの大規模開発を経験しました。それはモバイル用のWebサービスで、トップ画面があり、コンテンツの画面があり、情報を入力するフォームの画面があり、というようなよくある構成のサービスです。 わりと大きな規模のサービスだったのですが、 原因としては、 特にあるエンジニアが担当する画面から、別のエンジニアが担当する画面へ、クライアント側で情報を渡すような場面で多くバグがでました。
- この件をもっと抽象化してみたいと思います。 クライアントをビジネスロジックに対する情報の入出力という観点から抽象化すると、こんな図で説明できると思います。 入力と出力ともに主に2つの種類が考えられます。UIと、Web API Client-side Storageです。これは主に、UIとして見えるものかそうでないか、という観点で分けています。
- 動かない、というのはいろんなパターンがありますが、UIが描画されない、破綻するというのは多いと思います。
- また、サーバがバリデーションエラーを返すこともあるでしょう。それはビジネスロジック層の出力が、APIが要求する入力の条件に合致していないことで起きます。
- また、ビジネスロジック層の中で実行時エラーが起きるということもあるでしょう。 何が言いたいかというと、多くの場合はこのような要素同士の入出力の要求が合致しないときに、サービスが止まるような問題が起こりうるということです。