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