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
Reduxモダナイズ 〜コードのモダン化を通して、将来のライブラリ移行に備える〜
pvcresin
2
690
NetworkXとGNNで学ぶグラフデータ分析入門〜複雑な関係性を解き明かすPythonの力〜
mhrtech
3
1k
Local Peer-to-Peer APIはどのように使われていくのか?
hal_spidernight
2
450
2分台で1500examples完走!爆速CIを支える環境構築術 - Kaigi on Rails 2025
falcon8823
3
3.3k
アメ車でサンノゼを走ってきたよ!
s_shimotori
0
140
iOSエンジニア向けの英語学習アプリを作る!
yukawashouhei
0
180
Django Ninja による API 開発効率化とリプレースの実践
kashewnuts
0
990
CSC509 Lecture 01
javiergs
PRO
1
430
開発生産性を上げるための生成AI活用術
starfish719
1
180
iOS 17で追加されたSubscriptionStoreView を利用して5分でサブスク実装チャレンジ
natmark
0
620
10年もののAPIサーバーにおけるCI/CDの改善の奮闘
mbook
0
780
クラシルを支える技術と組織
rakutek
0
190
Featured
See All Featured
A Modern Web Designer's Workflow
chriscoyier
697
190k
Responsive Adventures: Dirty Tricks From The Dark Corners of Front-End
smashingmag
252
21k
The Myth of the Modular Monolith - Day 2 Keynote - Rails World 2024
eileencodes
26
3.1k
Gamification - CAS2011
davidbonilla
81
5.5k
Code Review Best Practice
trishagee
72
19k
Learning to Love Humans: Emotional Interface Design
aarron
274
40k
Producing Creativity
orderedlist
PRO
347
40k
Practical Tips for Bootstrapping Information Extraction Pipelines
honnibal
PRO
23
1.5k
How To Stay Up To Date on Web Technology
chriscoyier
791
250k
Embracing the Ebb and Flow
colly
88
4.8k
Thoughts on Productivity
jonyablonski
70
4.9k
Art, The Web, and Tiny UX
lynnandtonic
303
21k
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