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
ヘンリー会社紹介資料(エンジニア向け) / company deck for engineer
henryofficial
0
330
現場データから見える、開発生産性の変化コード生成AI導入・運用のリアル〜 / Changes in Development Productivity and Operational Challenges Following the Introduction of Code Generation AI
nttcom
1
450
AIとともに歩んでいくデザイナーの役割の変化
lycorptech_jp
PRO
0
810
NLPコロキウム20251022_超効率化への挑戦: LLM 1bit量子化のロードマップ
yumaichikawa
1
190
AI-Readyを目指した非構造化データのメダリオンアーキテクチャ
r_miura
1
280
AI駆動で進める依存ライブラリ更新 ─ Vue プロジェクトの品質向上と開発スピード改善の実践録
sayn0
1
160
Sansan Engineering Unit 紹介資料
sansan33
PRO
1
3k
All About Sansan – for New Global Engineers
sansan33
PRO
1
1.2k
クラウドとリアルの融合により、製造業はどう変わるのか?〜クラスメソッドの製造業への取組と共に〜
hamadakoji
0
360
Copilot Studio ハンズオン - 生成オーケストレーションモード
tomoyasasakimskk
0
200
事業開発におけるDify活用事例
kentarofujii
5
1.3k
MCP ✖️ Apps SDKを触ってみた
hisuzuya
0
300
Featured
See All Featured
The Psychology of Web Performance [Beyond Tellerrand 2023]
tammyeverts
49
3.1k
Visualization
eitanlees
149
16k
[RailsConf 2023 Opening Keynote] The Magic of Rails
eileencodes
31
9.7k
Become a Pro
speakerdeck
PRO
29
5.6k
Bootstrapping a Software Product
garrettdimon
PRO
307
110k
Building an army of robots
kneath
305
46k
Building Applications with DynamoDB
mza
96
6.7k
Fight the Zombie Pattern Library - RWD Summit 2016
marcelosomers
234
17k
The Invisible Side of Design
smashingmag
302
51k
Let's Do A Bunch of Simple Stuff to Make Websites Faster
chriscoyier
508
140k
How To Stay Up To Date on Web Technology
chriscoyier
791
250k
RailsConf 2023
tenderlove
30
1.3k
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