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
460
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
680
ArrayBufferとBinary
sasurau4
1
540
CLIから見るAngular, React, Vue
sasurau4
1
760
Metro Bundler in Web
sasurau4
0
780
Other Decks in Programming
See All in Programming
Build Apps for iOS, Android & Desktop in 100% Kotlin With Compose Multiplatform (mDevCamp 2024)
zsmb
0
270
Changed Rules: Architectures with Lightweight Stores
manfredsteyer
PRO
0
240
Elm Form Validation
bkuhlmann
0
510
Blue/Greenデプロイの導入による 運用フローの改善
kudoas
1
370
Rails と人魚の話/rails-and-mermaid
sanfrecce_osaka
0
100
冗長なエラーログを削減し、スタックトレースを手に入れる / Reducing Verbose Error Logs and Obtaining Stack Traces
upamune
0
390
エンターテイメント業界で利用されるAWS
demuyan
0
210
コーンフレークから始める モデリング会話入門
ogurotakayuki
0
350
OpenAPIを中心に考えるAPI開発入門 / Introduction to API Development with a Focus on OpenAPI
seike460
PRO
2
160
Hanami and htmx
bkuhlmann
0
200
⼤規模⾔語モデルの拡張(RAG)が 終わったかも知れない件について
nearme_tech
23
15k
try!Swift Tokyo 2024 参加報告 LT
akidon0000
1
220
Featured
See All Featured
CSS Pre-Processors: Stylus, Less & Sass
bermonpainter
352
28k
Code Review Best Practice
trishagee
55
15k
Design by the Numbers
sachag
274
18k
How to Ace a Technical Interview
jacobian
272
22k
How to train your dragon (web standard)
notwaldorf
73
5.2k
Art, The Web, and Tiny UX
lynnandtonic
289
19k
Creatively Recalculating Your Daily Design Routine
revolveconf
210
11k
Automating Front-end Workflow
addyosmani
1356
200k
Fontdeck: Realign not Redesign
paulrobertlloyd
76
4.9k
Scaling GitHub
holman
457
140k
Embracing the Ebb and Flow
colly
80
4.1k
Agile that works and the tools we love
rasmusluckow
325
20k
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