Upgrade to Pro — share decks privately, control downloads, hide ads and more …

20190122_vdom.pdf

26a00012c475c2380cd98cfe5e2e70ef?s=47 ozaki25
January 22, 2019

 20190122_vdom.pdf

26a00012c475c2380cd98cfe5e2e70ef?s=128

ozaki25

January 22, 2019
Tweet

More Decks by ozaki25

Other Decks in Technology

Transcript

  1. Ծ૝%0.ֵ໋ 

  2. ໨࣍  ࠓճ࿩͢಺༰  Ծ૝%0.͕ඞཁͱ͞ΕΔഎܠͱྺ࢙  Ծ૝%0.ͷ࢓૊Έ  ·ͱΊ 

    
  3. ࠓճ࿩͢಺༰  

  4. ࠓճ࿩͢಺༰ w 8&# %#13&447PMͷʮԾ૝%0. ֵ໋ʯͱ͍͏ίϥϜ͕ݩωλͰ͢ w ϕʔε͸্هίϥϜͰ͕͢ݴٴ͞Εͯͳ͍෦ ෼ʹؔͯ͠ಠࣗͷݟղ΋ଟؚ͘Έ·͢ w ΦϦδφϧ͕ಡΈ͚ͨΕ͹ିͤΔͷͰ੠ֻ

    ͚͍ͯͩ͘͞   https://gihyo.jp/magazine/wdpress/archive/2018/vol106
  5. Ծ૝%0.͕ඞཁͱ͞ΕΔഎܠͱྺ࢙  

  6. %0.ͷྺ࢙ᶃ ).5-ͷ஀ੜ ೥ࠒ  w ΋ͱ΋ͱ͸ݚڀऀ޲͚ͷ࿦จΛॻͨ͘Ίʹ࢖ΘΕ͍ͯͨ w λΠτϧ͕͋Γ UJUMF ɺݟग़͕͋͠Γ

    I I ɺύϥά ϥϑ͕͋Γ Q  w Πϯλʔωοτͷൃలʹ൐ͬͯ༻్͕޿͕͍ͬͯ͘  
  7. %0.ͷྺ࢙ᶄ %0. %PDVNFOU0CKFDU.PEFM ͷ஀ੜ ೥  w %0.ͱ͸ w )5.-Λಈతʹ੍ޚ͢Δ"1*ͷ࢓༷

    w ඪ४Խஂମ8$ʹΑͬͯࡦఆ͞ΕΔ  
  8. %0.ͷྺ࢙ᶄ %0. %PDVNFOU0CKFDU.PEFM ͷ஀ੜ ೥  w %0.ͱ͸ w )5.-Λಈతʹ੍ޚ͢Δ"1*ͷ࢓༷

    w ඪ४Խஂମ8$ʹΑͬͯࡦఆ͞ΕΔ +BWB4DSJQUʹΑͬͯ)5.-Λಈతʹ੍ޚͰ͖ΔΑ͏ʹͳΔ   ಈతʹ੍ޚͰ͖ΔΑ͏ʹͳΔ  ϖʔδભҠͤͣʹ)5.-Λॻ׵͑ΒΕΔ
  9. Ծ૝%0.ొ৔લ໷ᶃ "KBYֵ໋ ೥ࠒ  w (PPHMF.BQTͷֵ৽ੑ w ΞΫγϣϯʹԠͯ͡ಈతʹαʔό΁ΞΫηε ͦͷϨεϙϯεʹԠͯ͡ϖʔδΛॻ͖׵͑Δ w

    K2VFSZͷ࣌୅ w ϒϥ΢βؒͷඇޓ׵Λٵऩͯ͘͠ΕΔ w ౰࣌͸ϒϥ΢βؒͷޓ׵ੑ͕๡͔ͬͨ͠  
  10. Ծ૝%0.ొ৔લ໷ᶄ 8FCٕज़ͷधཁͷߴ·Γ w J1IPOFͷ'MBTIඇ౥ࡌܾఆ ೥ ˞ w ϦονϝσΟΞͷ࣮૷धཁ͕+BWB4DSJQUʹूத w /PEFKTOQNΤίγεςϜͷ੒ख़

    ೥ࠒʙ  w +BWB4DSJQUͷݴޠతͳශऑ͞ΛΧόʔ w $P⒎FF4DSJQU #SPXTFSJGZ   ※ https://www.apple.com/hotnews/thoughts-on-flash/
  11. ·ͱΊ w %0.ʹΑͬͯ)5.-͸ಈతͳ΋ͷʹ w 'MBTIͷ୅ସͱͯ͠+BWB4DSJQU΁ͷཁٻ͕ෳࡶԽ w /PEFKTOQNʹΑΔΤίγεςϜͷ੒ख़ͱෳࡶԽ  

  12. Ծ૝%0.͸ԿΛղܾ͢Δͷ͔  

  13. ΫϥΠΞϯταΠυٕज़ͷ՝୊ w K2VFSZͷΑ͏ͳԾ૝%0.Ͱͳ͍ैདྷͷٕज़ͷ՝୊ w ن໛͕େ͖͘ෳࡶԽ͢Δͱϝϯςࠔ೉Ͱٕज़తෛ࠴ͱͳΔ
 ෳࡶͳཁٻʹ΋଱͑͏ΔΞʔΩςΫνϟ͕ඞཁ  

  14. ೖग़ྗͷΞτϛοΫੑ αʔόαΠυͷ৔߹ w ΞτϛοΫੑ͕͋Δ w ϦΫΤετϨεϙϯε㲈8FCϖʔδ w ಉ͡63-ʹΞΫηε͢Ε͹
 ಉ͡ϖʔδ͕දࣔ͞ΕΔ 

     αʔό Ϸμεφϕ(URL) ϹφϪЀφ(HTML) ϒϥ΢β ϹЀύϷЀν WebϧЄυ
  15. ೖग़ྗͷΞτϛοΫੑ ΫϥΠΞϯταΠυͷ৔߹ w ΞτϛοΫੑ͕ͳ͍ w ϦΫΤετϨεϙϯε㱠8FCϖʔδ w αʔόαΠυͰੜ੒ͨ͠)5.-͸ॳظঢ় ଶʹ͗͢ͳ͍ w

    %0.ૢ࡞ʹΑΓ͋ΒΏΔঢ়ଶ΁ॻ͖׵ ͑ΒΕಘΔ     αʔό Ϸμεφϕ(URL) ϹφϪЀφ(HTML) ϒϥ΢β ϹЀύϷЀν WebϧЄυ DOM 䨗䟵͞ DOM 䨗䟵͞ WebϧЄυ WebϧЄυ
  16. ΫϥΠΞϯταΠυʹ΋ΞτϛοΫੑΛ "TJT w ΫϥΠΞϯταΠυ͸༷ʑͳཁ ҼͰঢ়ଶ͕มΘΔ w ϘλϯΛΫϦοΫͨ͠Βʙɺ "KBYͰσʔλΛऔಘͨ͠Βʙ w ঢ়ଶ͕มΘΔ౓ʹ%0.ͷ্ॻ

    ͖͕ܧ͗଍͞Ε͍ͯ͘   5PCF w ঢ়ଶ͕ߋ৽͞ΕΔ౓ʹঢ়ଶʹଈ ͨ͠Ұҙͳ7JFXΛग़ྗ͍ͨ͠ w ʮೖྗʹج͍ͮͨঢ়ଶܾఆͷΞ τϛοΫੑʯΛखʹೖΕ͍ͨ
  17. ΫϥΠΞϯταΠυͷΞτϛοΫੑ༗ແͷྫ ϘλϯΛΫϦοΫ͢Δͱཁૉ͕૿͑Δαϯϓϧ   ௥Ճ Hello ௥Ճ Hello Hello ΫϦοΫ

    μϷϐμͫ΢͵ͩ;Ψ䭥ᎣͭͼᥝᔰΨ᭄ےͯΡ ίϕϬϐμ௔͢΀͚ ίϕϬϐμ௔͘͢Ρ ௥Ճ Hello ௥Ճ Hello Hello ΫϦοΫ \DPVOU^ ˣ \DPVOU^ μϷϐμͫ΢͵Οᇫ䙪ΨๅෛͯΡ ᇫ䙪Ψز΁ኮᶎΨ䯤塈ͭൈኮͯΡ ᇫ䙪
  18. ΫϥΠΞϯταΠυͷΞτϛοΫੑ༗ແͷྫ ϘλϯΛΫϦοΫ͢Δͱཁૉ͕૿͑Δαϯϓϧ   ௥Ճ Hello ௥Ճ Hello Hello ΫϦοΫ

    μϷϐμͫ΢͵ͩ;Ψ䭥ᎣͭͼᥝᔰΨ᭄ےͯΡ ίϕϬϐμ௔͢΀͚ ίϕϬϐμ௔͘͢Ρ ௥Ճ Hello ௥Ճ Hello Hello ΫϦοΫ \DPVOU^ ˣ \DPVOU^ μϷϐμͫ΢͵Οᇫ䙪ΨๅෛͯΡ ᇫ䙪Ψز΁ኮᶎΨ䯤塈ͭൈኮͯΡ ᇫ䙪 ඳը಺༰ͷܧ͗଍͠Ͱ͸ͳ͘ ঢ়ଶΛݩʹશମΛ࠶ߏங͢Δ
  19. ΫϥΠΞϯταΠυͷΞτϛοΫੑ༗ແͷྫ ϘλϯΛΫϦοΫ͢Δͱཁૉ͕૿͑Δαϯϓϧ   ௥Ճ Hello ௥Ճ Hello Hello ΫϦοΫ

    μϷϐμͫ΢͵ΟᥝᔰΨ᭄ےͯΡ ίϕϬϐμ௔͢΀͚ ίϕϬϐμ௔͘͢Ρ ௥Ճ Hello ௥Ճ Hello Hello ΫϦοΫ \DPVOU^ ˣ \DPVOU^ μϷϐμͫ΢͵Οᇫ䙪ΨๅෛͯΡ ᇫ䙪Ψز΁ኮᶎΨ䯤塈ͭൈኮͯΡ ঢ়ଶΛ֬ఆ͢Δεςοϓͱ )5.-Λߋ৽͢Δεςοϓ͕ ໌֬ʹ෼཭͞ΕΔ ඳը಺༰ͷܧ͗଍͠Ͱ͸ͳ͘ ঢ়ଶΛݩʹશମΛ࠶ߏங͢Δ
  20. ΫϥΠΞϯταΠυͷΞτϛοΫੑ༗ແͷྫ ϘλϯΛΫϦοΫ͢Δͱཁૉ͕૿͑Δαϯϓϧ   ௥Ճ Hello ௥Ճ Hello Hello ΫϦοΫ

    μϷϐμͫ΢͵ΟᥝᔰΨ᭄ےͯΡ ίϕϬϐμ௔͢΀͚ ίϕϬϐμ௔͘͢Ρ ௥Ճ Hello ௥Ճ Hello Hello ΫϦοΫ \DPVOU^ ˣ \DPVOU^ μϷϐμͫ΢͵Οᇫ䙪ΨๅෛͯΡ ᇫ䙪Ψز΁ኮᶎΨ䯤塈ͭൈኮͯΡ ͜ΕΛ࣮ݱ͢ΔͨΊʹ ͔ܽͤͳ͍ͳٕज़͕Ծ૝%0.
  21. ΞτϛοΫੑ͕͋ΔͱԿ͕͍͍ͷ͔ ෼ۀͰ͖Δ w ϓϩάϥϚʔͷؔ৺͸ঢ়ଶ؅ཧ w σβΠφʔͷؔ৺͸ೖྗΛݩʹͨ͠ग़ྗ ϝϯςφϏϦςΟ޲্ w 7JFXͷ࠶ݱੑ͕୲อ͞ΕΔͷͰ؅ཧ͠΍͍͢ w

    7JFX͕੾Γ཭͞ΕΔͷͰঢ়ଶ؅ཧͷςετ͕͠΍͍͢  
  22. Ծ૝%0.ͷ࢓૊Έ  

  23. ͳͥԾ૝%0.͕ඞཁ͔ w ΞτϛοΫੑ͕͋ΔΞʔΩςΫνϟ w ঢ়ଶΛ΋ͱʹը໘શମΛ࠶ߏங͢Δ w ը໘શମͷॻ͖׵͑͸ίετ͕ߴ͘ϢʔβϏϦςΟ΋ଛͳ͏
 Ծ૝%0.Λ࢖͏͜ͱͰ͜ͷ໰୊͕ղফ͞ΕΔ  

  24. Ծ૝%0.ͱ3FBM%0. 3FBM%0. w ը໘ʹඳը͞Ε͍ͯΔ%0.π Ϧʔͷ͜ͱ   Ծ૝%0. ڱٛ 

    w 3FBM%0.ͱͰରԠ͢Δߏ ଄ମͰϝϞϦ্ʹอ͍࣋ͯ͠Δ 9 : ; 9 : ;
  25. Ծ૝%0.ͷΞϧΰϦζϜ RealDOM 㫪మDOM \DPVOU^ w ϘλϯΛΫϦοΫ͢Δͱཁૉ͕૿͑Δαϯϓϧ CVUUPO )FMMP EJW CVUUPO

    )FMMP EJW
  26. Ծ૝%0.ͷΞϧΰϦζϜ RealDOM 㫪మDOM \DPVOU^ w ϘλϯΛΫϦοΫ͢Δͱཁૉ͕૿͑Δαϯϓϧ CVUUPO )FMMP EJW CVUUPO

    )FMMP EJW ΫϦοΫ
  27. Ծ૝%0.ͷΞϧΰϦζϜ RealDOM 㫪మDOM \DPVOU^ ˣ \DPVOU^ w ϘλϯΛΫϦοΫ͢Δͱཁૉ͕૿͑Δαϯϓϧ CVUUPO )FMMP

    EJW CVUUPO )FMMP EJW ΫϦοΫ ঢ়ଶΛߋ৽
  28. Ծ૝%0.ͷΞϧΰϦζϜ RealDOM 㫪మDOM \DPVOU^ w ϘλϯΛΫϦοΫ͢Δͱཁૉ͕૿͑Δαϯϓϧ CVUUPO )FMMP EJW CVUUPO

    )FMMP EJW before CVUUPO )FMMP EJW )FMMP ߋ৽ޙͷঢ়ଶΛݩʹ Ծ૝%0.Λ࠶ߏங after
  29. Ծ૝%0.ͷΞϧΰϦζϜ RealDOM 㫪మDOM \DPVOU^ w ϘλϯΛΫϦοΫ͢Δͱཁૉ͕૿͑Δαϯϓϧ CVUUPO )FMMP EJW CVUUPO

    )FMMP EJW before CVUUPO )FMMP EJW )FMMP after ࠩ෼Λൺֱ͢Δ
  30. Ծ૝%0.ͷΞϧΰϦζϜ RealDOM 㫪మDOM \DPVOU^ w ϘλϯΛΫϦοΫ͢Δͱཁૉ͕૿͑Δαϯϓϧ CVUUPO )FMMP EJW before

    CVUUPO )FMMP EJW )FMMP after ࠩ෼Λ3FBM%0.ʹ ൓өͤ͞Δ CVUUPO )FMMP EJW )FMMP
  31. Ծ૝%0.ͷΞϧΰϦζϜ RealDOM 㫪మDOM \DPVOU^ w ϘλϯΛΫϦοΫ͢Δͱཁૉ͕૿͑Δαϯϓϧ CVUUPO )FMMP EJW )FMMP

    CVUUPO )FMMP EJW )FMMP ߋ৽׬ྃ
  32. Ծ૝%0.ͷΞϧΰϦζϜ RealDOM 㫪మDOM \DPVOU^ w ϘλϯΛΫϦοΫ͢Δͱཁૉ͕૿͑Δαϯϓϧ CVUUPO )FMMP EJW )FMMP

    CVUUPO )FMMP EJW )FMMP 3FBM%0.ͷߋ৽͸࠷খݶͳͷͰॻ׵͑ͷίετ΋࠷খݶ
  33. Ծ૝%0.Λ༻͍ͨϑϨʔϜϫʔΫ   w 3FBDU͕ઌۦ͚తͳϑϨʔϜϫʔΫͰ͋Δ w ࠷ۙͷ41"ϑϨʔϜϫʔΫ͸ͲΕ΋Ծ૝%0.Λ࠾༻͍ͯ͠Δ w ˞Ծ૝%0.ͷΞϧΰϦζϜͷ͜ͱΛ୯ʹԾ૝%0. ޿ٛ

    ͱ͍͏ ͜ͱ΋͋Δ
  34. ·ͱΊ  

  35. ·ͱΊ w ΫϥΠΞϯταΠυ΁ͷཁٻ͸ෳࡶԽ͖͍ͯͯ͠Δ w 'MBTIͷ୅ସͱͯ͠ͷ+BWB4DSJQU w ෳࡶͳཁٻΛܧଓతʹຬ͍ͨͯ͘͠ඞཁ͕͋Δ w ΞτϛοΫੑͷ͋ΔΞʔΩςΫνϟ͕ඞཁ w

    Ծ૝%0.Λ༻͍Δ͜ͱͰ͜ΕΒͷཁٻΛຬͨ͢͜ͱ͕Ͱ͖Δ  
  36. ิ଍ w ίϥϜ͸શষͰ͕ͨ͠ࠓճ࿩ͨ͠ͷ͸ষʙষͰ͢ w ষʹ͸ΫϥΠΞϯταΠυ.7$͔Β'MVY΁ͷมભͷ࿩ w ষʹ͸8FCҎ֎΁ͷԾ૝%0.ͷద༻ͷ࿩͕ॻ͍ͯ͋Γ·͢  

  37. ͋Γ͕ͱ͏͍͟͝·ͨ͠