৘ใॲཧֶձ‫ڀݚ‬ใࠂ
IPSJ SIG Technical ReportWeb Ӿཡ࣌ʹ͓͚Δ JavaScript ϥΠϒϥϦ࢖༻ʹΑΔ
෭࡞༻ͷௐࠪࢁຊ ক߂1,a)㤟ຊ ਅ༎1,b)ೇຊ ਅೋ1,c)֓ཁɿJavaScript ʹ͸ jQuery Λ͸͡Ίͱ͢Δ༷ʑͳϥΠϒϥϦ͕ଘࡏ͍ͯ͠Δɽ͜ΕΒΛར༻͢Δ͜ͱͰɼ։ൃऀ͸ίʔυͷՄಡੑ΍࠶ར༻ੑͷ޲্ɼϒϥ΢β‫ॲ׵ޓ‬ཧͷলུͱ͍ͬͨར఺͕ಘΒΕΔɽͦͷҰํͰɼϢʔβʹରͯ͠͸࣮ߦ࣌ؒ΍ωοτϫʔΫ௨৴ྔͷ૿ՃͳͲͷ෭࡞༻͕ൃੜ͢ΔɽຊߘͰ͸ jQueryΛ୊ࡐͱͯ͠ɼJavaScript ϥΠϒϥϦ࢖༻࣌ʹൃੜ͢Δ࣮ߦύϑΥʔϚϯε΁ͷ෭࡞༻ʹ͍ͭͯɼAPI ͷ࣮ߦ࣌ؒͷ‫͔఺؍‬ΒௐࠪΛߦ͏ɽௐࠪͰ͸ɼ·ͣ jQuery ͷ API ʹ͍ͭͯɼग़‫ݱ‬ස౓ͷߴ͍࢖༻ํ๏Λௐ΂Δɽͦͯ͠ɼͦΕΒͷ࢖༻ํ๏ʹରͯ͠ɼಉ͡ಈ࡞Λ͢Δ࣮૷Λ JavaScript ωΠςΟϒͰ࡞੒࣮ͯ͠ߦ
࣌ؒͷมԽΛ‫ܭ‬ଌ͢Δɽ·ͨɼௐࠪͰಘΒΕͨ݁ՌΛ΋ͱʹߟ࡯Λߦ͏ɽΩʔϫʔυɿJavaScript ϥΠϒϥϦɼ෭࡞༻ɼjQueryɼAPIɼ࣮ߦ࣌ؒ1. ͸͡ΊʹณԽ͢Δ͜ͱʹ͋Δɽྫ͑͹ɼ͋Δ HTML ཁૉʢelementʣͷ എ ‫ ܠ‬৭ Λ ੺ ʹ ม ߋ ͢ Δ ࡍ ͸ ɼJavaScript ω Π ς Ο ϒJavaScript ͸ Web ϒϥ΢β্Ͱಈ࡞͢ΔΫϥΠΞϯτͷ‫ه‬๏Ͱ͸ element.style.background-color="red"ͱαΠυ‫ͯ͠ͱޠݴ‬ɼඞཁෆՄܽͳٕज़ͱͳΓͭͭ͋ΔɽҰ͍͏୅ೖࣜͷ‫هͰܗ‬ड़͢Δඞཁ͕͋Δ͕ɼjQuery Ͱ͸ํͰɼͦͷ‫ه‬๏΍จ๏ʹରͯ͠Ұఆͷ൷൑΋ଘࡏ͓ͯ͠Γɼ

element.css("background-color", "red") ͱ͍͏ηοܾͯ͠։ൃ͕༰қͳ‫͋Ͱޠݴ‬Δͱ͸͍͑ͳ͍ɽ۩ମతͳ൷λʔ‫ ܥ‬API Λ‫ͼݺ‬ग़͢‫هͰܗ‬ड़ՄೳͱͳΔɽ͞Βʹ͜ͷ൑ͱͯ͠͸ɼ‫ܕ‬ͷൺֱ͕௚‫ײ‬తͰͳ͘όάͷཁҼʹͳΓ΍

css(key, value) ͷதͰ͸ɼม਺ key ʹରͯ͠ɼϒϥ΢͍͢ [1]ɼ໊લۭؒͷ‫ػ‬ೳ͕ͳ͘άϩʔόϧΦϒδΣΫτΛ

β͝ͱͷද‫ݱ‬ͷҧ͍ʢϕϯμϓϨϑΟοΫεʣΛ‫ٵ‬ऩ͢Δଟ༻͕ͪ͠Ͱ͋Δ [2]ɼෳ਺ͷίʔϧόοΫॲཧ͕ೖΕࢠʹॲཧ͕ߦΘΕ͓ͯΓɼ༰қʹϒϥ΢β‫ॲ׵ޓ‬ཧ͕࣮‫͖Ͱݱ‬ͳΓՄಡੑΛ௿Լͤ͞ΔίʔϧόοΫ஍ࠈ [3] ͳͲ͕‫͛ڍ‬Δɽۙ೥Ͱ͸ɼ͜ͷΑ͏ͳϥΠϒϥϦҎ֎ʹ΋ɼMVC ϑΒΕΔɽ͞ΒʹɼJavaScript ͷॲཧ΍ HTML/CSS ͷඳըϨʔϜϫʔΫ [8], [9] ΍ɼJavaScript Λੜ੒͢Δ୅ସ‫ޠݴ‬͕ϒϥ΢β͝ͱʹҟͳΔͱ͍͏Ϋϩεϒϥ΢β໰୊ [4], [5]ʢaltJSʣͳͲ΋ొ৔͓ͯ͠ΓɼWeb ͷ։ൃऀΛࢧԉ͢Δٕ͸ɼWeb ͷ։ൃʹ͓͚Δॏେͳোนͱͳ͍ͬͯΔɽ

ज़͕ਁಁͭͭ͋͠Δɽ͜ΕΒͷ໰୊ʹର͠ɼ༷ʑͳ JavaScript ϥΠϒϥϦ΍ϑ͜ͷΑ͏ʹɼJavaScript ͷϥΠϒϥϦ΍ϑϨʔϜϫʔϨʔϜϫʔΫ͕ఏ‫͞ڙ‬ΕΔΑ͏ʹͳͬͨɽதͰ΋ jQuery[6]Ϋ͸։ൃऀʹ༷ʑͳԸ‫ܙ‬Λ΋ͨΒ͢ҰํͰɼWeb ͷར༻͸ Web શମͷ಺ɼ໿ 72%Ͱར༻͞Ε͍ͯΔͱ͍͏ใࠂ΋͋

ऀʢ͋Δ͍͸ϒϥ΢βͷ࣮ߦ‫ڥ؀‬ʣʹରͯ͠͸Ұఆͷѱ

Γ [7]ɼߴ͍ਓ‫ؾ‬Λ࣋ͭϥΠϒϥϦͰ͋Δͱ͍͑ΔɽjQueryӨ‫ڹ‬Λ‫͢΅ٴ‬ɽྫ͑͹ɼϥΠϒϥϦಡΈࠐΈ࣌ʹ͸Ұఆ

͸ “write less, do more” ͱ͍͏ඪ‫ޠ‬Λ‫͓ͯ͛ܝ‬Γɼจࣈ௨ΓͷωοτϫʔΫ௨৴͕ൃੜ͠ɼ͞ΒʹಡΈࠐΈ‫ʹޙ‬͸ JITWeb ։ൃऀʹରͯ͠গͳ͍‫ه‬ड़Ͱଟ͘ͷॲཧΛ࣮‫͢ݱ‬Δ͜

ʢJust-in-TimeʣίϯύΠϥʹΑΔॲཧ͕ൃੜ͢ΔɽΑͬͱ͕ՄೳͰ͋Δɽͦͷ‫ج‬ຊతͳΞΠσΞ͸ɼJavaScript ͰଟͯɼϥΠϒϥϦʹ‫͘ڧ‬ґଘͨ͠ Web ϖʔδͰ͸ɼ࣮ࡍʹ༻͞ΕΔయ‫ܕ‬తͳॲཧʢHTML ཁૉͷબ୒΍ଐੑͷ௥ՃɼΠHTML ͷ݁Ռ͕ϨϯμϦϯά͞ΕΔ·ͰʹҰఆͷ஗Ԇ͕ϕϯτॲཧͷ௥ՃͳͲʣΛϥΠϒϥϦͷఏ‫͢ڙ‬Δ API ͱ͠ɼൃੜ͢Δ͜ͱʹͳΔɽ͞Βʹ͸ɼ౰વͳ͕Βશͯͷϖʔδͦͷ API ͷதͰϒϥ΢β‫ॲ׵ޓ‬ཧͳͲͷ෇ਵ͢ΔॲཧΛӅ1a)b)c)େࡕେֶେֶӃ৘ใՊֶ‫ڀݚ‬Պm-yamamt@ist.osaka-u.ac.jp
shinsuke@ist.osaka-u.ac.jp
kusumoto@ist.osaka-u.ac.jp

