ブラウザのシェアと傾向と対策 2018改

2018/11/24「FRONTEND CONFERENCE 2018」アンカンファレンスでのセッション「ブラウザのシェアと傾向と対策 2018改」のスライドです。

Transcript

1. ϒϥ΢βͷγΣΞͱ܏޲ͱରࡦ
   վ ৿Ӭ఩ฏ ΋Γͯͭ 
   '30/5&/%
   $0/'&3&/$&
2. '30/5&/%
   $0/'&3&/$&
    ࠓճͷ಺༰  w ͸͡Ίʹ
   w ϒϥ΢βγΣΞ 1$ฤ
   w *&ͷݱࡏͷγΣΞͱαϙʔτঢ়گ
   w 1$ͷϒϥ΢βରԠΛͲ͏͢΂͖͔
   w ϒϥ΢βγΣΞ εϚϗฤ
   w "OESPJEͱJ04ɺͦΕͧΕͷόʔδϣϯผγΣΞ
   w εϚϗͷϒϥ΢βରԠΛͲ͏͢΂͖͔
   w ·ͱΊ
3. '30/5&/%
   $0/'&3&/$&
    ࣗݾ঺հ  ˒ ΋Γͯͭ ৿Ӭ
   ఩ฏ
   ˒ גࣜձࣾάϥουΩϡʔϒ
 ϓϩμΫτ։ൃνʔϜ
   ΤϯδχΞ
   ˒ ๭ిػϝʔΧʔ
 ˠιϑτ΢ΣΞϝʔΧʔ
 ˠ೥݄͔Βݱ৬
   ˒ ೥ྸɿ໌ޙ೔Ͱࡀ
   ˒ झຯɿίϯτϥόεɺύζϧɺήʔϜ
   ˒ ޷͖ͳ΋ͷɿϥʔϝϯɺᰤࢠɺ'MFYCPY
   ˒ 5XJUUFSɿ!N@O@U@Q
4. '30/5&/%
   $0/'&3&/$&
    ͸͡Ίʹ  ϒϥ΢β͸ԿΛ
 ࢖͍ͬͯ·͔͢ʁ
5. '30/5&/%
   $0/'&3&/$&
    ϒϥ΢βͷγΣΞ  ੲ͸*&ׂ͕Λ઎Ί͍ͯͨ࣌୅΋͋ͬͨ ʜʜࠓ͸Ͳ͏ͳͷ͔ʁ ʁ
6. '30/5&/%
   $0/'&3&/$&
    ϒϥ΢βͷγΣΞ  ༷ʑͳௐࠪػ͕ؔσʔλΛൃද͍ͯ͠Δ ࠓճ͸4UBU$PVOUFS
 ΞΠϧϥϯυ ͷ
 σʔλΛࢀর͠·͢
   IUUQHTTUBUDPVOUFSDPN
7. '30/5&/%
   $0/'&3&/$&
    1$ͷϒϥ΢βγΣΞ  શੈք ೥݄ $ISPNF
    'JSFGPY
    *&
    4BGBSJ
   
8. '30/5&/%
   $0/'&3&/$&
    1$ͷϒϥ΢βγΣΞ  ೔ຊ ೥݄ $ISPNF
    'JSFGPY
    *&
    4BGBSJ
   
9. '30/5&/%
   $0/'&3&/$&
    εϚϗͷϒϥ΢βγΣΞ  ೔ຊͰ͸*&͕ڧ͔ͬͨ ͔͠͠ɺ೥݄ʹ
 $ISPNF͕ٯస ࠩ͸ͲΜͲΜ։͍͍ͯΔ
10. '30/5&/%
    $0/'&3&/$&
     *&ͷݱࡏͷࠃ಺γΣΞ  ͔͠͠ͳ͕Βɺ͍·ͩʹγΣΞ͸ ͔͕ͨɺ͞ΕͲ 8FCαΠτ੍࡞8FCΞϓϦ։ൃͰ
 ࠷৽8FCٕज़ͷେ൒Λ
 αϙʔτ͍ͯ͠ͳ͍
 *&ͷαϙʔτΛܧଓ͢΂͖͔ʁ ˞*&͕ɺ*&Ҏલ͕
