知っておきたいブラウザについての基礎入門

知っておきたいブラウザについての基礎入門 at サポーターズ京都勉強会 https://supporterz.connpass.com/event/51220/

Transcript

1. ஌͓͖͍ͬͯͨϒϥ΢β ʹ͍ͭͯͷجૅೖ໳ Pasta-K pasta0915@gmail.com at Supporterz Kyoto
2. @pastakɹ
3. @pastakɹ • ژ౎େֶͰֶੜΛ΍͍ͬͯ·͢ • Nota Inc Gyazo։ൃνʔϜ ΞϧόΠτ • JavaScript / React • Ruby on Rails • Browser Extension
5. ຊ೔ͷ͓඼ॻ͖ • ΢Σϒϒϥ΢βʹ͍ͭͯ • ྺ࢙ • ϒϥ΢βͷ࢓૊Έ঺հɾιϑτ΢ΣΞߏ੒ • Developer ToolΛ༻͍ͯཧղΛਂΊΔ • ΞχϝʔγϣϯΛྫʹ • ͓·͚
6. ࠓ೔࿩͞ͳ͍͜ͱ • RenderingΤϯδϯ΍JavaScriptΤϯδϯͷৄ ࡉͳৼΔ෣͍ʹ͍ͭͯ • ͦͷଞ؆୯ͷͨΊʹઆ໌Λলུͨ͠Γ͍ͯ͠ ·͢
7. ΢Σϒϒϥ΢β
   ʹ͍ͭͯ
8. ΢Σϒϒϥ΢βͱ͸ʁ ΢Σϒϒϥ΢βʢΠϯλʔωοτϒϥ΢βɺweb browserʣͱ͸ɺ World Wide Web (WWW) ͷར༻ ʹڙ͢Δϒϥ΢βͰ͋ΓɺϢʔβΤʔδΣϯτ (UA) Ͱ͋Δɻ۩ମతʹ͸ɺ΢ΣϒϖʔδΛը໘΍ ҹ࡮ػʹग़ྗͨ͠ΓɺϋΠύʔϦϯΫΛͨͲͬͨΓ ͢ΔͳͲͷػೳ͕͋Δɻ୯ʹϒϥ΢βʢϒϥ΢βʔʣ ͱݺΜͩ৔߹ɺଟ͘͸΢Σϒϒϥ΢βͷ͜ͱΛࢦ͢ɻ https://ja.wikipedia.org/wiki/ %E3%82%A6%E3%82%A7%E3%83%96%E3%83%96%E3%83%A9%E3%82%A6%E3%82%B6
9. Question • ΢Σϒϒϥ΢βͱݴ͑͹ʁ
10. Question • ΢Σϒϒϥ΢βͱݴ͑͹ʁ • ΢Σϒϒϥ΢β͸ԿΛ͢Δ΋ͷʁ
11. Question • ΢Σϒϒϥ΢βͱݴ͑͹ʁ • ΢Σϒϒϥ΢β͸ԿΛ͢Δ΋ͷʁ • ChromeͱFirefoxԿ͕ҧ͏ͷʁ
12. Question • ΢Σϒϒϥ΢βͱݴ͑͹ʁ • ΢Σϒϒϥ΢β͸ԿΛ͢Δ΋ͷʁ • ChromeͱFirefoxԿ͕ҧ͏ͷʁ • ChromeͱOpera͸Կ͕ҧ͏ʁ
13. Question • ΢Σϒϒϥ΢βͱݴ͑͹ʁ • ΢Σϒϒϥ΢β͸ԿΛ͢Δ΋ͷʁ • ChromeͱFirefoxԿ͕ҧ͏ͷʁ • ChromeͱOpera͸Կ͕ҧ͏ʁ
15. Chrome Opera Vivaldi Safari Firefox Internet Explorer Edge
16. Chrome Opera Vivaldi Safari Firefox Internet Explorer Edge
17. Chrome Opera Vivaldi Safari Firefox Internet Explorer Edge Chromium
18. Chrome Opera Vivaldi Safari Firefox Internet Explorer Edge Chromium
19. Chrome Opera Vivaldi Safari Firefox Internet Explorer Edge Chromium Webkit
20. Chrome Opera Vivaldi Safari Firefox Internet Explorer Edge
21. Question • ΢Σϒϒϥ΢βͱݴ͑͹ʁ • ΢Σϒϒϥ΢β͸ԿΛ͢Δ΋ͷʁ • ChromeͱFirefoxԿ͕ҧ͏ͷʁ • ChromeͱOpera͸Կ͕ҧ͏ʁ $ISPNF
    'JSFGPY
    *&
    0QFSB
    &EHFʜ
22. Question • ΢Σϒϒϥ΢βͱݴ͑͹ʁ • ΢Σϒϒϥ΢β͸ԿΛ͢Δ΋ͷʁ • ChromeͱFirefoxԿ͕ҧ͏ͷʁ • ChromeͱOpera͸Կ͕ҧ͏ʁ
23. Question • ΢Σϒϒϥ΢βͱݴ͑͹ʁ • ΢Σϒϒϥ΢β͸ԿΛ͢Δ΋ͷʁ • ChromeͱFirefoxԿ͕ҧ͏ͷʁ • ChromeͱOpera͸Կ͕ҧ͏ʁ
24. ΢Σϒϒϥ΢β
    ͷجຊߏ੒
25. ΢Σϒϒϥ΢βͷجຊߏ੒ http://www.slideshare.net/quangntta/web-browser-architecture-49196378
26. ΢Σϒϒϥ΢βͷجຊߏ੒ http://www.slideshare.net/quangntta/web-browser-architecture-49196378 ΞυϨεόʔɾπʔϧόʔ
    ֤छϘλϯ ਐΉ໭Δ
    ϒοΫϚʔΫɹͳͲ
27. ΢Σϒϒϥ΢βͷجຊߏ੒ http://www.slideshare.net/quangntta/web-browser-architecture-49196378 6*ͱ֤छΤϯδϯͱͷ
    ϝοηʔδͷ΍ΓऔΓΛ஥հ
28. ΢Σϒϒϥ΢βͷجຊߏ੒ http://www.slideshare.net/quangntta/web-browser-architecture-49196378 )5.-9.-Λύʔε͠ɺ ը໘ʹදࣔ͢ΔͨΊͷ
    ϨΠΞ΢τΛߏங͢Δ
29. ΢Σϒϒϥ΢βͷجຊߏ੒ http://www.slideshare.net/quangntta/web-browser-architecture-49196378 )551΍'51ͳͲΛ஻Δ
30. ΢Σϒϒϥ΢βͷجຊߏ੒ http://www.slideshare.net/quangntta/web-browser-architecture-49196378 +BWB4DSJQUͷ࣮ߦ݁ՌΛ
    3FOEFSJOH
    &OHJOFʹ౉͢
31. ΢Σϒϒϥ΢βͷجຊߏ੒ http://www.slideshare.net/quangntta/web-browser-architecture-49196378 σΟεϓϨΠʹ
    දࣔ͢Δ
32. ΢Σϒϒϥ΢βͷجຊߏ੒ http://www.slideshare.net/quangntta/web-browser-architecture-49196378 ࠓ೔͸͔͜͜Β
    ͜ͷͭʹ஫໨ͯ͠
    ۷ΓԼ͛ͯΈ·͢
33. ϨϯμϦϯάΤϯδϯͷ໾ׂ • ϨϯμϦϯάΤϯδϯ͸HTML / XML Λύʔε • CSSΛύʔε͠ελΠϧϧʔϧΛ೺Ѳ • HTMLΛCSSϧʔϧʹج͍ͮͯදࣔΛ഑ஔ • ඳըͷੜ੒ ※ҎԼͰ͸HTMLͱͷΈදه͠·͢
34. ϨϯμϦϯάΤϯδϯͷ໾ׂ • ϨϯμϦϯάΤϯδϯ͸HTML / XML Λύʔε • CSSΛύʔε͠ελΠϧϧʔϧΛ೺Ѳ • HTMLΛCSSϧʔϧʹج͍ͮͯදࣔΛ഑ஔ • ඳըͷੜ੒ -BZPVU 1BSTF 1BJOU
35. JavaScriptΠϯλʔϓϦλͷ໾ׂ • JavaScriptͷղੳɾ࣮ߦ
36. JavaScriptΠϯλʔϓϦλͷ໾ׂ • JavaScriptͷղੳɾ࣮ߦ &WBMVBUF
37. Question • ΢Σϒϒϥ΢βͱݴ͑͹ʁ • ΢Σϒϒϥ΢β͸ԿΛ͢Δ΋ͷʁ • ChromeͱFirefoxԿ͕ҧ͏ͷʁ • ChromeͱOpera͸Կ͕ҧ͏ʁ
38. Question • ΢Σϒϒϥ΢βͱݴ͑͹ʁ • ΢Σϒϒϥ΢β͸ԿΛ͢Δ΋ͷʁ • ChromeͱFirefoxԿ͕ҧ͏ͷʁ • ChromeͱOpera͸Կ͕ҧ͏ʁ )5.-$44+4ͳͲΛ
    ཧղɺ࣮ߦɺදࣔΛߦ͏ɻ
    ·ͨͦΕΒͷͨΊʹඞཁͳ
    ௨৴ͳͲͷػೳ΋͋Δɻ