c 2012 Information Processing Society of Japan͕ϥΠϒϥϦͷఏ‫͢ڙ‬Δશͯͷ API Λར༻͢ΔΘ͚Ͱ͸ͳ͍ɽ͢ͳΘͪɼಡΈࠐΈ࣌ʹൃੜͨ͠ωοτϫʔΫ௨৴ͱίϯύΠϧॲཧʹ͸ແବ͕‫·ؚ‬Ε͍ͯͨͱ͍͑Δɽ·ͨઌͷྫʹ΋‫ͨ͛ڍ‬ϒϥ΢β‫ॲ׵ޓ‬ཧ͸ɼ༷ʑͳϓϥοτ1৘ใॲཧֶձ‫ڀݚ‬ใࠂ
IPSJ SIG Technical ReportϑΥʔϜɾϒϥ΢β͔Βͷར༻Λ૝ఆ͢Δ։ൃऀʹͱͬͯ

6% 1%͸ඞཁෆՄܽͰ͋Δ΋ͷͷɼ୯Ұͷϒϥ΢βΛ࢖͏΄ͱΜͲͷར༻ऀʹͱͬͯ͸௚઀తʹ͸Ը‫ॲ͍ͳ͕ܙ‬ཧͰ͋Δɽ͜ͷΑ͏ͳϥΠϒϥϦ͕ੜΈग़͢ѱӨ‫ڹ‬͸ɼJava ΍ CɼRuby ͳͲͷଞͷϓϩάϥϛϯά‫Ͱޠݴ‬΋ൃੜ͢Δ͕ɼ

93%JavaScript Ͱ͸ಛʹൃੜ͠΍͍͢໰୊ͩͱߟ͑ΒΕΔɽ͜
Ε͸ɼWeb ͕ίʔυΦϯσϚϯυ [10] ͱ‫ݺ‬͹ΕΔΞʔΩςΫνϟΛऔΔͨΊͰ͋ΔɽίʔυΦϯσϚϯυ͸ɼΫϥΠΞϯτͷཁ‫ʹٻ‬Ԡͯ͡αʔό͕ιʔείʔυΛ഑෍͠ɼ

jQuery1.x
ਤ 1

jQuery2.x

jQuery3.x࢖༻͞Ε͍ͯΔόʔδϣϯͷׂ߹ [7]ΫϥΠΞϯτଆͰίϯύΠϧɾ࣮ߦ͢Δͱ͍͏ΞʔΩςΫνϟͷ͜ͱΛࢦ͢ɽ͜ͷιʔείʔυ഑෍‫͏͍ͱܕ‬ಛ௃͔ΒɼWeb ্ͷιʔείʔυ͸ίϯύΠϥʹΑΔࣄલͷ࠷$("#content").css("background-color", "red");䝉䝺䜽䝍దԽॲཧ͕อো͞Εͳ͍ɽͦͷͨΊɼෆཁͳॲཧ΍ར༻͞API䝟䝷䝯䞊䝍⩌グ㏙䝟䝍䞊䞁Εͳ͍ API ΋ΫϥΠΞϯτଆʹసૹɾ࣮ߦ͞Εͯ͠·͏ɽਤ 2 API ‫ͼݺ‬ग़͠ͷྫҰൠతͳ JavaScript ϥΠϒϥϦ͸࠷దԽΛࢪͨ͠ min.jsͱ͍͏‫Ͱࣜܗ‬഑෍͞Ε͍ͯΔέʔε͕ଟ͍΋ͷͷɼ‫ݸ‬ʑͷWeb ϖʔδʹ‫ه‬ड़͞Εͨ JavaScript ιʔείʔυͷ 9 ׂҎ্͸࠷దԽ͞Ε͍ͯͳ͍ [11] ͷ͕‫ݱ‬ঢ়Ͱ͋Δɽຊ‫ڀݚ‬ͷ໨త͸ɼJavaScript ϥΠϒϥϦ͕༩͑ΔΫϥΠΞϯτ΁ͷ෭࡞༻ͷ࣮৘Λ໌Β͔ʹ͢Δ͜ͱͰ͋Δɽ͜͜Ͱͷ෭࡞༻ͱ͸ɼJavaScript ͷ։ൃΛ༰қʹ͢Δͱ͍͏։ൃऀʹର͢ΔʢओͨΔʣ࡞༻ʹରͯ͠ɼΫϥΠΞϯτ‫ڥ؀‬Ͱൃੜͯ͠͠·͏ҙਤ͞Εͳ͍࡞༻ͱఆٛ͢ΔɽຊߘͰ͸͜ͷௐࠪͷୈҰาͱͯ͠ௐࠪର৅ϥΠϒϥϦʹ jQuery Λɼௐࠪର৅ͷ෭࡞༻ʹ API ͷ࣮ߦ࣌ؒΛબ୒͢Δɽௐࠪͷखॱͱͯ͠ɼ·ͣ jQuery ͷ API ʹ͍ͭͯग़‫ݱ‬ස౓ͷߴ͍࢖༻ํ๏Λௐ΂Δɽͦͯ͠ɼͦΕΒͷ࢖༻ํ๏ʹରͯ͠ಉ͡ಈ࡞Λ͢Δ࣮૷Λ JavaScript ωΠςΟϒͰ࡞੒࣮ͯ͠ߦ࣌ؒΛൺֱ͢Δɽௐࠪͷ݁ՌɼjQuery Λ༻͍Δ͜ͱͰ࣮ߦ͕࣌ؒฏ‫Ͱۉ‬໿ 4 ഒʹͳΔ͜ͱͳͲ͕Θ͔ͬͨɽ͞Βʹɼࠓճ࣮ࢪͨ͠ௐࠪͷ݁Ռʹ͍ͭͯߟ࡯͓Αͼٞ࿦Λߦ͏ɽ

2. jQuery͜ͷઅͰ͸ɼຊߘͰௐࠪͷ୊ࡐͱͯ͠બΜͩ jQuery ʹ͍ͭͯɼҎ߱ͷઅͷઆ໌ͷͨΊʹ֓ཁͱ࢖༻ྫΛड़΂Δɽ

2.1 jQuery ͷ֓ཁjQuery[6] ͸ HTML ͷߏ੒ཁૉͷ‫ࡧݕ‬΍ૢ࡞ɼΞχϝʔγϣϯ΍ඇಉ‫ظ‬௨৴ͳͲͷॲཧΛɼAPI Λ༻͍ͯ؆୯ʹ‫ه‬ड़Ͱ͖ΔΑ͏ʹͳΔ JavaScript ϥΠϒϥϦͰ͋ΔɽW3TechsͷௐࠪʹΑΔͱɼ2017 ೥ 2 ݄‫ࡏݱ‬ɼWeb αΠτͷ͏ͪ71.9%ͷαΠτʹ͓͍ͯ jQuery ͕࢖༻͞Ε͍ͯΔ [7]ɽ͜ͷ࢖༻͞Ε͍ͯΔׂ߹͸ɼJavaScript ϥΠϒϥϦͷதͰ࠷΋ߴ͍਺஋Ͱ͋Δɽ͜Ε͸ຊߘͷௐࠪͷ୊ࡐͱͯ͠ jQueryΛબ୒ͨ͠ཧ༝Ͱ͋Δɽ

jQuery ͸‫ࡏݱ‬େ͖͘෼͚ͯ 1.x ‫ܥ‬ɼ2.x ‫ܥ‬ɼ3.x ‫ܥ‬ͷ 3 ͭͷόʔδϣϯ͕ଘࡏ͢Δɽ֤όʔδϣϯ͕ Web αΠτʹ͓c 2012 Information Processing Society of Japan͍ͯ࢖༻͞Ε͍ͯΔׂ߹͸ਤ 1 ͷ௨ΓͰ͋Δɽ΄ͱΜͲͷαΠτʹ͓͍ͯ 1.x ‫͞༻࢖͕ܥ‬Ε͍ͯΔɽͦΕͧΕͷόʔδϣϯؒʹ͸ࠩҟ͕͋Δɽ1.x ‫ ͱܥ‬2.x ‫ܥ‬ͷؒɼ2.x ‫ ͱܥ‬3.x‫ܥ‬ͷؒͦΕͧΕͷओͳมԽΛ·ͱΊͨ΋ͷ͕ද 1 Ͱ͋Δɽ‫ڞ‬௨͢ΔมԽͷྲྀΕͱͯ͠ɼϒϥ΢βͷ‫͍ݹ‬όʔδϣϯʹର͢Δ‫ॲ׵ޓ‬ཧ͕࡟আ͞Ε͍ͯ͘ͱ͍͏఺͕͋Δɽ

