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
810
11歳のpixivが迎えた3度のリニューアル
ログミーTech Live #2「レガシーシステムのリニューアル」の発表資料です
DONABE
December 13, 2018
Tweet
Share
Other Decks in Technology
See All in Technology
Oracle Cloud Infrastructure:2024年10月度サービス・アップデート
oracle4engineer
PRO
0
190
マルチテナントのサービスインフラに大きなテナントを受け入れるまで
7474
0
790
ゼロからはじめる生成AI〜AWS認定とハンズオンで学ぶ初心者の道〜
kenichinakamura
0
140
0x5F3759DF
ykozw
0
340
さくっと実践!Postmanを活用した高品質で持続可能なAPI管理
yokawasa
5
360
LeSS Yoake 2024 スポンサーセッション
riki_hiraoka
0
160
多数のWebサービスをECS/Fargate構成で効率よく構築・運用するなら copilot-cli
interu
2
170
안드로이드 기술 이력서의 최소 조건
pluu
1
1.1k
SOLID - Architecture and Architectural Decisions - Devfest Goa 2024
rivuchk
0
160
JPOUG_10_20241018_OracleDB_AWS_v1.3.pdf
asahihidehiko
1
190
RSGT Walk Through
kawaguti
PRO
2
400
MobileActOsaka_241018.pdf
akaitadaaki
0
110
Featured
See All Featured
Git: the NoSQL Database
bkeepers
PRO
425
64k
How to Create Impact in a Changing Tech Landscape [PerfNow 2023]
tammyeverts
46
2.1k
Side Projects
sachag
452
42k
Happy Clients
brianwarren
97
6.7k
Making the Leap to Tech Lead
cromwellryan
131
8.9k
Navigating Team Friction
lara
183
14k
The Language of Interfaces
destraynor
154
24k
Facilitating Awesome Meetings
lara
49
6k
What's in a price? How to price your products and services
michaelherold
243
11k
4 Signs Your Business is Dying
shpigford
180
21k
Designing Dashboards & Data Visualisations in Web Apps
destraynor
228
52k
VelocityConf: Rendering Performance Case Studies
addyosmani
325
23k
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