èªãã : ãBACKBONE.JS ã¬ã¤ãããã¯ã 髿©ä¾ä¹ è

- ä½è : 髿©ä¾ä¹
- åºç社/ã¡ã¼ã«ã¼: ã©ãã«ãº
- çºå£²æ¥: 2013/04/25
- ã¡ãã£ã¢: åè¡æ¬ï¼ã½ããã«ãã¼ï¼
- ãã®ååãå«ãããã° (2ä»¶) ãè¦ã
id:yuku_t ããèã® ãBACKBONE.JS ã¬ã¤ãããã¯ã ãèªã¿çµããã¾ãã *1ã
Backbone.js ã®ãã¨ã¯ãã¡ãããJS ã§ã®éçºã«ä¾¿å©ãªãã¼ã«ã«ã¤ãã¦ãæ¸ããã¦ããåå¼·ã«ãªãã¾ããã JS ã§ã®ã¯ã©ã¤ã¢ã³ããµã¤ãã¢ããªã±ã¼ã·ã§ã³éçºã®å®è·µçãªè©±ãç¥ãããã¨ãã人ã«ã¨ã£ã¦å½¹ç«ã¤ä¸åã ã¨æãã¾ãã
æ¬æ¸ã®æ¦è¦
æ¬æ¸ã¯ãJavaScript ã®ã©ã¤ãã©ãªã§ãã Backbone.js ã使ã£ã¦ web ãµã¼ãã¹ã®ã¯ã©ã¤ã¢ã³ããµã¤ãã®éçºãè¡ãæ¹æ³ã«ã¤ãã¦æ¸ãããæ¬ã§ãã
Backbone.js ã«ã¤ãã¦ã®èª¬æããããã¨ã¯ãã¡ããã®ãã¨ãRequireJS ã使ã£ã¦ AMD å½¢å¼ã® JS ã¢ã¸ã¥ã¼ã«ç®¡çãããæ¹æ³ããJS ã§æ¸ãããã¯ã©ã¤ã¢ã³ããµã¤ãã®ã¢ããªã±ã¼ã·ã§ã³ã®ãã¹ãã®æ¹æ³ãnpm ã«ããããã¸ã§ã¯ãã®ä¾å管çã Grunt ã«ããã¿ã¹ã¯ç®¡çã®æ¹æ³ãªã©ãæ¸ããã¦ãã¾ãã Backbone.js ã«ã¤ãã¦ã®æ¸ç±ãã¨ããããããBackbone.js ã使ã£ã¦ã¯ã©ã¤ã¢ã³ããµã¤ãã¢ããªã±ã¼ã·ã§ã³ãéçºããææ³ã«ã¤ãã¦ã®æ¬ãã¨ããèªèã®æ¹ãæ£ããã¨æãã¾ãã
æ¸ç±ã®ç®æ¬¡ãªã©ã¯ä¸è¨ãµãã¼ããã¼ã¸ã«ããã¾ãã®ã§ã詳ããã¯ãã¡ããã覧ãã ããã
Backbone.js ã¯ãã¬ã¼ã ã¯ã¼ã¯ãªã®ã
æ¥æ¬èªã® Backbone.js ã®ç´¹ä»ãè¦ãã¨ããã ãBackbone.js ã¯ã¯ã©ã¤ã¢ã³ããµã¤ãã® MVC ãã¬ã¼ã ã¯ã¼ã¯ã ã¨æ¸ããã¦ããã®ãç®ã«ããã®ã§ãããBackbone.js ããã¬ã¼ã ã¯ã¼ã¯ã ã¨æããã®ã¯æ£ãããªãããã«æãã¾ãã (Backbone.js ã®å ¬å¼ãµã¤ãã® FAQ ã«ã âBackbone is a library, not a framework, and plays well with others.â ã¨æ¸ããã¦ãã¾ãã) æ¬æ¸ã§ã Backbone.js ã ãMVC ãã¬ã¼ã ã¯ã¼ã¯ã ã¨ãã¦ç´¹ä»ããã¦ãã¾ãããããã ããã¬ã¼ã ã¯ã¼ã¯ã§ã¯ãªãã ã¨èããæ¹ãçè§£ããããã®ã§ã¯ãªããã¨æãã¾ããã
ãã¬ã¼ã ã¯ã¼ã¯ã®å ´åã¯ã¢ããªã±ã¼ã·ã§ã³ã®æ çµã¿ãæä¾ããã¦ãã¦ãéçºè ã¯ãã®æ çµã¿ã®ä¸ã§å¿ è¦ãªã¯ã©ã¹ãã¡ã½ãããå®ç¾©ãã¦ãããã¨ã«ãªãã¾ãã 䏿¹ãBackbone.js ã§ã¯ãModel ã View ã¨ãã£ã便å©ãªã¯ã©ã¹ãæä¾ããã¦ãã¾ããããããã©ã使ããã¨ããã®ã¯éçºè ã«å§ãããã¦ãã¦ãã¢ããªã±ã¼ã·ã§ã³å ¨ä½ãã©ãããè¨è¨ã«ãããã¨ãã£ãé¨åã¯éçºè ãèããªããã°ãªãã¾ããã
æ¬æ¸ã Backbone.js ã使ãä¸ã§ã®æéãä¸ãã¦ããã
Backbone.js ãæåã«è§¦ã£ãã¨ãã« ãã©ã使ãã°ããã®ãããããããªãã ã¨æãã人ã¯å¤ãã®ã§ã¯ãªããã¨æãã®ã§ããããã㯠Backbone.js ããã¬ã¼ã ã¯ã¼ã¯ã§ã¯ãªãåãªãã©ã¤ãã©ãªã§ãããã©ã使ããã¯éçºè ã«ä»»ããã¦ãããã¨ããã¨ããã«ä¸å ãããã®ã§ã¯ãªãã§ããããã ãã©ã使ããã¯èªç±ã ã¨è¨ããã¦ãå°ã£ã¦ãã¾ãã¾ãããã ããã§ Backbone.js ã使ãéã®éçºã®æéãæ¬²ãããªãããã§ããããããæ¸ããã¦ããã®ãæ¬æ¸ã¨ããããã§ãã
ããããã® MVC ã®èãæ¹ã®èª¬æããã¯ãã¾ããBackbone.js ã«ããã MVC ã®èª¬æãBackbone.js ã®å種ã¯ã©ã¹ã®åºæ¬çãªä½¿ãæ¹ã®èª¬æããããããå ´åã¯ããããã°ããã ã¨ã ããããããã¨ã¯ãã¦ã¯ãããªãã ã¨ãã£ãå®è·µçãªå 容 (ãã¹ããã©ã¯ãã£ã¹ã¨ãã¢ã³ããã¿ã¼ã³) ãæ¸ããã¦ãã¦ãBackbone.js ã使ã£ã¦ã¿ããã©é¦´æããªãã£ãç§ã«ã¨ã£ã¦ã¯ ããªãã»ã©ãªã¼ã ã¨ç´å¾ããããããã®ã§ããã
Backbone.js 以å¤ã®è©± (ãã¹ãã¨ã)
ä¸ã§ãè¿°ã¹ãã¨ãããä¸è¨ã®ãããªãã¼ã«ã®ä½¿ãæ¹ãªã©ã®èª¬æããªããã¦ãã¾ãã
- JS ã®ã¢ã¸ã¥ã¼ã«ç®¡ç : RequireJS, r.js
- ãã¹ã : QUnit, Jasmine
- ããã¸ã§ã¯ã管ç : npm, Grunt
RequireJS ã r.js ã¯ä½¿ã£ããã¨ããªãã£ãã®ã§ãããããã®ãããã®ãã¼ãã¨åèã«ãªãã¾ããã QUnit ã JasmineãnpmãGrunt ãªã©ã¯ãç¾å¨ã® JavaScript ã«ããéçºã«ããã¦ã¯å®çªã®ãã®ã§ããã ã²ã¨ã¨ããå®éã«ã©ããã風ã«ä½¿ãã®ãã¨ãã£ã説æããªããã¦ããã®ã§ããããã®ãã¼ã«ã使ã£ããã¨ããªã人ã§ãæ¬æ¸ãèªãã°ä½¿ãæ¹ããããã¨æãã¾ãã ãã¡ããæ¬æ¸ãèªãã ãã§ãããã®ãã¼ã«ã使ãããªããããã«ãªãããã§ã¯ãªãã詳細ãç¥ãããã«ã¯å ¬å¼ãµã¤ããªããªããªãã§èª¿ã¹ãå¿ è¦ã¯ããã®ã§ãããå®çªã®éçºç°å¢ãã©ããããã®ãªã®ããã¾ã¨ã¾ã£ã¦ããææ¸ã£ã¦ãã¾ããªãæ°ãããã®ã§ãããããç¹ã§ä¾¡å¤ãããã¨æãã¾ãã
èªã¿çµãã£ã¦ã®ææ³
åé ã«ãæ¸ããéãããBackbone.js ã使ã£ã¦ã¯ã©ã¤ã¢ã³ããµã¤ãã¢ããªã±ã¼ã·ã§ã³ãéçºããææ³ã ãã¾ã¨ã¾ã£ã¦ãã¦ãããã«ãªãã¾ããã Backbone.js ã«èå³ããã人ã Backbone.js ãã¡ãã£ã¨ä½¿ã£ã¦ã¿ããã©ããããããªãã£ãã¨ããäººã¯æ¯éèªãã¨ããã¨æãã¾ãã
ç§èªèº«ã¨ãã¦ã¯ãæ¬æ¸ãèªãã ãã¨ã§ãããã¾ã§ã¡ããã¨çè§£ã§ãã¦ããªãã£ã Backbone.js ã®ãã¾ãä½¿ãæ¹ãçè§£ã§ãã¾ãã (ã§ããæ°ããã)ã
åæç¥èã¨ã㦠JS, DOM, HTML (ã jQuery ãå°ã ) ã®åºæ¬çãªç¥èã¯ãããã®ã¨ãã¦æ¸ããã¦ãã¾ãã®ã§ãããã辺ãå ¨ç¶ããã£ã¦ãªãäººã¯æ¬æ¸ãèªãåã«ããã辺ã®åå¼·ãããå¿ è¦ãããã¾ãã (ããããããã辺ã®ç¥èãªãã§ Backbone.js ã使ããã¨ã¯ããªãã¨æãã¾ããã) ããã辺ã®ç¥èãæã£ã¦ãããã©ãJS ã§ã¯ã©ã¤ã¢ã³ããµã¤ãã¢ããªã±ã¼ã·ã§ã³ããã¾ãæ§é åã§ããªãã¦æ©ãã§ãããã¨ãã人ã«ã¯æ¬æ¸ããããããã¾ã!
*1:yuku_t ããããç´æ¥é ãã¾ããã ãããã¨ããããã¾ã!