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
事例で見るconcrete5
Search
hayaka26
August 27, 2016
0
99
事例で見るconcrete5
hayaka26
August 27, 2016
Tweet
Share
More Decks by hayaka26
See All by hayaka26
concrete5のトピックのカテゴリーで絞り込みした話
hayaka26
0
120
2016/7/23 concrete5紹介LT
hayaka26
1
220
concrete5 スタイルカスタマイズ対応の基本
hayaka26
1
310
Featured
See All Featured
Put a Button on it: Removing Barriers to Going Fast.
kastner
59
3.6k
The Psychology of Web Performance [Beyond Tellerrand 2023]
tammyeverts
45
2.2k
Designing Experiences People Love
moore
138
23k
The Cost Of JavaScript in 2023
addyosmani
45
7k
Designing Dashboards & Data Visualisations in Web Apps
destraynor
229
52k
It's Worth the Effort
3n
183
28k
Why Our Code Smells
bkeepers
PRO
335
57k
How To Stay Up To Date on Web Technology
chriscoyier
789
250k
Stop Working from a Prison Cell
hatefulcrawdad
267
20k
Embracing the Ebb and Flow
colly
84
4.5k
Performance Is Good for Brains [We Love Speed 2024]
tammyeverts
6
520
GitHub's CSS Performance
jonrohan
1030
460k
Transcript
ࣄྫͰݟΔDPODSFUF ɹୈճσβΠϯษڧձ גࣜձࣾ࢜ҹɹঙ࢘ૣ߳
ࣗݾհ ঙ࢘ૣ߳ʢγϣδϋϠΧʣ גࣜձࣾ࢜ҹ DPODSFUF+BQBOΠϯςάϨʔτύʔτφʔ DPODSFUF+BQBO&WBOHFMJTU 5XJUUFSɿNJ[ 'BDFCPPLɿIBZBLB
ຊ ɾγϯϓϧͳࣄྫ ɾ͕ͬͭΓߏஙࣄྫ ;ͨͭͷࣄྫʹ͍ͭͯ ͲͷΑ͏ʹ͍ͭͬͯ͘Δ͔Λ ͝հ͠·͢ʂ
ͪͳΈʹ γϯϓϧͱ͕ͬͭΓ ࢲݸਓͷج४Ͱ͔͋͠Γ·ͤΜ
Θ͔Βͳ͍༻ޠ͕ग़͖ͯͨ߹ɺ ͜Μͳ͜ͱͰ͖ΔΜͩͳʔ ͱࢥͬͯฉ͍͍͍ͯͯͩ͘͞ɻ
ฐࣾͰ ɾσΟϨΫγϣϯ ɾΠϯετʔϧ ɾσβΠϯ ɾςʔϚ࡞ ɾϒϩοΫ੍࡞ ɾίϯςϯπೖྗ ͳͲɺ·Δ·Δͬͱ୲͍ͯ͠·͢ɻ
ΦϦδφϧςʔϚ ɾCPPUTUSBQΛ༻ͯ͠άϦουϑϨʔϜϫʔΫ ʢϨΠΞτػೳʣʹରԠ ɾελΠϧΧελϚΠζػೳରԠ ɾϨεϙϯγϒσβΠϯʹΑΔεϚϗରԠ Λඪ४ͱͯ͠·͢ɻ
Ͱɺ γϯϓϧͳࣄྫ͔Β
ઍ༿ݝॅڙڅެ༷ࣾ ύςΟΦεିಛઃϖʔδ γϯϓϧͳࣄྫ
IUUQQBUJPTDIJCBDPN
γϯϓϧͳͭ͘ΓͳͷͰ ɾϖʔδλΠϓͻͱͭ ɾϖʔδଐੑՃͳ͠ ɾΧελϜςϯϓϨʔτͳ͠ ɾΦϦδφϧϒϩοΫͳ͠ ɾՃΞυΦϯͳ͠ ͱ͍ͬͨߏʹͳͬͯ·͢ɻ
αΠτϚοϓ ̍ϖʔδ ʴ ֎෦ϦϯΫ
2 ϥϯσΟϯάϖʔδͳΒ IUNMͰΑ͘ͳ͍ʁ
" ϖʔδ͕૿͑ΔՄೳੑ͕͋ͬͨ IUNM͕Θ͔Βͳ͍ͻͱߋ৽͔ͨͬͨ͠ DPODSFUFͷૢ࡞ੑʹ׳Ε͔ͨͬͨ
ςʔϚߏ ɾEFGBVMUQIQ ɹɾIFBEFSQIQ ɹɾGPPUFSQIQ ɾ$44ʢMFTTʣ ɾWJFXQIQ ɾQBHF@UIFNFQIQ ɾUIVNCOBJMQOH ɾEFTDSJQUJPOUYU˞࠷৽൛Ͱෆཁ
ΤϦΞߏ ˞ΤϦΞ໊࣮ࡍͱҟͳΔ߹͕͋Γ·͢ɻ
άϩʔόϧΤϦΞ αΠτλΠτϧ φϏήʔγϣϯ
ΤϦΞ ϝΠϯ্
ΤϦΞ ϝΠϯ
ΤϦΞ ϝΠϯԼ
άϩʔόϧΤϦΞ ϑολʔ
ΤϦΞߏ άϩʔόϧΤϦΞ ɹɾϔομʔαΠτλΠτϧ ɹɾϔομʔφϏήʔγϣϯ ɹɾϑολʔ ΤϦΞ ɹɾϝΠϯ্ ɹɾϝΠϯ ɹɾϝΠϯԼ
ϨΠΞτͷҠಈָ͕ʹͳΔ
ͬͨϒϩοΫ ɾهࣄ ɾը૾ ɾΦʔτφϏ ͷࡾ͚ͭͩʂ
͍ͬͯΔϒϩοΫ ΦʔτφϏ ը૾ هࣄ
ϨΠΞτػೳ ΤϦΞΛϨΠΞτػೳͰΧϥϜʹͯ͠ ϒϩοΫΛೖΕ͍ͯ·͢
αΠτͷσβΠϯͷ߹্ɺ ϨΠΞτػೳΛଟ༻͍ͯ͠·͢
ϨΠΞτΤϦΞͷԼ෦ʹ͔͠ ՃͰ͖ͳ͍ͨΊ Ҡಈָ͕ͳΑ͏ʹΤϦΞΛ̏ͭʹ ͚͍ͯ·͢
ΦʔτφϏ ֎෦ϦϯΫΛαΠτϚοϓʹՃ͠ɺ ΦʔτφϏͰද͍ࣔͯ͠·͢ɻ هࣄϒϩοΫͰͳ͍Ͱ͕͢ɺߋ৽ʹΑΔ σβΠϯ่ΕΛى͖ʹ͘͘͢ΔͨΊʹɺΦʔτ φϏΛ༻͍ͯ͠·͢ɻ
σβΠϯ $44ςʔϚʹهड़͠ɺϨΠΞτهࣄϒϩο ΫʹΧελϜΫϥεΛઃఆ͍ͯ͠·͢ɻ Ұ෦ɺΤϦΞͷσβΠϯͰϚʔδϯࢦఆͯ͠· ͢ɻ
ελΠϧΧελϚΠζ ɾΞΫηϯτΧϥʔʢϑο λʔ#(ͳͲʣ ɾϦϯΫΧϥʔ ɾϖʔδഎܠ ͳͲɺ ϖʔδʹΑͬͯΠϝʔδΧ ϥʔΛม͑Δ͜ͱՄೳʹʂ
! γϯϓϧͳࣄྫʹ͍ͭͯҎ্Ͱ͢
ઍ༿ݝཱྀؗϗςϧ ੜ׆Ӵੜಉۀ߹༷ ͕ͬͭΓߏஙࣄྫ
IUUQXXXZBEPPSKQ
༷ ɾଟݴޠରԠ ɾ॓Λ݅ͰߜΓࠐΈݕࡧ ɾχϡʔε߹һ͚ͱҰൠ͚ͱ྆ํ͚͕͋Δ ɾ߹һͷΈ͕ݟΕΔϖʔδ ɾ߹һ͕ࣗͷ॓ϖʔδΛߋ৽ɺχϡʔεΛՃ ͳͲͳͲʜʜ
͕ͬͭΓߏஙϙΠϯτ ɾଟݴޠαΠτʢຊޠɾӳޠʣ ɾϖʔδλΠϓͭ ɾෳϢʔβʔʹΑΔߋ৽ɺݖݶઃఆ ɾϖʔδଐੑʹΑΔෳ߹ݕࡧ ɾΧελϜςϯϓϨʔτ͍ͬͺ͍ ɾΦϦδφϧϒϩοΫ͋Γ ɾΞυΦϯ̒ͭ͘Β͍
͕ͬͭΓͱ͍ͬͯɺɺɺ γϯάϧϖʔδؔίΞ͝Γ͝ΓͦΜͳʹ ͯ͠·ͤΜͷͰྃ͝ঝ͍ͩ͘͞ɻ
αΠτϚοϓ ॓ݕࡧͷԼʹ ֤॓ͷϖʔδ ϦϯΫԼʹ ֎෦ϦϯΫ
ςʔϚߏ ϖʔδςϯϓϨʔτ ɾEFGBVMU ɾϗʔϜ༻ ɾαΠυόʔ͖ ɾ॓ৄࡉ༻ ɾ॓χϡʔε༻ ಡΈࠐΈ༻ ɾIFBEFSQIQ ɾGPPUFSQIQଞ
ɾ$44ʢMFTTʣ ɾKT ɾWJFXQIQ ɾQBHF@UIFNFQIQ ɾUIVNCOBJMQOH ɾEFTDSJQUJPOUYU˞ ࠷৽൛Ͱෆཁ
ΤϦΞߏ γϯϓϧͳͷͱͦΜͳʹ͔ΘΒͳ ͍ͷͰεΩοϓ͠·͢ʂ
ͬͨϒϩοΫ ɾهࣄ ɾը૾ ɾΦʔτφϏ ɾϚχϡΞϧφϏ˞֦ுػೳ ɾϖʔδϦετ ɾݕࡧ ɾHPPHMFϚοϓ ͳͲͳͲɾɾɾѲ͖͠Εͯ·ͤΜ
ϖʔδλΠϓ ɾϖʔδ ɾ॓ৄࡉ ɾ॓χϡʔε ɾχϡʔεҰཡ ɾχϡʔεهࣄʢҰൠ͚ʣ ɾχϡʔεهࣄʢ߹һ͚ʣ ɾ؍ޫϧʔτ
ߏஙϙΠϯτΛ ͍͔ͭ͘͝հ͠·͢
॓ݕࡧ
॓ݕࡧ
ݕࡧ݁Ռϖʔδ
ߜΓࠐΈݕࡧ ݕࡧϒϩοΫΛΧελϚΠζͯ͠ ϖʔδଐੑͰͷݕࡧͱݕࡧ݁Ռͷιʔτ͕Ͱ͖ ΔΑ͏ʹ͍ͯ͠·͢ɻ ݕࡧϒϩοΫͷΧελϜςϯϓϨʔτͭ ιʔτDPOUSPMMFSQIQΛΦʔόʔϥΠυ
॓ݕࡧ
ݕࡧ݁Ռϖʔδ
॓ݕࡧ
ݕࡧ݁Ռͷιʔτ ৽ணॱʢߋ৽ॱʣ ࢪઃ໊ʢঢॱɾ߱ॱʣ ΤϦΞ໊ʢঢॱɾ߱ॱʣ ࠷҆॓ധྉۚʢঢॱɾ߱ॱʣ ࠷ߴ॓ധྉۚʢঢॱɾ߱ॱʣ
ݕࡧ݅ϖʔδଐੑͰ ରͰ͋Δ॓ৄࡉϖʔδͷଐੑͱͯ͠ొͯ͠ ͋Γ·͢ɻ ॓λΠϓɺΤϦΞɺڵຯతɿબଐੑ ྉۚɿࣈଐੑ Ͱ͢ɻ
બଐੑͷΧελϚΠζ બଐੑඪ४Ͱ03ݕࡧͰ͕͢ɺڵຯతͷ ߹͚ͩ"/%ݕࡧʹมߋ͍ͯ͠·͢ɻ BQQMJDBUJPOBUUSJCVUFTTFMFDU DPOUSPMMFSQIQͰTFBSDI'PSN ΛΦʔόʔϥΠ υ͠·ͨ͠ɻ
બଐੑͷΧελϚΠζ νΣοΫϘοΫεͷݟͨΛมߋ͢ΔͨΊʹ BQQMJDBUJPOBUUSJCVUFTTFMFDUTFBSDIQIQ ΦʔόʔϥΠυͯ͠·͢ɻ
χϡʔε
χϡʔε
τοϓϖʔδχϡʔε τοϓϖʔδͷχϡʔε෦ʹɺ ɾ߹͔Βͷ͓ΒͤʢҰൠ͚ʣ ɾ߹͔Βͷ͓Βͤʢ߹һɾҰൠڞ௨ʣ ɾ॓χϡʔε ͕දࣔ͞ΕΔΑ͏ʹͳ͍ͬͯ·͢ɻ ϖʔδϦετϒϩοΫΛ༻͍ͯ͠·͕͢ɺ ෳϖʔδϦετͷߜΓࠐΈΧελϜςϯϓϨʔτʹ هड़͍ͯ͠·͢ɻ
߹һ͚ϖʔδ ϩάΠϯ͕ඞཁͳ߹һ͚ϖʔδʹɺ ɾ߹͔Βͷ͓Βͤʢ߹һ͚ʣ ɾ߹͔Βͷ͓Βͤʢ߹һɾҰൠڞ௨ʣ ͕දࣔ͞ΕΔΑ͏ʹͳ͍ͬͯ·͢ɻ
ଟݴޠ
ଟݴޠ ӳޠʹΑΔߋ৽͠ͳ͍ͱͷ͜ͱͰҰ෦ίϯς ϯπଟݴޠͷର֎ͱͳ͍ͬͯ·͢ɻ ະ༁ϖʔδ͋Γɻ
ຊޠτοϓ ӳޠτοϓ
ຊޠτοϓ ӳޠτοϓ
ࠓճ͝հͨ͠ߏஙྫ ҰྫͰ͔͋͠Γ·ͤΜɻ
ࣗͳΓͷํ๏Λݟ͚ͭͯ Α͖DPODSFUFϥΠϑΛ̇
͋Γ͕ͱ͏͍͟͝·ͨ͠ʂ