äžå£ã«JSerãšãã£ãŠããè²ã ãªåéã®äººãããŸããããªãã¯ã©ããªJSerã«ãªãããã§ããïŒãæ¹åæ§ã«ããåŠã¶ã¹ãäºãå€ãã£ãŠããŸããç®æšãæç¢ºã«ããŸãããã
ãšããããã§ãç¬æãšåèŠâŠâŠãšãããäž»ã«åèŠã§äžçš®é¡ã«ãŸãšããŠã¿ãŸããã
远èš: ãå匷æ³ããšãã¿ã€ãã«ã«ä»ããŠãããªããå匷æ³ã«è§ŠããŠãŸããã§ããã®ã§ãå匷ç¯å²ãã«ä¿®æ£ããŸãããã²ãŒã
äžçš®é¡
- ã¢ãã¡ãŒã·ã§ã³ãäœã人
- ã¢ããªãäœã人
- ãµãŒãåŽãäœã人
åºæ¬çã«ããã°ã©ãèŠç¹ã§ããã³ãŒããŒèŠç¹ãæåŸã«ã
ã§ã¯ãããããèŠãŠã¿ãŸãããã
ã¢ãã¡ãŒã·ã§ã³ãäœã人
Flashã®ä»£ããã«JavaScriptãCSSã䜿ã人ãFlasherãããã·ããããŠããäœçœ®ã
çºæ³šåŽãæ³å®ããJavaScripterãæè¿ã®æºåž¯ã²ãŒã ã§éèŠãããã
ãä»äº
JSã ãã§ãªãCSSãç»åãé§äœ¿ããŠç»é¢ãæãã
UIã ããªãããªããŠãå°ãäºã¯ãªãããã©ãUXãŸã§èãããšè²¢ç®åºŠã¯éåžžã«é«ãã
æ åäœåã¿ãããªãã®ãäœãå Žåãã(æ£çŽããã¯Flashã®æ¹ãè¯ãã®ã§ã¯ãšæããã©ã)
å匷ç¯å²
DOMããCSSãããšãã£ã衚çŸç³»ã®æè¡ãå¿ é ãCSS3ãªãã匷åã§ããã
ãŸãCanvasãSVGã䜿ã£ãŠããããåããå Žåãããããã®ãšãã¯ããããé«åºŠãªæ°åŠãæ±ãã
ãã¶ã€ããŒã§ã¯ãªãããã©ãããããææ§ãæ±ããããå Žé¢ãå€ããäžæ¹ã§ãèªç¶ãªåãããå®çŸããããã«ã¯ãç©çæ³åã®ç¥èãå¿ èŠã ã£ããããã
å€éããèŠããš
äžè¬äººã«äžçªãŠã±ãè¯ãã補äœç©ãèŠãããšãããããããŒïŒããšèšãããã
ã§ãé 匵ã£ãŠããFlashã¿ããã ãããšèšããããšãžããã
äœäŸ
3Dã§ããããåããã²ãŒã ç»é¢ãæ³å®ããå®è£ äŸãããäŒæ¥ã§ã¯ãªãå人ããã®äœåãªãã ãã©ãåèŠã§åºŠèãæãããã®ã§ããã§ç޹ä»ããŸãã
JSã®3Dæç»ã©ã€ãã©ãªthree.jsãå©çšãSPEC vol.5ã§GOLDãåè³ããäœåã
ã¢ããªãäœã人
ããããããã³ããšã³ããšã³ãžãã¢ã
ããã°ã©ããæ³å®ããJavaScripterã
ãä»äº
åçš®ã©ã€ãã©ãªããã¬ãŒã ã¯ãŒã¯ãé§äœ¿ããŠãçŽæçã§äœ¿ããããUIãæäŸããããã©ãã°&ãããããšãããã€ã¢ãã°ãšãã
ãŸãç®ã«ã¯èŠããªããç»é¢äžã®ããããæ§æèŠçŽ ã管çããããšããããã®ã§ãèšèšèœåãæ±ããããã
ãŠã§ããµãŒãã¹ãšãããããŠã§ãã¢ããªã®å®è£ ãè¡ãå Žé¢ã§æ¬é çºæ®ãããããã³ããšã³ãã®äžã®è£åŽãæ åœã
å匷ç¯å²
æè¿ã®HTML5ãJavaScript/ECMAScriptã®ååã«æ³šç®ããŠããã
ãŸãCoffeeScriptãTypeScriptãšãã£ãJS掟çèšèªããå¹çè¯ãéçºããããã®åçš®ããŒã«ããã䜿ã£ãŠããããã®ããæå€ãšé»ãç»é¢ãšã®ä»ãåããå€ãã
Ajaxã§ãµãŒããšã®ããåãããã®ã§ããããã¯ãŒã¯ããµãŒã絡ã¿ã®ç¥èããããšè¯ãã
ãµãŒããšéä¿¡ãããããä»ã¯ç»é¢ã®äžã§å®çµããã®ã§ãã¡ã¢ãªãªãŒã¯ã«å³ããããŸãèµ·åã®é«éåã®ããããã¡ã€ã«ãµã€ãºã®çž®å°ã«ãäœå¿µããªãã
å€éããèŠããš
äžè¬äººã«ã¯ãŠã±ãè¯ããªããäœã蟌ãã ãã®ãèŠããŠããããããããªäºåºæ¥ããã ãããããªãããããããèšãããªãããããããªããæ®éã®ãã®(ãã€ãã£ãã¢ããª)ãšéããªãïŒããšãèšãããã
GUIãªãã€ãã£ãã¢ããªã®ããã°ã©ãã«è¿ããWinãMacãæè¿ãªãiOSããAndroidããã
äœäŸ
èšãããšç¥ããGoogleæäŸã®ãŠã§ãã¡ãŒã©ãããããAjaxã®ã¯ããããã©ãã°ïŒããããã§ã¡ãŒã«ã管çããããç»é¢é·ç§»ãªãã§ã¡ãŒã«ã®é²èЧãäœæãåºæ¥ããæªã ã«ãããè¶ ãããŠã§ãã¡ãŒã©ã¯ãªãæ°ãããã
ç»åã¯ãµãŒãã¹å 容 â Google Apps for Businessããã
ãµãŒãåŽãäœã人
ããã¯ãšã³ããšã³ãžãã¢ãJavaScriptãšããããNode.jsããã人ã
äžè¬ã«ãŠã§ãããã°ã©ããšåŒã°ãã人ã
ãä»äº
諞ã ã®ãµãŒãã¹ãäœãããŠã§ãå±ããããã·ã¹ãã å±ãããšèšã£ãæ¹ããããããäœãã®ã¯ãŠã§ãç³»ã ãã©ããã¶ã€ã³ã¯è§Šããªããã©ãImageMagicã§ç»ååŠçã¯ããã
PerlãšãRubyãšããã£ãŠãããã®äžã§ãäœãããã®çç±ã«ããJavaScriptãéžæããŠãããèŠä»¶ãæºãããã°JSã«ã¯ãã ãããªãããšããããããJS以å€ã§ããããã£ãŠæã£ãŠããã
å匷ç¯å²
ãŠã§ããµãŒããDBãªã©ãã€ã³ãã©ãŸããã®ç¥èãå¿ èŠã
ãŸããããã¯ãŒã¯é¢é£ãå¿ é ãHTTPããããšãã¯èšããŸã§ããªããHTML5ã®WebSocketã䜿ã£ããªã¢ã«ã¿ã€ã éä¿¡ã®å®è£ ãã
ãµãŒãåŽãªã®ã§é»ãç»é¢ã®ç¥èãå¿ é ã§ããããã¯ããæ £ããäºãã§ãããšæãã
å€éããèŠããš
ç®ã«èŠããªãéšåãäœããäžéæ§ãæ³åãããããã°ã©ãåãã«æãè¿ãã
äžè¬äººã«ã¯ãŠã±ãªããèŠãããã«ããµãŒãã®äžã§åããŠãããå£é ã§èª¬æãããšããã§ããžããŒããšãããèãåå¿ããåŸãããªãã
ãNode.jsãã£ãŠãŸãïŒããŠãªäººã¯ã»ãšãã©ããªããã©ããNode.js ã ãããŸãïŒããªäººã¯å°ãªããªãããã
äœäŸ
ããã¯ãšã³ãã«Node.jsãæ¡çšããHTML5ã®WebSocketã§ãªã¢ã«ã¿ã€ã éä¿¡ããŠãããèæ¯ã«ãã£ã©ã¯ã¿ãŒããããããããå šéšãã®ç»é¢ã®é²èЧè ã«å¯Ÿå¿ããŠãããèªåã®ãã£ã©ã¯ã¿ãŒã¯ç¢å°ããŒã§åãããããçºèšããããã§ãããäžäººã§2ç»é¢éããŠåãããšããããããããã
ããããŸãããã³ãåŽã®å®è£ ãç®ç«ã£ã¡ãããŸããã
ãã®ä»
ãã¡ããå®éã©ããã«ãã±ã£ãšåœãŠã¯ãŸã人ã¯å°ãªããŠãè²ã å Œä»»ããŠãå Žåãå€ãã¯ããäžèšã®äžçš®é¡ä»¥å€ã«ããã
ãªããããã¯ã³ãŒããŒããã§ã¯ãªããããã°ã©ããšããŠã®åé¡ã§ãããæåŸã«ã³ãŒããŒæ¹é¢ã«ãè§ŠããŠãããŸãã
ã¹ãŒããŒã³ãŒããŒ
äž»ãªæŠå Žã¯HTMLãCSSã§ãäžç·ã«JSããã人ãããã«ãã¶ã€ã³ããã£ã¬ã¯ã·ã§ã³ãŸã§å Œä»»ããŠããå Žåãã
ããã°ã©ãã§ã¯ãªãããã©ãåºæ¬çãªããã°ã©ãã³ã°ã®åºç€ã¯æ¢ã«èº«ã«ä»ããŠããããã©ã°ã€ã³ã¯å¹çåã®ããã«å©çšããŠããã ããäŸåã§ã¯ãªãã®ã§ããããšãªãã°ãã©ã°ã€ã³ãã©ã€ãã©ãªãªãã§ãåå察åŠã§ããã
ã€ãŸãjQueryããã®ãã©ã°ã€ã³ããã䜿ãããå¿ èŠãªãèªäœã§ããã
ããã°ã©ãã³ã°çãªãã¶ã€ã³ãã¿ãŒã³ã¯ç¥ããªããŠããç¥èŠãšããŠè«žã 貯ãŸã£ãŠãããIE察çãªã©ã®BKã«åŒ·ãã
å¿ èŠæèœãŸãšã
ãã£ãããªã®ã§ä»äºã§ããäºãå匷ããŠããã¹ãäºãªããããŸãšããŠã¿ãŸãã
é ç® | ã¢ãã¡ | ã³ãŒã㌠| ã¢ã㪠| ãµãŒã㌠|
---|---|---|---|---|
äœããã® | ã³ã³ãã³ã | ãµã€ã | ã¢ã㪠| ã·ã¹ãã |
èŠãç® | 掟æ | ãµã€ã | å°å³ | ïŒèŠããªãïŒ |
HTML | â | â | â | â³ |
CSS | â | â | â | Ã |
DOM | â | â | â | â³ |
HTML5 (API) | Ã | â³ | â | Ã |
CSS 3 | â | â | â³ | Ã |
SVG | â | Ã | Ã | Ã |
Canvas | â | Ã | Ã | Ã |
XML | Ã | â³ | â | â |
ECMAScript | â³ | Ã | â | â |
Sassãªã© | â | â | â | à |
CoffeeScriptãªã© | à | â³ | â | â³ |
jQuery | â | â | â | Ã |
ãããã¯ãŒã¯ | à | à | â | â |
ããŒã¿ããŒã¹ | à | à | â³ | â |
WWWãµãŒã | à | à | à | â |
ãµãŒããŒéçš | à | à | à | â |
UNIX | Ã | Ã | â | â |
èŠèŠè¡šçŸ | â | â³ | â | à |
UA (â») | â | â | â | â³ |
ç©çãæ°åŠ | â | à | â³ | â³ |
ãœãããŠã§ã¢å·¥åŠ | â³ | à | â | â |
SEO | Ã | â | Ã | Ã |
ãã«ãããŒã« | â³ | â³ | â | â |
èªåè©Šéš | à | à | â | â |
ã¡ã¢ãªç®¡ç | â³ | à | â | â |
- â»UA … User Agent. ããã§ã¯ãŠã§ããã©ãŠã¶ããšã«ã€ããŠã®ç¥èã®ãå¿ èŠãã©ããããšãIEãšãSafariãšããWinãšMacãšããiOSãšAndroidãšãã
å匷ã®ä»æ¹ãèããã
äžèšã®åé¡ã«éãããèªåãå°æ¥ã©ã®äœçœ®ã«å°±ããããèãããšãèªããšåŠã¶ã¹ãäºãèŠããŠããããããªãã§ããããã
äŸãã°ã¢ãã¡ãŒã·ã§ã³ããã®ã«WWWãµãŒãã®ç¥èã¯ãããªããããµãŒãããã®ã«HTML5ã¯é¢ä¿ãªãããã¢ããªãäœãã®ã«æ¿éãµãŒã«ã¹ãåçŸããçç±ã¯ãªãããã³ãŒããŒãããªãJavaScriptããSEOãåŠã¶ã¹ããããã
ãšã¯ãã飿¥ããåéã®ç¥èãæã£ãŠãããšåœ¹ç«ã€å Žé¢ãå€ããšæããŸããäžã§ãæžããããã«å Œä»»ããäºã¯å€ãããã
æžç±
ãããŸãååéã«ç¹åããæ¬ã¯ãªãã§ããã£ãŠç§ãé©åœã«èšãåºãããã®ã ããåœç¶ãããããŸãããã
Node.jsã«ã€ããŠã¯æè¿åºãã¿ããã§ããã
æªèªã ãã©å¥œè©ã¿ããâŠâŠãšæã£ããAmazonã®è©äŸ¡ã¯ããŸãã¡ãããŸã æ¯æ°ãå°ãªãã®ã§äœãšãèšããããããã©ãã©ããªã®ããªãèªåã§èªãã£ãŠè©±ãã
JSåå¿è ãªã³ãŒããŒããåãã®JSæ¬ã¯è²ã ããã¿ãããªã®ã§ããã¡ãã¯é©åœã«æ¢ããŠã¿ãŠã¯ãããã§ããããããšãããããã¯ã»ã«ã°ãªããã®æ¹ã®æ¬ãäºå玹ä»ããŠãããŸãã
- ãã³ããã°ã©ãã®ããã®JavaScriptã¯ããã®äžæ© (WEB+DB PRESS plus)
(Amazon)
- Webãã¶ã€ããŒã®ããã® jQueryå
¥éãé
åçãªãŠãŒã¶ãŒã€ã³ã¿ãŒãã§ãŒã¹ãæè»œã«äœã (Books for Web Creative)
(Amazon)
ãããŸã
ãã®åé¡ã«å¯ŸããŠè«žã ãæèŠããããšæããŸããããããŸã§åäººã®ææ³ãšããäºã§ãã²ãšã€ã
3+1çš®é¡ã®äººã®ã€ã©ã¹ãã¯å¬åç§ãã @fuyukuniaki ãæããŠãã ãããŸããã
ã©ãã§ããããã©ããç¬æãšåèŠã§äºã ããŠæè¿èšããªããã
ãšã£ãŽãã±ããã®ã·ãã