Upgrade to Pro
— share decks privately, control downloads, hide ads and more …
Speaker Deck
Features
Speaker Deck
PRO
Sign in
Sign up for free
Search
Search
reading-mtc2018-web.pdf
Search
Daiki Ihara
November 19, 2018
Programming
1
550
reading-mtc2018-web.pdf
LT at Roppongi.js #7
Daiki Ihara
November 19, 2018
Tweet
Share
More Decks by Daiki Ihara
See All by Daiki Ihara
tc39_study
sasurau4
1
750
ArrayBufferとBinary
sasurau4
1
600
CLIから見るAngular, React, Vue
sasurau4
1
910
Metro Bundler in Web
sasurau4
0
940
Other Decks in Programming
See All in Programming
VS Code Update for GitHub Copilot
74th
1
550
なぜ適用するか、移行して理解するClean Architecture 〜構造を超えて設計を継承する〜 / Why Apply, Migrate and Understand Clean Architecture - Inherit Design Beyond Structure
seike460
PRO
1
720
RailsGirls IZUMO スポンサーLT
16bitidol
0
130
GoのGenericsによるslice操作との付き合い方
syumai
3
710
Benchmark
sysong
0
280
AIプログラマーDevinは PHPerの夢を見るか?
shinyasaita
1
180
Composerが「依存解決」のためにどんな工夫をしているか #phpcon
o0h
PRO
1
250
第9回 情シス転職ミートアップ 株式会社IVRy(アイブリー)の紹介
ivry_presentationmaterials
1
260
5つのアンチパターンから学ぶLT設計
narihara
1
140
0626 Findy Product Manager LT Night_高田スライド_speaker deck用
mana_takada
0
140
CursorはMCPを使った方が良いぞ
taigakono
1
210
Blazing Fast UI Development with Compose Hot Reload (droidcon New York 2025)
zsmb
1
280
Featured
See All Featured
A Tale of Four Properties
chriscoyier
160
23k
Creating an realtime collaboration tool: Agile Flush - .NET Oxford
marcduiker
30
2.1k
Making Projects Easy
brettharned
116
6.3k
Facilitating Awesome Meetings
lara
54
6.4k
Code Review Best Practice
trishagee
69
18k
We Have a Design System, Now What?
morganepeng
53
7.7k
GraphQLの誤解/rethinking-graphql
sonatard
71
11k
RailsConf 2023
tenderlove
30
1.1k
Fantastic passwords and where to find them - at NoRuKo
philnash
51
3.3k
Side Projects
sachag
455
42k
It's Worth the Effort
3n
185
28k
YesSQL, Process and Tooling at Scale
rocio
173
14k
Transcript
Reading mtc2018-web by sasurau4 Roppongi.js #7 at Retty
• Name: Daiki Ihara • ID: @sasurau4 • Job: react-native
/ Server Side Kotlin / GraphQL • Hobby: React, Typescript • Mind: Front-end engineer 自己紹介
今日の話題 Mercari Tech Conf 2018 LP https://github.com/mercari/mtc2018-web
What is mtc2018 • Mercari Tech Conf(MTC)は、株式会社メルカリをはじめとするメルカリグルー プ各社が、これから目指す方向や、これから取り組む技術的なチャレンジについ てご紹介するエンジニア向けの技術カンファレンスです。 ※https://techconf.mercari.com/2018#aboutより一部抜粋
◦ • 10月4日に六本木アカデミーヒルズで開催された
Why mtc2018-web
MTC2018 カンファレンスLPの裏話 〜GraphQL編〜
気になるポイント • Typescript + GraphQL • Apollo • GitHubにコード公開されてる
よし、読むぞ
レポジトリを眺める https://github.com/mercari/mtc2018-web • monorepo • server / web ディレクトリ •
rootのschema.graphqlがGraphQLのスキーマ定義 • rootにmockServerもいる
webのpackage.jsonを眺める • next • apollo-client • i18next • react •
typescript • styled-components
さあ、コードリーディングだ
分からない
分からないポイント • nextは一体何をやっているんだ... • componentsやcontainersはいいとして、pages??? • routes.jsには’/2018/session/:id’のroutingしかない...
Next.js Learn やりました ※https://nextjs.org/learn/
知見
• components -> LazyImage.tsx • 名の通り、画像の遅延読み込み用コンポーネント • Intersection Observer APIを使用
◦ 要素がビューポートと交差するか監視する方法を提供する API ◦ Safariはsupportされていないので、webpackでバンドルする際にpolyfillしている 1. LazyImage Component
2. timetableデータの持ち方 mock server production
2. timetableデータの持ち方 mock server production
mockなのに段組が変わらない
2. timetable データの持ち方 • store -> timetable.tsの中でオブジェクトとして定義 • sessionのidをフロントで持つことでtimetableの表示をコントロール •
ウェブアプリケーションにおいてはサーバーしか知らないidを前もって、フロント が知っていることで煩雑な条件分岐を回避
おまけ
Mercari Engineering Blog 「MTC2018 カンファレンスLPの裏話 〜インフラ編〜」より
作ってみた
デモ
まとめ • mtc2018-webレポジトリは知見がいっぱい ◦ i18n ◦ SSR ◦ componentの分け方 ◦
GraphQL Fragment ◦ Apollo Client ◦ etc. • Typescript + GraphQLはいいぞ
Thank you