11. '30/5&/%
    $0/'&3&/$&
     *&ͷαϙʔτΛ੾Δͱʜ  *&Λ੾Δ͜ͱʹΑͬͯ
 ؆୯ʹ࢖͑ΔΑ͏ʹͳΔٕज़͕
 ֨ஈʹ૿͑·͢ ޻਺࡟ݮʹܨ͕Δ৔߹΋ʂ
12. '30/5&/%
    $0/'&3&/$&
     *&Λ੾Ε͹࢖͑Δ)5.-  UFNQMBUFλά <table id="producttable"> <thead> <tr> <td>UPC_Code</td> <td>Product_Name</td> </tr> </thead> <tbody> <!-- 必要に応じて既存のデータをここに含められます。 --> </tbody> </table> <template id="productrow"> <tr> <td class="record"></td> <td></td> </tr> </template>
13. '30/5&/%
    $0/'&3&/$&
     *&Λ੾Ε͹࢖͑Δ$44  $44
    (SJE
    -BZPVU ৽࢓༷ main{ display: grid; grid-template-columns: 100px 100px 100px; grid-template-rows: 100px 100px; gap: 6px; } w *&ͩͱϕϯμʔϓϨϑΟοΫεΛ͚ͭͯ͞Βʹ چ࢓༷΁ͷಡΈସ͕͑ඞཁ
 ˞"VUPQSJpYFSΛ௨ͤ͹ҰԠม׵͸Մೳ͕ͩ
 ɹͻͱख͔͔ؒΔˍίʔυ͕૿͑Δ
14. '30/5&/%
    $0/'&3&/$&
     *&Λ੾Ε͹࢖͑Δ+BWB4DSJQU  &4Ҏ߱ w MFUDPOTU
    w Ξϩʔؔ਺
    w DMBTTߏจ
    FUDʜ
15. '30/5&/%
    $0/'&3&/$&
     *&ͷαϙʔτΛܧଓ͢΂͖͔  جຊతʹ͸ࢭΊΔ΄͏͕͍͍ w ࠓޙ৽ن։ൃ͢ΔҊ݅
 ˠαϙʔτର৅֎ʹ͢Δ
    w ैདྷ͔Βଓ͍͍ͯΔҊ݅
 ˠόʔδϣϯΞοϓ࣌ʹର৅͔Β֎͍ͯ͘͠ ্૚෦΍ΫϥΠΞϯτ౳ͷ౎߹Ͱ֎ͤͳͦ͞͏ͳ৔߹ʜ ஍ಓʹࠜճ͍ͯͩ͘͠͠͞ ˞ࢲ΋ઈࢍࠜճ͠தͰ͢ ྦ
16. '30/5&/%
    $0/'&3&/$&
     εϚϗͷϒϥ΢βγΣΞ  શੈք ೥݄ $ISPNF
     6$
    #SPXTFS
     4BGBSJ
    
17. '30/5&/%
    $0/'&3&/$&
     εϚϗͷϒϥ΢βγΣΞ  ೔ຊ ೥݄ 4BGBSJ
     $ISPNF
    
18. '30/5&/%
    $0/'&3&/$&
     εϚϗͷϒϥ΢βγΣΞ  ܏޲ w ࠃʹΑͬͯେ͖͘܏޲͕มΘΔ
    w ઌਐࠃ͸4BGBSJ͕ɺ৽ڵࠃ͸$ISPNF͕ڧ͍܏޲
    w ͨͩ͠ɺ೔ຊ΄Ͳ4BGBSJ͕ڧ͍ࠃ͸ଞʹ͸ͳ͍
    w ٯʹΠϯυͰ͸4BGBSJͷγΣΞ͸
19. '30/5&/%
    $0/'&3&/$&
     εϚϗͷϒϥ΢βαϙʔτ  ߟ͑ํ $ISPNFͱ4BGBSJ͚ͩͰߟ͑ΔͳΒ
    ϒϥ΢βผΑΓ΋
    04ͷόʔδϣϯผͰ
    ߟ͍͑ͯ͘΄͏͕ྑ͍
20. '30/5&/%
    $0/'&3&/$&
     εϚϗͷ04όʔδϣϯผγΣΞ  "OESPJE IUUQTEFWFMPQFSBOESPJEDPNBCPVUEBTICPBSET ·Ͱɿ ɿ Ҏ߱ɿ ೥݄೔·Ͱͷ೔ؒ
21. '30/5&/%
    $0/'&3&/$&
     04όʔδϣϯผαϙʔτ  "OESPJE w ·Ͱ9Ҏ߱ͷஈ֊Ͱϒϥ΢βͷ܏޲ ͕มΘ͖͍ͬͯͯΔ
    w ·Ͱͷʮ"OESPJEඪ४ϒϥ΢βʯ͕Ͱഇ ࢭɺ$ISPNF͕σϑΥϧτʹ
    w Ͱ͸8FC7JFXίϯϙʔωϯτ͕04͔Β੾Γ ཭͞ΕΔ
22. '30/5&/%
    $0/'&3&/$&
     04όʔδϣϯผαϙʔτ  "OESPJE w ·Ͱͷඪ४ϒϥ΢βͩͱ
     'MFYCPY͸ϕϯμʔϓϨϑΟοΫε͕ඞཁ
     $44
    (SJE
    -BZPVU͕αϙʔτ͞Ε͍ͯͳ͍
     &4͕μϝ
    w Ҏ߱Ͱ͋Ε͹$ISPNFΛ࠷৽൛ʹ͓͚ͯ͠͹໰୊ͳ ͍͸ͣ
    w ͨͩ͠ɺ͸8FC7JFX͕04͔Β੾Γ཭͞Ε͍ͯͳ͍ ͨΊͦͪΒΛ࢖͏৔߹͸ཁ஫ҙ
 ·Ͱͷαϙʔτൣғಉ༷ͱߟ͑ͯྑ͍
23. '30/5&/%
    $0/'&3&/$&
     εϚϗͷ04όʔδϣϯผγΣΞ  J04 IUUQTEFWFMPQFSBQQMFDPNTVQQPSUBQQTUPSF ·Ͱɿ ɿ ɿ
24. '30/5&/%
    $0/'&3&/$&
     04όʔδϣϯผαϙʔτ  J04 w 'MFYCPYɿ·Ͱ͸ϕϯμʔϓϨϑΟοΫεඞ ཁɺҎ߱͸໰୊ͳ͠
    w $44
    (SJE
    -BZPVUɿ·Ͱର৅֎ͳͷͰ஫ҙ
    w &4ɿҎ߱Ͱαϙʔτ
25. '30/5&/%
    $0/'&3&/$&
     Ͳͷόʔδϣϯ·Ͱαϙʔτ͢΂͖͔  ݁ہ1$ͱಉ͡ w ࠓޙ৽ن։ൃ͢ΔҊ݅
 ˠݹ͍όʔδϣϯ͸αϙʔτର৅֎ʹ͢Δ
    w ैདྷ͔Βଓ͍͍ͯΔҊ݅
 ˠόʔδϣϯΞοϓ࣌ʹݹ͍΋ͷΛ֎͍ͯ͘͠ ্૚෦΍ΫϥΠΞϯτ౳ͷ౎߹Ͱ֎ͤͳͦ͞͏ͳ৔߹ʜ ஍ಓʹࠜճ͍ͯͩ͘͠͠͞
26. '30/5&/%
    $0/'&3&/$&
     ·ͱΊ  w ϒϥ΢βͷγΣΞɺόʔδϣϯผγΣΞ͸೔ʑมԽ ͍ͯ͠Δ
    w ϒϥ΢βɺόʔδϣϯʹΑͬͯͲͷΑ͏ͳٕज़Λα ϙʔτ͍ͯ͠Δ͔ΛϦαʔν͓ͯ͘͠ඞཁ͋Γ
    w Ͳͷϒϥ΢βɺόʔδϣϯΛαϙʔτ͢Δ͔ͷ൑அ ΋త֬ʹ΍͍ͬͯ͘ඞཁ͕͋Δ
    w Ϣʔβʔ໨ઢͰߟ͑·͠ΐ͏
    w *&ͷαϙʔτ͸ͦΖͦΖࢭΊ·͠ΐ͏
 ʜʜͱ͍͏͔ࢭΊ͍ͨ
27. ऴ
    
    ͋Γ͕ͱ͏͍͟͝·ͨ͠ɻ