2.2 jQuery ͷ࢖༻ྫ
jQuery ͷϥΠϒϥϦΛಡΈࠐΉ͜ͱͰϥΠϒϥϦ಺ͷ࣮૷͸ʮjQueryʯ·ͨ͸ʮ$ʯͰࢀরͰ͖ΔΦϒδΣΫτʹ֨ೲ͞ΕΔɽ ͜ͷΦϒδΣΫτʹରͯ͠ API Λ‫ͼݺ‬ग़ͨ͠
ྫ͕ਤ 2 Ͱ͋Δɽ͜ͷ‫ͼݺ‬ग़͠͸ HTML ͷߏ੒ཁૉͷ͏
ͪ id ͕ʮcontentʯͰ͋Δ΋ͷͷഎ‫ܠ‬৭Λ੺৭ʹ͢Δͱ͍͏΋ͷͰ͋Δɽʮ$ʯʹରͯ͠Ҿ਺Λ༩͑ΔͱɼҾ਺ʹରԠ͢
Δ HTML ͷߏ੒ཁૉΛද͢ jQuery ΦϒδΣΫτΛฦ͢ɽ͜ͷ෦෼ͷ‫ه‬ड़ΛηϨΫλ෦ͱ͠ɼҾ਺ͷ͜ͱΛηϨΫλͱ‫͢ʹͱ͜Ϳݺ‬ΔɽਤͷྫͰ͸ηϨΫλ͸ʮ"#content"ʯͱ͍͏จࣈྻͰ͋Δɽจࣈྻ 1 จࣈ໨ͷʮ#ʯ͸ id Λද͢‫͋Ͱ߸ه‬Δɽclass Λද͢ͷ͸ʮ.ʯͰ͋ΓɼԿ΋‫߸ه‬Λ෇͚ͳ͍৔߹͸ߏ੒ཁૉͷλά໊Λද͢ɽ·ͨɼҾ਺ͱͯ͠༩͑ΒΕΔͷ͸จࣈྻͰ͸ͳ͘ jQuery ΦϒδΣΫτࣗମ
Ͱ͋Δ৔߹΋͋ΔɽྫͷηϨΫλ෦Ͱ͸ id ͕ʮcontentʯͰ͋Δߏ੒ཁૉΛද͢ jQuery ΦϒδΣΫτ͕ฦ͞ΕΔ͜ͱʹͳΔɽ͜ͷ jQuery ΦϒδΣΫτʹରͯ͠ɼҾ਺ͷύϥϝʔλ‫ͱͱ܈‬΋ʹ API Λ‫ͼݺ‬ग़͢ɽྫͰ͸ɼߏ੒ཁૉ
ͷελΠϧΛࢦఆ͢Δ API Ͱ͋ΔʮcssʯʹҾ਺ͱͯ͠എ
ද 1 jQuery ͷόʔδϣϯؒͷओཁͳมԽ2.x ‫Ͱܥ‬ͷओͳมԽ• IE6ɼ7ɼ8 ͷ‫ॲ׵ޓ‬ཧ͕࡟আ͞ΕΔ• ΧελϜϏϧυ͕Ͱ͖ΔΑ͏ʹͳΔ3.x ‫Ͱܥ‬ͷओͳมԽ• IE Ҏ֎ͷϒϥ΢βͰ৽͍͠όʔδϣϯҎ֎ͷ‫ॲ׵ޓ‬ཧ͕࡟আ͞ΕΔ• API ͷ࣮૷ͷ‫ݟ‬௚͕͠ߦΘΕΔ2৘ใॲཧֶձ‫ڀݚ‬ใࠂ
IPSJ SIG Technical Report‫ܠ‬৭Λද͢ʮbackground-colorʯͱ੺৭Λද͢ʮredʯΛ༩͑ͯ‫ͼݺ‬ग़͍ͯ͠ΔɽjQuery ΦϒδΣΫτʹରͯ͠͸䜰䜽䝉䝇ᩘୖ఩100୓䝃䜲䝖䛾䝖䝑䝥䝨䞊䝆$ͯ‫ه‬ड़ͯ͠ෳ਺ͷ API Λ‫ͼݺ‬ग़͢͜ͱ΋ՄೳͰ͋Δɽ$$$$

ʮ$("#aaa").xxx("bbb").yyy("ccc");ʯͷΑ͏ʹ࿈ଓ͠$$·ͨɼηϨΫλɾAPIɾύϥϝʔλ‫܈‬ͷ૊Έ߹Θͤͷ͜ͱΛ‫ه‬ड़ύλʔϯͱ‫͢ʹͱ͜Ϳݺ‬Δɽ‫ه‬ड़ύλʔϯ͸ෳ਺
jQuery䛜౑⏝䛥䜜䛶䛔䜛䝨䞊䝆䛾䜏ᢳฟͷ API Λ૊Έ߹Θͤͨ΋ͷͰ͋ΔɽjQuery Ͱ͸͜ͷ‫ه‬ड़ύλʔϯͷ‫ͼݺͰܗ‬ग़͞ΕΔ͜ͱ͕ଟ͍ɽͦͷͨΊɼҎ߱ͷௐࠪ͸ϥΠϒϥϦͷ API ͷྫͱͯ͠ɼjQuery ͷ‫ه‬ड़ύλʔϯΛѻ͏ɽ

3. API ࢖༻ʹΑΔ෭࡞༻ͷௐࠪ

$
$$$$$

$

3.1 ௐࠪ֓ཁຊௐࠪͷ໨త͸ɼϥΠϒϥϦͷ API Λ‫ͼݺ‬ग़͢͜ͱʹΑ

jQuery䛾グ㏙䝟䝍䞊䞁䛾⟠ᡤ䜢཰㞟Δ࣮ߦ࣌ؒͷมԽΛௐ΂Δ͜ͱͰ͋Δɽ1 ͭͷ‫ه‬ड़ύλʔϯʹ͍ͭͯͷ‫ܭ‬ଌʹ͖ͭɼൺֱ͢ΔͨΊͷ࣮૷Λ༻ҙ͢Δ
ඞཁ͕͋Δɽ͜ͷ࣮૷͸ jQuery ͷ API ʹରͯ͠ಉ౳ͷ‫ػ‬$$$ೳΛɼϒϥ΢β‫Ͳͳ׵ޓ‬ͷॲཧΛߦΘͣʹ JavaScript ͷඪ४ͷؔ਺‫܈‬Λ༻͍࣮ͨ૷Ͱ͋ΔɽҎ߱ɼ͜ͷ࣮૷ΛωΠ$$$$ςΟϒͷ࣮૷ͱ‫͢ʹͱ͜Ϳݺ‬ΔɽjQuery ͷ‫ه‬ड़ύλʔϯͷ‫ͼݺ‬ग़͠ํ͸ଟ༷Ͱ͋ΔͷͰɼશͯͷ‫ه‬ड़ύλʔϯʹରグ㏙䝟䝍䞊䞁䜢ᢳ㇟໬ͯ͠ωΠςΟϒͷ࣮૷Λ༻ҙ͢Δͷ͸ࠔ೉Ͱ͋Δɽ‫ܭ‬ଌ͢Δ‫ه‬ड़ύλʔϯͷ਺Λ‫ݶ‬ఆ͢ΔͷͰ͋Ε͹ɼ࢖༻ස౓ͷߴ$͍‫ه‬ड़ύλʔϯʹ͍ͭͯ‫ܭ‬ଌ͢Δͷ͕ଥ౰Ͱ͋Δɽͦ͜Ͱ$$·ͣɼϢʔβͷΞΫηε਺ͷଟ͍αΠτʹ͓͍ͯ࢖༻ස౓$ͷߴ͍‫ه‬ड़ύλʔϯΛௐࠪ͢Δɽͦͯ͠ɼ࢖༻ස౓ͷߴ͍$$$10 ‫ݸ‬ͷ‫ه‬ड़ύλʔϯʹରͯ͠ωΠςΟϒͷ࣮૷Λ༻ҙ͠ɼ࣮ߦ࣌ؒΛൺֱ͢Δɽൺֱ͢Δ jQuery ͷόʔδϣϯʹͭᣦᶆ‫݌݋݌‬䛻䜘䜚䝷䞁䜻䞁䜾͍ͯ͸ 1.x ‫ܥ‬ɼ2.x ‫ܥ‬ɼ3.x ‫͔ܥ‬Β 1 ͭͣͭόʔδϣϯΛબ୒ͯ͠‫ܭ‬ଌΛߦ͏ɽҎ্Ͱड़΂ͨ͜ͱΛௐ߲ࠪ໨ʹ·ͱΊΔɽຊௐࠪͰ͸ 2㡰఩123ͭͷௐ߲ࠪ໨Λઃ͚ͯճ౴Λߦ͏ɽ

RQ1: ࢖༻ස౓ͷߴ͍ jQuery ͷ‫ه‬ड़ύλʔϯ͸ԿͰ͋ͱͰ࣮ߦ͕࣌ؒͲͷఔ౓มԽ͢Δ͔͜ΕΒͷௐ߲ࠪ໨ͷͦΕͧΕʹ͍ͭͯɼௐࠪํ๏ͱ݁ՌΛ֤খઅͰड़΂Δɽ

1.2 × 10ିସ$

6.4 × 10ିହ$

2.7 × 10ିହ

ਤ 3...

RQ2: ࢖༻ස౓ͷߴ͍ jQuery ͷ‫ه‬ड़ύλʔϯΛ༻͍Δ͜‫݌݋݌‬$...