39. Question • ΢Σϒϒϥ΢βͱݴ͑͹ʁ • ΢Σϒϒϥ΢β͸ԿΛ͢Δ΋ͷʁ • ChromeͱFirefoxԿ͕ҧ͏ͷʁ • ChromeͱOpera͸Կ͕ҧ͏ʁ
40. Question • ΢Σϒϒϥ΢βͱݴ͑͹ʁ • ΢Σϒϒϥ΢β͸ԿΛ͢Δ΋ͷʁ • ChromeͱFirefoxԿ͕ҧ͏ͷʁ • ChromeͱOpera͸Կ͕ҧ͏ʁ
41.                             .P[JMMB
    $PSQPSBUJPO ઃཱ .P[JMMB
    $IJOB ઃཱ .P[JMMB
    .BOJGFTUP
    'JSTU
    %SBGU /FUTDBQF ઐ೚ελοϑ ͱίϛϡχςΟͱͷڞಉ ϓϩδΣΫτͱͯ͠ /FUTDBQF
    $PNNVOJDBUJPOT ͷग़ࢿʹΑΓઃཱ /$ ༝དྷͷίʔυͷഁ غͱ৽ϨϯμϦϯάΤ ϯδϯʮ(FDLPʯϕʔ εͰͷࠜຊతͳઃܭͷ ͠௚͠Λܾఆ ϚʔΫ ɾΞϯυϦʔηϯ Βɺ .PTBJDΛ։ൃ ς ΟϜɾόʔφʔζɾ Ϧʔ
    8PSME
    8JEF
    8FC
    ͷݪܕ ͱͳΔఏҊ )5.-
    )551
    63-
    Λઃܭ ੈքॳͷ
    8FC
    αΠ τ 8PSME8JEF8FC
    ͷιʔε ίʔυΛύϒϦ ο Ϋ υϝΠϯ ͱ ͯ͠ެ։ .PTBJDͷ ϥΠηϯεΛऔಘ ɹ ϚʔΫɾΞϯυϦʔηϯͱ δϜɾΫϥʔΫʹΑ Γઃཱ ඇӦར૊৫ͱͯ͠ಠཱ .P[JMMB
    &VSPQF ઃཱ .P[JMMB
    +BQBO ઃཱ NETSCAPE COMMUNICATIONS /$Y Λແঈ഑෍ ։ൃதͷ /$ Λ ΦʔϓϯιʔεԽ ೔ຊ๏ਓઃཱ /$4" ͔Βͷૌ͑ʹΑΓ ໊ࣾมߋ ɾ
    'JSFGPY
    04 ɾ
    )5.-
    קࠂ ɾ
    8FC$-
     ɾ
    )551 ɾ&$."4DSJQU
     ɾ'JSFGPY
    04
    57 ɾ$44
    4OBQTIPU
    
    ɾ
    'JSFGPY
    Ԇ௕
    αϙʔτ൛ ɾ
    )5.- ࠷ऴ૲Ҋ
    ެ։ ɾ
    8FC(-
     ɾ
    8$ ઃཱ ɾ
    /FUTDBQF
    /BWJHBUPS
    ͕ࢢ৔Λ੮ר͢Δ ɾ
    :BIPP αʔϏε
    
    
    ։࢝ ɾ
    8FC.
    ެ։ ɾ$44
    4OBQTIPU
    
    ɾ
    +BWB ొ৔ ɾ
    Πϯλʔωοτ
    ར༻ऀͷٸ૿ ɾ
    ϒϥ΢βઓ૪ܹԽ ɾ
    $44 קࠂ ɾ
    )551 ɾ
    .PTBJD ͕ࢢ৔Λ
    ੮ר͢Δ
     ೥Ͱ  ສ
    μ΢ϯϩʔυ ɾ
    )551 ɾ
    Πϯλʔωο τ઀ଓ
    ϗετ͕  ສΛ
    ௒͑Δ ɾ
    Πϯλʔωο τ઀ଓ
    ϗετ͕  ສΛ
    ௒͑Δ ɾ೔ຊ࠷ॳͷ 8FC
    αΠτ͕ެ։
    ɾ
    ϒϥ΢βઓ૪
    ࣄ্࣮ͷऴᖼ ɾ
    *& γΣΞٸ૿ ɾ
    $44 קࠂ ɾ
    9.-
     קࠂ ɾ
    %0. קࠂ ɾ&$."4DSJQU
    OE
    ɾ&$."4DSJQU
    SE
    ɾ
    )5.-
     קࠂ ɾ
    )551 ɾ&$."4DSJQU
    TU
    ɾ
    "KBY ɾ
    8FC ɾ
    8$
    )5.-
    8(
    
    
    ઃཱ ɾ
    $44
    4OBQTIPU
    
    ɾ
    )5.- ૲Ҋެ։ ɾ
    8$
    9)5.-
    8(
    
    
    ׆ಈऴྃ ɾ&$."4DSJQU
    UI
    ɾ
    ถϦϋϏϦςʔ
    γϣϯ๏  ৚
    ࢪߦ։࢝ ɾ
    ϒϩʔυόϯυ
    ීٴ͕೔ຊͰ࢝
    
    
    ·Δ ɾ
    "0- ͱ .JDSPTPGUɺ
    ಠې๏ૌুͰ࿨ղ
    ϒϥ΢βઓ૪ʹ
    ऴࢭූ ɾ
    ϒϩάϒʔϜ
    ೔ຊͰ࢝·Δ ɾ
    ʮઓޙੈ୅ʯ
    ϒϥ΢βͷ୆಄ ɾ
    8)"58( ઃཱ ɾ
    +*4
    9
     ੍ఆ ɾ
    (3&&ɺNJYJ ͳͲ
    4/4 ͕ϒʔϜʹ ɾ
    "0-/FUTDBQFɺ
    .JDSPTPGU Λ
    ಠې๏ҧ൓Ͱఏૌ /$4" $&3/ .PTBJD $PNNVOJDBUJPOT .JDSPTPGU "QQMF 4QZHMBTT 0QFSB 4PGUXBSF ,%& 1SPKFDU (PPHMF BTNKT BTNKT .P[JMMB
    $MBTTJD (FDLP 8FC ඪ ४ ٕ ज़ Λ ߴ ౓ ʹ α ϙ ʔ τ 5SJEFOU &EHF #MJOL 1SFTUP 8FC,JU /FUTDBQF
    /BWJHBUPS
     ʢίʔυωʔϜʮ.P[JMMBʯ ʣ /FUTDBQF
    /BWJHBUPS
     /FUTDBQF
    /BWJHBUPS
     4UBOEBSE
    &EJUJPO /FUTDBQF
    /BWJHBUPS
     (PME
    &EJUJPO /FUTDBQF
    $PNNVOJDBUPS
     /FUTDBQF
    $PNNVOJDBUPS
     .P[JMMB
    "QQMJDBUJPO
    4VJUF
     .P[JMMB
    "QQMJDBUJPO
    4VJUF <.JMFTUPOF
     ʙ > ʢίʔυωʔϜʮ4FBNPOLFZʯ ʣ /FUTDBQF
     .P[JMMB
    "QQMJDBUJPO
    4VJUF
     'JSFGPY
    %FWFMPQFS
    &EJUJPO J04
    ൛
    'JSFGPY 4FB.POLFZ
        /FUTDBQF
     .P[JMMB
    'JSFCJSE
     Firefox
            .P[JMMB
    "QQMJDBUJPO
    4VJUF
     .P[JMMB
    1IPFOJY
         ϦϦʔε ୈ
    
    ੈ୅
    +BWB4DSJQU
    Τϯδϯ ϋʔυ΢ΣΞΞΫηϥϨʔγϣϯ ɹɹɹɹ8FC(-
    
    
    
    
    
    
    
    
    
    
    
    
    
    
    
    
    
    'JSFGPY
    4ZOD ɹɹɹɹ"OESPJE
    ൛ϦϦʔε ୈ
    
    ੈ୅
    +BWB4DSJQU
    Τϯδϯ ϋʔυ΢ΣΞΞΫηϥϨʔγϣϯ ɹɹɹɹ8FC(-
    
    
    
    
    
    
    
    
    
    
    
    
    
    
    
    
    
    'JSFGPY
    4ZOD ɹɹɹɹ"OESPJE
    ൛ϦϦʔε "OESPJE
    ൛
    /BUJWF
    6* ϦϦʔε "OESPJE
    ൛
    /BUJWF
    6* ϦϦʔε Ҏޙ 'JSFGPY
    ͷվળ఺Λ औΓೖΕͯߋ৽͕ଓ͘ &QJD
    (BNFT ͱ 6OSFBM
    &OHJOF ΛҠ২ 'JSFGPY
    ͱ ฒߦͯ͠։ൃ Ҏޙ 'JSFGPY
    ͷվળ఺Λ औΓೖΕͯߋ৽͕ଓ͘ &QJD
    (BNFT ͱ 6OSFBM
    &OHJOF ΛҠ২ 6OJUZ
    ͕
    8FC(-
    ग़ྗʹਖ਼ࣜରԠ 8FC(- 'JSFGPY
    ͱ ฒߦͯ͠։ൃ 8FC(- *&
    
    ͕࠷ޙͷ ϝδϟʔόʔδϣϯʹ *&
    
    ͕࠷ޙͷ ϝδϟʔόʔδϣϯʹ #MJOL
    Τϯδϯ #MJOL
    Τϯδϯ (PPHMF
    (MBTT (PPHMF
    (MBTT "MQIBCFU ઃཱ "MQIBCFU ઃཱ 1SFTUP Τϯδϯͷ 0QFSB ࠷ऴόʔδϣϯ ΤϯδϯΛ
    8FC,JU
    ʹมߋ ΤϯδϯΛ
    8FC,JU
    ʹมߋ 1SFTUP Τϯδϯͷ 0QFSB ࠷ऴόʔδϣϯ ΤϯδϯΛ
    #MJOL ʹมߋ ΤϯδϯΛ
    #MJOL ʹมߋ 6OJUZ
    ͕
    8FC(-
    ग़ྗʹਖ਼ࣜରԠ .PTBJD ͷݖརΛ ८Γରཱɺ཭൓ ϥΠηϯεڙ༩ ϥΠηϯεڙ༩ γϛϡϨʔλ 
    IUUQMJOFNPEFDFSODIXXXIZQFSUFYU8885FSNTIUNM εΫϦϓτ΍ελΠϧγʔτʹ ରԠͨ͠ߴػೳϒϥ΢β ੈքॳͷ
    .BD
    ༻ϒϥ΢β
    ΛϦϦʔε ੈքॳͷ
    8JOEPXT
    ༻ϒϥ΢β ,)5.-8 ͷ ։ൃΛ։࢝ .BD
    04
    9
    W $IFFUBI ϦϦʔε .BD
    04
    9
    W 1BOUIFS ϦϦʔε Ξυϫʔζ αʔϏε։࢝ (PPHMF
    %FTLUPQ ϦϦʔε (PPHMF
    .BQT αʔϏε։࢝ (NBJM αʔϏε։࢝ (PPHMF
    1BDL ϦϦʔε (PPHMF
    %PDT
     4QSFBETIFFUT αʔϏε։࢝ "OESPJE
     ϦϦʔε 7 (PPHMF αʔϏε։࢝ .PTBJD ͷ ϥΠηϯεΛऔಘ 8JOEPXT
    7JTUB ϦϦʔε 8JOEPXT
    91
    41 ϦϦʔε 8JOEPXT
    .F ϦϦʔε 8JOEPXT
    91 ϦϦʔε 8JOEPXT
     ϦϦʔε 8JOEPXT
     ϦϦʔε *& ͱ 8JOEPXT Λ౷߹ 8JOEPXT
     ϦϦʔε ݕࡧΤϯδϯ ։ൃ͔Β૑ۀ .BD
    04
     ϦϦʔε .BD
    04
    
    ϦϦʔε .BD
    04
    9
    W 1VNB ϦϦʔε .BD
    04
    9
    W
    +BHVBS ϦϦʔε .BD
    04
    9
    W 5JHFS ϦϦʔε .BD
    04
    9
    W -FPQBSE ϦϦʔε .BD
    04
    9
    W
    4OPX
    -FPQBSE ϦϦʔε 04
    9
    
    -JPO ϦϦʔε 4BGBSJ Λඪ४ 8FC ϒϥ΢β ʹ࠾༻ J1BE
    ൃച։࢝ .BD
    04
    
    ϦϦʔε J1IPOF
    ൃച։࢝ 5PQ
    4JUFT $PWFS
    'MPX ϦϦʔε ϒοΫϚʔΫͱཤྺͷ౷߹ εϚʔτϩέʔγϣϯόʔ &7
    44- "DJE ςετ߹֨ ॎॻ͖දࣔ ,)5.- Λ ϕʔεʹͯ͠ ϨϯμϦϯά ΤϯδϯΛ ։ൃ ϙοϓΞοϓ ϒϩοΫ μ΢ϯϩʔυ ϑΝΠϧͷ ηΩϡϦςΟܯࠂ ΞυΦϯ؅ཧ ϦϦʔε MJCXXX
    Λ ࢖ͬͯ
    ։ൃ
    ࠶ར༻Մೳͳ $ ݴޠͷ ϥΠϒϥϦͱͯ͠Ұ෦Λ ॻ͖௚͠ ϦϦʔε ϦϦʔε ϦϦʔε ϦϦʔε ൃల ൃల .BJM ͱ $PNQPTFS Λ౷߹ +4DSJQU 7#4DSJQU $44ʢ૲ҊʣͷҰ෦ ൃల ഁغ ϧϏදࣔ ൃల ϦϦʔε ੒ՌΛར༻ Πϝʔδ
    πʔϧόʔ ύʔιφϧόʔ όάमਖ਼ ൃల 'JSFGPY
     ͷ վળ఺ΛϑΟʔυόοΫ 'JSFGPY
     ͷվળ఺Λ ɹɹɹϑΟʔυόοΫ 4FB.POLFZ
    $PVODJM ͕։ൃΛܧଓ λϒϒϥ΢ζ ϑΟογϯά ࠮ٗܯࠂ 8FC ඪ४ٕज़΁ͷ ରԠΛվળ &7
    44- ϦϦʔε ϦϦʔε "DJE ςετ߹֨ ϑΟʔυϦʔμʔ ϑΟογϯά ࠮ٗܯࠂ &7
    
    44- 8FC ΫϦοϓ Ϧʔμʔ ֦ுػೳ ϦʔσΟϯά Ϧετ $44ɼ%ZOBNJD)5.- ࠃࡍԽͷվળ +BWB4DSJQU ϑΟογϯά࠮ٗܯࠂ ηογϣϯ෮ݩ 1FSTPOBT 1IPFOJY ࣾͷૌ͑ʹΑΓ ໊শมߋ 'JSFCJSE ϓϩδΣΫτͷ ૌ͑ʹΑΓ໊শมߋ ֦ுػೳϚωʔδϟ ࣗಈΞοϓσʔτ 47( )5.-
    $BOWBT Ұ෦ͷίʔυͱ ઃܭίϯηϓτ Λܧঝ 8FC ඪ४ٕज़΁ͷ ରԠΛվળ ϚϧνϓϩηεԽ ηογϣϯ෮ݩ ৽
    +BWF4DSJQU
    Τϯδϯ ϋʔυ΢ΣΞ ΞΫηϥϨʔγϣϯ )5.-
    ΁ͷରԠ։࢝ $44 %ZOBNJD)5.- ϓϥάΠϯ ϓϩηε෼཭ ʢʙʣ +BWB4DSJQU
    ܕਪ࿦ 'JSFGPY
     ͷ վળ఺ΛϑΟʔυόοΫ  Ͱ ։ൃΛऴྃ  ͔Β .BD ͷඪ४ 8FC ϒϥ΢β ʹ࠾༻ ϩΰมߋ ৽ +BWB4DSJQU Τϯδϯ ϓϥΠϕʔτϒϥ΢δϯά )5.- ΁ͷରԠΛڧԽ Ϧ Ϧ ồ ε 47(
    5JOZ ແྉԽ ೔ຊޠදࣔ λ ϒ ϒ ϥ ΢ ζ ػ ೳ ͷ ݪ ܕ &NBJM ΫϥΠΞϯτ ৽ +BWB4DSJQU Τϯδϯ ϓϥΠϕʔτϒϥ΢δϯά λϒελοΩϯά ΤΫεςϯγϣϯ 6* σβΠϯมߋ #JU5PSSFOU ΢ΟδΣοτ "DJE ςετ߹֨ ϑΟογϯά ࠮ٗܯࠂ εϐʔυμΠϠϧɺ ϒοΫϚʔΫͳͲͷ ಉظ ཤྺ͔Βͷશจݕࡧ &7
    44- λϒϒϥ΢ζ ϙοϓΞοϓϒϩοΫ ϒϥ΢βػೳΛಠཱ ϦϦʔε ʢόʔδϣϯதུʣ ʢόʔδϣϯதུʣ ϦϦʔε ϦϦʔε 7 ֦ுػೳϚωʔδϟ 04
    9
     .PVOUBJO
    -JPO ϦϦʔε 04
    9
    
    .BSWFSJDLT ϦϦʔε 8JOEPXT
     ϦϦʔε 8JOEPXT
     ϦϦʔε XFC35$ BTNKT XFC35$ BTNKT Ϛϧνϓϩηε 8FC&YUFOTJPO ϧϏɺ &.& ϧϏɺ &.& τϥοΩϯάอޢػೳ෇͖ ϓϥΠϕʔτϒϥ΢δϯά τϥοΩϯάอޢػೳ෇͖ ϓϥΠϕʔτϒϥ΢δϯά 8JOEPXT
     ϦϦʔε +BWB4DSJQU
    Τϯδϯ $IBLSB
    $PSF
    Λ Φʔϓϯιʔεʹ +BWB4DSJQU
    Τϯδϯ $IBLSB
    $PSF
    Λ Φʔϓϯιʔεʹ 04
    9
    
    .BSWFSJDLT ϦϦʔε 04
    9
     :PTFNJUF ϦϦʔε 04
    9
     :PTFNJUF ϦϦʔε 04
    9
     &M
    $BQJUBO ϦϦʔε 04
    9
     &M
    $BQJUBO ϦϦʔε "QQMF
    8BUDI ൃച։࢝ "QQMF
    8BUDI ൃച։࢝ 8JOEPXT
    1IPOF
     ϦϦʔε 8JOEPXT
     ϦϦʔε /$4"
    .PTBJD 8PSME8JEF8FC -JOF
    .PEF
    #SPXTFS MJCXXX *OUFSOFU
    &YQMPSFS
     &EHF    4QZHMBTT
    .PTBJD 7JPMB 4BNCB
    .BD888 $FMMP    
    41    
    41 4BGBSJ
           $ISPNF
           
    GPS
    .BD 
    GPS
    .BD 
    GPS
    .BD 
    GPS
    .BD                  .VMUJ5PSH
    0QFSB
     0QFSB
        ϑΟʔυϦʔμʔ *3$ ΫϥΠΞϯτ ৽ϨϯμϦϯά Τϯδϯ      ιʔείʔυΛެ։ *& ͷ͝ઌ૆༷΋ .PTBJDɻ ࣮͸ *& ΋਌ੰͩͬͨΜͩͶɻ ೥·Ͱ͸ɺ /FUTDBQF
    /BWJHBUPS ͕ .BDͷඪ४8FC ϒϥ΢βͩͬͨΜͩΑɻ ͜ͷ͜Ζ͔Β*&Λ࢖͏ਓ͕͍͢͝ ੎͍Ͱ૿͑ͨΜͩɻ θϩ͔Β࡞ΔΜ͡Όͳͯ͘ ͢Ͱʹ͋ͬͨ෺Λվྑͯ͠ ࢖ͬͨΜͩͶɻ 'JSFGPY ͷԕ͍ ͝ઌ૆༷ͩΑ ʂ ʮ"DJEςετʯ ͸ ϒ ϥ ΢β͕ͪΌΜͱ࡞ΒΕ ͍ͯΔ͔Ͳ͏͔ͷ෼͔ Γ΍͍͢໨҆ʹ࢖ΘΕ ͯΔΜͩɻ ϑΟογϯά࠮ٗܯࠂػೳ΍ λϒػೳ͸ɺ ΋͏෇͍ͯΔͷ ͕౰ͨΓલʹͳͬͯΔΜͩͶɻ ࠷ۙ஫໨͞ΕͯΔٕज़ ͷ΄ͱΜͲ͸ɺ ͜ͷࠒ ʹ͸΋͏ग़ଗͬͯͨΜ ͩͶɻ *&͕͓΍͢Έͯ͠Δؒɺ ΈΜͳҰੜݒ໋ ͕Μ͹ͬͯͨΜͩΑɻ 'JSFGPY΍ଞͷϒϥ΢β͕ ͕Μ͹ͬͯͩΜͩΜਓؾ͕ ग़͖͔ͯͨΒɺ *&΋·ͨ ͕Μ͹Γ࢝ΊͨΜͩɻ ͜Ε͔Β΋ɺ ΑΓ࢖͍΍͘͢ɺ ΑΓศརʹͲΜͲΜਐา͍ͯ͘͠Αɻ ָ͠Έʹͯͯ͠Ͷʂ ͜͏ͯ͠ίϛϡχςΟͰ ։ൃΛҾ͖ܧ͛Δͷ΋ ΦʔϓϯιʔεͳΒͰ͸ͩͶʂ ʮ44- ʢ҉߸Λ࢖ͬͨ҆શͳ௨৴ʣ ʯ ΍ʮ+BWB4DSJQUʯ͸ɺ ͜ ͷ ͜ Ζ ʹ /FUTDBQF͕࡞ͬͨΜͩΑɻ Πϯλʔωοτͱ͍͑͹ ωοτεέʔϓʂ ͍ͬͯ͏͘Β͍ͷେਓؾ ͩͬͨΜͩɻ Έ Μ ͳ ʹ ڠ ྗͯ͠ ΋ Β͚ͬͨͲɺ ࠷ॳ͸͏· ͍͘ ͔ ͳ ͔ ͬͨ Μ ͩ ʜʜ ੈքॳͷ XFCϒϥ΢β͸ 8PSME8JEF8FCͩΑ ·ͩ·ͩ४උෆ଍ͩͬ ͔ͨΒɺ *&ʹ͞Βʹࠩ Λͭ ͚Β ΕͪΌͬͨ ʜʜ ϘϥϯςΟΞ׆ಈͰ ͣͬͱࢧ͑ͯ͘ΕͨΜͩΑɻ ΍ͬͱ'JSFGPYͷग़൪ʂ ΞϝϦΧͷ৽ฉʹ޿ࠂ͕ͷͬͨΓͯ͠ɺ ·ΔͰ͓ࡇΓΈ͍ͨͩͬͨΑɻ ʮ(FDLPʯ ͍ͬͯ͏ ৽͍ٕ͠ज़ͷ͓͔͛Ͱੜ ·ΕมΘͬͨΜͩΑʂ ,%&͸ɺ 8JOEPXT΍.BDͷΑ͏ͳ؀ڥΛࣗ ༝ͳιϑτ΢ΣΞͰ࡞ΔϓϩδΣΫ τͩΑɻ ͦͷҰ෦ͱͯ͠8FCϒϥ΢β͕ඞཁͩͬͨ Μͩɻ 
    ൪໨ͷϒϥ΢β
    -JOF
    .PEF
    #SPXTFS
    ͸ γϛϡϨʔλͰମݧͰ͖ΔΑ 0QFSB͸/FUTDBQF΍*&ͱ ಉ͘͡ Β͍લ͔Β͋ͬͨΜͩͶɻ ͜ͷ͜Ζ͸*&ͱ͓ޓ͍ʹ ͸͛͘͠ڝ૪ͯͨ͠ΜͩͶɻ ήʔϜػฒͷ%ήʔϜ͕ ಈ͘Α͏ʹͳͬͨΜͩΑʂ ੈքॳͷ։ൃऀ޲͚ ϒϥ΢βʂ "QQ MF
    ͱ
    ( P P HM F
    ͷ
    8FC,JU
    ڞಉ։ൃ͕ऴྃ͠
    $ISPNF
    ͸෼ذͨ͠
    #MJOL ΤϯδϯʹͳͬͨΜͩ ແྉԽ͞ΕΔલ͸ɺ πʔϧόʔʹ޿ࠂ͕ ෇͍ͯͨΜͩΑɻ Έͳ͞Μ͸ɺීஈ࢖͍ͬͯΔ 8FC ϒϥ΢β͕Ͳ͏΍ͬͯੜ·Ε͖͔ͯͨɺͲΜͳ෩ʹਐา͖͔ͯͨ͠Λ஌͍ͬͯ·͔͢ʁɹ ࢁ͋Γ୩͋Γͷ 'JSFGPY ͷੜཱ͍ͪͱ͋Θͤͯɺ͍ΖΜͳϒϥ΢βͷਐาͷྺ࢙Λௐ΂ͯΈ·͠ΐ͏ʂ フォクすけと 学ぼう！ 
    .P[JMMB
    +BQBO
    ͜ͷ࡞඼͸
    ΫϦΤΠςΟϒɾίϞϯζ
    දࣔ
    
    ඇӦར
    
    ࠃࡍ
    ϥΠηϯεͷԼʹఏڙ͞Ε͍ͯ·͢ɻ .P[JMMBɺ 'JSFGPYɺ 'JSFGPY
    ϩΰ͸ɺ ถࠃ
    .P[JMMB
    'PVOEBUJPO
    ͷถࠃ͓Αͼͦͷଞͷࠃʹ͓͚Δ঎ඪ·ͨ͸ొ࿥঎ඪͰ͢ɻ ͦͷ΄͔هࡌ͞Ε͍ͯΔ঎඼໊͸ɺ ֘౰͢Δ֤ࣾͷ঎ඪ·ͨ͸ొ࿥঎ඪͰ͢ɻ
    ΅͘ͱ͍ͬ͠ΐʹ ϒϥ΢βͷྺ࢙Λษڧ ͯ͠ΈΑ͏ʂ ࢁંΓ ࢁંΓ ୩ંΓ ୩ંΓ CC BY-NC 4.0 Mozilla Japan https://www.mozilla.jp/blog/entry/10552/
42.                             .P[JMMB
    $PSQPSBUJPO ઃཱ .P[JMMB
    $IJOB ઃཱ .P[JMMB
    .BOJGFTUP
    'JSTU
    %SBGU /FUTDBQF ઐ೚ελοϑ ͱίϛϡχςΟͱͷڞಉ ϓϩδΣΫτͱͯ͠ /FUTDBQF
    $PNNVOJDBUJPOT ͷग़ࢿʹΑΓઃཱ /$ ༝དྷͷίʔυͷഁ غͱ৽ϨϯμϦϯάΤ ϯδϯʮ(FDLPʯϕʔ εͰͷࠜຊతͳઃܭͷ ͠௚͠Λܾఆ ϚʔΫ ɾΞϯυϦʔηϯ Βɺ .PTBJDΛ։ൃ ς ΟϜɾόʔφʔζɾ Ϧʔ
    8PSME
    8JEF
    8FC
    ͷݪܕ ͱͳΔఏҊ )5.-
    )551
    63-
    Λઃܭ ੈքॳͷ
    8FC
    αΠ τ 8PSME8JEF8FC
    ͷιʔε ίʔυΛύϒϦ ο Ϋ υϝΠϯ ͱ ͯ͠ެ։ .PTBJDͷ ϥΠηϯεΛऔಘ ɹ ϚʔΫɾΞϯυϦʔηϯͱ δϜɾΫϥʔΫʹΑ Γઃཱ ඇӦར૊৫ͱͯ͠ಠཱ .P[JMMB
    &VSPQF ઃཱ .P[JMMB
    +BQBO ઃཱ NETSCAPE COMMUNICATIONS /$Y Λແঈ഑෍ ։ൃதͷ /$ Λ ΦʔϓϯιʔεԽ ೔ຊ๏ਓઃཱ /$4" ͔Βͷૌ͑ʹΑΓ ໊ࣾมߋ ɾ
    'JSFGPY
    04 ɾ
    )5.-
    קࠂ ɾ
    8FC$-
     ɾ
    )551 ɾ&$."4DSJQU
     ɾ'JSFGPY
    04
    57 ɾ$44
    4OBQTIPU
    
    ɾ
    'JSFGPY
    Ԇ௕
    αϙʔτ൛ ɾ
    )5.- ࠷ऴ૲Ҋ
    ެ։ ɾ
    8FC(-
     ɾ
    8$ ઃཱ ɾ
    /FUTDBQF
    /BWJHBUPS
    ͕ࢢ৔Λ੮ר͢Δ ɾ
    :BIPP αʔϏε
    
    
    ։࢝ ɾ
    8FC.
    ެ։ ɾ$44
    4OBQTIPU
    
    ɾ
    +BWB ొ৔ ɾ
    Πϯλʔωοτ
    ར༻ऀͷٸ૿ ɾ
    ϒϥ΢βઓ૪ܹԽ ɾ
    $44 קࠂ ɾ
    )551 ɾ
    .PTBJD ͕ࢢ৔Λ
    ੮ר͢Δ
     ೥Ͱ  ສ
    μ΢ϯϩʔυ ɾ
    )551 ɾ
    Πϯλʔωο τ઀ଓ
    ϗετ͕  ສΛ
    ௒͑Δ ɾ
    Πϯλʔωο τ઀ଓ
    ϗετ͕  ສΛ
    ௒͑Δ ɾ೔ຊ࠷ॳͷ 8FC
    αΠτ͕ެ։
    ɾ
    ϒϥ΢βઓ૪
    ࣄ্࣮ͷऴᖼ ɾ
    *& γΣΞٸ૿ ɾ
    $44 קࠂ ɾ
    9.-
     קࠂ ɾ
    %0. קࠂ ɾ&$."4DSJQU
    OE
    ɾ&$."4DSJQU
    SE
    ɾ
    )5.-
     קࠂ ɾ
    )551 ɾ&$."4DSJQU
    TU
    ɾ
    "KBY ɾ
    8FC ɾ
    8$
    )5.-
    8(
    
    
    ઃཱ ɾ
    $44
    4OBQTIPU
    
    ɾ
    )5.- ૲Ҋެ։ ɾ
    8$
    9)5.-
    8(
    
    
    ׆ಈऴྃ ɾ&$."4DSJQU
    UI
    ɾ
    ถϦϋϏϦςʔ
    γϣϯ๏  ৚
    ࢪߦ։࢝ ɾ
    ϒϩʔυόϯυ
    ීٴ͕೔ຊͰ࢝
    
    
    ·Δ ɾ
    "0- ͱ .JDSPTPGUɺ
    ಠې๏ૌুͰ࿨ղ
    ϒϥ΢βઓ૪ʹ
    ऴࢭූ ɾ
    ϒϩάϒʔϜ
    ೔ຊͰ࢝·Δ ɾ
    ʮઓޙੈ୅ʯ
    ϒϥ΢βͷ୆಄ ɾ
    8)"58( ઃཱ ɾ
    +*4
    9
     ੍ఆ ɾ
    (3&&ɺNJYJ ͳͲ
    4/4 ͕ϒʔϜʹ ɾ
    "0-/FUTDBQFɺ
    .JDSPTPGU Λ
    ಠې๏ҧ൓Ͱఏૌ /$4" $&3/ .PTBJD $PNNVOJDBUJPOT .JDSPTPGU "QQMF 4QZHMBTT 0QFSB 4PGUXBSF ,%& 1SPKFDU (PPHMF BTNKT BTNKT .P[JMMB
    $MBTTJD (FDLP 8FC ඪ ४ ٕ ज़ Λ ߴ ౓ ʹ α ϙ ʔ τ 5SJEFOU &EHF #MJOL 1SFTUP 8FC,JU /FUTDBQF
    /BWJHBUPS
     ʢίʔυωʔϜʮ.P[JMMBʯ ʣ /FUTDBQF
    /BWJHBUPS
     /FUTDBQF
    /BWJHBUPS
     4UBOEBSE
    &EJUJPO /FUTDBQF
    /BWJHBUPS
     (PME
    &EJUJPO /FUTDBQF
    $PNNVOJDBUPS
     /FUTDBQF
    $PNNVOJDBUPS
     .P[JMMB
    "QQMJDBUJPO
    4VJUF
     .P[JMMB
    "QQMJDBUJPO
    4VJUF <.JMFTUPOF
     ʙ > ʢίʔυωʔϜʮ4FBNPOLFZʯ ʣ /FUTDBQF
     .P[JMMB
    "QQMJDBUJPO
    4VJUF
     'JSFGPY
    %FWFMPQFS
    &EJUJPO J04
    ൛
    'JSFGPY 4FB.POLFZ
        /FUTDBQF
     .P[JMMB
    'JSFCJSE
     Firefox
            .P[JMMB
    "QQMJDBUJPO
    4VJUF
     .P[JMMB
    1IPFOJY
         ϦϦʔε ୈ
    
    ੈ୅
    +BWB4DSJQU
    Τϯδϯ ϋʔυ΢ΣΞΞΫηϥϨʔγϣϯ ɹɹɹɹ8FC(-
    
    
    
    
    
    
    
    
    
    
    
    
    
    
    
    
    
    'JSFGPY
    4ZOD ɹɹɹɹ"OESPJE
    ൛ϦϦʔε ୈ
    
    ੈ୅
    +BWB4DSJQU
    Τϯδϯ ϋʔυ΢ΣΞΞΫηϥϨʔγϣϯ ɹɹɹɹ8FC(-
    
    
    
    
    
    
    
    
    
    
    
    
    
    
    
    
    
    'JSFGPY
    4ZOD ɹɹɹɹ"OESPJE
    ൛ϦϦʔε "OESPJE
    ൛
    /BUJWF
    6* ϦϦʔε "OESPJE
    ൛
    /BUJWF
    6* ϦϦʔε Ҏޙ 'JSFGPY
    ͷվળ఺Λ औΓೖΕͯߋ৽͕ଓ͘ &QJD
    (BNFT ͱ 6OSFBM
    &OHJOF ΛҠ২ 'JSFGPY
    ͱ ฒߦͯ͠։ൃ Ҏޙ 'JSFGPY
    ͷվળ఺Λ औΓೖΕͯߋ৽͕ଓ͘ &QJD
    (BNFT ͱ 6OSFBM
    &OHJOF ΛҠ২ 6OJUZ
    ͕
    8FC(-
    ग़ྗʹਖ਼ࣜରԠ 8FC(- 'JSFGPY
    ͱ ฒߦͯ͠։ൃ 8FC(- *&
    
    ͕࠷ޙͷ ϝδϟʔόʔδϣϯʹ *&
    
    ͕࠷ޙͷ ϝδϟʔόʔδϣϯʹ #MJOL
    Τϯδϯ #MJOL
    Τϯδϯ (PPHMF
    (MBTT (PPHMF
    (MBTT "MQIBCFU ઃཱ "MQIBCFU ઃཱ 1SFTUP Τϯδϯͷ 0QFSB ࠷ऴόʔδϣϯ ΤϯδϯΛ
    8FC,JU
    ʹมߋ ΤϯδϯΛ
    8FC,JU
    ʹมߋ 1SFTUP Τϯδϯͷ 0QFSB ࠷ऴόʔδϣϯ ΤϯδϯΛ
    #MJOL ʹมߋ ΤϯδϯΛ
    #MJOL ʹมߋ 6OJUZ
    ͕
    8FC(-
    ग़ྗʹਖ਼ࣜରԠ .PTBJD ͷݖརΛ ८Γରཱɺ཭൓ ϥΠηϯεڙ༩ ϥΠηϯεڙ༩ γϛϡϨʔλ 
    IUUQMJOFNPEFDFSODIXXXIZQFSUFYU8885FSNTIUNM εΫϦϓτ΍ελΠϧγʔτʹ ରԠͨ͠ߴػೳϒϥ΢β ੈքॳͷ
    .BD
    ༻ϒϥ΢β
    ΛϦϦʔε ੈքॳͷ
    8JOEPXT
    ༻ϒϥ΢β ,)5.-8 ͷ ։ൃΛ։࢝ .BD
    04
    9
    W $IFFUBI ϦϦʔε .BD
    04
    9
    W 1BOUIFS ϦϦʔε Ξυϫʔζ αʔϏε։࢝ (PPHMF
    %FTLUPQ ϦϦʔε (PPHMF
    .BQT αʔϏε։࢝ (NBJM αʔϏε։࢝ (PPHMF
    1BDL ϦϦʔε (PPHMF
    %PDT
     4QSFBETIFFUT αʔϏε։࢝ "OESPJE
     ϦϦʔε 7 (PPHMF αʔϏε։࢝ .PTBJD ͷ ϥΠηϯεΛऔಘ 8JOEPXT
    7JTUB ϦϦʔε 8JOEPXT
    91
    41 ϦϦʔε 8JOEPXT
    .F ϦϦʔε 8JOEPXT
    91 ϦϦʔε 8JOEPXT
     ϦϦʔε 8JOEPXT
     ϦϦʔε *& ͱ 8JOEPXT Λ౷߹ 8JOEPXT
     ϦϦʔε ݕࡧΤϯδϯ ։ൃ͔Β૑ۀ .BD
    04
     ϦϦʔε .BD
    04
    
    ϦϦʔε .BD
    04
    9
    W 1VNB ϦϦʔε .BD
    04
    9
    W
    +BHVBS ϦϦʔε .BD
    04
    9
    W 5JHFS ϦϦʔε .BD
    04
    9
    W -FPQBSE ϦϦʔε .BD
    04
    9
    W
    4OPX
    -FPQBSE ϦϦʔε 04
    9
    
    -JPO ϦϦʔε 4BGBSJ Λඪ४ 8FC ϒϥ΢β ʹ࠾༻ J1BE
    ൃച։࢝ .BD
    04
    
    ϦϦʔε J1IPOF
    ൃച։࢝ 5PQ
    4JUFT $PWFS
    'MPX ϦϦʔε ϒοΫϚʔΫͱཤྺͷ౷߹ εϚʔτϩέʔγϣϯόʔ &7
    44- "DJE ςετ߹֨ ॎॻ͖දࣔ ,)5.- Λ ϕʔεʹͯ͠ ϨϯμϦϯά ΤϯδϯΛ ։ൃ ϙοϓΞοϓ ϒϩοΫ μ΢ϯϩʔυ ϑΝΠϧͷ ηΩϡϦςΟܯࠂ ΞυΦϯ؅ཧ ϦϦʔε MJCXXX
    Λ ࢖ͬͯ
    ։ൃ
    ࠶ར༻Մೳͳ $ ݴޠͷ ϥΠϒϥϦͱͯ͠Ұ෦Λ ॻ͖௚͠ ϦϦʔε ϦϦʔε ϦϦʔε ϦϦʔε ൃల ൃల .BJM ͱ $PNQPTFS Λ౷߹ +4DSJQU 7#4DSJQU $44ʢ૲ҊʣͷҰ෦ ൃల ഁغ ϧϏදࣔ ൃల ϦϦʔε ੒ՌΛར༻ Πϝʔδ
    πʔϧόʔ ύʔιφϧόʔ όάमਖ਼ ൃల 'JSFGPY
     ͷ վળ఺ΛϑΟʔυόοΫ 'JSFGPY
     ͷվળ఺Λ ɹɹɹϑΟʔυόοΫ 4FB.POLFZ
    $PVODJM ͕։ൃΛܧଓ λϒϒϥ΢ζ ϑΟογϯά ࠮ٗܯࠂ 8FC ඪ४ٕज़΁ͷ ରԠΛվળ &7
    44- ϦϦʔε ϦϦʔε "DJE ςετ߹֨ ϑΟʔυϦʔμʔ ϑΟογϯά ࠮ٗܯࠂ &7
    
    44- 8FC ΫϦοϓ Ϧʔμʔ ֦ுػೳ ϦʔσΟϯά Ϧετ $44ɼ%ZOBNJD)5.- ࠃࡍԽͷվળ +BWB4DSJQU ϑΟογϯά࠮ٗܯࠂ ηογϣϯ෮ݩ 1FSTPOBT 1IPFOJY ࣾͷૌ͑ʹΑΓ ໊শมߋ 'JSFCJSE ϓϩδΣΫτͷ ૌ͑ʹΑΓ໊শมߋ ֦ுػೳϚωʔδϟ ࣗಈΞοϓσʔτ 47( )5.-
    $BOWBT Ұ෦ͷίʔυͱ ઃܭίϯηϓτ Λܧঝ 8FC ඪ४ٕज़΁ͷ ରԠΛվળ ϚϧνϓϩηεԽ ηογϣϯ෮ݩ ৽
    +BWF4DSJQU
    Τϯδϯ ϋʔυ΢ΣΞ ΞΫηϥϨʔγϣϯ )5.-
    ΁ͷରԠ։࢝ $44 %ZOBNJD)5.- ϓϥάΠϯ ϓϩηε෼཭ ʢʙʣ +BWB4DSJQU
    ܕਪ࿦ 'JSFGPY
     ͷ վળ఺ΛϑΟʔυόοΫ  Ͱ ։ൃΛऴྃ  ͔Β .BD ͷඪ४ 8FC ϒϥ΢β ʹ࠾༻ ϩΰมߋ ৽ +BWB4DSJQU Τϯδϯ ϓϥΠϕʔτϒϥ΢δϯά )5.- ΁ͷରԠΛڧԽ Ϧ Ϧ ồ ε 47(
    5JOZ ແྉԽ ೔ຊޠදࣔ λ ϒ ϒ ϥ ΢ ζ ػ ೳ ͷ ݪ ܕ &NBJM ΫϥΠΞϯτ ৽ +BWB4DSJQU Τϯδϯ ϓϥΠϕʔτϒϥ΢δϯά λϒελοΩϯά ΤΫεςϯγϣϯ 6* σβΠϯมߋ #JU5PSSFOU ΢ΟδΣοτ "DJE ςετ߹֨ ϑΟογϯά ࠮ٗܯࠂ εϐʔυμΠϠϧɺ ϒοΫϚʔΫͳͲͷ ಉظ ཤྺ͔Βͷશจݕࡧ &7
    44- λϒϒϥ΢ζ ϙοϓΞοϓϒϩοΫ ϒϥ΢βػೳΛಠཱ ϦϦʔε ʢόʔδϣϯதུʣ ʢόʔδϣϯதུʣ ϦϦʔε ϦϦʔε 7 ֦ுػೳϚωʔδϟ 04
    9
     .PVOUBJO
    -JPO ϦϦʔε 04
    9
    
    .BSWFSJDLT ϦϦʔε 8JOEPXT
     ϦϦʔε 8JOEPXT
     ϦϦʔε XFC35$ BTNKT XFC35$ BTNKT Ϛϧνϓϩηε 8FC&YUFOTJPO ϧϏɺ &.& ϧϏɺ &.& τϥοΩϯάอޢػೳ෇͖ ϓϥΠϕʔτϒϥ΢δϯά τϥοΩϯάอޢػೳ෇͖ ϓϥΠϕʔτϒϥ΢δϯά 8JOEPXT
     ϦϦʔε +BWB4DSJQU
    Τϯδϯ $IBLSB
    $PSF
    Λ Φʔϓϯιʔεʹ +BWB4DSJQU
    Τϯδϯ $IBLSB
    $PSF
    Λ Φʔϓϯιʔεʹ 04
    9
    
    .BSWFSJDLT ϦϦʔε 04
    9
     :PTFNJUF ϦϦʔε 04
    9
     :PTFNJUF ϦϦʔε 04
    9
     &M
    $BQJUBO ϦϦʔε 04
    9
     &M
    $BQJUBO ϦϦʔε "QQMF
    8BUDI ൃച։࢝ "QQMF
    8BUDI ൃച։࢝ 8JOEPXT
    1IPOF
     ϦϦʔε 8JOEPXT
     ϦϦʔε /$4"
    .PTBJD 8PSME8JEF8FC -JOF
    .PEF
    #SPXTFS MJCXXX *OUFSOFU
    &YQMPSFS
     &EHF    4QZHMBTT
    .PTBJD 7JPMB 4BNCB
    .BD888 $FMMP    
    41    
    41 4BGBSJ
           $ISPNF
           
    GPS
    .BD 
    GPS
    .BD 
    GPS
    .BD 
    GPS
    .BD                  .VMUJ5PSH
    0QFSB
     0QFSB
        ϑΟʔυϦʔμʔ *3$ ΫϥΠΞϯτ ৽ϨϯμϦϯά Τϯδϯ      ιʔείʔυΛެ։ *& ͷ͝ઌ૆༷΋ .PTBJDɻ ࣮͸ *& ΋਌ੰͩͬͨΜͩͶɻ ೥·Ͱ͸ɺ /FUTDBQF
    /BWJHBUPS ͕ .BDͷඪ४8FC ϒϥ΢βͩͬͨΜͩΑɻ ͜ͷ͜Ζ͔Β*&Λ࢖͏ਓ͕͍͢͝ ੎͍Ͱ૿͑ͨΜͩɻ θϩ͔Β࡞ΔΜ͡Όͳͯ͘ ͢Ͱʹ͋ͬͨ෺Λվྑͯ͠ ࢖ͬͨΜͩͶɻ 'JSFGPY ͷԕ͍ ͝ઌ૆༷ͩΑ ʂ ʮ"DJEςετʯ ͸ ϒ ϥ ΢β͕ͪΌΜͱ࡞ΒΕ ͍ͯΔ͔Ͳ͏͔ͷ෼͔ Γ΍͍͢໨҆ʹ࢖ΘΕ ͯΔΜͩɻ ϑΟογϯά࠮ٗܯࠂػೳ΍ λϒػೳ͸ɺ ΋͏෇͍ͯΔͷ ͕౰ͨΓલʹͳͬͯΔΜͩͶɻ ࠷ۙ஫໨͞ΕͯΔٕज़ ͷ΄ͱΜͲ͸ɺ ͜ͷࠒ ʹ͸΋͏ग़ଗͬͯͨΜ ͩͶɻ *&͕͓΍͢Έͯ͠Δؒɺ ΈΜͳҰੜݒ໋ ͕Μ͹ͬͯͨΜͩΑɻ 'JSFGPY΍ଞͷϒϥ΢β͕ ͕Μ͹ͬͯͩΜͩΜਓؾ͕ ग़͖͔ͯͨΒɺ *&΋·ͨ ͕Μ͹Γ࢝ΊͨΜͩɻ ͜Ε͔Β΋ɺ ΑΓ࢖͍΍͘͢ɺ ΑΓศརʹͲΜͲΜਐา͍ͯ͘͠Αɻ ָ͠Έʹͯͯ͠Ͷʂ ͜͏ͯ͠ίϛϡχςΟͰ ։ൃΛҾ͖ܧ͛Δͷ΋ ΦʔϓϯιʔεͳΒͰ͸ͩͶʂ ʮ44- ʢ҉߸Λ࢖ͬͨ҆શͳ௨৴ʣ ʯ ΍ʮ+BWB4DSJQUʯ͸ɺ ͜ ͷ ͜ Ζ ʹ /FUTDBQF͕࡞ͬͨΜͩΑɻ Πϯλʔωοτͱ͍͑͹ ωοτεέʔϓʂ ͍ͬͯ͏͘Β͍ͷେਓؾ ͩͬͨΜͩɻ Έ Μ ͳ ʹ ڠ ྗͯ͠ ΋ Β͚ͬͨͲɺ ࠷ॳ͸͏· ͍͘ ͔ ͳ ͔ ͬͨ Μ ͩ ʜʜ ੈքॳͷ XFCϒϥ΢β͸ 8PSME8JEF8FCͩΑ ·ͩ·ͩ४උෆ଍ͩͬ ͔ͨΒɺ *&ʹ͞Βʹࠩ Λͭ ͚Β ΕͪΌͬͨ ʜʜ ϘϥϯςΟΞ׆ಈͰ ͣͬͱࢧ͑ͯ͘ΕͨΜͩΑɻ ΍ͬͱ'JSFGPYͷग़൪ʂ ΞϝϦΧͷ৽ฉʹ޿ࠂ͕ͷͬͨΓͯ͠ɺ ·ΔͰ͓ࡇΓΈ͍ͨͩͬͨΑɻ ʮ(FDLPʯ ͍ͬͯ͏ ৽͍ٕ͠ज़ͷ͓͔͛Ͱੜ ·ΕมΘͬͨΜͩΑʂ ,%&͸ɺ 8JOEPXT΍.BDͷΑ͏ͳ؀ڥΛࣗ ༝ͳιϑτ΢ΣΞͰ࡞ΔϓϩδΣΫ τͩΑɻ ͦͷҰ෦ͱͯ͠8FCϒϥ΢β͕ඞཁͩͬͨ Μͩɻ 
    ൪໨ͷϒϥ΢β
    -JOF
    .PEF
    #SPXTFS
    ͸ γϛϡϨʔλͰମݧͰ͖ΔΑ 0QFSB͸/FUTDBQF΍*&ͱ ಉ͘͡ Β͍લ͔Β͋ͬͨΜͩͶɻ ͜ͷ͜Ζ͸*&ͱ͓ޓ͍ʹ ͸͛͘͠ڝ૪ͯͨ͠ΜͩͶɻ ήʔϜػฒͷ%ήʔϜ͕ ಈ͘Α͏ʹͳͬͨΜͩΑʂ ੈքॳͷ։ൃऀ޲͚ ϒϥ΢βʂ "QQ MF
    ͱ
    ( P P HM F
    ͷ
    8FC,JU
    ڞಉ։ൃ͕ऴྃ͠
    $ISPNF
    ͸෼ذͨ͠
    #MJOL ΤϯδϯʹͳͬͨΜͩ ແྉԽ͞ΕΔલ͸ɺ πʔϧόʔʹ޿ࠂ͕ ෇͍ͯͨΜͩΑɻ Έͳ͞Μ͸ɺීஈ࢖͍ͬͯΔ 8FC ϒϥ΢β͕Ͳ͏΍ͬͯੜ·Ε͖͔ͯͨɺͲΜͳ෩ʹਐา͖͔ͯͨ͠Λ஌͍ͬͯ·͔͢ʁɹ ࢁ͋Γ୩͋Γͷ 'JSFGPY ͷੜཱ͍ͪͱ͋Θͤͯɺ͍ΖΜͳϒϥ΢βͷਐาͷྺ࢙Λௐ΂ͯΈ·͠ΐ͏ʂ フォクすけと 学ぼう！ 
    .P[JMMB
    +BQBO
    ͜ͷ࡞඼͸
    ΫϦΤΠςΟϒɾίϞϯζ
    දࣔ
    
    ඇӦར
    
    ࠃࡍ
    ϥΠηϯεͷԼʹఏڙ͞Ε͍ͯ·͢ɻ .P[JMMBɺ 'JSFGPYɺ 'JSFGPY
    ϩΰ͸ɺ ถࠃ
    .P[JMMB
    'PVOEBUJPO
    ͷถࠃ͓Αͼͦͷଞͷࠃʹ͓͚Δ঎ඪ·ͨ͸ొ࿥঎ඪͰ͢ɻ ͦͷ΄͔هࡌ͞Ε͍ͯΔ঎඼໊͸ɺ ֘౰͢Δ֤ࣾͷ঎ඪ·ͨ͸ొ࿥঎ඪͰ͢ɻ
    ΅͘ͱ͍ͬ͠ΐʹ ϒϥ΢βͷྺ࢙Λษڧ ͯ͠ΈΑ͏ʂ ࢁંΓ ࢁંΓ ୩ંΓ ୩ંΓ CC BY-NC 4.0 Mozilla Japan https://www.mozilla.jp/blog/entry/10552/ ΢Σϒϒϥ΢β ͷྺ࢙
43. ʙ
44. Chrome Opera Safari Firefox Internet Explorer ϨϯμϦϯάΤϯδϯ
    +4ΠϯλʔϓϦλ
45. Chrome Opera Safari Firefox Internet Explorer 8FCLJU
    7 ϨϯμϦϯάΤϯδϯ
    +4ΠϯλʔϓϦλ 1SFTUP
    $BSBLBO 8FCLJU
    +BWB4DSJQU
    $PSF 5SJEFOU
    $IBLSB (FDLP
    4QJEFS
    .POLFZ
46. Chrome Opera Safari Firefox Internet Explorer 8FCLJU
    7 1SFTUP
    $BSBLBO 8FCLJU
    +BWB4DSJQU
    $PSF 5SJEFOU
    $IBLSB (FDLP
    4QJEFS
    .POLFZ Webkit
47. Chrome Opera Safari Firefox Internet Explorer 1SFTUP
    $BSBLBO 8FCLJU
    +BWB4DSJQU
    $PSF 5SJEFOU
    $IBLSB (FDLP
    4QJEFS
    .POLFZ Webkit 8FCLJU
    7
48. Chrome Safari 8FCLJU
    +BWB4DSJQU
    $PSF Webkit 8FCLJU
    7
49. Google Apple 8FCLJU
    +BWB4DSJQU
    $PSF Webkit 8FCLJU
    7 2013೥·Ͱ͸GoogleͱApple͕ WebkitΛڞಉͰ։ൃ
50. Chrome Opera Safari Firefox Internet Explorer 8FCLJU
    7 1SFTUP
    $BSBLBO 8FCLJU
    +BWB4DSJQU
    $PSF 5SJEFOU
    $IBLSB (FDLP
    4QJEFS
    .POLFZ 2013೥ Chrome͕ Webkit → Blink WebkitΛfork͠ Ҏ߱ಠࣗʹ։ൃ
51. Chrome Opera Safari Firefox Internet Explorer #MJOL
    7 1SFTUP
    $BSBLBO 8FCLJU
    +BWB4DSJQU
    $PSF 5SJEFOU
    $IBLSB (FDLP
    4QJEFS
    .POLFZ 2013೥ Chrome͕ Webkit → Blink WebkitΛfork͠ Ҏ߱ಠࣗʹ։ൃ
52. ͜ͷগ͠લʜ 2013/02
53. Chrome Opera Safari Firefox Internet Explorer 8FCLJU
    7 1SFTUP
    $BSBLBO 8FCLJU
    +BWB4DSJQU
    $PSF 5SJEFOU
    $IBLSB (FDLP
    4QJEFS
    .POLFZ 0QFSB
    Ͱ
    ಠࣗϒϥ΢β։ൃΛࣙΊ
    $ISPNJVN1SPKFDUʹ
    ࢀՃ͠։ൃڠྗɻ
    0QFSB͔Β 8FCLJU
    
    7
    ΁
54. Chrome Opera Safari Firefox Internet Explorer #MJOL
    7 #MJOL
    7 8FCLJU
    +BWB4DSJQU
    $PSF 5SJEFOU
    $IBLSB (FDLP
    4QJEFS
    .POLFZ Opera v15Ҏ߱ ChromiumΛfolk͠ ։ൃͨ͠΋ͷΛར༻ (v14͸AndroidͷΈ ϦϦʔε͞Εͨ)
55. Chrome Opera #MJOL
    7 #MJOL
    7
56. ͦͷޙ৭ʑ͋Γ ओͳτϐοΫε
    ݩ0QFSBͷڞಉ૑ઃऀ͕Ҏલͷ0QFSBͷϒϥ΢δ ϯάΛऔΓ໭ͨ͢Ίʹ$ISPNJVNΛݩʹ։ൃͨ͠ 7JWBMEJ
    #SPXTFSΛެ։
    .JDSPTPGU͕৽ϒϥ΢β&EHFΛެ։
57. Chrome Opera Vivaldi Safari Firefox Internet Explorer Edge
58. Chrome Opera Vivaldi Safari Firefox Internet Explorer Edge Based (Forked) Chromium
59. Chrome Opera Vivaldi Safari Firefox Internet Explorer Edge #MJOL
    7 #MJOL
    7 8FCLJU
    +BWB4DSJQU
    $PSF 5SJEFOU
    $IBLSB (FDLP
    4QJEFS
    .POLFZ #MJOL
    7 &EHF)5.-
    $IBLSB ϨϯμϦϯάΤϯδϯ
    +4ΠϯλʔϓϦλ
60. Chrome Opera Vivaldi Q. ͜ͷ3ͭͷ΢Σϒϒϥ΢βͷҧ͍͸ʁ
61. Chrome Opera Vivaldi #MJOL
    7 #MJOL
    7 #MJOL
    7
62. Chrome Opera Vivaldi #MJOL
    7 #MJOL
    7 #MJOL
    7
63. Chrome Opera Vivaldi #MJOL
    7 #MJOL
    7 #MJOL
    7 ڞ௨ ҟͳΔ
64. Chrome Opera Vivaldi #MJOL
    7 #MJOL
    7 #MJOL
    7 ಠࣗίϯϙʔωϯτͱͯ͠
    αΠυόʔ΍
    4QFFE%JBMͳͲ
65. Chrome Opera Vivaldi #MJOL
    7 #MJOL
    7 #MJOL
    7 ಠࣗίϯϙʔωϯτͱͯ͠
    αΠυόʔ΍
    4QFFE%JBMͳͲ
66. Chrome Opera Vivaldi #MJOL
    7 #MJOL
    7 #MJOL
    7 αΠυόʔ
    ΫΠοΫίϚϯυ
    εςʔλεόʔ ը໘Լ෦
67. Chrome Opera Vivaldi #MJOL
    7 #MJOL
    7 #MJOL
    7 αΠυόʔ
    ΫΠοΫίϚϯυ
    εςʔλεόʔ ը໘Լ෦
68. Chrome Safari Firefox Internet Explorer Edge
69. Chrome Safari Firefox Internet Explorer Edge Q. ͜ͷ5ͭͷ΢Σϒϒϥ΢βͷҧ͍͸ʁ
70. Chrome Safari Firefox Internet Explorer Edge #MJOL
    7 8FCLJU
    +BWB4DSJQU
    $PSF 5SJEFOU
    $IBLSB (FDLP
    4QJEFS
    .POLFZ &EHF)5.-
    $IBLSB ϨϯμϦϯάΤϯδϯ
    +4ΠϯλʔϓϦλ
71. Chrome Safari Firefox Internet Explorer Edge #MJOL
    7 8FCLJU
    +BWB4DSJQU
    $PSF 5SJEFOU
    $IBLSB (FDLP
    4QJEFS
    .POLFZ &EHF)5.-
    $IBLSB <input type=‘color’ />ରԠঢ়گ
72. Chrome Safari Firefox Internet Explorer Edge #MJOL
    7 8FCLJU
    +BWB4DSJQU
    $PSF 5SJEFOU
    $IBLSB (FDLP
    4QJEFS
    .POLFZ &EHF)5.-
    $IBLSB async function ରԠঢ়گ
73. Question • ΢Σϒϒϥ΢βͱݴ͑͹ʁ • ΢Σϒϒϥ΢β͸ԿΛ͢Δ΋ͷʁ • ChromeͱFirefoxԿ͕ҧ͏ͷʁ • ChromeͱOpera͸Կ͕ҧ͏ʁ
74. Question • ΢Σϒϒϥ΢βͱݴ͑͹ʁ • ΢Σϒϒϥ΢β͸ԿΛ͢Δ΋ͷʁ • ChromeͱFirefoxԿ͕ҧ͏ͷʁ • ChromeͱOpera͸Կ͕ҧ͏ʁ ಺෦ར༻͍ͯ͠Δ
    Τϯδϯ͕ҟͳΔ
75. Question • ΢Σϒϒϥ΢βͱݴ͑͹ʁ • ΢Σϒϒϥ΢β͸ԿΛ͢Δ΋ͷʁ • ChromeͱFirefoxԿ͕ҧ͏ͷʁ • ChromeͱOpera͸Կ͕ҧ͏ʁ ྆ํಉ͡$ISPNJVNΛ
    ϕʔεʹར༻͍ͯ͠Δ͕ɺ
    6*ͳͲ͕ҟͳΔ
76. Question • ΢Σϒϒϥ΢βͱݴ͑͹ʁ • ΢Σϒϒϥ΢β͸ԿΛ͢Δ΋ͷʁ • ChromeͱFirefoxԿ͕ҧ͏ͷʁ • ChromeͱOpera͸Կ͕ҧ͏ʁ
77. ΢Σϒϒϥ΢βͷجຊߏ੒ http://www.slideshare.net/quangntta/web-browser-architecture-49196378 ࠓ೔͸͔͜͜Β
    ͜ͷͭʹ஫໨ͯ͠
    ۷ΓԼ͛ͯΈ·͢
78. ͞Βʹৄ͘͠
    ݟͯΈΑ͏
79. JavaScriptΠϯλʔϓϦλͷ໾ׂ • JavaScriptͷղੳɾ࣮ߦ &WBMVBUF
80. ϨϯμϦϯάΤϯδϯͷ໾ׂ • ϨϯμϦϯάΤϯδϯ͸HTML / XML Λύʔε • CSSΛύʔε͠ελΠϧϧʔϧΛ೺Ѳ • HTMLΛCSSϧʔϧʹج͍ͮͯදࣔΛ഑ஔ • ඳըͷੜ੒ -BZPVU 1BSTF 1BJOU
81. ϨϯμϦϯάΤϯδϯͷ໾ׂ • ϨϯμϦϯάΤϯδϯ͸HTML / XML Λύʔε • CSSΛύʔε͠ελΠϧϧʔϧΛ೺Ѳ • HTMLΛCSSϧʔϧʹج͍ͮͯදࣔΛ഑ஔ • ඳըͷੜ੒ʢϨΠϠʔ͝ͱʹੜ੒ͷޙɺ߹੒ʣ -BZPVU 1BSTF 1BJOU $PNQPTJUF
    -BZFST
82. JSͰΞχϝʔγϣϯͤ͞Δͱ…
83. JSͰΞχϝʔγϣϯͤ͞Δͱ… • JSΠϯλʔϓϦλ͕JavaScriptΛ࣮ߦ • DOMπϦʔΛมߋ • ϨϯμϦϯάΤϯδϯ͕ελΠϧΛ࠶ܭࢉ • ϨΠΞ΢τΛੜ੒ • ϨΠϠʔ͝ͱʹඳըΛੜ੒ • ϨΠϠʔΛ߹੒͠࠷ऴతͳϨϯμϦϯά݁ՌΛੜ੒ &WBMVBUF $BMDVSBUF
    4UZMFT -BZPVU
    
    BLB
    SFqPX
    1BJOU $PNQPTJUF
    -BZFST
84. Chrome DevtoolͷTimeLine https://www.html5rocks.com/en/tutorials/speed/high-performance-animations/
85. DEMO http://codepen.io/paulirish/full/nkwKs/ http://codepen.io/paulirish/full/LsxyF/
86. ͭ·Γ • ҐஔͳͲ͚ͩΛಈ͔͢৔߹͸ CSS transform Λར༻͢Δͱ Composite Layers͚ͩͳͷͰૉ ૣ͘ऴྃ͢Δ
87. +4͔Β
    MFGUͳͲΛ
    มߋͨ͠৔߹
88. ΢Σϒϒϥ΢βͷجຊߏ੒ http://www.slideshare.net/quangntta/web-browser-architecture-49196378 +BWB4DSJQUͷ࣮ߦ݁ՌΛ
    3FOEFSJOH
    &OHJOFʹ౉͢
89. ΢Σϒϒϥ΢βͷجຊߏ੒ http://www.slideshare.net/quangntta/web-browser-architecture-49196378 ը໘ʹදࣔ͢ΔͨΊͷ
    ϨΠΞ΢τΛߏங͢Δ
90. ΢Σϒϒϥ΢βͷجຊߏ੒ http://www.slideshare.net/quangntta/web-browser-architecture-49196378 ΍ΓऔΓΛ஥հ
91. ΢Σϒϒϥ΢βͷجຊߏ੒ http://www.slideshare.net/quangntta/web-browser-architecture-49196378 σΟεϓϨΠʹ
    දࣔ͢Δ
92. ΢Σϒϒϥ΢βͷجຊߏ੒ http://www.slideshare.net/quangntta/web-browser-architecture-49196378 +BWB4DSJQUͷ࣮ߦ݁ՌΛ
    3FOEFSJOH
    &OHJOFʹ౉͢
93. ΢Σϒϒϥ΢βͷجຊߏ੒ http://www.slideshare.net/quangntta/web-browser-architecture-49196378 ը໘ʹදࣔ͢ΔͨΊͷ
    ϨΠΞ΢τΛߏங͢Δ
94. ΢Σϒϒϥ΢βͷجຊߏ੒ http://www.slideshare.net/quangntta/web-browser-architecture-49196378 ΍ΓऔΓΛ஥հ
95. ΢Σϒϒϥ΢βͷجຊߏ੒ http://www.slideshare.net/quangntta/web-browser-architecture-49196378 σΟεϓϨΠʹ
    දࣔ͢Δ
96. $44ͷ
    USBOTGPSNͰ
    มߋͨ͠৔߹
97. ΢Σϒϒϥ΢βͷجຊߏ੒ http://www.slideshare.net/quangntta/web-browser-architecture-49196378 ը໘ʹදࣔ͢ΔͨΊͷ
    ϨΠΞ΢τΛߏங͢Δ
98. ΢Σϒϒϥ΢βͷجຊߏ੒ http://www.slideshare.net/quangntta/web-browser-architecture-49196378 ΍ΓऔΓΛ஥հ
99. ΢Σϒϒϥ΢βͷجຊߏ੒ http://www.slideshare.net/quangntta/web-browser-architecture-49196378 σΟεϓϨΠʹ
    දࣔ͢Δ
100. ΢Σϒϒϥ΢βͷجຊߏ੒ http://www.slideshare.net/quangntta/web-browser-architecture-49196378 ը໘ʹදࣔ͢ΔͨΊͷ
     ϨΠΞ΢τΛߏங͢Δ
101. ΢Σϒϒϥ΢βͷجຊߏ੒ http://www.slideshare.net/quangntta/web-browser-architecture-49196378 ΍ΓऔΓΛ஥հ
102. ΢Σϒϒϥ΢βͷجຊߏ੒ http://www.slideshare.net/quangntta/web-browser-architecture-49196378 σΟεϓϨΠʹ
     දࣔ͢Δ
103. ͭ·Γ • ҐஔͳͲ͚ͩΛಈ͔͢৔߹͸ CSS transform Λར༻͢Δͱ Composite Layers͚ͩͳͷͰૉ ૣ͘ऴྃ͢Δ • ͞Βʹ஗͍ΞχϝʔγϣϯΛੜΈग़͢ݪҼ͕ ͋Δ
104. JSͰΞχϝʔγϣϯͤ͞Δͱ… • JSΠϯλʔϓϦλ͕JavaScriptΛ࣮ߦ • DOMπϦʔΛมߋ • ϨϯμϦϯάΤϯδϯ͕ελΠϧΛ࠶ܭࢉ • ϨΠΞ΢τΛੜ੒ • ϨΠϠʔ͝ͱʹඳըΛੜ੒ • ϨΠϠʔΛ߹੒͠࠷ऴతͳϨϯμϦϯά݁ՌΛੜ੒ &WBMVBUF $BMDVSBUF
     4UZMFT -BZPVU
     
     BLB
     SFqPX
     1BJOU $PNQPTJUF
     -BZFST
105. JSͰΞχϝʔγϣϯͤ͞Δͱ… • JSΠϯλʔϓϦλ͕JavaScriptΛ࣮ߦ • DOMπϦʔΛมߋ • ϨϯμϦϯάΤϯδϯ͕ελΠϧΛ࠶ܭࢉ • ϨΠΞ΢τΛੜ੒ • ϨΠϠʔ͝ͱʹඳըΛੜ੒ • ϨΠϠʔΛ߹੒͠࠷ऴతͳϨϯμϦϯά݁ՌΛੜ੒ &WBMVBUF $BMDVSBUF
     4UZMFT -BZPVU
     
     BLB
     SFqPX
     1BJOU $PNQPTJUF
     -BZFST ͜ͷͱ͖'PSDFE
     4ZODISPOPVT
     -BZPVUͱݺ͹ΕΔϨΠΞ΢τܭࢉॲཧ͕
     ૸Δͱ+4ͷ࣮ߦΛϒϩοΫͯ͠ϨΠΞ΢τܭࢉΛߦ͏ɻ
     ྫ
     FMFNPGGTFU-FGU
     
     FMFNHFU$MJFOU3FDUT
     
     FMFNDMJFOU8JEUI
     ͜ΕΒͷ஋Λਖ਼͘͠஌Δʹ͸ݱࡏͷϨΠΞ΢τʹ͍ͭͯϨϯμϦϯάΤϯδϯ͕ ܭࢉΛߦ͏ඞཁ͕͋ΔͷͰɺ͜ΕΒͷ஋Λ༻͍ͨ+4ΞχϝʔγϣϯΛهड़͢Δͱ
     ࣮ࡍͷϨϯμϦϯάͱ͸ผͰϨΠΞ΢τܭࢉ͕ਵ࣮࣌ߦ͞ΕΔͨΊ
     ඇৗʹ஗͘ͳͬͯ͠·͏
106. JSͰΞχϝʔγϣϯͤ͞Δͱ… • JSΠϯλʔϓϦλ͕JavaScriptΛ࣮ߦ • DOMπϦʔΛมߋ (include Forced Synchronous Layout) • ϨϯμϦϯάΤϯδϯ͕ελΠϧΛ࠶ܭࢉ • ϨΠΞ΢τΛੜ੒ • ϨΠϠʔ͝ͱʹඳըΛੜ੒ • ϨΠϠʔΛ߹੒͠࠷ऴతͳϨϯμϦϯά݁ՌΛੜ੒
107. JSͰΞχϝʔγϣϯͤ͞Δͱ… • JSΠϯλʔϓϦλ͕JavaScriptΛ࣮ߦ • DOMπϦʔΛมߋ (include Forced Synchronous Layout) w ϨΠΞ΢τΛੜ੒
     w ϨΠϠʔ͝ͱʹඳըΛੜ੒
     w ϨΠϠʔΛ߹੒͠࠷ऴతͳϨϯμϦϯά݁ՌΛੜ੒
     w ϨϯμϦϯά݁Ռ͔Β஋Λฦ٫
     • ϨϯμϦϯάΤϯδϯ͕ελΠϧΛ࠶ܭࢉ • ϨΠΞ΢τΛੜ੒ • ϨΠϠʔ͝ͱʹඳըΛੜ੒ • ϨΠϠʔΛ߹੒͠࠷ऴతͳϨϯμϦϯά݁ՌΛੜ੒
108. DEMO https://googlesamples.github.io/web-fundamentals/ tools/chrome-devtools/rendering-tools/forcedsync.html
109. ͜͜·Ͱ·ͱΊ
110. Question • ΢Σϒϒϥ΢βͱݴ͑͹ʁ • ΢Σϒϒϥ΢β͸ԿΛ͢Δ΋ͷʁ • ChromeͱFirefoxԿ͕ҧ͏ͷʁ • ChromeͱOpera͸Կ͕ҧ͏ʁ
111. Question • ΢Σϒϒϥ΢βͱݴ͑͹ʁ • ΢Σϒϒϥ΢β͸ԿΛ͢Δ΋ͷʁ • ChromeͱFirefoxԿ͕ҧ͏ͷʁ • ChromeͱOpera͸Կ͕ҧ͏ʁ $ISPNF
     'JSFGPY
     *&
     0QFSB
     &EHFʜ
112. Chrome Opera Vivaldi Safari Firefox Internet Explorer Edge
113. Question • ΢Σϒϒϥ΢βͱݴ͑͹ʁ • ΢Σϒϒϥ΢β͸ԿΛ͢Δ΋ͷʁ • ChromeͱFirefoxԿ͕ҧ͏ͷʁ • ChromeͱOpera͸Կ͕ҧ͏ʁ )5.-$44+4ͳͲΛ
     ཧղɺ࣮ߦɺදࣔΛߦ͏ɻ
     ·ͨͦΕΒͷͨΊʹඞཁͳ
     ௨৴ͳͲͷػೳ΋͋Δɻ
114. ΢Σϒϒϥ΢βͷجຊߏ੒ http://www.slideshare.net/quangntta/web-browser-architecture-49196378
115. Question • ΢Σϒϒϥ΢βͱݴ͑͹ʁ • ΢Σϒϒϥ΢β͸ԿΛ͢Δ΋ͷʁ • ChromeͱFirefoxԿ͕ҧ͏ͷʁ • ChromeͱOpera͸Կ͕ҧ͏ʁ ಺෦ར༻͍ͯ͠Δ
     Τϯδϯ͕ҟͳΔ
116. Chrome Safari Firefox Internet Explorer Edge #MJOL
     7 8FCLJU
     +BWB4DSJQU
     $PSF 5SJEFOU
     $IBLSB (FDLP
     4QJEFS
     .POLFZ &EHF)5.-
     $IBLSB ϨϯμϦϯάΤϯδϯ
     +4ΠϯλʔϓϦλ
117. Question • ΢Σϒϒϥ΢βͱݴ͑͹ʁ • ΢Σϒϒϥ΢β͸ԿΛ͢Δ΋ͷʁ • ChromeͱFirefoxԿ͕ҧ͏ͷʁ • ChromeͱOpera͸Կ͕ҧ͏ʁ ྆ํಉ͡$ISPNJVNΛ
     ϕʔεʹར༻͍ͯ͠Δ͕ɺ
     6*ͳͲ͕ҟͳΔ
118. Chrome Opera Vivaldi #MJOL
     7 #MJOL
     7 #MJOL
     7 ڞ௨ ҟͳΔ
119. Chrome Opera Vivaldi #MJOL
     7 #MJOL
     7 #MJOL
     7 ಠࣗίϯϙʔωϯτͱͯ͠
     αΠυόʔ΍
     4QFFE%JBMͳͲ
120. Chrome Opera Vivaldi #MJOL
     7 #MJOL
     7 #MJOL
     7 αΠυόʔ
     ΫΠοΫίϚϯυ
     εςʔλεόʔ ը໘Լ෦
121. JSͰΞχϝʔγϣϯͤ͞Δͱ… • JSΠϯλʔϓϦλ͕JavaScriptΛ࣮ߦ • DOMπϦʔΛมߋ • ϨϯμϦϯάΤϯδϯ͕ελΠϧΛ࠶ܭࢉ • ϨΠΞ΢τΛੜ੒ • ϨΠϠʔ͝ͱʹඳըΛੜ੒ • ϨΠϠʔΛ߹੒͠࠷ऴతͳϨϯμϦϯά݁ՌΛੜ੒ &WBMVBUF $BMDVSBUF
     4UZMFT -BZPVU
     
     BLB
     SFqPX
     1BJOU $PNQPTJUF
     -BZFST
122. ͞Βʹৄ͘͠஌Γ͍ͨ৔߹ • How browsers work - http://taligarsiel.com/Projects/ howbrowserswork1.htm • ϒϥ΢βͷ಺෦ͰԿ͕ى͖͍ͯΔͷ͔ʹ͍ͭͯ • Demystifying (JavaScript) Engines - https://github.com/ a0viedo/demystifying-js-engines • JavaScriptΤϯδϯͷ಺෦ߏ଄ʹ͍ͭͯཧղ͢ΔͨΊͷઆ ໌ɾؔ࿈࿦จͳͲ΁ͷϦϯΫू • ͦͷଞࢀߟURLͳͲ: http://bit.ly/pastak-shownote-20170217
123. ͓·͚ ※͔͜͜Βઌ͸͕࣌ؒ༨͍ͬͯΕ͹஻Δ
124. ͓·͚τʔΫςʔϚू • Bug͔ͳʁͱࢥͬͨΒ • ϒϥ΢β֦ுʹ͍ͭͯ • ϒϥ΢βؔ࿈৘ใΩϟονΞοϓ • ඪ४Խͱϒϥ΢βϕϯμʔ •