NodeãšES6ã®æ代ã«ç§ãã¡ãæ¹ãã€ãããã®ã説æããããã«ïŒç§ãã¡ã¯åšåº«ããããããããŸãïŒãåè¿°ã®ç¬¬3çã®çŽåŸã«çºè¡ãããCody Lindleyã®èšäºãç¥ã£ãŠãã ããã
jQueryã®åœ¹ã«ç«ããªãããšã«ã€ããŠã®è©± 㯠é·ãé çµã㣠ãŠããªãã®ã§ãç§ã¯jQueryã®åºæ¬çãªäŸ¡å€ãå¿ããŠããŸã£ããšããèããæåéãåãé€ãããšãã§ããŸããã 圌女ã«æãåºãããæéã
ãã®èšäºã§ã¯ãjQueryãäœã§ããããçããã«ããäžåºŠäŒããããšæããŸããä»æ¥ã¯jQueryãç»å ŽæãããéèŠã§ã¯ãªãããã§ãã ãã®éèŠæ§ã®åé¡ã¯ããã©ãŠã¶ã®ãã°ãæ¬ èœããŠããæ©èœã§ã¯ãªãããã®ãœãªã¥ãŒã·ã§ã³å šäœã®æåã®ç®çïŒã€ãŸããjQuery APIèªäœïŒãšçžé¢ããŠããå¿ èŠããããŸãã ä»ã®äœãããå§ããå Žåã 絶察ã«å¿ èŠã§ã¯ãªããããããŸããããããã§ã匷åã§äŸ¿å©ãªæœè±¡åãæåŠãããç«å Žãåãå±éºããããŸãã
jQueryã®åèªãç±å¿ã«æè·ããåã«ããã®èµ·æºã«æ»ã£ãŠãjQueryãšã¯äœãããªãjQueryãå¿ èŠãªã®ããã¿ããªãç解ã§ããããã«ããŸãããã
jQueryãšã¯äœã§ããïŒ
jQueryã¯ããã©ãŠã¶ãŒã§HTMLèŠçŽ ããŒãã䜿çšãããšãããŸãã¯ã°ã©ãã£ã«ã«ã€ã³ã¿ãŒãã§ã€ã¹ãªãã§ãã©ãŠã¶ãŒã§äœæ¥ãããšãã«ãã¹ã¯ãªãããæœè±¡åãæŽåãä¿®æ£ãããã³ç°¡çŽ åããããã«èšèšãããJavaScriptã©ã€ãã©ãªïŒã€ãŸãã JavaScriptã§èšè¿°ãããŸãïŒã§ãã
ã ããïŒ
- ããã¥ã¡ã³ããªããžã§ã¯ãã¢ãã«ã€ã³ã¿ãŒãã§ã€ã¹ïŒå¥åDOM APIïŒã¯æœè±¡åãããŠããŸãã
- ãã©ãŠã¶ãŒéã§ååšããDOM å®è£ éã®ãã¹ãŠã®éãã¯èª¿æŽãããŸãã
- CSSããã³DOMã«é¢é£ããæ¢ç¥ã®ãã©ãŠã¶ãŒã®ãã°ã¯ä¿®æ£ãããŠããŸãã
ããã¯ãã¹ãŠããã€ãã£ãDOM APIãããã·ã³ãã«ã§äžæ Œå¥œãªAPIã«å€ãããŸã-ããã«jQueryã©ã€ãã©ãªããããŸãã
ããã§ããHTMLèŠçŽ ãã¹ã¯ãªããåããããšããæå³ã説æããŸãããã jQueryã䜿çšãããšãããhtmlããã¥ã¡ã³ãå ã®2çªç®ã®
h2
èŠçŽ ãèŠèŠçã«é ãããªã©ã®ã¿ã¹ã¯ãå®å šã«è§£æ±ºãããŸãã ãã®ãããªã¿ã¹ã¯ã®jQueryã³ãŒãã¯æ¬¡ã®ããã«ãªããŸãã
jQuery('h2:eq(1)').hide();
ãã®è¡ãjQueryã³ãŒãã§èŠãŠã¿ãŸãããã æåã«ã
jQuery()
é¢æ°ãåŒã³åºãããããã«jQueryã©ã€ãã©ãªãŒã«ç¹å¥ãª CSSã»ã¬ã¯ã¿ãŒãæž¡ããŸããjQueryã©ã€ãã©ãªãŒã¯ãHTMLããã¥ã¡ã³ãå ã®2çªç®ã®
h2
èŠçŽ ãéžæããŸãã 次ã«ãjQuery
.hide()
ã¡ãœãããåŒã³åºããã
h2
èŠçŽ ãé衚瀺ã«ãªããŸãã ããã«ãjQueryã³ãŒããã©ãã»ã©ã·ã³ãã«ã§æå³çã«è¡šçŸåããããã瀺ããŸãã
次ã«ãjQueryã䜿çšããŠããªãã£ãå Žåã«èšè¿°ããå¿ èŠããããã€ãã£ãDOMã³ãŒããšæ¯èŒããŸãã
document.querySelectorAll('h2')[1].style.setProperty('display','none');
æžãæ¹ã䟿å©ãªãªãã·ã§ã³ã¯ã©ãã§ããïŒ èªã¿åããšãããã°ïŒ ãŸããäžèšã®ãã€ãã£ãDOMã³ãŒãã¯ããã¹ãŠã®ãã©ãŠã¶ãŒãããã§äœ¿çšãããDOMã¡ãœããããµããŒãããŠããããšãåæãšããŠããããšã«æ³šæããŠãã ããã ãã ããäžéšã®å€ããã©ãŠã¶ãŒã¯
querySelectorAll()
ãŸãã¯
setProperty()
ãµããŒãããŠããªãããšãå€æããŠããŸãã ãããã£ãŠãäžèšã®jQueryã³ãŒãã¯IE8ã§æ£åžžã«åäœãããã€ãã£ãDOMã³ãŒãã¯JavaScriptãšã©ãŒãã¹ããŒããŸãã ããããããã§ããäž¡æ¹ã®ã³ãŒãè¡ãã©ãã§ãæ©èœãããšããŠããã©ã¡ããèªã¿ããããæžããããã§ããããïŒ
jQueryãæ±ãå Žåãã©ã®ãã©ãŠã¶ãäœããµããŒãããŠããã®ããã©ã®ãã©ãŠã¶ã®ã©ã®DOM APIãã¯ã©ãã·ã¥ããã®ããå¿é ããå¿ èŠã¯ãããŸããã jQueryã¯å€ãã®åé¡ãæœè±¡åãããããjQueryã䜿çšãããšãããã·ã³ãã«ãªã³ãŒãã§ã¿ã¹ã¯ã解決ããããã®äœæ¥ãé«éåã§ããå¿é ããå¿ èŠã¯ãããŸããã
jQuery = JavaScriptïŒ
jQueryã¯ã©ãã«ã§ãããã®ã§ãJavaScriptãã©ãã§çµäºããŠjQueryãå§ãŸãã®ããããããããããªãã§ãããã å€ãã®Webãã¶ã€ããŒãåå¿è ã®HTML / CSSéçºè ã«ãšã£ãŠãjQueryã©ã€ãã©ãªãŒã¯JavaScriptããã°ã©ãã³ã°èšèªãšã®æåã®æ¥è§Šã§ãã ãããã£ãŠãjQueryã¯JavaScriptãšæ··åãããããšããããŸãã
ãŸããJavaScriptãjQueryã§ã¯ãªããDOM APIãã®ãã®ã§ããªãããšãäºçŽããŸãããã jQueryã¯JavaScriptã§èšè¿°ããããµãŒãããŒãã£ã®ç¡æã©ã€ãã©ãªã§ãããéçºè ã®ã³ââãã¥ããã£å šäœã§ãµããŒããããŠããŸãã ããã«ãjQueryã¯ãHTMLãCSSããŸãã¯DOMä»æ§ãäœæããçµç¹ïŒW3Cãªã©ïŒã®æšæºã§ã¯ãããŸããã
jQueryã¯äž»ã«ç ç³ãšããŠæ©èœããDOM APIã®äžã§äœ¿çšãããããšã«æ³šæããŠãã ããã ãã®ç ç³ã¯ããã®è€éããšè±å¯ãªãã°ã§æåãªDOMã€ã³ã¿ãŒãã§ãŒã¹ãšé£æºããã®ã«åœ¹ç«ã¡ãŸãã
jQueryã¯ãHTMLèŠçŽ ã®ã¹ã¯ãªãããèšè¿°ãããšãã«äœ¿çšã§ãã䟿å©ãªã©ã€ãã©ãªã§ãã å®éã«ã¯ãã»ãšãã©ã®éçºè ã¯DOMã¹ã¯ãªããã§ããã«é Œã£ãŠããŸãããªããªãããã®APIã«ãããããå°ãªãã³ãŒãã§ããå€ãã®åé¡ã解決ã§ããããã§ãã
jQueryã©ã€ãã©ãªãšãã®ãã©ã°ã€ã³ã¯éçºè ã«ãã£ãŠéåžžã«åºã䜿çšãããŠããããããã®ãããªã³ãŒãã¯å€ãã®å ŽåãWebå šäœã§æã人æ°ã®ããã¹ã¯ãªãããšããŠè³è³ãããŠããŸãã
jQueryã®2ã€ã®åºç€
jQueryã®ããŒã¹ãšãªã2ã€ã®åºæ¬æŠå¿µã¯ããæ€çŽ¢ããŠå®è¡ããšãæžã蟌ã¿ãå°ãªãããŠãããå€ããå®è¡ãã§ãã
ãããã®2ã€ã®æŠå¿µã¯ã次ã®ã¹ããŒãã¡ã³ããšããŠæ¡åŒµããã³åå®åŒåã§ããŸããjQueryã®äž»ãªã¿ã¹ã¯ã¯ãéžæè¢ãæŽçïŒã€ãŸããæ€çŽ¢ïŒããããå®çšçãªåé¡ã解決ããããã®HTMLèŠçŽ ãäœæããããšã§ãã jQueryããªããã°ãããã«ã¯ããå€ãã®ã³ãŒããšDOMãåŠçããããå€ãã®ã¹ãã«ãå¿ èŠã«ãªããŸãã èŠçŽ
h2
ããŠäžèšã§æ€èšããäŸãæãåºãã ãã§ååã§ãã
jQueryæ©èœã®ç¯å²ã¯ããã«éå®ãããªãããšã«æ³šæããŠãã ããã ãã€ãã£ãDOMã€ã³ã¿ã©ã¯ã·ã§ã³ãæœè±¡åããã ãã§ãªãã XMLHttpRequestãªããžã§ã¯ãã䜿çšããŠéåæHTTPãªã¯ãšã¹ãïŒããããAJAX ïŒãæœè±¡åããŸãã ããã«ã å€ãã®ãµããŒãJavaScriptãœãªã¥ãŒã·ã§ã³ãšå°ããªããŒã«ããããŸã ã ããããjQueryã®äž»ãªå©ç¹ã¯ãHTMLã¹ã¯ãªããã£ã³ã°ãæ£ç¢ºã«åçŽåãããããšãšãjQueryã§äœæ¥ã§ããããšã§ãã
ãŸããjQueryã®å©ç¹ã¯ãã©ãŠã¶ãŒã®ãã°ãæ£åžžã«é€å»ããããšã§ã¯ãªãããšãä»ãå ããŸãã åºç€ã¯jQueryã®ãããã®åŽé¢ãšã¯ãŸã£ããé¢ä¿ãããŸããã é·ãç®ã§èŠãã°ãjQueryã®æ倧ã®åŒ·ã¿ã¯ããã®APIãDOMãæœè±¡åããããšã§ãã ãããŠããã®å€ã¯ã©ãã«ãè¡ããŸããã
jQueryãšææ°ã®Webéçºã®èåæ¹æ³
jQueryã©ã€ãã©ãªãŒã¯ãã§ã«10幎åã§ãã Webéçºã®æ代ã®ããã«äœæããããã®ã§ãç§ãã¡ã¯ãã§ã«ééããªãåæ ŒããŠããŸãã jQueryã¯ãDOMã®æäœãéåæHTTPèŠæ±ã®äœæã«äžå¯æ¬ ãªãã¯ãããžãŒã§ã¯ãããŸããã jQueryã§ã§ããããšã®ã»ãšãã©ã¯ãjQueryãªãã§ãã§ããŸã ã ãŸãã1ã€ãŸãã¯2ã€ã®ææ°ã®ãã©ãŠã¶ãŒã§DOMãšã®å°ããªç°¡åãªå¯Ÿè©±ã«èå³ãããå Žåã¯ãjQueryããããã€ãã£ãã®DOMã¡ãœããã䜿çšããæ¹ãããå ŽåããããŸã ã
ãã ããè¡šé¢çãªçžäºäœçšã ãã§ãªããBOMïŒ ããã¥ã¡ã³ããã©ãŠã¶ãŒã¢ãã« ïŒãŸãã¯DOMã«é¢é£ããéçºã§ã¯ãjQueryã䜿çšããå¿ èŠããããŸãã ãã以å€ã®å Žåã¯ããã€ãŒã«ïŒjQueryæœè±¡åã®èŠçŽ ïŒãåçºæããããããçš®é¡ã®ãã©ãã¯ïŒã¢ãã€ã«ãã©ãŠã¶ãŒãPCãã©ãŠã¶ãŒïŒã§ãããäœéšããŸãã
çµéšè±å¯ãªéçºè ã¯ãã巚人ã®è©ã«ç«ã€ãããšã®æå³ãšãé床ã®è€éããåé¿ããã¿ã€ãã³ã°ãç¥ã£ãŠããŸãã ã»ãšãã©ã®å ŽåãHTMLãDOMã«é¢é£ããéèŠãªäœæ¥ãçæéã§å®è¡ããå¿ èŠãããå Žåã§ããjQueryãªãã§ã¯å®è¡ã§ããŸããã
ããã«ãããšãjQueryãDOMãŸãã¯DOMä»æ§ã®ããŸããŸãªãã©ãŠã¶ãŒå®è£ ã«é¢ããåäžã®åé¡ã解決ããªãã£ããšããŠããHTMLã¹ã¯ãªããã£ã³ã°ã«ãšã£ãŠéåžžã«äŸ¿å©ã§ãããããAPIèªäœã®éèŠæ§ã¯æžããŸããã
ããã«ãjQueryã¯æ¹åãããŠããããã®å©ãã«ããããã°ã©ããŒã¯ããã€ã³ããªãžã§ã³ãã«ãããéãäœæ¥ã§ããŸãã ããã¯ä»æ¥ã®ç¶æ³ã§ãããå³æžé€šã®äœææã§ããã ãjQueryã¯å¿ èŠãããŸããããšèšãããšã¯ããlo-dashãŸãã¯underscore.jsããªããŠãã§ããããšèšãããšãšåãã§ãã ãã¡ãããããããªãã§ãå®è¡ã§ããŸãã ãããããã®äŸ¡å€ã¯ããã«ãã£ãŠå€æãããŸããã
ãããã®äŸ¡å€ã¯APIã«ãããŸãã è€éããããããéçºãé ããªãå ŽåããããŸãã ãã®ãããlo-dashãjQueryã®ãããªãã®ã奜ãã§ã-ãããã¯ãã¹ãŠåçŽåãããŠããŸãã ãŸããjQueryã䜿çšãããšãè€éãªã¿ã¹ã¯ïŒHTMLçšã®ã¹ã¯ãªããã®äœæãªã©ïŒãç°¡åã«å®è¡ã§ãããããæ代é ãã«ãªãããšã¯ãããŸããã
jQueryãææ°ã®Webéçºã«å¿ èŠãã©ãããŸã çåãããå Žåã¯ãã©ã€ãã©ãªã®éçºè ã®1人ã«ãã次ã®ãã¬ãŒã³ããŒã·ã§ã³ãèŠãããšããå§ãããŸãã圌ã¯ã ææ°ã®ãã©ãŠã¶ã®æ©èœã«é¢ä¿ãªãããã®å¿ èŠæ§ãæ£åœåããŸã ã
ä»é²-jQueryã«ã€ããŠã®éèŠãªäºå®
æåŸã«ãjQueryã«ã€ããŠã®ããã€ãã®éèŠãªäºå®ããªã¹ãããŸãã
- jQueryã©ã€ãã©ãªãŒã¯John Resigã«ãã£ãŠäœæããã2006幎8æ26æ¥ã«ãªãªãŒã¹ãããŸãããJohnã¯ããJavaScriptãšHTMLã®çžäºäœçšãé©åœåãããããã«ãã®ã³ãŒããäœæããããšãèªããŸããã
- jQueryã¯ãæã人æ°ãããã人æ°ã®ããææ°ã®JavaScriptã©ã€ãã©ãªãšèŠãªãããŠããŸãã
- jQueryã¯ãMITã®äžã§ã©ã€ã»ã³ã¹äŸäžãããããªãŒãœãããŠã§ã¢ã§ã ã
- jQueryã«ã¯2ã€ã®ããŒãžã§ã³ããããŸãã ããŒãžã§ã³1.xã¯Internet Explorer 6ã7ãããã³8ããµããŒããã2.xã¯IE9 +ã®ã¿ããµããŒãããŸãã IE8ã®ãµããŒããå¿ èŠãªå Žåã¯ãããŒãžã§ã³1.xã§äœæ¥ããå¿ èŠããããŸãã ããããããã¯æ£åžžã§ãããäž¡æ¹ã®ããŒãžã§ã³ããŸã ç©æ¥µçã«éçºãããŠããŸãã
- jQuery 2.xã®æå°ããŒãžã§ã³ã¯82kbã§ãã Gzipã¢ãŒã«ã€ã-çŽ28k ã
- jQuery 1.xã®æå°ããŒãžã§ã³ã®ãµã€ãºã¯96kbã§ãã Gzipã¢ãŒã«ã€ã-çŽ32kã
- JQueryãœãŒã¹ã³ãŒãã¯Githubã§å ¥æã§ããŸãã
- Githubã®ãœãŒã¹ã³ãŒãã«åºã¥ããŠã ç¬èªã®ããŒãžã§ã³ã®jQueryãäœæã§ããŸã ã
- jQueryã¯bowerãŸãã¯npmããã±ãŒãžãããŒãžã£ãŒã䜿çšããŠã€ã³ã¹ããŒã«ã§ããŸãïŒã€ãŸãã
$ bower install jquery or npm install jquery
ïŒã - JQueryã«ã¯ãå ¬åŒã®CDNãããã¯ãŒã¯ããããããŸããŸãªããŒãžã§ã³ã®jQueryãå ¥æã§ããŸãã
- jQueryã«ã¯ã·ã³ãã«ãªãã©ã°ã€ã³ããŒã¹ã®ã¢ãŒããã¯ãã£ãããããã誰ã§ãç¬èªã®ã¡ãœãããè¿œå ã§ããŸãã
- jQueryã«ã¯åºç¯ãªãã©ã°ã€ã³ã®ã»ããããããŸãã ãšã³ã¿ãŒãã©ã€ãºéçºçšã®é«å質ã®ãã©ã°ã€ã³ïŒKendo UIãªã©ïŒãè³Œå ¥ããããã¯ãŒã«ãªç¡æã®ãã©ã°ã€ã³ïŒBootstrapãªã©ïŒã䜿çšã§ããŸãã
- jQueryã¯åé¡ã§ããŸãïŒAPIããã¥ã¡ã³ãã®å èš³ã«åŸã£ãŠïŒã
- ã¢ã€ãã¯ã¹
- å±æ§
- ã³ãŒã«ããã¯ãªããžã§ã¯ã
- ã³ã¢
- CSS
- ããŒã¿
- é 延ãªããžã§ã¯ã
- 寞æ³
- å¹æ
- ã€ãã³ã
- ãã©ãŒã
- å éš
- æäœ
- éå€ãª
- ãªãã»ãã
- ç©æ§
- ã»ã¬ã¯ã¿ãŒ
- 暪æ
- ãŠãŒãã£ãªãã£