Δ͔ᢳ㇟໬䛧䛯
グ㏙䝟䝍䞊䞁࢖༻ස౓ͷߴ͍‫ه‬ड़ύλʔϯͷௐࠪͷྲྀΕϓϖʔδʹରͯ͠ू‫ܭ‬Λߦ͏͜ͱͱ͢Δɽ100 ສαΠτͷ͏ͪΞΫηεͰ͖ΔαΠτͷτοϓϖʔδͷιʔείʔυ

3.2 RQ1: ࢖༻ස౓ͷߴ͍‫ه‬ड़ύλʔϯͷௐࠪ͜ͷখઅͰ͸ɼϢʔβͷΞΫηε਺ͷଟ͍αΠτʹ͓͍

Λσʔλϕʔεʹ֨ೲ͢ΔɽҎ߱ͷू‫ۀ࡞ܭ‬͸σʔλϕʔ
ε্ͷίϚϯυͰߦ͏ɽͯɼ࢖༻ස౓ͷߴ͍ jQuery ͷ‫ه‬ड़ύλʔϯΛௐ΂Δํ๏ΞΫηε਺্Ґ 100 ສαΠτͷ͏ͪɼjQuery Λ࢖༻ͯ͠ͱͦͷ݁Ռʹ͍ͭͯड़΂ΔɽௐࠪͷྲྀΕΛਤ 3 ʹද͢ɽ

͍Δ͔Ͳ͏͔ͰϑΟϧλϦϯάΛߦ͏ɽ͜Ε͸τοϓϖʔ

3.2.1 ௐࠪํ๏δͷιʔείʔυʹʮjqueryʯͱʮ.jsʯͱ͍͏‫ه‬ड़͕͋ϢʔβͷΞΫηε਺ͷଟ͍αΠτ͸ɼAlexa ࣾͷఏ‫͠ڙ‬Δ͔Ͳ͏͔ʹΑΓ൑அ͢Δɽ͜ͷϑΟϧλϦϯάΛߦ͍ͬͨͯΔΞΫηε਺্Ґ 100 ສαΠτͷϦετΛ༻͍Δɽ֤ͱ͜ΖɼjQuery Λ࢖༻͍ͯ͠ΔαΠτ͸શମͷ໿ 67 ˋͷαΠτͷϖʔδ͸αΠτʹଐ͢ΔશͯͷϖʔδΛߟྀ͢Δ665,558 αΠτͰ͋ͬͨɽͱ๲େͳϖʔδ਺ʹͳΔͨΊɼຊௐࠪͰ͸֤αΠτͷτο

c 2012 Information Processing Society of Japan࣍ʹͲͷΑ͏ͳ‫ه‬ड़ύλʔϯ͕‫ͼݺ‬ग़͞Ε͍ͯ3৘ใॲཧֶձ‫ڀݚ‬ใࠂ
IPSJ SIG Technical ReportΔ ͔ Λ ू ‫ ͢ ܭ‬Δ ɽAPI ͷ ‫ ه‬ड़ ύ λ ʔ ϯ ͸ ਖ਼ ‫ ن‬ද ‫Ͱ ݱ‬

tf-idf ͷ৔߹ɼ͋ΔυΩϡϝϯτʢ͜͜Ͱ͸ϖʔδʣͰͷ

ʮ$\(.+?\)\..+?\(.*?\)ʯͱද͞ΕΔɽਖ਼‫ن‬ද‫֘ʹݱ‬౰ಛ௃తͳ‫ޠ‬ʢ‫ه‬ड़ύλʔϯʣΛநग़͢ΔͨΊʹɼdf ͷ‫ٯ‬͢Δ‫ه‬ड़ύλʔϯͷதͰɼηϨΫλɼAPIɼύϥϝʔλ‫܈‬਺Λ༻͍ΔɽҰํͰຊߘͰ͸ଟ͘ͷϖʔδͰग़‫͢ݱ‬Δ‫ه‬ड़͸ͦΕͧΕมԽ͢Δɽಛʹϖʔδ͝ͱʹมԽΛ͢Δͷ͸ηύλʔϯΛநग़͢ΔͨΊʹɼ‫਺ٯ‬ΛऔΒͳ͍͜ͱͱ͢ΔɽϨΫλͱύϥϝʔλ‫͋Ͱ܈‬Δɽϖʔδ͝ͱʹมԽ͕͋Δঢ়Αͬͯɼpoppatterni ΛҎԼͷ‫Ͱࣜࢉܭ‬ఆٛ͢ΔɽଶͰ͸ɼ֤ϖʔδͰಉ͡༻్Ͱ࢖༻͞Ε͍ͯΔ‫ه‬ड़ύλʔϯΛಉҰࢹ͢Δ͜ͱ͕Ͱ͖ͳ͍ɽͦ͜Ͱू‫ܭ‬ͷલʹηϨΫλͱύϥϝʔλ‫ʹ܈‬ରͯ͠ந৅ԽΛߦ͏ɽηϨΫλʹ͍ͭ
ʮ".ʯͰ࢝·ΔηϨΫͯ͸ʮ"#ʯͰ࢝·ΔηϨΫλΛ idɼ
λΛ classɼͦͷଞʮ"ʯͰ࢝·ΔηϨΫλΛ tagɼʮ"ʯҎ
֎Ͱ࢝·ΔηϨΫλΛ variable ͱͯ͠ந৅Խ͢Δɽύϥϝʔλ‫͍ͯͭʹ܈‬͸ίϯϚʢ,ʣͰ۠੾ͬͨจࣈྻͦΕͧΕΛύϥϝʔλͱ͢Δɽͦͯ͠ɼ
ʮ"ʯͰ࢝·ΔύϥϝʔλΛstringɼʮfunctionʯͰ࢝·ΔύϥϝʔλΛ functionɼͦΕҎ֎ͷύϥϝʔλΛ variable ͱͯ͠ந৅Խ͢ΔɽAPIʹ͍ͭͯ͸ͦͷ··࢖༻͢Δɽந৅Խͨ͠ηϨΫλɼAPIɼந৅Խͨ͠ύϥϝʔλͷ૊Έ߹ΘͤΛந৅Խͨ͠‫ه‬ड़ύλʔϯͱ‫͢ʹͱ͜Ϳݺ‬Δɽͦͯ͠‫ه‬ड़ύλʔϯʹରͯ͠࢖༻ස౓͕ߴ͍ॱʹϥϯΩϯάΛ͚ͭΔɽग़‫ݱ‬ճ਺ͷ߹‫ॱͰ͚ͩܭ‬Ґ෇͚Λߦ͏ͱɼಛఆͷϖʔδͰͷΈԿ౓΋࢖༻͞ΕΔ‫ه‬ड़ύλʔϯ্͕ҐʹདྷΔՄೳੑ͕͋ΔɽͦͷͨΊɼଟ͘ͷϖʔδͰ࢖ΘΕ͍ͯΔ΄Ͳେ͖ͳ஋ΛऔΔΑ͏ͳࢦඪͰॱҐ෇͚Λߦ͏ඞཁ͕͋Δɽͦ͜Ͱɼ৘ใ‫ࡧݕ‬ͷ౷‫ܭ‬஋Ͱ͋Δ tf-idf[12] Λࢀߟʹͨ͠ pop ͱ͍͏ࢦඪΛఏҊ͢Δɽpop ͓Αͼ pop ͷಋग़ʹඞཁͳม਺ͷఆٛ͸ҎԼͰ͋Δɽ

ϯ patterni Λ࢖༻͍ͯ͠Δϖʔδͷ਺ upagepatterni ͸ҎԼͰද͞ΕΔɽjQuery ͕࢖ΘΕ͍ͯΔϖʔδͷ͏ͪɼ‫ه‬ड़ύλʔϯ patterni͕ग़‫͢ݱ‬Δϖʔδͷׂ߹ dfpatterni ͸ҎԼͰද͞ΕΔɽ

upagepatterni|jpage|Ҏ্ͷఆٛʹΑΓɼpop ͷ஋͸‫ͼݺ‬ग़͞ΕΔճ਺ͷ߹‫ܭ‬͕ଟ͘ɼ͞Βʹଟ͘ͷϖʔδͰग़‫͢ݱ‬Δ΄Ͳେ͖ͳ஋ʹͳΔɽ͜ΕʹΑΓಛఆͷϖʔδͰͷΈԿ౓΋‫ͼݺ‬ग़͞Ε͍ͯΔ‫ه‬ड़ύλʔϯͷϥϯΩϯά΁ͷӨ‫ڹ‬Λ཈͑Δ͜ͱ͕Ͱ͖Δɽந৅Խͨͦ͠ΕͧΕͷ‫ه‬ड़ύλʔϯʹରͯ͠ pop ͷ஋Λ‫͠ࢉܭ‬ɼ߱ॱʹιʔτͯ͠ॱҐ෇͚Λߦ͏ɽ

