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
760
ArrayBufferとBinary
sasurau4
1
620
CLIから見るAngular, React, Vue
sasurau4
1
930
Metro Bundler in Web
sasurau4
0
960
Other Decks in Programming
See All in Programming
After go func(): Goroutines Through a Beginner’s Eye
97vaibhav
0
320
Conquering Massive Traffic Spikes in Ruby Applications with Pitchfork
riseshia
0
160
タスクの特性や不確実性に応じた最適な作業スタイルの選択(ペアプロ・モブプロ・ソロプロ)と実践 / Optimal Work Style Selection: Pair, Mob, or Solo Programming.
honyanya
3
160
Pull-Requestの内容を1クリックで動作確認可能にするワークフロー
natmark
2
480
『毎日の移動』を支えるGoバックエンド内製開発
yutautsugi
2
220
バッチ処理を「状態の記録」から「事実の記録」へ
panda728
PRO
0
140
Railsだからできる 例外業務に禍根を残さない 設定設計パターン
ei_ei_eiichi
0
420
明日から始めるリファクタリング
ryounasso
0
130
Goで実践するドメイン駆動開発 AIと歩み始めた新規プロダクト開発の現在地
imkaoru
4
790
組込みだけじゃない!TinyGo で始める無料クラウド開発入門
otakakot
0
170
エンジニアとして高みを目指す、 利益を生み出す設計の考え方 / design-for-profit
minodriven
24
12k
開発生産性を上げるための生成AI活用術
starfish719
3
370
Featured
See All Featured
Build your cross-platform service in a week with App Engine
jlugia
232
18k
Fireside Chat
paigeccino
40
3.7k
Build The Right Thing And Hit Your Dates
maggiecrowley
37
2.9k
Building Flexible Design Systems
yeseniaperezcruz
329
39k
GraphQLとの向き合い方2022年版
quramy
49
14k
[Rails World 2023 - Day 1 Closing Keynote] - The Magic of Rails
eileencodes
37
2.6k
Sharpening the Axe: The Primacy of Toolmaking
bcantrill
45
2.5k
Unsuck your backbone
ammeep
671
58k
Designing for humans not robots
tammielis
254
26k
Faster Mobile Websites
deanohume
310
31k
How STYLIGHT went responsive
nonsquared
100
5.8k
What's in a price? How to price your products and services
michaelherold
246
12k
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