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

B81a8fa35a79d31881ca3d348f3e894a?s=47 pastak
February 17, 2017

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

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

B81a8fa35a79d31881ca3d348f3e894a?s=128

pastak

February 17, 2017
Tweet

Transcript

  1. ஌͓͖͍ͬͯͨϒϥ΢β ʹ͍ͭͯͷجૅೖ໳ Pasta-K pasta0915@gmail.com at Supporterz Kyoto

  2. @pastakɹ

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

    / React • Ruby on Rails • Browser Extension
  4. None
  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͸Կ͕ҧ͏ʁ

  14. None
  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Λ։ൃ ς ΟϜɾόʔφʔζɾ Ϧʔ 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/
  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/ ΢Σϒϒϥ΢β ͷྺ࢙
  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͔Β 8FCLJU7΁
  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 BLBSFqPX 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 BLBSFqPX 1BJOU $PNQPTJUF-BZFST
  105. JSͰΞχϝʔγϣϯͤ͞Δͱ… • JSΠϯλʔϓϦλ͕JavaScriptΛ࣮ߦ • DOMπϦʔΛมߋ • ϨϯμϦϯάΤϯδϯ͕ελΠϧΛ࠶ܭࢉ • ϨΠΞ΢τΛੜ੒ •

    ϨΠϠʔ͝ͱʹඳըΛੜ੒ • ϨΠϠʔΛ߹੒͠࠷ऴతͳϨϯμϦϯά݁ՌΛੜ੒ &WBMVBUF $BMDVSBUF 4UZMFT -BZPVU BLBSFqPX 1BJOU $PNQPTJUF-BZFST ͜ͷͱ͖'PSDFE4ZODISPOPVT-BZPVUͱݺ͹ΕΔϨΠΞ΢τܭࢉॲཧ͕ ૸Δͱ+4ͷ࣮ߦΛϒϩοΫͯ͠ϨΠΞ΢τܭࢉΛߦ͏ɻ ྫFMFNPGGTFU-FGUFMFNHFU$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 BLBSFqPX 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͔ͳʁͱࢥͬͨΒ • ϒϥ΢β֦ுʹ͍ͭͯ • ϒϥ΢βؔ࿈৘ใΩϟονΞοϓ • ඪ४Խͱϒϥ΢βϕϯμʔ •