3.2.2 ௐࠪ݁Ռσʔλϕʔε্Ͱू‫ܭ‬Λͯ͠ɼpop ͷ஋͕߱ॱʹͳΔΑ͏ʹϥϯΩϯά෇͚Λߦͬͨ݁Ռ͕ද 2 Ͱ͋Δɽ࠷΋ popͷ஋͕େ͖͍ͷ͸ʮ$(variable).attr(string)ʯͰ͋ͬ
ͨɽ͜Ε͸ variable ͕ද͢ HTML ͷߏ੒ཁૉʹରͯ͠ɼ͋ΔଐੑΛऔಘ͢Δ‫ه‬ड़ύλʔϯͰ͋Δɽ࣮ࡍͷιʔείʔυΛ‫ͯݟ‬ΈΔͱɼ͜ͷ‫ه‬ड़ύλʔϯʹΑΓʮthisʯ͕ද͢ߏ੒ཁૉͷʮvalueʯͱ͍͏ଐੑͷ஋Λऔಘ͢ΔࡍͳͲʹ࢖༻͞Ε͍ͯͨɽଞʹද͔ΒಡΈऔΕΔ͜ͱͱͯ͠ɼʮClassʯ͕෇͍ͨAPI ͕ଟ͍͜ͱ͕Θ͔ΔɽʮaddClassʯ͸ߏ੒ཁૉʹ classΛ௥Ճ͢Δ API Ͱ͋Γɼ
ʮremoveClassʯ͸ class Λ࡟আ͢Δ API Ͱ͋Δɽ
ʮ$(variable).ready(function)ʯ͸ϒϥ΢β͕ߏ੒ཁૉͷಡΈࠐΈΛ‫ͼݺʹ͖ͱͨྃ͠׬‬ग़ؔ͢਺Λࢦఆ͢ΔAPI Ͱ͋Δɽ ࢦఆ͢Δؔ਺Ͱߦ͏ॲཧ͸ϖʔδ͝ͱʹେ͖͘ҟͳΔɽRQ2 Ͱ͸࢖༻ස౓ͷߴ͍‫ه‬ड़ύλʔϯʹର(1)jQuery ͕ ࢖ Θ Ε ͯ ͍ Δ ϖ ʔ δ ͷ ू ߹ Λ jpage ͱ ͢ Δ ɽdfpatterni =(5)ϥ ϯ Ω ϯ ά ද ʹ ͓ ͍ ͯ 5 ൪ ໨ ʹ pop ͷ ஋ ͕ େ ͖ ͍‫ه‬ड़ύλʔϯͷू߹Λ {patterni } ͱ͢Δɽ͋Δ‫ه‬ड़ύλʔ

upagepatterni = |{page : page  patterni }|poppatterni = dfpatterni · tfpatterni࣮ͯ͠ߦ࣌ؒͷ‫ܭ‬ଌΛߦ͏͕ɼ͜ͷ API ͸ؔ਺ͷ಺༰ʹΑΓ࣮ߦ͕࣌ؒେ͖͘มΘΔͨΊ‫ܭ‬ଌ͕ࠔ೉Ͱ͋ΔɽΑͬͯ
ʮ$(variable).ready(function)ʯΛআ͍ͨ 9 ͭͷ‫ه‬ड़ύλʔϯʹରͯ͠ɼRQ2 Ͱ࣮ߦ࣌ؒ΁ͷӨ‫ڹ‬ͷௐࠪΛߦ͏ɽ
ද 2ந৅Խͨ͠‫ه‬ड़ύλʔϯͷϥϯΩϯά

(2)ॱҐந৅Խͨ͠‫ه‬ड़ύλʔϯpop‫ܭ‬ଌର৅ϖʔδ page ʹ͓͚Δ‫ه‬ड़ύλʔϯ patterni ͷग़‫ݱ‬ճ਺Λ

npage,patterni ͱ͢Δɽϖʔδ page ʹ͓͚Δશ‫ه‬ड़ύλʔϯͷ͏ͪͷ patterni ͷׂ߹ ratepage,patterni ͸ҎԼͰද͞ΕΔɽ

npage,patterni
ratepage,patterni = k npage,patternk(3)

jQuery ͕࢖ΘΕ͍ͯΔϖʔδʹ͓͚Δ ratepage,patterni ͷฏ‫ۉ‬஋ tfpatterni ͸ҎԼͰද͞ΕΔɽ
1
tfpatterni =ratepage,patterni|jpage| page∈jpagec 2012 Information Processing Society of Japan

(4)−4



1$(variable).attr(string)

1.3 × 102$(variable).find(string)

7.4 × 10−5

3$(variable).addClass(string)

5.9 × 10−5

4$(id).addClass(string)

5.1 × 10−55$(variable).ready(function)

4.8 × 10−56$(id).html(variable)

4.5 × 10−5

7$(id).css(string, string)

4.2 × 10−5

8$(class).removeClass(string)

3.9 × 10−5

9$(class).addClass(string)

3.5 × 10−5

10$(class).css(string, string)

2.9 × 10−54৘ใॲཧֶձ‫ڀݚ‬ใࠂ
IPSJ SIG Technical Report

RQ1 ΁ͷճ౴Λ·ͱΊΔͱҎԼͷΑ͏ʹͳΔɽ
RQ1ʮ࢖༻ස౓ͷߴ͍ jQuery ͷ‫ه‬ड़ύλʔϯ͸Կ

<div>
<div>
</div></div>

Ͱ͋Δ͔ʯ΁ͷճ౴• ࢖༻ස౓ͷߴ͍ 10 ͷ‫ه‬ड़ύλʔϯ͸ද 2 ͷ௨Γ• ࠷΋࢖༻ස౓ͷߴ͍‫ه‬ड़ύλʔϯ͸
ʮ$(variable).attr(string)ʯ

<div></div><div></div>• class ʹؔ͢Δ API ͕ଟ͍(a) ೖΕࢠߏ଄(b) ฒྻߏ଄

ਤ 4 2 ͭͷཁૉͷؔ܎

3.3 RQ2: ‫ه‬ड़ύλʔϯͷ࣮ߦ࣌ؒ΁ͷӨ‫ڹ‬ͷௐࠪ͜ͷখઅͰ͸ɼRQ1 Ͱௐ΂ͨ࢖༻ස౓ͷߴ͍‫ه‬ड़ύλʔϯʹ͍ͭͯɼ࣮ߦ͕࣌ؒͲͷఔ౓มԽ͢Δ͔Λௐ΂Δํ๏ͱͦͷ݁Ռʹ͍ͭͯड़΂Δɽfor (var i = 1; i <= 25000; i++) {$("#i" + i).addClass("c" + (i + 5000));}3.3.1 ௐࠪํ๏ਤ 5‫ه‬ड़ύλʔϯͷ࣮ߦʹ͔͔Δ࣌ؒΛ‫ܭ‬ଌ͢Δͷʹඞཁͳ΋ͷͱͯ͠ɼ‫ه‬ड़ύλʔϯΛ࣮ߦ͢Δ HTML ͕͋Δɽ࣮ࡏͷ Web ϖʔδΛ‫ܭ‬ଌͷͨΊʹ࢖༻͢Δͱ͢Δͱɼந৅Խ
ͨ͠ηϨΫλ΍ύϥϝʔλΛ࠶౓۩৅Խ͢Δඞཁ͕͋Γɼͦͷ࡞‫ۀ‬͸ࠔ೉Ͱ͋Δɽͦ͜ͰຊௐࠪͰ͸ଟ਺ͷߏ੒ཁૉ‫ه‬ड़ύλʔϯʹର͢Δ jQuery ͷ࣮૷

for (var i = 1; i <= 25000; i++) {document.getElementById("i" + i)
.classList.add("c" + (i + 5000));}͔ΒͳΔ‫ܭ‬ଌ༻ HTML Λ࡞੒͢ΔɽHTML ͷߏ੒ཁૉ͸ਤ 6‫ه‬ड़ύλʔϯʹର͢ΔωΠςΟϒͷ࣮૷໦ߏ଄Ͱ͋Γɼ2 ͭͷཁૉͷΈ͔ΒͳΔͱ͖ɼਤ 4 ͷΑ͏ʹೖΕࢠߏ଄ͱͳΔ৔߹ͱฒྻߏ଄ͱͳΔ৔߹͕͋Δɽͦઌͷ࣮‫Ͱݧ‬ಘΒΕͨ࢖༻ස౓ͷߴ͍‫ه‬ड़ύλʔϯͦΕ͜Ͱ༻ҙ͢Δ‫ܭ‬ଌ༻ HTML ͱͯ͠ೖΕࢠߏ଄ͱฒྻߏ଄ͧΕʹ͍ͭͯɼ‫ܭ‬ଌ༻ HTML ͷߏ੒ཁૉʹରͯ͠‫ه‬ड़ύΛͦΕͧΕ‫܁‬Γฦͨ͠ 2 छྨͷ HTML Λ࡞੒͢Δɽ·ͨɼλʔϯΛ࣮ߦ͢ΔϓϩάϥϜΛ࡞੒͢Δɽ‫ه‬ड़ύλʔϯ‫ه‬ड़ύλʔϯͷηϨΫλ΍ύϥϝʔλʹΑͬͯߏ੒ཁૉΛ

ʮ$(id).addClass(string)ʯʹରͯ͠ jQuery Λ࢖༻ͯ͠

