$30 off During Our Annual Pro Sale. View Details »

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

pastak
February 17, 2017

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

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

pastak

February 17, 2017
Tweet

More Decks by pastak

Other Decks in Technology

Transcript

  1. ஌͓͖͍ͬͯͨϒϥ΢β
    ʹ͍ͭͯͷجૅೖ໳
    Pasta-K
    [email protected]
    at Supporterz Kyoto

    View Slide

  2. @pastakɹ

    View Slide

  3. @pastakɹ
    • ژ౎େֶͰֶੜΛ΍͍ͬͯ·͢
    • Nota Inc Gyazo։ൃνʔϜ ΞϧόΠτ
    • JavaScript / React
    • Ruby on Rails
    • Browser Extension

    View Slide

  4. View Slide

  5. ຊ೔ͷ͓඼ॻ͖
    • ΢Σϒϒϥ΢βʹ͍ͭͯ
    • ྺ࢙
    • ϒϥ΢βͷ࢓૊Έ঺հɾιϑτ΢ΣΞߏ੒
    • Developer ToolΛ༻͍ͯཧղΛਂΊΔ
    • ΞχϝʔγϣϯΛྫʹ
    • ͓·͚

    View Slide

  6. ࠓ೔࿩͞ͳ͍͜ͱ
    • RenderingΤϯδϯ΍JavaScriptΤϯδϯͷৄ
    ࡉͳৼΔ෣͍ʹ͍ͭͯ
    • ͦͷଞ؆୯ͷͨΊʹઆ໌Λলུͨ͠Γ͍ͯ͠
    ·͢

    View Slide

  7. ΢Σϒϒϥ΢β
    ʹ͍ͭͯ

    View Slide

  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

    View Slide

  9. Question
    • ΢Σϒϒϥ΢βͱݴ͑͹ʁ

    View Slide

  10. Question
    • ΢Σϒϒϥ΢βͱݴ͑͹ʁ
    • ΢Σϒϒϥ΢β͸ԿΛ͢Δ΋ͷʁ

    View Slide

  11. Question
    • ΢Σϒϒϥ΢βͱݴ͑͹ʁ
    • ΢Σϒϒϥ΢β͸ԿΛ͢Δ΋ͷʁ
    • ChromeͱFirefoxԿ͕ҧ͏ͷʁ

    View Slide

  12. Question
    • ΢Σϒϒϥ΢βͱݴ͑͹ʁ
    • ΢Σϒϒϥ΢β͸ԿΛ͢Δ΋ͷʁ
    • ChromeͱFirefoxԿ͕ҧ͏ͷʁ
    • ChromeͱOpera͸Կ͕ҧ͏ʁ

    View Slide

  13. Question
    • ΢Σϒϒϥ΢βͱݴ͑͹ʁ
    • ΢Σϒϒϥ΢β͸ԿΛ͢Δ΋ͷʁ
    • ChromeͱFirefoxԿ͕ҧ͏ͷʁ
    • ChromeͱOpera͸Կ͕ҧ͏ʁ

    View Slide

  14. View Slide

  15. Chrome Opera Vivaldi
    Safari
    Firefox
    Internet Explorer
    Edge

    View Slide

  16. Chrome Opera Vivaldi
    Safari
    Firefox
    Internet Explorer
    Edge

    View Slide

  17. Chrome Opera Vivaldi
    Safari
    Firefox
    Internet Explorer
    Edge
    Chromium

    View Slide

  18. Chrome Opera Vivaldi
    Safari
    Firefox
    Internet Explorer
    Edge
    Chromium

    View Slide

  19. Chrome Opera Vivaldi
    Safari
    Firefox
    Internet Explorer
    Edge
    Chromium
    Webkit

    View Slide

  20. Chrome Opera Vivaldi
    Safari
    Firefox
    Internet Explorer
    Edge

    View Slide

  21. Question
    • ΢Σϒϒϥ΢βͱݴ͑͹ʁ
    • ΢Σϒϒϥ΢β͸ԿΛ͢Δ΋ͷʁ
    • ChromeͱFirefoxԿ͕ҧ͏ͷʁ
    • ChromeͱOpera͸Կ͕ҧ͏ʁ
    $ISPNF 'JSFGPY *&
    0QFSB &EHFʜ

    View Slide

  22. Question
    • ΢Σϒϒϥ΢βͱݴ͑͹ʁ
    • ΢Σϒϒϥ΢β͸ԿΛ͢Δ΋ͷʁ
    • ChromeͱFirefoxԿ͕ҧ͏ͷʁ
    • ChromeͱOpera͸Կ͕ҧ͏ʁ

    View Slide

  23. Question
    • ΢Σϒϒϥ΢βͱݴ͑͹ʁ
    • ΢Σϒϒϥ΢β͸ԿΛ͢Δ΋ͷʁ
    • ChromeͱFirefoxԿ͕ҧ͏ͷʁ
    • ChromeͱOpera͸Կ͕ҧ͏ʁ

    View Slide

  24. ΢Σϒϒϥ΢β
    ͷجຊߏ੒

    View Slide

  25. ΢Σϒϒϥ΢βͷجຊߏ੒
    http://www.slideshare.net/quangntta/web-browser-architecture-49196378

    View Slide

  26. ΢Σϒϒϥ΢βͷجຊߏ੒
    http://www.slideshare.net/quangntta/web-browser-architecture-49196378
    ΞυϨεόʔɾπʔϧόʔ
    ֤छϘλϯ ਐΉ໭Δ

    ϒοΫϚʔΫɹͳͲ

    View Slide

  27. ΢Σϒϒϥ΢βͷجຊߏ੒
    http://www.slideshare.net/quangntta/web-browser-architecture-49196378
    6*ͱ֤छΤϯδϯͱͷ
    ϝοηʔδͷ΍ΓऔΓΛ஥հ

    View Slide

  28. ΢Σϒϒϥ΢βͷجຊߏ੒
    http://www.slideshare.net/quangntta/web-browser-architecture-49196378
    )5.-9.-Λύʔε͠ɺ
    ը໘ʹදࣔ͢ΔͨΊͷ
    ϨΠΞ΢τΛߏங͢Δ

    View Slide

  29. ΢Σϒϒϥ΢βͷجຊߏ੒
    http://www.slideshare.net/quangntta/web-browser-architecture-49196378
    )551΍'51ͳͲΛ஻Δ

    View Slide

  30. ΢Σϒϒϥ΢βͷجຊߏ੒
    http://www.slideshare.net/quangntta/web-browser-architecture-49196378
    +BWB4DSJQUͷ࣮ߦ݁ՌΛ
    3FOEFSJOH&OHJOFʹ౉͢

    View Slide

  31. ΢Σϒϒϥ΢βͷجຊߏ੒
    http://www.slideshare.net/quangntta/web-browser-architecture-49196378
    σΟεϓϨΠʹ
    දࣔ͢Δ

    View Slide

  32. ΢Σϒϒϥ΢βͷجຊߏ੒
    http://www.slideshare.net/quangntta/web-browser-architecture-49196378
    ࠓ೔͸͔͜͜Β
    ͜ͷͭʹ஫໨ͯ͠
    ۷ΓԼ͛ͯΈ·͢

    View Slide

  33. ϨϯμϦϯάΤϯδϯͷ໾ׂ
    • ϨϯμϦϯάΤϯδϯ͸HTML / XML Λύʔε
    • CSSΛύʔε͠ελΠϧϧʔϧΛ೺Ѳ
    • HTMLΛCSSϧʔϧʹج͍ͮͯදࣔΛ഑ஔ
    • ඳըͷੜ੒
    ※ҎԼͰ͸HTMLͱͷΈදه͠·͢

    View Slide

  34. ϨϯμϦϯάΤϯδϯͷ໾ׂ
    • ϨϯμϦϯάΤϯδϯ͸HTML / XML Λύʔε
    • CSSΛύʔε͠ελΠϧϧʔϧΛ೺Ѳ
    • HTMLΛCSSϧʔϧʹج͍ͮͯදࣔΛ഑ஔ
    • ඳըͷੜ੒
    -BZPVU
    1BSTF
    1BJOU

    View Slide

  35. JavaScriptΠϯλʔϓϦλͷ໾ׂ
    • JavaScriptͷղੳɾ࣮ߦ

    View Slide

  36. JavaScriptΠϯλʔϓϦλͷ໾ׂ
    • JavaScriptͷղੳɾ࣮ߦ
    &WBMVBUF

    View Slide

  37. Question
    • ΢Σϒϒϥ΢βͱݴ͑͹ʁ
    • ΢Σϒϒϥ΢β͸ԿΛ͢Δ΋ͷʁ
    • ChromeͱFirefoxԿ͕ҧ͏ͷʁ
    • ChromeͱOpera͸Կ͕ҧ͏ʁ

    View Slide

  38. Question
    • ΢Σϒϒϥ΢βͱݴ͑͹ʁ
    • ΢Σϒϒϥ΢β͸ԿΛ͢Δ΋ͷʁ
    • ChromeͱFirefoxԿ͕ҧ͏ͷʁ
    • ChromeͱOpera͸Կ͕ҧ͏ʁ
    )5.-$44+4ͳͲΛ
    ཧղɺ࣮ߦɺදࣔΛߦ͏ɻ
    ·ͨͦΕΒͷͨΊʹඞཁͳ
    ௨৴ͳͲͷػೳ΋͋Δɻ

    View Slide

  39. Question
    • ΢Σϒϒϥ΢βͱݴ͑͹ʁ
    • ΢Σϒϒϥ΢β͸ԿΛ͢Δ΋ͷʁ
    • ChromeͱFirefoxԿ͕ҧ͏ͷʁ
    • ChromeͱOpera͸Կ͕ҧ͏ʁ

    View Slide

  40. Question
    • ΢Σϒϒϥ΢βͱݴ͑͹ʁ
    • ΢Σϒϒϥ΢β͸ԿΛ͢Δ΋ͷʁ
    • ChromeͱFirefoxԿ͕ҧ͏ͷʁ
    • ChromeͱOpera͸Կ͕ҧ͏ʁ

    View Slide





























  41. .P[JMMB$PSQPSBUJPO ઃཱ
    .P[JMMB$IJOB ઃཱ
    .P[JMMB.BOJGFTUP'JSTU%SBGU
    /FUTDBQF ઐ೚ελοϑ
    ͱίϛϡχςΟͱͷڞಉ
    ϓϩδΣΫτͱͯ͠
    /FUTDBQF$PNNVOJDBUJPOT
    ͷग़ࢿʹΑΓઃཱ
    /$ ༝དྷͷίʔυͷഁ
    غͱ৽ϨϯμϦϯάΤ
    ϯδϯʮ(FDLPʯϕʔ
    εͰͷࠜຊతͳઃܭͷ
    ͠௚͠Λܾఆ
    ϚʔΫ
    ɾΞϯυϦʔηϯ
    Βɺ
    .PTBJDΛ։ൃ
    ς
    ΟϜɾόʔφʔζɾ
    Ϧʔ
    8PSME8JEF8FCͷݪܕ
    ͱͳΔఏҊ
    )5.- )551 63-Λઃܭ
    ੈքॳͷ8FCαΠ
    τ
    8PSME8JEF8FCͷιʔε
    ίʔυΛύϒϦ
    ο
    Ϋ
    υϝΠϯ
    ͱ
    ͯ͠ެ։
    .PTBJDͷ
    ϥΠηϯεΛऔಘ
    ɹ
    ϚʔΫɾΞϯυϦʔηϯͱ
    δϜɾΫϥʔΫʹΑ
    Γઃཱ
    ඇӦར૊৫ͱͯ͠ಠཱ
    .P[JMMB&VSPQF ઃཱ
    .P[JMMB+BQBO ઃཱ
    NETSCAPE
    COMMUNICATIONS
    /$Y Λແঈ഑෍
    ։ൃதͷ /$ Λ
    ΦʔϓϯιʔεԽ
    ೔ຊ๏ਓઃཱ
    /$4" ͔Βͷૌ͑ʹΑΓ
    ໊ࣾมߋ
    ɾ
    'JSFGPY04
    ɾ
    )5.-קࠂ
    ɾ
    8FC$-
    ɾ
    )551
    ɾ&$."4DSJQU
    ɾ'JSFGPY0457
    ɾ$444OBQTIPU
    ɾ
    'JSFGPYԆ௕
    αϙʔτ൛
    ɾ
    )5.- ࠷ऴ૲Ҋ
    ެ։
    ɾ
    8FC(-
    ɾ
    8$ ઃཱ
    ɾ
    /FUTDBQF/BWJHBUPS
    ͕ࢢ৔Λ੮ר͢Δ
    ɾ
    :BIPP αʔϏε
    ։࢝
    ɾ
    8FC.ެ։
    ɾ$444OBQTIPU
    ɾ
    +BWB ొ৔
    ɾ
    Πϯλʔωοτ
    ར༻ऀͷٸ૿
    ɾ
    ϒϥ΢βઓ૪ܹԽ
    ɾ
    $44 קࠂ
    ɾ
    )551
    ɾ
    .PTBJD ͕ࢢ৔Λ
    ੮ר͢Δ
    ೥Ͱ ສ
    μ΢ϯϩʔυ
    ɾ
    )551
    ɾ
    Πϯλʔωο
    τ઀ଓ
    ϗετ͕ ສΛ
    ௒͑Δ
    ɾ
    Πϯλʔωο
    τ઀ଓ
    ϗετ͕ ສΛ
    ௒͑Δ
    ɾ೔ຊ࠷ॳͷ 8FC
    αΠτ͕ެ։
    ɾ
    ϒϥ΢βઓ૪
    ࣄ্࣮ͷऴᖼ
    ɾ
    *& γΣΞٸ૿
    ɾ
    $44 קࠂ
    ɾ
    9.- קࠂ
    ɾ
    %0. קࠂ
    ɾ&$."4DSJQUOE
    ɾ&$."4DSJQUSE
    ɾ
    )5.- קࠂ
    ɾ
    )551
    ɾ&$."4DSJQUTU
    ɾ
    "KBY
    ɾ
    8FC
    ɾ
    8$)5.-8(
    ઃཱ
    ɾ
    $444OBQTIPU
    ɾ
    )5.- ૲Ҋެ։
    ɾ
    8$9)5.-8(
    ׆ಈऴྃ
    ɾ&$."4DSJQUUI
    ɾ
    ถϦϋϏϦςʔ
    γϣϯ๏ ৚
    ࢪߦ։࢝
    ɾ
    ϒϩʔυόϯυ
    ීٴ͕೔ຊͰ࢝
    ·Δ
    ɾ
    "0- ͱ .JDSPTPGUɺ
    ಠې๏ૌুͰ࿨ղ
    ϒϥ΢βઓ૪ʹ
    ऴࢭූ
    ɾ
    ϒϩάϒʔϜ
    ೔ຊͰ࢝·Δ
    ɾ

    ʮઓޙੈ୅ʯ
    ϒϥ΢βͷ୆಄
    ɾ
    8)"58( ઃཱ
    ɾ
    +*49 ੍ఆ
    ɾ
    (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"QQMJDBUJPO4VJUF
    .P[JMMB"QQMJDBUJPO4VJUF
    <.JMFTUPOF ʙ >
    ʢίʔυωʔϜʮ4FBNPOLFZʯ
    ʣ
    /FUTDBQF
    .P[JMMB"QQMJDBUJPO4VJUF
    'JSFGPY%FWFMPQFS&EJUJPO
    J04൛'JSFGPY
    4FB.POLFZ



    /FUTDBQF
    .P[JMMB'JSFCJSE
    Firefox







    .P[JMMB"QQMJDBUJPO4VJUF
    .P[JMMB1IPFOJY




    ϦϦʔε
    ୈੈ୅+BWB4DSJQUΤϯδϯ
    ϋʔυ΢ΣΞΞΫηϥϨʔγϣϯ
    ɹɹɹɹ8FC(-
    'JSFGPY4ZOD
    ɹɹɹɹ"OESPJE൛ϦϦʔε
    ୈੈ୅+BWB4DSJQUΤϯδϯ
    ϋʔυ΢ΣΞΞΫηϥϨʔγϣϯ
    ɹɹɹɹ8FC(-
    'JSFGPY4ZOD
    ɹɹɹɹ"OESPJE൛ϦϦʔε
    "OESPJE൛/BUJWF6*
    ϦϦʔε
    "OESPJE൛/BUJWF6*
    ϦϦʔε
    Ҏޙ '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 ͷ
    ։ൃΛ։࢝
    .BD049W
    $IFFUBI ϦϦʔε
    .BD049W
    1BOUIFS ϦϦʔε
    Ξυϫʔζ
    αʔϏε։࢝
    (PPHMF%FTLUPQ
    ϦϦʔε
    (PPHMF.BQT
    αʔϏε։࢝
    (NBJM
    αʔϏε։࢝
    (PPHMF1BDL
    ϦϦʔε
    (PPHMF%PDT
    4QSFBETIFFUT
    αʔϏε։࢝
    "OESPJE
    ϦϦʔε
    7
    (PPHMF
    αʔϏε։࢝
    .PTBJD ͷ
    ϥΠηϯεΛऔಘ
    8JOEPXT7JTUB
    ϦϦʔε
    8JOEPXT9141
    ϦϦʔε
    8JOEPXT.F
    ϦϦʔε
    8JOEPXT91
    ϦϦʔε
    8JOEPXT
    ϦϦʔε
    8JOEPXT
    ϦϦʔε
    *& ͱ 8JOEPXT Λ౷߹
    8JOEPXT
    ϦϦʔε
    ݕࡧΤϯδϯ
    ։ൃ͔Β૑ۀ
    .BD04
    ϦϦʔε
    .BD04ϦϦʔε
    .BD049W
    1VNB ϦϦʔε
    .BD049W
    +BHVBS ϦϦʔε
    .BD049W
    5JHFS ϦϦʔε
    .BD049W
    -FPQBSE ϦϦʔε
    .BD049W
    4OPX-FPQBSE
    ϦϦʔε
    049-JPO
    ϦϦʔε
    4BGBSJ Λඪ४
    8FC ϒϥ΢β
    ʹ࠾༻
    J1BEൃച։࢝
    .BD04ϦϦʔε
    J1IPOFൃച։࢝
    5PQ4JUFT
    $PWFS'MPX
    ϦϦʔε
    ϒοΫϚʔΫͱཤྺͷ౷߹
    εϚʔτϩέʔγϣϯόʔ
    &744-
    "DJE ςετ߹֨
    ॎॻ͖දࣔ
    ,)5.- Λ
    ϕʔεʹͯ͠
    ϨϯμϦϯά
    ΤϯδϯΛ
    ։ൃ
    ϙοϓΞοϓ
    ϒϩοΫ
    μ΢ϯϩʔυ
    ϑΝΠϧͷ
    ηΩϡϦςΟܯࠂ
    ΞυΦϯ؅ཧ
    ϦϦʔε
    MJCXXXΛ
    ࢖ͬͯ։ൃ
    ࠶ར༻Մೳͳ $ ݴޠͷ
    ϥΠϒϥϦͱͯ͠Ұ෦Λ
    ॻ͖௚͠
    ϦϦʔε
    ϦϦʔε ϦϦʔε
    ϦϦʔε
    ൃల
    ൃల .BJM ͱ $PNQPTFS Λ౷߹
    +4DSJQU
    7#4DSJQU
    $44ʢ૲ҊʣͷҰ෦
    ൃల
    ഁغ
    ϧϏදࣔ
    ൃల
    ϦϦʔε
    ੒ՌΛར༻
    Πϝʔδ
    πʔϧόʔ
    ύʔιφϧόʔ
    όάमਖ਼
    ൃల
    'JSFGPY ͷ
    վળ఺ΛϑΟʔυόοΫ
    'JSFGPY ͷվળ఺Λ
    ɹɹɹϑΟʔυόοΫ
    4FB.POLFZ$PVODJM
    ͕։ൃΛܧଓ
    λϒϒϥ΢ζ
    ϑΟογϯά
    ࠮ٗܯࠂ
    8FC ඪ४ٕज़΁ͷ
    ରԠΛվળ
    &744-
    ϦϦʔε
    ϦϦʔε
    "DJE ςετ߹֨
    ϑΟʔυϦʔμʔ
    ϑΟογϯά
    ࠮ٗܯࠂ
    &744-
    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 ςετ߹֨
    ϑΟογϯά
    ࠮ٗܯࠂ
    εϐʔυμΠϠϧɺ
    ϒοΫϚʔΫͳͲͷ
    ಉظ
    ཤྺ͔Βͷશจݕࡧ
    &744-
    λϒϒϥ΢ζ
    ϙοϓΞοϓϒϩοΫ
    ϒϥ΢βػೳΛಠཱ
    ϦϦʔε
    ʢόʔδϣϯதུʣ
    ʢόʔδϣϯதུʣ
    ϦϦʔε
    ϦϦʔε
    7
    ֦ுػೳϚωʔδϟ
    049
    .PVOUBJO-JPO
    ϦϦʔε
    049
    .BSWFSJDLT
    ϦϦʔε
    8JOEPXT
    ϦϦʔε
    8JOEPXT
    ϦϦʔε
    XFC35$
    BTNKT
    XFC35$
    BTNKT
    Ϛϧνϓϩηε
    8FC&YUFOTJPO
    ϧϏɺ
    &.&
    ϧϏɺ
    &.&
    τϥοΩϯάอޢػೳ෇͖
    ϓϥΠϕʔτϒϥ΢δϯά
    τϥοΩϯάอޢػೳ෇͖
    ϓϥΠϕʔτϒϥ΢δϯά
    8JOEPXT
    ϦϦʔε
    +BWB4DSJQUΤϯδϯ
    $IBLSB$PSFΛ
    Φʔϓϯιʔεʹ
    +BWB4DSJQUΤϯδϯ
    $IBLSB$PSFΛ
    Φʔϓϯιʔεʹ
    049
    .BSWFSJDLT
    ϦϦʔε
    049
    :PTFNJUF
    ϦϦʔε
    049
    :PTFNJUF
    ϦϦʔε
    049
    &M$BQJUBO
    ϦϦʔε
    049
    &M$BQJUBO
    ϦϦʔε
    "QQMF8BUDI
    ൃച։࢝
    "QQMF8BUDI
    ൃച։࢝
    8JOEPXT1IPOF
    ϦϦʔε
    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

















    .VMUJ5PSH0QFSB
    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/

    View Slide





























  42. .P[JMMB$PSQPSBUJPO ઃཱ
    .P[JMMB$IJOB ઃཱ
    .P[JMMB.BOJGFTUP'JSTU%SBGU
    /FUTDBQF ઐ೚ελοϑ
    ͱίϛϡχςΟͱͷڞಉ
    ϓϩδΣΫτͱͯ͠
    /FUTDBQF$PNNVOJDBUJPOT
    ͷग़ࢿʹΑΓઃཱ
    /$ ༝དྷͷίʔυͷഁ
    غͱ৽ϨϯμϦϯάΤ
    ϯδϯʮ(FDLPʯϕʔ
    εͰͷࠜຊతͳઃܭͷ
    ͠௚͠Λܾఆ
    ϚʔΫ
    ɾΞϯυϦʔηϯ
    Βɺ
    .PTBJDΛ։ൃ
    ς
    ΟϜɾόʔφʔζɾ
    Ϧʔ
    8PSME8JEF8FCͷݪܕ
    ͱͳΔఏҊ
    )5.- )551 63-Λઃܭ
    ੈքॳͷ8FCαΠ
    τ
    8PSME8JEF8FCͷιʔε
    ίʔυΛύϒϦ
    ο
    Ϋ
    υϝΠϯ
    ͱ
    ͯ͠ެ։
    .PTBJDͷ
    ϥΠηϯεΛऔಘ
    ɹ
    ϚʔΫɾΞϯυϦʔηϯͱ
    δϜɾΫϥʔΫʹΑ
    Γઃཱ
    ඇӦར૊৫ͱͯ͠ಠཱ
    .P[JMMB&VSPQF ઃཱ
    .P[JMMB+BQBO ઃཱ
    NETSCAPE
    COMMUNICATIONS
    /$Y Λແঈ഑෍
    ։ൃதͷ /$ Λ
    ΦʔϓϯιʔεԽ
    ೔ຊ๏ਓઃཱ
    /$4" ͔Βͷૌ͑ʹΑΓ
    ໊ࣾมߋ
    ɾ
    'JSFGPY04
    ɾ
    )5.-קࠂ
    ɾ
    8FC$-
    ɾ
    )551
    ɾ&$."4DSJQU
    ɾ'JSFGPY0457
    ɾ$444OBQTIPU
    ɾ
    'JSFGPYԆ௕
    αϙʔτ൛
    ɾ
    )5.- ࠷ऴ૲Ҋ
    ެ։
    ɾ
    8FC(-
    ɾ
    8$ ઃཱ
    ɾ
    /FUTDBQF/BWJHBUPS
    ͕ࢢ৔Λ੮ר͢Δ
    ɾ
    :BIPP αʔϏε
    ։࢝
    ɾ
    8FC.ެ։
    ɾ$444OBQTIPU
    ɾ
    +BWB ొ৔
    ɾ
    Πϯλʔωοτ
    ར༻ऀͷٸ૿
    ɾ
    ϒϥ΢βઓ૪ܹԽ
    ɾ
    $44 קࠂ
    ɾ
    )551
    ɾ
    .PTBJD ͕ࢢ৔Λ
    ੮ר͢Δ
    ೥Ͱ ສ
    μ΢ϯϩʔυ
    ɾ
    )551
    ɾ
    Πϯλʔωο
    τ઀ଓ
    ϗετ͕ ສΛ
    ௒͑Δ
    ɾ
    Πϯλʔωο
    τ઀ଓ
    ϗετ͕ ສΛ
    ௒͑Δ
    ɾ೔ຊ࠷ॳͷ 8FC
    αΠτ͕ެ։
    ɾ
    ϒϥ΢βઓ૪
    ࣄ্࣮ͷऴᖼ
    ɾ
    *& γΣΞٸ૿
    ɾ
    $44 קࠂ
    ɾ
    9.- קࠂ
    ɾ
    %0. קࠂ
    ɾ&$."4DSJQUOE
    ɾ&$."4DSJQUSE
    ɾ
    )5.- קࠂ
    ɾ
    )551
    ɾ&$."4DSJQUTU
    ɾ
    "KBY
    ɾ
    8FC
    ɾ
    8$)5.-8(
    ઃཱ
    ɾ
    $444OBQTIPU
    ɾ
    )5.- ૲Ҋެ։
    ɾ
    8$9)5.-8(
    ׆ಈऴྃ
    ɾ&$."4DSJQUUI
    ɾ
    ถϦϋϏϦςʔ
    γϣϯ๏ ৚
    ࢪߦ։࢝
    ɾ
    ϒϩʔυόϯυ
    ීٴ͕೔ຊͰ࢝
    ·Δ
    ɾ
    "0- ͱ .JDSPTPGUɺ
    ಠې๏ૌুͰ࿨ղ
    ϒϥ΢βઓ૪ʹ
    ऴࢭූ
    ɾ
    ϒϩάϒʔϜ
    ೔ຊͰ࢝·Δ
    ɾ

    ʮઓޙੈ୅ʯ
    ϒϥ΢βͷ୆಄
    ɾ
    8)"58( ઃཱ
    ɾ
    +*49 ੍ఆ
    ɾ
    (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"QQMJDBUJPO4VJUF
    .P[JMMB"QQMJDBUJPO4VJUF
    <.JMFTUPOF ʙ >
    ʢίʔυωʔϜʮ4FBNPOLFZʯ
    ʣ
    /FUTDBQF
    .P[JMMB"QQMJDBUJPO4VJUF
    'JSFGPY%FWFMPQFS&EJUJPO
    J04൛'JSFGPY
    4FB.POLFZ



    /FUTDBQF
    .P[JMMB'JSFCJSE
    Firefox







    .P[JMMB"QQMJDBUJPO4VJUF
    .P[JMMB1IPFOJY




    ϦϦʔε
    ୈੈ୅+BWB4DSJQUΤϯδϯ
    ϋʔυ΢ΣΞΞΫηϥϨʔγϣϯ
    ɹɹɹɹ8FC(-
    'JSFGPY4ZOD
    ɹɹɹɹ"OESPJE൛ϦϦʔε
    ୈੈ୅+BWB4DSJQUΤϯδϯ
    ϋʔυ΢ΣΞΞΫηϥϨʔγϣϯ
    ɹɹɹɹ8FC(-
    'JSFGPY4ZOD
    ɹɹɹɹ"OESPJE൛ϦϦʔε
    "OESPJE൛/BUJWF6*
    ϦϦʔε
    "OESPJE൛/BUJWF6*
    ϦϦʔε
    Ҏޙ '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 ͷ
    ։ൃΛ։࢝
    .BD049W
    $IFFUBI ϦϦʔε
    .BD049W
    1BOUIFS ϦϦʔε
    Ξυϫʔζ
    αʔϏε։࢝
    (PPHMF%FTLUPQ
    ϦϦʔε
    (PPHMF.BQT
    αʔϏε։࢝
    (NBJM
    αʔϏε։࢝
    (PPHMF1BDL
    ϦϦʔε
    (PPHMF%PDT
    4QSFBETIFFUT
    αʔϏε։࢝
    "OESPJE
    ϦϦʔε
    7
    (PPHMF
    αʔϏε։࢝
    .PTBJD ͷ
    ϥΠηϯεΛऔಘ
    8JOEPXT7JTUB
    ϦϦʔε
    8JOEPXT9141
    ϦϦʔε
    8JOEPXT.F
    ϦϦʔε
    8JOEPXT91
    ϦϦʔε
    8JOEPXT
    ϦϦʔε
    8JOEPXT
    ϦϦʔε
    *& ͱ 8JOEPXT Λ౷߹
    8JOEPXT
    ϦϦʔε
    ݕࡧΤϯδϯ
    ։ൃ͔Β૑ۀ
    .BD04
    ϦϦʔε
    .BD04ϦϦʔε
    .BD049W
    1VNB ϦϦʔε
    .BD049W
    +BHVBS ϦϦʔε
    .BD049W
    5JHFS ϦϦʔε
    .BD049W
    -FPQBSE ϦϦʔε
    .BD049W
    4OPX-FPQBSE
    ϦϦʔε
    049-JPO
    ϦϦʔε
    4BGBSJ Λඪ४
    8FC ϒϥ΢β
    ʹ࠾༻
    J1BEൃച։࢝
    .BD04ϦϦʔε
    J1IPOFൃച։࢝
    5PQ4JUFT
    $PWFS'MPX
    ϦϦʔε
    ϒοΫϚʔΫͱཤྺͷ౷߹
    εϚʔτϩέʔγϣϯόʔ
    &744-
    "DJE ςετ߹֨
    ॎॻ͖දࣔ
    ,)5.- Λ
    ϕʔεʹͯ͠
    ϨϯμϦϯά
    ΤϯδϯΛ
    ։ൃ
    ϙοϓΞοϓ
    ϒϩοΫ
    μ΢ϯϩʔυ
    ϑΝΠϧͷ
    ηΩϡϦςΟܯࠂ
    ΞυΦϯ؅ཧ
    ϦϦʔε
    MJCXXXΛ
    ࢖ͬͯ։ൃ
    ࠶ར༻Մೳͳ $ ݴޠͷ
    ϥΠϒϥϦͱͯ͠Ұ෦Λ
    ॻ͖௚͠
    ϦϦʔε
    ϦϦʔε ϦϦʔε
    ϦϦʔε
    ൃల
    ൃల .BJM ͱ $PNQPTFS Λ౷߹
    +4DSJQU
    7#4DSJQU
    $44ʢ૲ҊʣͷҰ෦
    ൃల
    ഁغ
    ϧϏදࣔ
    ൃల
    ϦϦʔε
    ੒ՌΛར༻
    Πϝʔδ
    πʔϧόʔ
    ύʔιφϧόʔ
    όάमਖ਼
    ൃల
    'JSFGPY ͷ
    վળ఺ΛϑΟʔυόοΫ
    'JSFGPY ͷվળ఺Λ
    ɹɹɹϑΟʔυόοΫ
    4FB.POLFZ$PVODJM
    ͕։ൃΛܧଓ
    λϒϒϥ΢ζ
    ϑΟογϯά
    ࠮ٗܯࠂ
    8FC ඪ४ٕज़΁ͷ
    ରԠΛվળ
    &744-
    ϦϦʔε
    ϦϦʔε
    "DJE ςετ߹֨
    ϑΟʔυϦʔμʔ
    ϑΟογϯά
    ࠮ٗܯࠂ
    &744-
    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 ςετ߹֨
    ϑΟογϯά
    ࠮ٗܯࠂ
    εϐʔυμΠϠϧɺ
    ϒοΫϚʔΫͳͲͷ
    ಉظ
    ཤྺ͔Βͷશจݕࡧ
    &744-
    λϒϒϥ΢ζ
    ϙοϓΞοϓϒϩοΫ
    ϒϥ΢βػೳΛಠཱ
    ϦϦʔε
    ʢόʔδϣϯதུʣ
    ʢόʔδϣϯதུʣ
    ϦϦʔε
    ϦϦʔε
    7
    ֦ுػೳϚωʔδϟ
    049
    .PVOUBJO-JPO
    ϦϦʔε
    049
    .BSWFSJDLT
    ϦϦʔε
    8JOEPXT
    ϦϦʔε
    8JOEPXT
    ϦϦʔε
    XFC35$
    BTNKT
    XFC35$
    BTNKT
    Ϛϧνϓϩηε
    8FC&YUFOTJPO
    ϧϏɺ
    &.&
    ϧϏɺ
    &.&
    τϥοΩϯάอޢػೳ෇͖
    ϓϥΠϕʔτϒϥ΢δϯά
    τϥοΩϯάอޢػೳ෇͖
    ϓϥΠϕʔτϒϥ΢δϯά
    8JOEPXT
    ϦϦʔε
    +BWB4DSJQUΤϯδϯ
    $IBLSB$PSFΛ
    Φʔϓϯιʔεʹ
    +BWB4DSJQUΤϯδϯ
    $IBLSB$PSFΛ
    Φʔϓϯιʔεʹ
    049
    .BSWFSJDLT
    ϦϦʔε
    049
    :PTFNJUF
    ϦϦʔε
    049
    :PTFNJUF
    ϦϦʔε
    049
    &M$BQJUBO
    ϦϦʔε
    049
    &M$BQJUBO
    ϦϦʔε
    "QQMF8BUDI
    ൃച։࢝
    "QQMF8BUDI
    ൃച։࢝
    8JOEPXT1IPOF
    ϦϦʔε
    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

















    .VMUJ5PSH0QFSB
    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/
    ΢Σϒϒϥ΢β
    ͷྺ࢙

    View Slide

  43. ʙ

    View Slide

  44. Chrome Opera
    Safari
    Firefox
    Internet Explorer
    ϨϯμϦϯάΤϯδϯ
    +4ΠϯλʔϓϦλ

    View Slide

  45. Chrome Opera
    Safari
    Firefox
    Internet Explorer
    8FCLJU
    7
    ϨϯμϦϯάΤϯδϯ
    +4ΠϯλʔϓϦλ
    1SFTUP
    $BSBLBO
    8FCLJU
    +BWB4DSJQU
    $PSF
    5SJEFOU
    $IBLSB
    (FDLP
    4QJEFS
    .POLFZ

    View Slide

  46. Chrome Opera
    Safari
    Firefox
    Internet Explorer
    8FCLJU
    7
    1SFTUP
    $BSBLBO
    8FCLJU
    +BWB4DSJQU
    $PSF
    5SJEFOU
    $IBLSB
    (FDLP
    4QJEFS
    .POLFZ
    Webkit

    View Slide

  47. Chrome Opera
    Safari
    Firefox
    Internet Explorer
    1SFTUP
    $BSBLBO
    8FCLJU
    +BWB4DSJQU
    $PSF
    5SJEFOU
    $IBLSB
    (FDLP
    4QJEFS
    .POLFZ
    Webkit
    8FCLJU
    7

    View Slide

  48. Chrome
    Safari
    8FCLJU
    +BWB4DSJQU
    $PSF
    Webkit
    8FCLJU
    7

    View Slide

  49. Google
    Apple
    8FCLJU
    +BWB4DSJQU
    $PSF
    Webkit
    8FCLJU
    7
    2013೥·Ͱ͸GoogleͱApple͕
    WebkitΛڞಉͰ։ൃ

    View Slide

  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͠
    Ҏ߱ಠࣗʹ։ൃ

    View Slide

  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͠
    Ҏ߱ಠࣗʹ։ൃ

    View Slide

  52. ͜ͷগ͠લʜ
    2013/02

    View Slide

  53. Chrome Opera
    Safari
    Firefox
    Internet Explorer
    8FCLJU
    7
    1SFTUP
    $BSBLBO
    8FCLJU
    +BWB4DSJQU
    $PSF
    5SJEFOU
    $IBLSB
    (FDLP
    4QJEFS
    .POLFZ
    0QFSBͰ
    ಠࣗϒϥ΢β։ൃΛࣙΊ
    $ISPNJVN1SPKFDUʹ
    ࢀՃ͠։ൃڠྗɻ
    0QFSB͔Β
    8FCLJU7΁

    View Slide

  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ͷΈ
    ϦϦʔε͞Εͨ)

    View Slide

  55. Chrome Opera
    #MJOL
    7
    #MJOL
    7

    View Slide

  56. ͦͷޙ৭ʑ͋Γ
    ओͳτϐοΫε
    ݩ0QFSBͷڞಉ૑ઃऀ͕Ҏલͷ0QFSBͷϒϥ΢δ
    ϯάΛऔΓ໭ͨ͢Ίʹ$ISPNJVNΛݩʹ։ൃͨ͠
    7JWBMEJ#SPXTFSΛެ։
    .JDSPTPGU͕৽ϒϥ΢β&EHFΛެ։

    View Slide

  57. Chrome Opera Vivaldi
    Safari
    Firefox
    Internet Explorer
    Edge

    View Slide

  58. Chrome Opera Vivaldi
    Safari
    Firefox
    Internet Explorer
    Edge
    Based (Forked)
    Chromium

    View Slide

  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ΠϯλʔϓϦλ

    View Slide

  60. Chrome Opera Vivaldi
    Q. ͜ͷ3ͭͷ΢Σϒϒϥ΢βͷҧ͍͸ʁ

    View Slide

  61. Chrome Opera Vivaldi
    #MJOL
    7
    #MJOL
    7
    #MJOL
    7

    View Slide

  62. Chrome Opera Vivaldi
    #MJOL
    7
    #MJOL
    7
    #MJOL
    7

    View Slide

  63. Chrome Opera Vivaldi
    #MJOL
    7
    #MJOL
    7
    #MJOL
    7
    ڞ௨
    ҟͳΔ

    View Slide

  64. Chrome Opera Vivaldi
    #MJOL
    7
    #MJOL
    7
    #MJOL
    7
    ಠࣗίϯϙʔωϯτͱͯ͠
    αΠυόʔ΍
    4QFFE%JBMͳͲ

    View Slide

  65. Chrome Opera Vivaldi
    #MJOL
    7
    #MJOL
    7
    #MJOL
    7
    ಠࣗίϯϙʔωϯτͱͯ͠
    αΠυόʔ΍
    4QFFE%JBMͳͲ

    View Slide

  66. Chrome Opera Vivaldi
    #MJOL
    7
    #MJOL
    7
    #MJOL
    7
    αΠυόʔ
    ΫΠοΫίϚϯυ
    εςʔλεόʔ ը໘Լ෦

    View Slide

  67. Chrome Opera Vivaldi
    #MJOL
    7
    #MJOL
    7
    #MJOL
    7
    αΠυόʔ
    ΫΠοΫίϚϯυ
    εςʔλεόʔ ը໘Լ෦

    View Slide

  68. Chrome
    Safari
    Firefox
    Internet Explorer
    Edge

    View Slide

  69. Chrome
    Safari
    Firefox
    Internet Explorer
    Edge
    Q. ͜ͷ5ͭͷ΢Σϒϒϥ΢βͷҧ͍͸ʁ

    View Slide

  70. Chrome
    Safari
    Firefox
    Internet Explorer
    Edge
    #MJOL
    7
    8FCLJU
    +BWB4DSJQU
    $PSF
    5SJEFOU
    $IBLSB
    (FDLP
    4QJEFS
    .POLFZ
    &EHF)5.-
    $IBLSB
    ϨϯμϦϯάΤϯδϯ
    +4ΠϯλʔϓϦλ

    View Slide

  71. Chrome
    Safari
    Firefox
    Internet Explorer
    Edge
    #MJOL
    7
    8FCLJU
    +BWB4DSJQU
    $PSF
    5SJEFOU
    $IBLSB
    (FDLP
    4QJEFS
    .POLFZ
    &EHF)5.-
    $IBLSB
    ରԠঢ়گ

    View Slide

  72. Chrome
    Safari
    Firefox
    Internet Explorer
    Edge
    #MJOL
    7
    8FCLJU
    +BWB4DSJQU
    $PSF
    5SJEFOU
    $IBLSB
    (FDLP
    4QJEFS
    .POLFZ
    &EHF)5.-
    $IBLSB
    async function ରԠঢ়گ

    View Slide

  73. Question
    • ΢Σϒϒϥ΢βͱݴ͑͹ʁ
    • ΢Σϒϒϥ΢β͸ԿΛ͢Δ΋ͷʁ
    • ChromeͱFirefoxԿ͕ҧ͏ͷʁ
    • ChromeͱOpera͸Կ͕ҧ͏ʁ

    View Slide

  74. Question
    • ΢Σϒϒϥ΢βͱݴ͑͹ʁ
    • ΢Σϒϒϥ΢β͸ԿΛ͢Δ΋ͷʁ
    • ChromeͱFirefoxԿ͕ҧ͏ͷʁ
    • ChromeͱOpera͸Կ͕ҧ͏ʁ
    ಺෦ར༻͍ͯ͠Δ
    Τϯδϯ͕ҟͳΔ

    View Slide

  75. Question
    • ΢Σϒϒϥ΢βͱݴ͑͹ʁ
    • ΢Σϒϒϥ΢β͸ԿΛ͢Δ΋ͷʁ
    • ChromeͱFirefoxԿ͕ҧ͏ͷʁ
    • ChromeͱOpera͸Կ͕ҧ͏ʁ
    ྆ํಉ͡$ISPNJVNΛ
    ϕʔεʹར༻͍ͯ͠Δ͕ɺ
    6*ͳͲ͕ҟͳΔ

    View Slide

  76. Question
    • ΢Σϒϒϥ΢βͱݴ͑͹ʁ
    • ΢Σϒϒϥ΢β͸ԿΛ͢Δ΋ͷʁ
    • ChromeͱFirefoxԿ͕ҧ͏ͷʁ
    • ChromeͱOpera͸Կ͕ҧ͏ʁ

    View Slide

  77. ΢Σϒϒϥ΢βͷجຊߏ੒
    http://www.slideshare.net/quangntta/web-browser-architecture-49196378
    ࠓ೔͸͔͜͜Β
    ͜ͷͭʹ஫໨ͯ͠
    ۷ΓԼ͛ͯΈ·͢

    View Slide

  78. ͞Βʹৄ͘͠
    ݟͯΈΑ͏

    View Slide

  79. JavaScriptΠϯλʔϓϦλͷ໾ׂ
    • JavaScriptͷղੳɾ࣮ߦ
    &WBMVBUF

    View Slide

  80. ϨϯμϦϯάΤϯδϯͷ໾ׂ
    • ϨϯμϦϯάΤϯδϯ͸HTML / XML Λύʔε
    • CSSΛύʔε͠ελΠϧϧʔϧΛ೺Ѳ
    • HTMLΛCSSϧʔϧʹج͍ͮͯදࣔΛ഑ஔ
    • ඳըͷੜ੒
    -BZPVU
    1BSTF
    1BJOU

    View Slide

  81. ϨϯμϦϯάΤϯδϯͷ໾ׂ
    • ϨϯμϦϯάΤϯδϯ͸HTML / XML Λύʔε
    • CSSΛύʔε͠ελΠϧϧʔϧΛ೺Ѳ
    • HTMLΛCSSϧʔϧʹج͍ͮͯදࣔΛ഑ஔ
    • ඳըͷੜ੒ʢϨΠϠʔ͝ͱʹੜ੒ͷޙɺ߹੒ʣ
    -BZPVU
    1BSTF
    1BJOU $PNQPTJUF
    -BZFST

    View Slide

  82. JSͰΞχϝʔγϣϯͤ͞Δͱ…

    View Slide

  83. JSͰΞχϝʔγϣϯͤ͞Δͱ…
    • JSΠϯλʔϓϦλ͕JavaScriptΛ࣮ߦ
    • DOMπϦʔΛมߋ
    • ϨϯμϦϯάΤϯδϯ͕ελΠϧΛ࠶ܭࢉ
    • ϨΠΞ΢τΛੜ੒
    • ϨΠϠʔ͝ͱʹඳըΛੜ੒
    • ϨΠϠʔΛ߹੒͠࠷ऴతͳϨϯμϦϯά݁ՌΛੜ੒
    &WBMVBUF
    $BMDVSBUF
    4UZMFT
    -BZPVU BLBSFqPX

    1BJOU
    $PNQPTJUF-BZFST

    View Slide

  84. Chrome DevtoolͷTimeLine
    https://www.html5rocks.com/en/tutorials/speed/high-performance-animations/

    View Slide

  85. DEMO
    http://codepen.io/paulirish/full/nkwKs/
    http://codepen.io/paulirish/full/LsxyF/

    View Slide

  86. ͭ·Γ
    • ҐஔͳͲ͚ͩΛಈ͔͢৔߹͸ CSS transform
    Λར༻͢Δͱ Composite Layers͚ͩͳͷͰૉ
    ૣ͘ऴྃ͢Δ

    View Slide

  87. +4͔Β
    MFGUͳͲΛ
    มߋͨ͠৔߹

    View Slide

  88. ΢Σϒϒϥ΢βͷجຊߏ੒
    http://www.slideshare.net/quangntta/web-browser-architecture-49196378
    +BWB4DSJQUͷ࣮ߦ݁ՌΛ
    3FOEFSJOH&OHJOFʹ౉͢

    View Slide

  89. ΢Σϒϒϥ΢βͷجຊߏ੒
    http://www.slideshare.net/quangntta/web-browser-architecture-49196378
    ը໘ʹදࣔ͢ΔͨΊͷ
    ϨΠΞ΢τΛߏங͢Δ

    View Slide

  90. ΢Σϒϒϥ΢βͷجຊߏ੒
    http://www.slideshare.net/quangntta/web-browser-architecture-49196378
    ΍ΓऔΓΛ஥հ

    View Slide

  91. ΢Σϒϒϥ΢βͷجຊߏ੒
    http://www.slideshare.net/quangntta/web-browser-architecture-49196378
    σΟεϓϨΠʹ
    දࣔ͢Δ

    View Slide

  92. ΢Σϒϒϥ΢βͷجຊߏ੒
    http://www.slideshare.net/quangntta/web-browser-architecture-49196378
    +BWB4DSJQUͷ࣮ߦ݁ՌΛ
    3FOEFSJOH&OHJOFʹ౉͢

    View Slide

  93. ΢Σϒϒϥ΢βͷجຊߏ੒
    http://www.slideshare.net/quangntta/web-browser-architecture-49196378
    ը໘ʹදࣔ͢ΔͨΊͷ
    ϨΠΞ΢τΛߏங͢Δ

    View Slide

  94. ΢Σϒϒϥ΢βͷجຊߏ੒
    http://www.slideshare.net/quangntta/web-browser-architecture-49196378
    ΍ΓऔΓΛ஥հ

    View Slide

  95. ΢Σϒϒϥ΢βͷجຊߏ੒
    http://www.slideshare.net/quangntta/web-browser-architecture-49196378
    σΟεϓϨΠʹ
    දࣔ͢Δ

    View Slide

  96. $44ͷ
    USBOTGPSNͰ
    มߋͨ͠৔߹

    View Slide

  97. ΢Σϒϒϥ΢βͷجຊߏ੒
    http://www.slideshare.net/quangntta/web-browser-architecture-49196378
    ը໘ʹදࣔ͢ΔͨΊͷ
    ϨΠΞ΢τΛߏங͢Δ

    View Slide

  98. ΢Σϒϒϥ΢βͷجຊߏ੒
    http://www.slideshare.net/quangntta/web-browser-architecture-49196378
    ΍ΓऔΓΛ஥հ

    View Slide

  99. ΢Σϒϒϥ΢βͷجຊߏ੒
    http://www.slideshare.net/quangntta/web-browser-architecture-49196378
    σΟεϓϨΠʹ
    දࣔ͢Δ

    View Slide

  100. ΢Σϒϒϥ΢βͷجຊߏ੒
    http://www.slideshare.net/quangntta/web-browser-architecture-49196378
    ը໘ʹදࣔ͢ΔͨΊͷ
    ϨΠΞ΢τΛߏங͢Δ

    View Slide

  101. ΢Σϒϒϥ΢βͷجຊߏ੒
    http://www.slideshare.net/quangntta/web-browser-architecture-49196378
    ΍ΓऔΓΛ஥հ

    View Slide

  102. ΢Σϒϒϥ΢βͷجຊߏ੒
    http://www.slideshare.net/quangntta/web-browser-architecture-49196378
    σΟεϓϨΠʹ
    දࣔ͢Δ

    View Slide

  103. ͭ·Γ
    • ҐஔͳͲ͚ͩΛಈ͔͢৔߹͸ CSS transform
    Λར༻͢Δͱ Composite Layers͚ͩͳͷͰૉ
    ૣ͘ऴྃ͢Δ
    • ͞Βʹ஗͍ΞχϝʔγϣϯΛੜΈग़͢ݪҼ͕
    ͋Δ

    View Slide

  104. JSͰΞχϝʔγϣϯͤ͞Δͱ…
    • JSΠϯλʔϓϦλ͕JavaScriptΛ࣮ߦ
    • DOMπϦʔΛมߋ
    • ϨϯμϦϯάΤϯδϯ͕ελΠϧΛ࠶ܭࢉ
    • ϨΠΞ΢τΛੜ੒
    • ϨΠϠʔ͝ͱʹඳըΛੜ੒
    • ϨΠϠʔΛ߹੒͠࠷ऴతͳϨϯμϦϯά݁ՌΛੜ੒
    &WBMVBUF
    $BMDVSBUF
    4UZMFT
    -BZPVU BLBSFqPX

    1BJOU
    $PNQPTJUF-BZFST

    View Slide

  105. JSͰΞχϝʔγϣϯͤ͞Δͱ…
    • JSΠϯλʔϓϦλ͕JavaScriptΛ࣮ߦ
    • DOMπϦʔΛมߋ
    • ϨϯμϦϯάΤϯδϯ͕ελΠϧΛ࠶ܭࢉ
    • ϨΠΞ΢τΛੜ੒
    • ϨΠϠʔ͝ͱʹඳըΛੜ੒
    • ϨΠϠʔΛ߹੒͠࠷ऴతͳϨϯμϦϯά݁ՌΛੜ੒
    &WBMVBUF
    $BMDVSBUF
    4UZMFT
    -BZPVU BLBSFqPX

    1BJOU
    $PNQPTJUF-BZFST
    ͜ͷͱ͖'PSDFE4ZODISPOPVT-BZPVUͱݺ͹ΕΔϨΠΞ΢τܭࢉॲཧ͕
    ૸Δͱ+4ͷ࣮ߦΛϒϩοΫͯ͠ϨΠΞ΢τܭࢉΛߦ͏ɻ
    ྫFMFNPGGTFU-FGUFMFNHFU$MJFOU3FDUT
    FMFNDMJFOU8JEUI
    ͜ΕΒͷ஋Λਖ਼͘͠஌Δʹ͸ݱࡏͷϨΠΞ΢τʹ͍ͭͯϨϯμϦϯάΤϯδϯ͕
    ܭࢉΛߦ͏ඞཁ͕͋ΔͷͰɺ͜ΕΒͷ஋Λ༻͍ͨ+4ΞχϝʔγϣϯΛهड़͢Δͱ
    ࣮ࡍͷϨϯμϦϯάͱ͸ผͰϨΠΞ΢τܭࢉ͕ਵ࣮࣌ߦ͞ΕΔͨΊ
    ඇৗʹ஗͘ͳͬͯ͠·͏

    View Slide

  106. JSͰΞχϝʔγϣϯͤ͞Δͱ…
    • JSΠϯλʔϓϦλ͕JavaScriptΛ࣮ߦ
    • DOMπϦʔΛมߋ (include Forced Synchronous Layout)
    • ϨϯμϦϯάΤϯδϯ͕ελΠϧΛ࠶ܭࢉ
    • ϨΠΞ΢τΛੜ੒
    • ϨΠϠʔ͝ͱʹඳըΛੜ੒
    • ϨΠϠʔΛ߹੒͠࠷ऴతͳϨϯμϦϯά݁ՌΛੜ੒

    View Slide

  107. JSͰΞχϝʔγϣϯͤ͞Δͱ…
    • JSΠϯλʔϓϦλ͕JavaScriptΛ࣮ߦ
    • DOMπϦʔΛมߋ (include Forced Synchronous Layout)
    w ϨΠΞ΢τΛੜ੒
    w ϨΠϠʔ͝ͱʹඳըΛੜ੒
    w ϨΠϠʔΛ߹੒͠࠷ऴతͳϨϯμϦϯά݁ՌΛੜ੒
    w ϨϯμϦϯά݁Ռ͔Β஋Λฦ٫
    • ϨϯμϦϯάΤϯδϯ͕ελΠϧΛ࠶ܭࢉ
    • ϨΠΞ΢τΛੜ੒
    • ϨΠϠʔ͝ͱʹඳըΛੜ੒
    • ϨΠϠʔΛ߹੒͠࠷ऴతͳϨϯμϦϯά݁ՌΛੜ੒

    View Slide

  108. DEMO
    https://googlesamples.github.io/web-fundamentals/
    tools/chrome-devtools/rendering-tools/forcedsync.html

    View Slide

  109. ͜͜·Ͱ·ͱΊ

    View Slide

  110. Question
    • ΢Σϒϒϥ΢βͱݴ͑͹ʁ
    • ΢Σϒϒϥ΢β͸ԿΛ͢Δ΋ͷʁ
    • ChromeͱFirefoxԿ͕ҧ͏ͷʁ
    • ChromeͱOpera͸Կ͕ҧ͏ʁ

    View Slide

  111. Question
    • ΢Σϒϒϥ΢βͱݴ͑͹ʁ
    • ΢Σϒϒϥ΢β͸ԿΛ͢Δ΋ͷʁ
    • ChromeͱFirefoxԿ͕ҧ͏ͷʁ
    • ChromeͱOpera͸Կ͕ҧ͏ʁ
    $ISPNF 'JSFGPY *&
    0QFSB &EHFʜ

    View Slide

  112. Chrome Opera Vivaldi
    Safari
    Firefox
    Internet Explorer
    Edge

    View Slide

  113. Question
    • ΢Σϒϒϥ΢βͱݴ͑͹ʁ
    • ΢Σϒϒϥ΢β͸ԿΛ͢Δ΋ͷʁ
    • ChromeͱFirefoxԿ͕ҧ͏ͷʁ
    • ChromeͱOpera͸Կ͕ҧ͏ʁ
    )5.-$44+4ͳͲΛ
    ཧղɺ࣮ߦɺදࣔΛߦ͏ɻ
    ·ͨͦΕΒͷͨΊʹඞཁͳ
    ௨৴ͳͲͷػೳ΋͋Δɻ

    View Slide

  114. ΢Σϒϒϥ΢βͷجຊߏ੒
    http://www.slideshare.net/quangntta/web-browser-architecture-49196378

    View Slide

  115. Question
    • ΢Σϒϒϥ΢βͱݴ͑͹ʁ
    • ΢Σϒϒϥ΢β͸ԿΛ͢Δ΋ͷʁ
    • ChromeͱFirefoxԿ͕ҧ͏ͷʁ
    • ChromeͱOpera͸Կ͕ҧ͏ʁ
    ಺෦ར༻͍ͯ͠Δ
    Τϯδϯ͕ҟͳΔ

    View Slide

  116. Chrome
    Safari
    Firefox
    Internet Explorer
    Edge
    #MJOL
    7
    8FCLJU
    +BWB4DSJQU
    $PSF
    5SJEFOU
    $IBLSB
    (FDLP
    4QJEFS
    .POLFZ
    &EHF)5.-
    $IBLSB
    ϨϯμϦϯάΤϯδϯ
    +4ΠϯλʔϓϦλ

    View Slide

  117. Question
    • ΢Σϒϒϥ΢βͱݴ͑͹ʁ
    • ΢Σϒϒϥ΢β͸ԿΛ͢Δ΋ͷʁ
    • ChromeͱFirefoxԿ͕ҧ͏ͷʁ
    • ChromeͱOpera͸Կ͕ҧ͏ʁ
    ྆ํಉ͡$ISPNJVNΛ
    ϕʔεʹར༻͍ͯ͠Δ͕ɺ
    6*ͳͲ͕ҟͳΔ

    View Slide

  118. Chrome Opera Vivaldi
    #MJOL
    7
    #MJOL
    7
    #MJOL
    7
    ڞ௨
    ҟͳΔ

    View Slide

  119. Chrome Opera Vivaldi
    #MJOL
    7
    #MJOL
    7
    #MJOL
    7
    ಠࣗίϯϙʔωϯτͱͯ͠
    αΠυόʔ΍
    4QFFE%JBMͳͲ

    View Slide

  120. Chrome Opera Vivaldi
    #MJOL
    7
    #MJOL
    7
    #MJOL
    7
    αΠυόʔ
    ΫΠοΫίϚϯυ
    εςʔλεόʔ ը໘Լ෦

    View Slide

  121. JSͰΞχϝʔγϣϯͤ͞Δͱ…
    • JSΠϯλʔϓϦλ͕JavaScriptΛ࣮ߦ
    • DOMπϦʔΛมߋ
    • ϨϯμϦϯάΤϯδϯ͕ελΠϧΛ࠶ܭࢉ
    • ϨΠΞ΢τΛੜ੒
    • ϨΠϠʔ͝ͱʹඳըΛੜ੒
    • ϨΠϠʔΛ߹੒͠࠷ऴతͳϨϯμϦϯά݁ՌΛੜ੒
    &WBMVBUF
    $BMDVSBUF
    4UZMFT
    -BZPVU BLBSFqPX

    1BJOU
    $PNQPTJUF-BZFST

    View Slide

  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

    View Slide

  123. ͓·͚
    ※͔͜͜Βઌ͸͕࣌ؒ༨͍ͬͯΕ͹஻Δ

    View Slide

  124. ͓·͚τʔΫςʔϚू
    • Bug͔ͳʁͱࢥͬͨΒ
    • ϒϥ΢β֦ுʹ͍ͭͯ
    • ϒϥ΢βؔ࿈৘ใΩϟονΞοϓ
    • ඪ४Խͱϒϥ΢βϕϯμʔ


    View Slide