reading-mtc2018-web.pdf

LT at Roppongi.js #7

1. Reading mtc2018-web by sasurau4 Roppongi.js #7 at Retty
2. • Name: Daiki Ihara • ID: @sasurau4 • Job: react-native / Server Side Kotlin / GraphQL • Hobby: React, Typescript • Mind: Front-end engineer 自己紹介
3. 今日の話題 Mercari Tech Conf 2018 LP https://github.com/mercari/mtc2018-web
4. What is mtc2018 • Mercari Tech Conf（MTC）は、株式会社メルカリをはじめとするメルカリグルー プ各社が、これから目指す方向や、これから取り組む技術的なチャレンジについ てご紹介するエンジニア向けの技術カンファレンスです。 ※https://techconf.mercari.com/2018#aboutより一部抜粋 ◦ • 10月4日に六本木アカデミーヒルズで開催された
5. Why mtc2018-web
6. MTC2018 カンファレンスLPの裏話 〜GraphQL編〜
7. 気になるポイント • Typescript + GraphQL • Apollo • GitHubにコード公開されてる
8. よし、読むぞ
9. レポジトリを眺める https://github.com/mercari/mtc2018-web • monorepo • server / web ディレクトリ • rootのschema.graphqlがGraphQLのスキーマ定義 • rootにmockServerもいる
10. webのpackage.jsonを眺める • next • apollo-client • i18next • react • typescript • styled-components
11. さあ、コードリーディングだ
12. 分からない
13. 分からないポイント • nextは一体何をやっているんだ... • componentsやcontainersはいいとして、pages？？？ • routes.jsには’/2018/session/:id’のroutingしかない...
14. Next.js Learn やりました ※https://nextjs.org/learn/
15. 知見
16. • components -> LazyImage.tsx • 名の通り、画像の遅延読み込み用コンポーネント • Intersection Observer APIを使用 ◦ 要素がビューポートと交差するか監視する方法を提供する API ◦ Safariはsupportされていないので、webpackでバンドルする際にpolyfillしている 1. LazyImage Component
17. 2. timetableデータの持ち方 mock server production
18. 2. timetableデータの持ち方 mock server production
19. mockなのに段組が変わらない
20. 2. timetable データの持ち方 • store -> timetable.tsの中でオブジェクトとして定義 • sessionのidをフロントで持つことでtimetableの表示をコントロール • ウェブアプリケーションにおいてはサーバーしか知らないidを前もって、フロント が知っていることで煩雑な条件分岐を回避
21. おまけ
22. Mercari Engineering Blog 「MTC2018 カンファレンスLPの裏話 〜インフラ編〜」より
23. 作ってみた
24. デモ
25. まとめ • mtc2018-webレポジトリは知見がいっぱい ◦ i18n ◦ SSR ◦ componentの分け方 ◦ GraphQL Fragment ◦ Apollo Client ◦ etc. • Typescript + GraphQLはいいぞ
26. Thank you