ࢦఆͰ͖ΔΑ͏ʹɼͦΕͧΕͷߏ੒ཁૉʹ id ΍ class Λ෇࣮૷ͨ͠ϓϩάϥϜͱωΠςΟϒͷ࣮૷ͷྫ͕ਤ 5ɼ6 Ͱ༩͢Δɽid ΍ class ͷ෇༩ΛϥϯμϜʹߦͬͨ HTML Λ͋Δɽ ͲͪΒ΋ id ͕෇༩͞Εͨ HTML ͷߏ੒ཁૉʹ৽ͨೖΕࢠߏ଄ͱฒྻߏ଄ͦΕͧΕͰ 10 ‫ͭͣݸ‬ɼ‫ ܭ‬20 ‫ݸ‬ͷͳ class Λ௥Ճ͢Δͱ͍͏ॲཧΛ‫܁‬Γฦ͍ͯ͠Δɽਤ 5 ͷHTML Λ༻ҙ͢Δɽͦͯ͠ɼͦΕͧΕͷ HTML ʹରͯ͠

jQuery ͷ࣮૷Ͱ͸‫ه‬ड़ύλʔϯΛͦͷ··࢖༻͍ͯ͠ΔɽલઅͰಘΒΕͨ࢖༻ස౓ͷߴ͍‫ه‬ड़ύλʔϯΛ࣮ߦ͢Δɽ‫ه‬ड़ύλʔϯ 1 ճ͋ͨΓͷ࣮ߦ࣌ؒ͸ඇৗʹ୹͍ͨΊɼ

ਤ 6 ͷωΠςΟϒͷ࣮૷Ͱ͸ getElementById ͳͲͷඪ४ͷؔ਺Λ૊Έ߹Θͤͯ໨తͷॲཧΛ࣮૷͍ͯ͠Δɽൺֱʹे෼ͳ஋ʹͳΔ·Ͱ‫܁‬Γฦ࣮͠ߦͯ࣌ؒ͠Λ‫ܭ‬ଌ͢ൺֱ͢Δ jQuery ͷόʔδϣϯ͸ද 3 ͷ௨ΓͰ͋Δɽ1.xΔɽ༧උ࣮‫ݧ‬ͷ݁Ռɼ‫ܭ‬ଌ༻ HTML ͷཁૉ਺Λ 5 ສʹ͢‫ܥ‬ɼ2.x ‫ܥ‬ɼ3.x ‫ܥ‬ͷ͏ͪͦΕͧΕͷ࠷৽ͷόʔδϣϯΛ࢖Ε͹‫ه‬ड़ύλʔϯͷ࣮ߦ͕࣌ؒൺֱʹඞཁͳ஋ʹͳΔ͜ͱ

༻͢Δɽ·ͨɼRQ2 ͷௐࠪΛߦ͏‫ڥ؀‬Λද 4 ʹ·ͱΊΔɽ͕Θ͔ͬͨɽ͜ͷ HTML ͷߏ੒ཁૉʹରͯ͠ id ΍ class3.3.2 ௐࠪ݁ՌΛࢦఆͯ͠‫܁‬Γฦ͠‫ه‬ड़ύλʔϯΛ࣮ߦ͢Δ͜ͱΛ 1 ηο֤όʔδϣϯ͝ͱʹ‫ه‬ड़ύλʔϯͷ࣮ߦ࣌ؒΛ‫ܭ‬ଌͯ͠τͷ࣮ߦͱ͢Δɽϒϥ΢βͰ JavaScript ͷ࣮ߦΛ։࢝ͨ͠ωΠςΟϒͷ࣮૷ͷ࣮ߦ࣌ؒͱൺֱͨ݁͠ՌΛ·ͱΊͨ΋௚‫ޙ‬͸༷ʑͳཁҼʹΑͬͯଟ͕͔͔࣌ؒ͘Δ͜ͱ͕͋Δɽͷ͕ਤ 7ɼ8 Ͱ͋Δɽ๮άϥϑͷॎ͕࣠ද͢஋͸ɼωΠςΟͦ͜ͰɼཁҼʹΑΔӨ‫ڹ‬Λ‫ݮ‬Βͨ͢ΊʹॳΊʹ 5 ηοτ‫ܭ‬ϒͱ jQuery ͷ 3 όʔδϣϯͦΕͧΕͷ࣮૷ͷ࣮ߦ࣌ؒΛଌΛ͠ͳ͍࣮ߦΛͨ͠ͷͪɼ10 ηοτ࣮ߦͯ͠‫ܭ‬ଌΛߦωΠςΟϒͷ࣮૷ͷ࣮ߦ࣌ؒͰׂͬͨ஋ɼ͢ͳΘͪഒ཰Ͱ͏ɽͦͯ͠ɼ10 ηοτͷதԝ஋Λ࣮ߦ࣌ؒͷ‫ܭ‬ଌ݁Ռͱ͢

͋ΔɽωΠςΟϒͷ஋͸ৗʹ 1 ʹͳΔ͕ɼൺֱͷͨΊʹάΔɽ͜ͷ‫ܭ‬ଌख๏͸ JavaScript ͷύϑΥʔϚϯεʹؔ͢Δϥϑʹ௥Ճ͍ͯ͠Δɽ·ͨɼԣ࣠ͷ਺ࣈ͸ RQ1 Ͱௐࠪ͠ௐࠪ࿦จ [13] Λࢀߟʹ͍ͯ͠Δɽͨ࢖༻ස౓ͷߴ͍‫ه‬ड़ύλʔϯͷॱҐͱରԠ͍ͯ͠ΔɽೖΕࢠɾฒྻͷ྆ߏ଄ͦΕͧΕͷάϥϑʹ͓͍ͯɼ஋͕

ද 3

ൺֱ͢Δ jQuery ͷόʔδϣϯ

ද 4RQ2 ͷௐࠪ‫ڥ؀‬όʔδϣϯϑΝΠϧαΠζϦϦʔε೔1.12.4287KB

2016 ೥ 5 ݄ 20 ೔Web ϒϥ΢β

2.2.4

252KB

2016 ೥ 5 ݄ 20 ೔OSWindows 10 Pro

3.1.1

261KB

2016 ೥ 9 ݄ 22 ೔CPUIntel(R) Xeon(R) CPU E5-2609 0 @ 2.40GHz

c 2012 Information Processing Society of Japan

Google Chrome 55.0.2883.87

5৘ใॲཧֶձ‫ڀݚ‬ใࠂᐇ⾜᫬㛫䛾ಸ⋡ (ྛ䝷䜲䝤䝷䝸 / Native)

IPSJ SIG Technical Report

1110
9876

Native5

jQuery1.12.4

4

jQuery2.2.4

3

jQuery3.1.1

2101234678910RQ1䛾䝷䞁䜻䞁䜾䛻䛚䛡䜛グ㏙䝟䝍䞊䞁䛾㡰఩ᐇ⾜᫬㛫䛾ಸ⋡ (ྛ䝷䜲䝤䝷䝸 / Native)ਤ 7ೖΕࢠߏ଄ͷ‫ܭ‬ଌ༻ HTML ʹର͢Δ֤‫ه‬ड़ύλʔϯͷ࣮ߦ࣌ؒ

11109876

Native5

jQuery1.12.4

4

jQuery2.2.4

3

jQuery3.1.1

21012346789

10

RQ1䛾䝷䞁䜻䞁䜾䛻䛚䛡䜛グ㏙䝟䝍䞊䞁䛾㡰఩
ਤ 8ฒྻߏ଄ͷ‫ܭ‬ଌ༻ HTML ʹର͢Δ֤‫ه‬ड़ύλʔϯͷ࣮ߦ࣌ؒ

1 ΛԼճΔ͜ͱ͸ͳ͔ͬͨɽ͜Ε͸ɼjQuery ͷ‫ه‬ड़ύλʔϯΛ༻͍ΔͱωΠςΟϒͷ࣮૷ʹൺ΂ͯৗʹ࣮ߦ͕࣌ؒ૿

RQ2 ΁ͷճ౴Λ·ͱΊΔͱҎԼͷΑ͏ʹͳΔɽ
RQ2ʮ࢖༻ස౓ͷߴ͍ jQuery ͷ‫ه‬ड़ύλʔϯΛ

Ճ͢Δ͜ͱΛҙຯ͢Δɽ

