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
地方に住むエンジニアの残酷な現実とキャリア論
ichimichi
5
1.3k
deno-redisの紹介とJSRパッケージの運用について (toranoana.deno #21)
uki00a
0
140
ドメインモデリングにおける抽象の役割、tagless-finalによるDSL構築、そして型安全な最適化
knih
11
2k
『自分のデータだけ見せたい!』を叶える──Laravel × Casbin で複雑権限をスッキリ解きほぐす 25 分
akitotsukahara
1
510
Cursor AI Agentと伴走する アプリケーションの高速リプレイス
daisuketakeda
1
130
What Spring Developers Should Know About Jakarta EE
ivargrimstad
0
220
Create a website using Spatial Web
akkeylab
0
300
Kotlin エンジニアへ送る:Swift 案件に参加させられる日に備えて~似てるけど色々違う Swift の仕様 / from Kotlin to Swift
lovee
1
250
XSLTで作るBrainfuck処理系
makki_d
0
210
Julia という言語について (FP in Julia « SIDE: F ») for 関数型まつり2025
antimon2
3
980
ASP.NETアプリケーションのモダナイズ インフラ編
tomokusaba
1
410
エラーって何種類あるの?
kajitack
5
300
Featured
See All Featured
The Web Performance Landscape in 2024 [PerfNow 2024]
tammyeverts
8
670
Embracing the Ebb and Flow
colly
86
4.7k
The MySQL Ecosystem @ GitHub 2015
samlambert
251
13k
BBQ
matthewcrist
89
9.7k
"I'm Feeling Lucky" - Building Great Search Experiences for Today's Users (#IAC19)
danielanewman
228
22k
Product Roadmaps are Hard
iamctodd
PRO
54
11k
Thoughts on Productivity
jonyablonski
69
4.7k
[RailsConf 2023 Opening Keynote] The Magic of Rails
eileencodes
29
9.5k
Building an army of robots
kneath
306
45k
Code Reviewing Like a Champion
maltzj
524
40k
Music & Morning Musume
bryan
46
6.6k
Let's Do A Bunch of Simple Stuff to Make Websites Faster
chriscoyier
507
140k
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