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
11歳のpixivが迎えた3度のリニューアル
Search
DONABE
December 13, 2018
Technology
3
940
11歳のpixivが迎えた3度のリニューアル
ログミーTech Live #2「レガシーシステムのリニューアル」の発表資料です
DONABE
December 13, 2018
Tweet
Share
Other Decks in Technology
See All in Technology
衛星画像超解像化によって実現する2D, 3D空間情報の即時生成と“AI as a Service”/ Real-time generation spatial data enabled_by satellite image super-resolution
lehupa
0
130
『OCI で学ぶクラウドネイティブ 実践 × 理論ガイド』 書籍概要
oracle4engineer
PRO
3
170
SwiftUIのGeometryReaderとScrollViewを基礎から応用まで学び直す:設計と活用事例
fumiyasac0921
0
150
The Cake Is a Lie... And So Is Your Login’s Accessibility
leichteckig
0
110
いまさら聞けない ABテスト入門
skmr2348
1
230
AWS IoT 超入門 2025
hattori
0
290
成長自己責任時代のあるきかた/How to navigate the era of personal responsibility for growth
kwappa
4
300
防災デジタル分野での官民共創の取り組み (2)DIT/CCとD-CERTについて
ditccsugii
0
130
AIAgentの限界を超え、 現場を動かすWorkflowAgentの設計と実践
miyatakoji
1
160
Access-what? why and how, A11Y for All - Nordic.js 2025
gdomiciano
1
130
E2Eテスト設計_自動化のリアル___Playwrightでの実践とMCPの試み__AIによるテスト観点作成_.pdf
findy_eventslides
1
580
Wasmのエコシステムを使った ツール作成方法
askua
0
110
Featured
See All Featured
Art, The Web, and Tiny UX
lynnandtonic
303
21k
Building Flexible Design Systems
yeseniaperezcruz
329
39k
Code Reviewing Like a Champion
maltzj
525
40k
GitHub's CSS Performance
jonrohan
1032
470k
Thoughts on Productivity
jonyablonski
70
4.9k
Intergalactic Javascript Robots from Outer Space
tanoku
273
27k
Practical Tips for Bootstrapping Information Extraction Pipelines
honnibal
PRO
23
1.5k
Principles of Awesome APIs and How to Build Them.
keavy
127
17k
Navigating Team Friction
lara
189
15k
jQuery: Nuts, Bolts and Bling
dougneiner
64
7.9k
How GitHub (no longer) Works
holman
315
140k
Speed Design
sergeychernyshev
32
1.2k
Transcript
11ࡀͷpixiv͕ܴ͑ͨ 3ͷϦχϡʔΞϧ pixiv Inc. do7be 2018.12.6
2 @do7be 20163݄த్ೖࣾ UX/UIΤϯδχΞ ओʹPC൛ͷpixivΛ։ൃͯ͠·͢ ࣗݾհ
3 pixivͷ࡞ϖʔδͱ ϓϩϑΟʔϧϖʔδΛ SPAͱͯ͠ϦχϡʔΞϧ͠·ͨ͠ʂ
4 BOOTH BOOTH લޙ࡞ લޙ࡞
5 αϯϓϧ༻࡞ఏڙɿ্ΤΫ
ࠓ͢͜ͱ 6 • PC൛pixivͷ࡞&ϓϩϑΟʔϧϖʔδϦχϡʔΞϧ ʢϩάΠϯޙͷΈʣ • ↑ʹࢸΔ·Ͱͷ2ͷϦχϡʔΞϧͷࣦഊ • ϑϩϯτΤϯυͷٕज़มભ
7 • αʔόαΠυશൠ • SPAͷϕετϓϥΫςΟε • ϦχϡʔΞϧͷৄ͍݁͠ՌɺཪͳͲ • εϚʔτϑΥϯ൛ɺΞϓϦ൛ͷ͜ͱ ͞ͳ͍͜ͱ
ຊϦχϡʔΞϧʹࢸΔ·Ͱ 8
2΄Ͳલ αʔϏεͷશ໘తͳ ϦχϡʔΞϧΛߦ͏ 9
10
11
12 jQuery࣮ʹΑΔϞʔμϧ (SPAͷยྡྷ)
1΄Ͳલ ࡞ϖʔδͷΈͷ ϦχϡʔΞϧΛߦ͏ 13
14
15 σβΠϯɺػೳͷಉ࣌ϦχϡʔΞϧ
༷ʑͳཧ༝͔Β͜ͷ2ͷϦχϡʔΞϧதࢭ 11͍ଓ͚͍ͯΔϢʔβʔʹͱͬͯ େنͳϦχϡʔΞϧड͚ೖΕͮΒ͍ 16
͜ͷ2ͷࣦഊ͔Βಘͨݟ 17
18 σβΠϯͱػೳΛ ಉ࣌ʹϦχϡʔΞϧ͠ͳ͍
தࢭ͔Βಘͨࠓޙͷํ • σβΠϯ͔ػೳͷͲͪΒ͔ͷΈͷϦχϡʔΞϧΛߦ͏ • ϦχϡʔΞϧϖʔδ୯Ґ • গϢʔβʔ͔ΒϦϦʔε ϑΟʔυόοΫΛಘͭͭվળ͢Δ 19
SPAରԠΛݟਾ͑ͯ ৗతʹٕज़ߏΛ Ξοϓσʔτ͍ͯ͘͜͠ͱʹ 20
ϑϩϯτΤϯυͷٕज़มભ 21
2લ • CoffeeScript • Grunt • Handlebars • Stylus •
jQuery v1.x 22 ݱࡏ • TypeScript • webpack • React/Redux • styled-components • Jest • ESLint, TSLint • jQuery v3.x(Ұ෦ϖʔδ) • Storybook
• v1.x→v3.x • jQuery Migrate plugin • .load, .bind, .readyͷҠߦ
• <script>Ͱॻ͖ͷՕॴΛbundleཧԼʹҠಈ 23
• import/exportରԠ • .coffee.d.tsΛ࡞ • decaffeinateͰJSʹม • .coffee.d.ts→.d.ts • TSʹॻ͖͑Δ
• શͯͷCoffeeScriptͷҠߦྃ 24
• grunt-contrib-concat → webpack bundle • taskpackage.jsonͷscriptsʹҠߦ • ϦχϡʔΞϧޙͷϖʔδͰ jQueryimportͰ͖ͳ͍Α͏ʹͨ͠
25
• ҠߦϑϧεΫϥον • ͍ճͤΔWebAPI͋ͬͯଟগָͩͬͨ 26
• ReactԽʹ͍Ҡߦ • ͡ΊCSS Modules • ΑΓίϯτϦϏϡʔτ͕Μͳstyled-componentsʹ 27
28
29
30
31 GitLab CIʹΑΓGitLab PagesͰ ϗεςΟϯά
·ͱΊ 32
• σβΠϯͱػೳยํͣͭม͑Δ গͣͭ͠ϦχϡʔΞϧ͠ମݧ্ʹͭͳ͛Δ • ϦχϡʔΞϧΛதࢭ͔ͨ͠Βͦ݁͜Ռͱͯ͠ Ϟμϯͳٕज़ʹΞοϓσʔτ͠ଓ͚ΒΕͨ 33
ͲͷݱͷϦχϡʔΞϧେม ϦεέϐϘοτ͋Δ͔͠Εͳ͍ 34
͔͠͠ϦχϡʔΞϧʹཧ༝͕͋Δͣ 35
ࣗͷ߹Ϣʔβʔͷදݱͱ ͖ͳͷΛ͖ͱݴ͑ΔΛकΔͨΊʹ ϦχϡʔΞϧ͕ඞཁͱஅ͔ͨ͠ΒؤுΕͨ 36
ఘΊͳ͚ΕϦχϡʔΞϧୡͰ͖Δ 37
͋ͳͨͷݱͷϦχϡʔΞϧ ఘΊͳ͍Ͱ͍ͩ͘͞ 38
39