༻͍Δ͜ͱͰ࣮ߦ͕࣌ؒͲͷఔ౓มԽ͢Δ͔ʯ΁ͷάϥϑͷ͏ͪɼ࠷େͷ஋Λऔͬͨͷ͸‫ه‬ड़ύλʔϯճ౴ʮ$(class).removeClass(string)ʯΛೖΕࢠߏ଄ͷ‫ܭ‬ଌ• ωΠςΟϒͱൺֱͯ͠ฏ‫Ͱۉ‬໿ 4 ഒʹ૿Ճͨ͠༻ HTML ʹରͯ͠ jQuery3.1.1 ͔Β‫ͼݺ‬ग़ͨ͠ͱ͖Ͱ͋• ωΠςΟϒΑΓ΋࣮ߦ͕࣌ؒ୹͘ͳΔ͜ͱ͸ͳΔɽωΠςΟϒͷ࣮૷ͱൺ΂ͯ 11 ഒͷ࣮ߦ࣌ؒΛཁͨ͠ɽಉ༷ʹ jQuery3.1.1 ͔Β‫ͼݺ‬ग़ͨ͠ͱ͖ʹߴ͍ഒ཰ΛऔΔ‫ه‬ड़ύλʔϯʮ$(class).addClass(string)ʯͱͷ‫ڞ‬௨఺ͱͯ͠ɼηϨΫλ͕ class Ͱ͋ΓɼAPI ΋ class ʹର͢Δ
ॲཧͰ͋Δ͜ͱ͕‫͛ڍ‬ΒΕΔɽ
·ͨɼಉ͡‫ه‬ड़ύλʔϯʹର͢ΔೖΕࢠߏ଄ͱฒྻߏ଄
ͷάϥϑΛൺֱ͢Δͱɼ
ʮ$(variable).find(string)ʯͷ͔ͬͨ• jQuery ͷ֤όʔδϣϯؒͰ͸ 2.2.4 ͷ࣮ߦ͕࣌ؒ࠷΋୹͔ͬͨ

4. ߟ࡯લઅͰಘΒΕͨ݁Ռʹ͍ͭͯɼάϥϑΛ΋ͱʹ੔ཧͯ͠ɼ
ߟ͑͏Δ͜ͱʹ͍ͭͯड़΂Δɽ৔߹Λআ͍ͯ΄΅౳͍͠஋ΛऔΔ͜ͱ͕෼͔Δɽશମͷฏ‫ͯ͠ͱۉ‬ɼjQuery ͔Β‫ه‬ड़ύλʔϯΛ‫ͼݺ‬ग़ͨ͠৔߹ɼωΠςΟϒͷ࣮૷ͱൺ΂ͯ 3.9 ഒͷ࣮ߦ͕͔࣌ؒ

4.1 API ͷ࣮ߦ࣌ؒͷ‫͚͓ʹ఺؍‬Δ jQuery ར༻ͷੋඇೖΕࢠɾฒྻͷ྆ߏ଄ͦΕͧΕͷάϥϑ͔ΒɼjQuery ͷ͔Δ͜ͱ͕Θ͔ͬͨɽjQurey ͷ֤όʔδϣϯͰൺֱ͢Δ‫ه‬ड़ύλʔϯΛ༻͍Δ͜ͱͰ࣮ߦ͕࣌ؒৗʹ૿Ճ͢Δ͜ͱͱɼjQuery2.2.4 ͷ࣮ߦ͕࣌ؒ࠷΋୹͍͜ͱ͕Θ͔ͬͨɽ͕Θ͔Δɽ࣮‫ݧ‬Λ࢝ΊΔલͷஈ֊Ͱ༧૝ͨ͠௨Γɼϒϥ΢β‫Ͳͳ׵ޓ‬ͷॲཧʹΑΓωΠςΟϒͷ࣮૷ͱൺ΂ͯଟ͘ͷ࣮ߦ࣌ؒΛཁ͍ͯ͠Δ΋ͷͱࢥΘΕΔɽc 2012 Information Processing Society of Japan6৘ใॲཧֶձ‫ڀݚ‬ใࠂ
IPSJ SIG Technical Report·ͨɼωΠςΟϒͷ࣮૷ͱൺֱͯ͠ jQuery ͷ‫ه‬ड़ύλʔΕࢠߏ଄ͱฒྻߏ଄Λ‫܁‬Γฦͨ྆͠‫୺ۃ‬ͷ HTML ʹΑͬϯΛ༻͍ͨ৔߹ͷ࣮ߦ͕࣌ؒฏ‫ Ͱۉ‬3.9 ഒͱͳͬͨɽ͜Εͯ࠶‫ͨ͠ݱ‬ɽ྆ํͷ HTML Ͱ jQuery Λ࢖༻͍ͯ͠Δ৔

͸ɼWeb αΠτΛ࡞੒͢ΔࡍωΠςΟϒͷ࣮૷Ͱࣄ଍ΓΔ߹ͱ࢖༻͍ͯ͠ͳ͍৔߹ͷ࣮ߦ࣌ؒʹࠩҟ͕ੜ͍ͯ͡ΔͨͳΒ͹ɼjQuery ͔Β API Λ‫ͼݺ‬ग़͢৔߹ͱൺ΂࣮ͯߦ࣌Ίɼ݁Ռ͕େ͖͘มԽ͢Δ͜ͱ͸ͳ͍ͱߟ͑ΒΕΔɽؒΛ 4 ෼ͷ 1 ʹ͢Δ͜ͱ͕Ͱ͖ΔՄೳੑ͕͋Δ͜ͱΛද͢ɽຊௐࠪͰ͸‫ه‬ड़ύλʔϯͷ࣮ߦ࣌ؒΛ‫ܭ‬ଌ͢Δࡍʹɼ1Web ϒϥ΢βͰϖʔδ͕දࣔ͞ΕΔ·Ͱͷ࣌ؒ΍ΫϦοճ͋ͨΓͷ࣮ߦ࣌ؒͰ͸୹͗͢ΔͨΊɼ‫ه‬ड़ύλʔϯΛ‫܁‬Ϋ࣌ͳͲͷΞΫγϣϯʹ͔͔Δ࣌ؒΛ୹ॖ͍ͨ͠ͷͰ͋ΕΓฦ࣮͠ߦ͢Δࡍʹཁ͢Δ࣌ؒΛ‫ܭ‬ଌ͍ͯ͠Δɽ΋͜͠ͷ͹ɼωΠςΟϒͷ࣮૷Λߦ͏‫ݕ‬౼ͷ༨஍͕͋Δͱ͍͑Δɽ‫܁‬Γฦ͠ߦ͏࣮ߦ͕࣮૷ํ๏ʹΑͬͯ͸ϒϥ΢βʹΑΓ࠷దԽ͞ΕΔ৔߹ɼ‫ܭ‬ଌ݁Ռ͕‫͍ͯͬޡ‬ΔՄೳੑ͕͋Δɽ͜

4.2 class ؔ܎ͷ API ʹ͓͍ͯ jQuery3.x ‫࠷͕ܥ‬΋େ͖͍஋ΛऔΔཧ༝શ ͯ ͷ ά ϥ ϑ ͷ த Ͱ ೖ Ε ࢠ ߏ ଄ ͷ ‫ ܭ‬ଌ ༻ HTML ʹΕʹ͍ͭͯ Chrome ͷσϕϩούʔπʔϧΛ༻͍ͯௐ΂͕ͨɼ࠷దԽ͕ߦΘΕ͍ͯΔ͔Ͳ͏͔Λ֬ೝ͢Δ͜ͱ͸Ͱ͖ͳ͔ͬͨɽରͯ͠‫ه‬ड़ύλʔϯʮ$(class).addClass(string)ʯΛ

jQuery3.1.1 ͔Β‫ͼݺ‬ग़ͨ͠ͱ͖ʹ࠷େͷ஋ͱͳͬͨɽόʔ

5.2 ֎తଥ౰ੑ

δϣϯ͕ jQuery2.2.4 ͷ৔߹͸൒෼ҎԼͷ 4.5 ഒͰ͋Δɽ

ຊௐࠪͰ͸ JavaScript ϥΠϒϥϦΛ࢖༻ͨ͜͠ͱʹΑ

jQuery3.x ‫ܥ‬͸ jQuery2.x ‫ʹܥ‬ର࣮ͯ͠૷ͷ‫ݟ‬௚͠ΛߦͬΔ෭࡞༻Λ‫ܭ‬ଌ͢ΔͨΊʹ jQuery Λ୊ࡐͱͨ͠ɽ΋͠

͍ͯΔͨΊɼ࣮ߦ࣌ؒ͸ಉఔ౓͔গ͠୹͘ͳΔͱߟ͍͑ͯͨ

jQuery Ҏ֎ͷ JavaScript ϥΠϒϥϦΛ୊ࡐͱͯ͠‫ܭ‬ଌ͚ͩ͠ʹɼ༧૝ʹ൓͢Δ݁Ռͱͳͬͨɽ͜ͷ݁Ռʹ͍ͭͯௐ΂ͨͱ͖ʹҟͳΔ݁ՌʹͳΔՄೳੑ͕͋ΔɽΔͨΊʹɼaddClass ͱ removeClass ͷ࣮૷Λ jQuery ͷ֤ຊௐࠪͰ͸࢖༻ස౓ͷߴ͍‫ه‬ड़ύλʔϯΛू‫͢ܭ‬Δର৅όʔδϣϯ͝ͱʹൺֱͨ͠ɽjQuery1.12.4 ͱ jQuery2.2.4

ͱͯ͠ΞΫηε਺ͷଟ͍αΠτͷτοϓϖʔδͷΈΛબ୒ؒͰ͸େ͖ͳมԽ͸ͳ͔ͬͨͷʹର͠ɼjQuery2.2.4 ͱͨ͠ɽ΋͠τοϓϖʔδҎ֎΋ର৅ͱͨ͠৔߹͸ҟͳΔ‫ܭ‬

jQuery3.1.1 ؒͰ͸ਖ਼‫ن‬ද‫Ͳͳݱ‬ͷॲཧ͕มߋ͞Ε͍ͯΔ

ଌ݁ՌʹͳΔՄೳੑ͕͋Δɽ͔͠͠ͳ͕Βɼ1 ͭͷαΠτ͜ͱ͕Θ͔ͬͨɽηϨΫλ͕ class ͷ৔߹ʹ͓͍ͯେ͖ͳʹ͸๲େͳϖʔδ͕ଘࡏ͢ΔͨΊɼͦΕΒΛ͢΂ͯର৅ͱ͕ࠩੜ͍ͯ͡ΔͨΊɼෳ਺ͷߏ੒ཁૉʹର͢Δ࣮ߦʹର͢͠Δͷ͸ࠔ೉Ͱ͋Δͱ͍͏ͷ͸ 3 અͰड़΂ͨ௨ΓͰ͋ΔɽͯมߋͷӨ‫͕ڹ‬ग़ͨͷͰ͸ͳ͍͔ͱߟ͑ΒΕΔɽຊௐࠪͰ͸࣮ߦ࣌ؒͷ‫ܭ‬ଌʹ࢖༻͢Δϒϥ΢βͱͯ͠

Google Chrome Λ༻͍ͨɽ΋͠ଞͷϒϥ΢βΛ࢖༻ͯ͠‫ܭ‬
4.3 Ұ෦ͷ‫ه‬ड़ύλʔϯʹ͓͍ͯߏ଄ʹΑΓେ͖݁͘Ռ͕ҟͳΔཧ༝ಉ͡‫ه‬ड़ύλʔϯʹର͢ΔೖΕࢠߏ଄ͱฒྻߏ଄ͷάଌΛߦͬͨ৔߹ɼҟͳΔ‫ܭ‬ଌ݁ՌʹͳΔՄೳੑ͕͋Δɽ

6. ͓ΘΓʹ

ϥϑΛൺֱ͢Δͱɼଞ͕΄΅౳͍͠஋ΛऔΔͷʹରͯ͠ຊߘͰ͸ɼJavaScript ϥΠϒϥϦΛ࢖༻͢Δ͜ͱʹΑΔ

ʮ$(variable).find(string)ʯͷΈେ͖ͳ͕ࠩੜͨ͡ɽ

෭࡞༻ʹؔͯ͠ɼjQuery Λ୊ࡐͱͯ͠ API ͷ࣮ߦ࣌ؒͷʮfindʯ͸ HTML ͷߏ੒ཁૉΛ‫͢ࡧݕ‬Δ API Ͱ͋ΔɽͦมԽʹ͍ͭͯௐࠪͨ͠ɽ࣮‫ݧ‬ͷ݁ՌɼjQuery ͷ‫ه‬ड़ύλʔͷͨΊɼ࣮૷ํ๏ͱߏ଄ͷؔ܎ʹΑΓ͕ࠩੜͨ͡΋ͷͱߟϯΛ࢖༻͢Δ͜ͱʹΑΓɼωΠςΟϒͷ࣮૷ͱൺֱͯ͠ฏ

͑ΒΕΔɽ‫Ͱۉ‬໿ 4 ഒͷ࣮ߦ͕͔͔࣌ؒΔ͜ͱͳͲ͕Θ͔ͬͨɽ

5. ଥ౰ੑ΁ͷ‫ڴ‬Җ͜ͷઅͰ͸ຊௐࠪͷ݁Ռͷଥ౰ੑʹӨ‫ڹ‬Λ‫ڪ͢΅ٴ‬Εͷ͋Δ໰୊ʹ͍ͭͯड़΂Δɽࠓ‫ޙ‬ͷ‫ܭ‬ըͱͯ͠͸ɼωοτϫʔΫ௨৴ྔͱ͍ͬͨɼAPI ͷ࣮ߦ࣌ؒҎ֎ͷ෭࡞༻ʹ͍ͭͯௐࠪΛߦ͏ɽ·ͨɼJavaScript ϥΠϒϥϦʹ͍ͭͯ͸ɼjQuery Ҏ֎ͷϥΠϒϥϦʹରͯ͠΋ௐࠪΛߦ͏༧ఆͰ͋Δɽෳ਺ͷௐࠪͷ݁ՌΛ΋ͱʹ໌Β͔ʹͳͬͨ໰୊఺ʹରͯ͠ɼղܾҊΛఏҊ͢Δ5.1 ಺తଥ౰ੑ͜ͱΛ໨ඪͱͯ͠‫͍ͯ͛ܝ‬ΔɽຊௐࠪͰ͸αΠτͰ jQuery ͕࢖༻͞Ε͍ͯΔ͔֬ೝ΍‫ه‬ड़ύλʔϯऩूʹਖ਼‫ن‬ද‫ݱ‬Λ༻͍͍ͯΔɽຊདྷ͸ௐࠪͷँࣙ ຊ‫ڀݚ‬͸ɼ೔ຊֶज़ৼ‫ڵ‬ձՊֶ‫ڀݚ‬අิॿۚ‫ج‬൫ର৅ʹ͢΂͖‫ه‬ड़͕ਖ਼‫ن‬ද‫ʹݱ‬Ϛον͠ͳ͍͜ͱʹΑΓର‫ڀݚ‬ʢSʣ
ʢ՝୊൪߸ɿJP25220003ʣ
ɼ͓Αͼจ෦Պֶল‫ݚ‬৅ʹͰ͖͍ͯͳ͍Մೳੑ͕͋Δɽ

ʢ՝୊൪߸ɿJP26730155ʣͷॿ੒‫ڀ‬අิॿۚएख‫ڀݚ‬ʢBʣຊௐࠪͰ͸‫ه‬ड़ύλʔϯΛ࣮ߦ͢Δϖʔδͱͯ͠ɼ‫ܭ‬ଌΛಘͯߦΘΕͨɽ༻ HTML Λ࡞੒ͨ͠ɽ΋࣮͠ࡍͷ Web αΠτͷ HTMLʹରͯ͠‫ܭ‬ଌΛߦ͏ͱҟͳΔ݁ՌʹͳΔՄೳੑ͕͋Δɽ͔͠͠ͳ͕Βɼ࡞੒ͨ͠ HTML ͸ߏ੒ཁૉͷؔ܎ͷ͏ͪೖc 2012 Information Processing Society of Japan

7৘ใॲཧֶձ‫ڀݚ‬ใࠂ
IPSJ SIG Technical Reportࢀߟจ‫ݙ‬[1][2]
[3]

[4]

[5]

[6]

[7]

[8]

[9]

[10]

[11]

[12]
[13]

Pradel, M. and Sen, K.: The good, the bad, and theugly: An empirical study of implicit type conversions in
JavaScript, LIPIcs-Leibniz International Proceedings inInformatics, Vol. 37, Schloss Dagstuhl-Leibniz-Zentrum
fuer Informatik (2015).
Crockford, D.: JavaScript: The Good Parts: The Good
Parts, ” O’Reilly Media, Inc.” (2008).
Alimadadi, S., Mesbah, A. and Pattabiraman, K.:
Understanding asynchronous interactions in full-stack
JavaScript, Proceedings of the 38th International Conference on Software Engineering, ACM, pp. 1169–1180(2016).
Mesbah, A. and Prasad, M. R.: Automated crossbrowser compatibility testing, Proceedings of the 33rd
International Conference on Software Engineering,ACM, pp. 561–570 (2011).
Ochin, J. G.: Cross Browser Incompatibility: Reasonsand Solutions, International Journal of Software Engineering & Applications (IJSEA), Vol. 2, No. 3 (2011).
The jQuery Foundation: jQuery, The jQuery Foundation(online), available from http://jquery.com/ (accessed2017-02-07).
Q-Success: Usage Statistics and Market Share of jQuery
for Websites, February 2017, Q-Success (online), available from https://w3techs.com/technologies/details/jsjquery/all/all (accessed 2017-02-07).
Google:AngularJS – Superheroic JavaScript
MVW Framework, Google (online), available fromhttps://angularjs.org/ (accessed 2017-02-10).
Ashkenas, J.: Backbone.js, DocumentCloud (online),available from http://backbonejs.org/ (accessed 201702-10).
Fielding, R. T.: Architectural styles and the design ofnetwork-based software architectures, PhD Thesis, University of California, Irvine (2000).
Matsumoto, S. and Nakamura, M.: A Preliminary Studyof Size Optimization for Text-Based Web-Resource, Empirical Software Engineering in Practice (IWESEP),
2016 7th International Workshop on, IEEE, pp. 36–40(2016).
Salton, G. and McGill, M. J.: Introduction to modern
information retrieval (1986).
Selakovic, M. and Pradel, M.: Performance issues andoptimizations in JavaScript: An empirical study, Proceedings of the 38th International Conference on Software Engineering, ACM, pp. 61–72 (2016).

c 2012 Information Processing Society of Japan8