2018-05-01 [ĹǯÆüµ]
_ ViewModel·Ï¥Õ¥ì¡¼¥à¥ï¡¼¥¯¤Ç¥Ç¡¼¥¿¤ÎÊѲ½¤ò´Æ»ë¤µ¤»¤Ê¤¤
¼Â¤ÏºÇ¶á Vue.js ¤Ð¤«¤ê¤¤¤¸¤Ã¤Æ¤¤¤Æ¡¢¤½¤Î»þ¤Ë
data ¤ÎÊѹ¹¤ò component ¤¬Á´Éô¸¡ÃΤ·¤Æ¤·¤Þ¤¦¤È¥â¥Î¤Ë¤è¤Ã¤Æ¤Ï¥Ñ¥Õ¥©¡¼¥Þ¥ó¥¹¥Ú¥Ê¥ë¥Æ¥£¤¬¤Ç¤«¤¤¤Î¤Ç¤Ï¡©
¤Èµ¤¤Ë¤Ê¤Ã¤¿¤Î¤Ç¡¢¤Ä¤¤¤Ç¤Ë¥á¥¸¥ã¡¼¤Ê¥Õ¥ì¡¼¥à¥ï¡¼¥¯¤Ë¤Ä¤¤¤Æ¡Ö´Æ»ë¤µ¤»¤Ê¤¤ÊýË¡¡×¤òÄ´¤Ù¤Æ¤ß¤¿¡£º£²óÄ´¤Ù¤¿¤Î¤Ï°Ê²¼¤Î4¤Ä¡£
- Vue.js
- Mithril
- React
- Angular (2+)
¤Á¤Ê¤ß¤Ë React °Ê³°¤ò¤Á¤é¤Ã¤È¿¨¤Ã¤¿¤³¤È¤¢¤ëÄøÅ٤ʤΤǡ¢´Ö°ã¤¨¤Æ¤ë²ÄǽÀ¤Ï¤ª¤ª¤¤¤Ë¤¢¤ê¤Þ¤¹¡ª¡ª£±
Vue.js
Vue ¤Î¾ì¹ç¤Ï data ¤¢¤ë¤¤¤Ï data() ¤Ç¡Ö¥Ó¥ë¥É»þ¤ËÌÀ¼¨¤µ¤ì¤Æ¤¤¤Ê¤¤¤â¤Î¡×¤Ï¼«Æ°´Æ»ë¤Ç¤¤Ê¤¤¡£
¤Ä¤Þ¤ê created() ¤Ê¤É¤Ç this ¤ËÂФ·¤ÆÃͤò¥»¥Ã¥È¤¹¤ë¤È¤½¤ì¤Ï auto redraw ¤ÎÂоݤ«¤é³°¤ì¤ë¤Î¤ÇÊѲ½¤Î·ã¤·¤¤¥ª¥Ö¥¸¥§¥¯¥È¤Ê¤É¤Ï¤³¤Î¤è¤¦¤ÊÊýË¡¤ÇÍ¿¤¨¤ë¤È¤è¤¤¡£
data() { return {} }, created() { this.nowatch = NotWatchedObject }
Mithril
Mithril ¤Ë¤Ï¥Ç¡¼¥¿¤ÎÊѹ¹¤ò¼«Æ°¸¡ÃΤ·¤Æ redraw ¤¹¤ëµ¡Ç½¤Ï¸ºß¤·¤Ê¤¤¡£¤¢¤¯¤Þ¤Ç VM component ¤Ï¥¤¥Ù¥ó¥È¥Ï¥ó¥É¥é¼Â¹Ô¸å¤Ë redraw ¤ò¹Ô¤¦¡£¤Ä¤Þ¤êÆÃÄê¤ÎÃͤÎÊѹ¹¤Ë´óÍ¿¤¹¤ë´Ø¿ô¤ò Mithril ¤ËÌÀ¼¨¤·¤Ê¤¤¸Â¤ê component ¤ÏÃͤÎÊѹ¹¡¢ÊѲ½¤Î±Æ¶Á¤ò¼õ¤±¤Ê¤¤¡£
¤·¤¿¤¬¤Ã¤Æ¼«Í³¤Ë³°¤ÎÀ¤³¦¤òÅý¤Ù¤ë World ¥ª¥Ö¥¸¥§¥¯¥È¤Ê¤É¤òÇÛÃÖ¤¹¤ë¤³¤È¤¬¤Ç¤¤ë¡£
¤Ï¤º¡£
cf. ¼«Æ°ºÆÉÁ²è¥·¥¹¥Æ¥à - Mithril.js
React
class ¥Ù¡¼¥¹¤Î React.component ¤Ï state ¤È props ¤¬´Æ»ëÂоݤǤ¢¤ê¡¢¤½¤ì°Ê³°¤Î property ¤Ï¼«Í³¤Ë»È¤¨¤ë¡£
While this.props is set up by React itself and this.state has a special meaning, you are free to add additional fields to the class manually if you need to store something that doesn¡Çt participate in the data flow (like a timer ID).
Angular 2+
Angular 2+ ¤Ï Zone ¤È¤¤¤¦¥é¥¤¥Ö¥é¥ê¤ò»È¤Ã¤Æ
- ¥æ¡¼¥¶¡¼¤Î fire ¤·¤¿¥¤¥Ù¥ó¥È
- XHR
- ¥¿¥¤¥Þ¡¼
¤ò´Æ»ë¤·¤Æ¤ª¤ê¡¢¤³¤Î·ë²Ì¤Î component ¤ÎÊѲ½¤Ï¼«Æ°¤Ç¸¡ÃΡÊChange Detection¡Ë¤µ¤ì¤ë¡£
- ÆüËܸìÌõ¡§Angular 2 Change Detection Explained - Qiita
- Angular¤Ç¥¤¥Ù¥ó¥È¤«¤é̵Â̤ËChange Detection¤òÁö¤é¤»¤Ê¤¤¤¿¤á¤Ë¤¹¤Ù¤¤³¤È - Qiita
NgZone#runOutsideAngular ¤ÎÃæ¤Ç¼Â¹Ô¤·¤¿¤â¤Î¤Ï Change Detection ¤ÎÂоݳ°¤Ë¤Ê¤ë¤é¤·¤¤¤Î¤Ç¡¢ÆÃÄê¤Î property ¤ÎÊѹ¹¤Ë´óÍ¿¤¹¤ë¥¤¥Ù¥ó¥È¤ò¤³¤ì¤Ç°Ï¤ó¤Ç¤¢¤²¤ë¤È¤è¤µ¤²¡£
¤Þ¤È¤á
¤³¤ì¤Þ¤Ç¤¢¤Þ¤êµ¤¤Ë¤·¤Æ¤¤¤Ê¤«¤Ã¤¿¤¬¡¢¼Â¤Ï¥á¥¸¥ã¡¼¤ÊViewModel·Ï¤Î¥Õ¥ì¡¼¥à¥ï¡¼¥¯¤Î¹Í¤¨Êý¤Ï
- ÆÃÄê¤Î¥Ç¡¼¥¿´Æ»ë·Ï¡ÊReact, Vue¡Ë
- ¥¤¥Ù¥ó¥È´Æ»ë·Ï¡ÊMithril¡Ë
- È󯱴ü½èÍý´Æ»ë·Ï¡ÊAngularJS¡Ë
¤ËʬÎà¤Ç¤¤ë¤³¤È¤¬Ê¬¤«¤Ã¤¿¡£¡Ê¤¢¤¨¤Æ¸À¤¦¤È 2 ¤Ï 3 ¤Î´ÊάÈǤߤ¿¤¤¤Ê¤â¤Î¤È¸À¤¨¤ë¤«¤â¤·¤ì¤Ê¤¤¡£¡Ë
2018-05-02 [ĹǯÆüµ]
_ MobX¤òVue.js(Nuxt.js)¤Ç»î¤·¤Æ¤ß¤¿
¤Ê¤¼Vuex¤¸¤ã¤Ê¤¤¤Î¤«
ÀèÆüÍè¡¢ViewModel ¥Õ¥ì¡¼¥à¥ï¡¼¥¯¤¬ÊҤäѤ·¤«¤éÃͤÎÊѲ½¤ä¥¤¥Ù¥ó¥È¤ò¸¡½Ð¤·¤Æ View ¤ò½ñ¤´¹¤¨¤è¤¦¤È¤¹¤ë»ÑÀª¤Ëµ¿Ì䤬À¸¤¸¤Æ¤¤¤Æ¡¢ËÜÍè¤Ï MVVM ¤È¤«¤¸¤ã¤Ê¤«¤Ã¤¿¤Î¡© M ̵»ë¤·¤¹¤®¤¸¤ã¤Í¡© ¤¢¤ë¤¤¤Ï M ¤ÏÁ´Éô HTTP ¤È¤«³ä¤êÀڤꤹ¤®¤¸¤ã¤Í¡© ¤È¤¤¤¦´¶¤¸¤Ë¤Ê¤Ã¤Æ¤¤Æ¤¤¤¿¡£*1
¤½¤ì¤Ç¸¡½Ð¤µ¤ì¤Ê¤¤¤è¤¦¤Ë¤¹¤ë¤Ë¤Ï¤É¤¦¤·¤¿¤é¤è¤¤¤«¤È¤¤¤¦¤Î¤¬ºòÆü¤Î¡ÖViewModel·Ï¥Õ¥ì¡¼¥à¥ï¡¼¥¯¤Ç¥Ç¡¼¥¿¤ÎÊѲ½¤ò´Æ»ë¤µ¤»¤Ê¤¤ - ¤¢¡¼¤¢¤ê¤¬¤Á(2018-05-01)¡×¤Ë¤Ê¤ë¤ï¤±¤À¤±¤É¡¢¤³¤ì¤Ï¤¤¤ï¤æ¤ë VM component Æâ¤ÎÏᣤǤâ¼ÂºÝ¤Î¤È¤³¤í Model ¤Ï¤À¤¤¤¿¤¤¥°¥í¡¼¥Ð¥ë¤Ç¥·¥ó¥°¥ë¥È¥ó¤Ë¤Ê¤ë¤ó¤¸¤ã¤Í¡¼¤Î¡©¤È¤¤¤¦µ¤¤¬¤·¤Æ¤¤¤Æ¡¢¤½¤¦¤Ê¤ë¤È component ¤Ç¤À¤±¼Â¸½¤Ç¤¤Æ¤â¤Ê¡¼¤È»×¤¦¤ï¤±¤Ç¤¹¤è¡£
¤Ç¡¢¤¸¤ã¤¢¥°¥í¡¼¥Ð¥ë¤Ç¥·¥ó¥°¥ë¥È¥ó¤Æ¤³¤È¤Ë¤Ê¤ë¤È Flux ·Ï Store ¶ñÂÎŪ¤ËÎ㤨¤Ð Vue.js ¤À¤È¤Þ¤¡ Vuex ¤Ë¤Ê¤ë¤ó¤À¤È»×¤¦¤±¤É¡¢¤½¤Î Vuex ¤Ç¤Ï¤³¤¦¤¤¤¦¤³¤È¤Ï¤Ç¤¤Ê¤¤¡£Vuex ¤Ï»¨¤Ë¸À¤¦¤È´Æ»ëÂоݤȤʤë state ¤È¤½¤Î state ¤ËÊѹ¹¤ò²Ã¤¨¤ë¤³¤È¤òµö¤µ¤ì¤¿ mutation ¤«¤éÀ®¤ë*2 ¤¬¡¢¤³¤ì¤é¤Ï¤½¤ì¤¾¤ìÆÈΩ¤·¤¿ function ¤Ç¤¢¤ê¡¢mutation ¤Ë¤Ï´ðËÜŪ¤Ë¤Ï state ¤·¤«ÅϤäƤ³¤Ê¤¤¡£mutation °Ê³°¤Ë action ¤ä getter ¤âÄêµÁ¤Ç¤¤ë¤¬¡¢»ö¾ð¤ÏƱ¤¸¤Ç¤¢¤ë¡£¤¹¤Ù¤Æ state ¤òÃæ¿´¤ËÃÖ¤¤¤Æ¤¤¤ë¡£¤½¤·¤Æ²þ¤á¤Æ¤¯¤êÊÖ¤¹¤¬¡¢¤½¤Î state ¤Ï¤¹¤Ù¤Æ´Æ»ëÂоݤȤ¤¤¦¤ï¤±¤À¡£
class ¥Ù¡¼¥¹¤Î React.Component ¤ß¤¿¤¤¤Ë Store ¤È¤¤¤¦Ì¾¤Î Model ÁêÅö¤Î class ¤¬¤¢¤Ã¤Æ¼«Í³¤Ë property ¤òÁý¤ä¤»¤ë¤ï¤±¤Ç¤Ï¤Ê¤¤¡£¤½¤Î¶¯¤¤À©Ì󤳤½¤¬¥°¥í¡¼¥Ð¥ë¤Ê¾õÂÖ´ÉÍý¤Ë¤è¤¤¤Î¤«¤â¤·¤ì¤Ê¤¤¤¬¡¢¤½¤ì¤Ë¤·¤Æ¤â¤Ê¤¡¤È¤¤¤¦´¶¤¸¡£
MobX¤Î¥µ¥ó¥×¥ë¥³¡¼¥É¤ò¸«¤Æ¤ß¤ë
¤½¤³¤Ç MobX.
¤³¤¤¤Ä¤Ï Store ¤È¤¤¤¦¤è¤ê¤Ï´ðËÜŪ¤Ë¤Ï Observer ¤È¸À¤Ã¤Æ¤è¤¤¤È»×¤¦¡£
¸ø¼°¤Î¥µ¥ó¥×¥ë¥³¡¼¥É¤ò°úÍѤ¹¤ë¤È¤³¤ó¤Ê´¶¤¸¡£
import { observable } from "mobx" class Todo { id = Math.random(); @observable title = ""; @observable finished = false; }
¤³¤³¤Ç¡Ö¤³¤ì JS ¤«¡©¡×¤È»×¤¦¤«¤â¤·¤ì¤Ê¤¤¤±¤É¡¢class property ¤È decorator ¤ò Babel ¤Ã¤Æ¤ä¤ì¤Ð»È¤¨¤ë¤ì¤Ã¤¤È¤·¤¿ ES.next valid ¤Ê JS ¤Ê¤Î¤Ç¡¢JS Ǿ¤¬²½Àв½¤·¤Æ¤ë¿Í¤Ï¹²¤Æ¤¿Êý¤¬¤è¤¤¤«¤â¤·¤ì¤Ê¤¤¡£
¥Ý¥¤¥ó¥È¤Ï @observable ¤Ç¡¢¤³¤Î decorator ¤¬¤Ä¤¤¤Æ¤¤¤ëÃͤÀ¤±¤¬´Æ»ëÂоݤˤʤ롣¤Í¡¢¤³¤ì¤³¤ì¡¢¤³¤¦¤¤¤¦¤³¤È¤Ç¤¹¤è¡¢¤ä¤ê¤¿¤¤¤Î¤Ï¡£
¤Ä¤¤¤Ç¤Ë¤³¤Î observable ¤ÊÃͤËÊѹ¹¤ò²Ã¤¨¤ë¤Ë¤Ï @action ¤òÉÕ¤±¤¿ function ¤ò·Ðͳ¤¹¤ë¤È¥Ç¥Ð¥Ã¥°¤·¤ä¤¹¤¯¤Æ¤è¤¤¤è¡¢¤È¤¤¤¦¤³¤È¤Ê¤Î¤Ç¡¢¤½¤ì¤é¤òŬÅö¤Ë½ñ¤Â¤¹¤È
class Todo { @observable title = ""; @action setTitle(title) { this.title = title; } }
¤³¤ó¤Ê´¶¤¸¡£
¤³¤ì¤Ï¡Ö³Æ¼«¤¬µ¤¤Þ¤Þ¤ËÃͤò½ñ¤´¹¤¨¤ë¤ÈÄɤ¨¤Ê¤¯¤Ê¤ë¤è¡×¤È¤¤¤¦¶µ¤¨¤Ë½¾¤Ã¤Æ¤¤¤ë¤À¤±¤Ç¡¢ÀäÂмé¤é¤Ê¤¤ã¤¤¤±¤Ê¤¤¤Ã¤Æ¤ï¤±¤¸¤ã¤Ê¤¤¤±¤É¡¢¤Þ¤¡¼é¤Ã¤Æ¤ª¤³¤¦¡£Ê̤˺®Íð¤òÀ¸¤ß¤¿¤¤¤ï¤±¤¸¤ã¤Ê¤¤¡£
¼ÂºÝ¤ËVue.js¤Ç»î¤·¤Æ¤ß¤¿
Vue.js ¤È MobX ¤ò¥Ö¥ê¥Ã¥¸¤·¤Æ¤¯¤ì¤ë¥é¥¤¥Ö¥é¥ê¤ÏÍ̾¤É¤³¤í¤ÇÆó¤Ä¤¢¤ë¡£¤³¤ì°Ê³°¤Ë¤â¤¢¤ë¤Î¤«¤â¤·¤ì¤Ê¤¤¤±¤É¡¢¸«¤Ä¤±¤é¤ì¤Ê¤«¤Ã¤¿¡£
¼ÂºÝ¤ËÍøÍѤ·¤¿¥Ñ¥Ã¥±¡¼¥¸¤Ï
- mobx 4.2.0
- vue-mobx 2.0.0
- movue 0.3.0
¤³¤³¤Ç»¨¤ËÈæ³Ó¤¹¤ë¤È¡¢¤È¤Ë¤«¤¯ component Æâ¤Ç¤Îµ½Ò¤ò¾¯¤Ê¤¯¤·¤¿¤¤¤Ê¤é vue-mobx ¤¬¥ª¥¹¥¹¥á¡£Vue.use ¤Îµ½Ò¤ÏºÑ¤ó¤Ç¤¤¤ë¤â¤Î¤È¤·¤Æ component Æâ¤Î¥³¡¼¥É¤Ï¤³¤ì¤À¤±¤ÇºÑ¤à¡£
import Model from '..' export default { fromMobx: { Model } }
¤Ê¤ó¤È¡¢fromMobx ¤Ë Model ¤òÍ¿¤¨¤ë¤À¤±¡£¤³¤¦¤·¤Æ¤ª¤¤¤Æ¡¢¤³¤Î object ¤ò¿©¤ï¤»¤Æ Vue component ¤òÀ¸À®¤¹¤ë¤À¤±¤Ç¤¤¤¤Ê¤ê Model Æâ¤Î observable ¤ÊÃÍ¤È action ¤¬ component Æâ¤ËÀ¸¤¨¤ë¡£
¤¤¤¤Ê¤êÀ¸¤¨¤ë¤Î¤¬ Ruby ¤Î module ¤Ã¤Ý¤¯¤Æ¡Ö¤ª¤©¡¢¤Ê¤ë¤Û¤É¡×¤È¤Ê¤ë¤Î¤À¤¬¡¢¤µ¤¹¤¬¤Ë¤É¤ó¤Ê component ¤«¤é¸Æ¤Ð¤ì¤ë¤«Ê¬¤«¤é¤Ê¤¤ Model ¤Î observable ¤È action ¤¬¤½¤Î¤Þ¤ÞÀ¸¤¨¤ë¤È¡¢¤ä¤¿¤é¤È VM component ¤¬Áý¤¨¤¬¤Á¤Êºòº£¤Î¥Õ¥ì¡¼¥à¥ï¡¼¥¯¤Ç¥«¥¸¥å¥¢¥ë¤Ë»È¤¦¤Ë¤Ï¤Á¤ç¤Ã¤È¤Þ¤º¤½¤¦¤Êµ¤¤¬¤·¤Ê¤¤¤Ç¤â¤Ê¤¤¡£
¤½¤ó¤Ê¤¢¤Ê¤¿¤Ë¤Ï movue.
movue ¤â fromMobx ¤È¤¤¤¦ property ¤Ç VM component Æâ¤Ë Model ¤Î¾ðÊó¤ò¸Æ¤ó¤Ç¤¯¤ë¤Î¤Ï°ì½ï¤À¤±¤É¡¢¤³¤Î fromMobx ¤Ç¤ÏºÙ¤«¤¯ÀßÄê¤ò¥³¥ó¥È¥í¡¼¥ë¤Ç¤¤ë¤Î¤Ç¡¢¤³¤Ã¤Á¤Î component ¤Ç¤Ï¤³¤Î̾Á°¤Ç¡¢¤¢¤Ã¤Á¤Î component ¤Ç¤Ï¤³¤Î̾Á°¤Ç¡¢¤È¤¤¤Ã¤¿»È¤¤Êý¤¬¤Ç¤¤½¤¦¡£
DecoratorÂбþ
MobX ¤Î decorator ¤Ï optional ¤Ê¤Î¤Ç¡¢¼Â¤Ï¤µ¤Ã¤¤ÎÎã¤Ï°Ê²¼¤Î¤è¤¦¤Ë¤â½ñ¤±¤ë¡£
import { observable, decorate } from "mobx" class Todo { id = Math.random(); title = ""; finished = false; } decorate(Todo, { title: observable, finished: observable })
¤³¤Ã¤Á¤ÎÊý¤¬¤è¤ê¹ÈÏ°Ï¤ÇÆ°¤¯¤Î¤À¤±¤É¡¢³Î¤«¤Ë decorator ¤ò»È¤¨¤¿Êý¤¬µ½Ò¤¬Ê¬Î¥¤»¤º¤Ëʬ¤«¤ê¤ä¤¹¤¤¡£
¤È¤¤¤¦¤³¤È¤Ç»È¤¨¤ë¤è¤¦¤Ë¤·¤Æ¤¤¤³¤¦¡£
Nuxt x BabelÂбþ
ÀµÄ¾¤ä¤ä¤³¤·¤¤¡£
Babel ¤Ï 6 ¤È 7 ¤Î´Ö¤Ç decorator ¤Î°·¤¤¤¬ÊѤï¤Ã¤Æ¤¤¤ë¡£º£²ó¤Î¼Â¸³¤Ï Nuxt.js ¾å¤Ç¹Ô¤Ã¤Æ¤ª¤ê¡¢2018-05 ¸½»þÅÀ¤Ç Nuxt 1.0.0 ¤Ï Babel 6 °Í¸¤Ê¤Î¤Ç¤½¤ì¤Çư¤¯¤è¤¦¤Ë¤·¤Æ¤¤¤¯¡£
babel-preset-mobx ¤¬¤¢¤ë¤Î¤Ç¤½¤ì¤ò»È¤Ã¤Æ¤ß¤¿¤Î¤À¤¬¡¢¤³¤ì¤Ïư¤«¤Ê¤«¤Ã¤¿¡£
zwhitchcox/babel-preset-mobx: All dependencies mobx depends on
Ãæ¿È¤ò¸«¤ë¤È preset ¤È¸À¤¤¤Ä¤Ä¼ÂºÝ¤Ë¤Ï°Ê²¼¤Î4¤Ä¤Î plugin ¤òÍøÍѤ¹¤ë
- babel-plugin-transform-class-properties
- babel-plugin-transform-decorators-legacy
- babel-plugin-transform-es2015-classes
- babel-plugin-transform-regenerator
Nuxt.js ¤Î Babel ¤ÎÀßÄê¤Ï vue-app ( vue + babel-preset-env ) ¤Ê¤Î¤ÇËÜÅö¤ËɬÍפʤΤϰʲ¼¤Î2¤Ä
- transform-decorators-legacy
- transform-class-properties
¤³¤ì¤ò plugins ¤ËÄɲ䷤Ƥä¤ì¤Ð ok
½çÈÖ¤¬Âç»ö¡£ decorators-legacy ¤Î¼¡¤Ë class-properties ¤³¤³¤éÊÕ¤Ï Babel ¤Î¥¤¥ä¥ó¤Ê¤È¤³¤í¡£¥¨¥é¡¼¤ò¸«¤Æ¤â²¿¤¬µ¯¤¤Æ¤ë¤Î¤«Ê¬¤«¤é¤ó¡£
¤ª¤Þ¤± VS Code Âбþ
decorator ¤Ç¤º¤Ã¤È·Ù¹ð¤¬½Ð¤ë¤Î¤Ç ESLint ¤ÎÀßÄ꤬¤Á¤ã¤ó¤ÈÈ¿±Ç¤µ¤ì¤Æ¤Ê¤¤¤Î¤«¤Ê¡¼¤È»×¤Ã¤Æµ¿¤Ã¤Æ¤¿¤±¤É¡¢¤³¤ì¤Ï VS Code ¤ÇÆÈ¼«¤Ë½Ð¤·¤Æ¤ë¤ä¤Ä¤Ç¤·¤¿¡£
javascript.implicitProjectConfig.experimentalDecorators": false,
¤ò true ¤Ë¤¹¤ë¤È²ò·è¡£
¤Þ¤È¤á
MobX ¤Ï Redux ¤ÎÌÌÅݤ¯¤µ¤µ¤ò²ò¾Ã¤·¤Æ¤¯¤ì¤ë¤È¤« jQuery ¤È¤â¹ç¤ï¤»¤é¤ì¤ë¤È¤«¤¤¤í¤¤¤í¸À¤ï¤ì¤Æ¤¤¤ëºÇ¶áÃíÌܤξõÂÖ´ÉÍý¥é¥¤¥Ö¥é¥ê¤é¤·¤¤¤±¤É¡¢¡Öobservable ¤ÇÌÀ¼¨¤¹¤ë¤À¤±¡×¤È¤¤¤¦¥·¥ó¥×¥ë¤µ¤Ï¼«Ê¬¤Î¹Í¤¨¤Æ¤¤¤ë¡¢¤â¤Ã¤È¹¤¯°ìÈÌŪ¤Ê Model ¤È¤·¤Æ¤â°·¤¤¤ä¤¹¤½¤¦¤Ë¸«¤¨¤¿¡£
ºòº£¤Î ViewModel ¥Õ¥ì¡¼¥à¥ï¡¼¥¯¤¬Çö¤¤¥Õ¥ì¡¼¥à¥ï¡¼¥¯¤Ë¤Ê¤ë¤³¤È¤Ç View ¦¤ÎÌäÂê¤ÎËܼÁ¤ËÃíÎϤ·¤Æ¤¤¤ë¤è¤¦¤Ë¡¢Model ¦¤Ï Model ¦¤Ç¡ÖBackbone.Model ¤Î¤è¤¦¤Ê¤¤¤¤¶ñ¹ç¤Ë¥¤¥Ù¥ó¥Èµ¯¤³¤·¤Æ¤¯¤ì¤ëÄøÅ٤Υ·¥ó¥×¥ë¤Ê¤ä¤Ä¤Í¡¼¤«¤Ê¡×¤È»×¤Ã¤Æ¤¤¤¿¤È¤³¤í¤Ë MobX ¤ò¸«¤Ä¤±¤ë¤³¤È¤¬¤Ç¤¤¿¤Î¤Ç¡¢¼«Ê¬¤ÎÃæ¤Ç¤Ï³ä¤È´üÂÔ¤¬Â礤¯¤Ê¤Ã¤Æ¤¤Æ¤¤¤ë¡£
¡Ê¤³¤ì¤Ê¤é´û¸¤Î jQuery ¤òá¤Ä¾¤¹¤Î¤Ë¤â¡¢²¿¤«¤ÎÇï»Ò¤ËÉÕ¤¹ç¤ï¤Ê¤¤ã¤¤¤±¤Ê¤¯¤Ê¤ë²ÄǽÀ¤Î¹â¤¤ React ¤È¤â¤Ê¤ó¤È¤«¤ä¤Ã¤Æ¤¤¤±¤ë¤«¤â¡©¡Ë
¤Þ¤À¥Æ¥¹¥È¼þ¤ê¤¬¤è¤¯Ê¬¤«¤Ã¤Æ¤¤¤Ê¤¤¤Î¤Ç¡¢¼¡¤Ï¥Æ¥¹¥È¼þ¤ê¤ò¥Á¥§¥Ã¥¯¤·¤Æ¡¢¤è¤µ¤½¤¦¤Ê¤éº£¸å¤Ï MobX ¤Ë¿¶¤Ã¤Æ¤¤¤¯¤«¤â¤·¤ì¤Ê¤¤¤Ê¡¼¤È¤¤¤¦µ¤¤¬¤·¤Æ¤Þ¤¹¡£
2018-05-03 [ĹǯÆüµ]
_ Vue.js x SSR¥á¥â
¤³¤ìÆÉ¤á¡£
Nuxt ¤ò¤Á¤ç¤Ã¤È»È¤Ã¤¿ÄøÅ٤ǵ¤¤Ë¤Ê¤Ã¤¿¤È¤³¤í¤À¤±¤òÈ´¿è¡£
¤Þ¤º prerender ¤ò¸¡Æ¤¤»¤è
SSR ¤Ï¹Í¤¨¤ë¤³¤È¤¬Áý¤¨¤ë¤Î¤Ç prerender ¤ò¤ª´«¤á¤µ¤ì¤ë¡£
vue-server-renderer
vue-server-renderer ¤¬ String ¤òÀ¸À®¤·¤Æ¤¯¤ì¤ë¡£
express ¤Ê¤É¥µ¡¼¥Ð¥µ¥¤¥É¤Î¥Õ¥ì¡¼¥à¥ï¡¼¥¯¾å¤Ç Vue component ¤òÍøÍѤ·¤Æ¥Ú¡¼¥¸À¸À®¤¹¤ë¤³¤È¤¬¤Ç¤¤ë¡£
VM Life Cycle ¤¬°Û¤Ê¤ë
Server Side ¤Ç¤Ï data reactivity ¤ÏÉÔÍפǤ¢¤ê¡¢VM life cycle ¤Ï°Ê²¼¤Î 2¤Ä¤·¤«¤Ê¤¤¡£
- beforeCreate
- created
¤À¤«¤é created() ¤Ç store ¤Î registerModule ¤ò route ¤Ë±þ¤¸¤Æ¹Ô¤¦ Nuxt¤Çroute¤Ë±þ¤¸¤ÆVuex Store¤òmoduleʬ³ä¤¹¤ëÊýË¡ - ¤¢¡¼¤¢¤ê¤¬¤Á(2018-04-19) ¥³¡¼¥É¤ò»î¤·¤¿»þ¤ËÌõ¤Îʬ¤«¤é¤Ê¤¤Æ°¤¤ò¤·¤¿¤Î¤«¡£
custom directive ¤ÏÍ×Ãí°Õ
- ¿¤¯¤ÏÀ¸DOM¤Ë°Í¸¤¹¤ë¤Î¤Çư¤«¤Ê¤¤
- <no-ssr> ¤Ç²óÈò¤Ç¤¤ë
Nuxt ¤ä egoist/vue-no-ssr: Vue component to wrap non SSR friendly components (428 bytes) ¤ÇÍøÍѤǤ¤ë¡£
¼«Ê¬¤Ç¼ÂÁõ¤¹¤ëºÝ¤Ë¤Ï custom directive ¤Ç¤Ï¤Ê¤¯ component ¤Ë¤·¤Æ VirtualDOM ¤Ë¤¹¤ëÊýË¡¤òÁªÂò¤¹¤Ù¤·¡£
stateful ¤Ê singleton ¤òÇÓ½ü
¥µ¡¼¥Ð¥µ¥¤¥É¤Î Node.js ¥×¥í¥»¥¹¤ÏĹ¼÷Ì¿¤Ç¤¢¤ê¡¢Vue ¤Î¥ì¥Ù¥ë¤Ç singleton ¤òºî¤Ã¤Æ¤·¤Þ¤¦¤ÈÊ£¿ô¤Î¥ê¥¯¥¨¥¹¥È¤Ç¾õÂÖ¤¬ share ¤µ¤ì¤Æ¤·¤Þ¤¦¡£
routing ¤ò vue-router ¤Ë
¥µ¡¼¥Ð¥µ¥¤¥É¥Õ¥ì¡¼¥à¥ï¡¼¥¯¤Î routing ¤òÁÇÄ̤·¤Ë¤·¤Æ vue-router ¤Ç routing ¤ò¹Ô¤¦¤³¤È¤Ç client-side ¤ÈƱ¤¸Æ°¤¤Ë¤Ç¤¤ë¡£
¥µ¡¼¥Ð¥µ¥¤¥É¤Ç¤Î dynamic component ¤Î lazy loading ¤Ï´í¸±
const Page = () => import('Page.vue')
¤ß¤¿¤¤¤Ê¤ä¤Ä¡£
°ÊÁ°»î¤·¤¿¤Î¤À¤¬¡¢2¤ÄÌäÂ꤬¤¢¤Ã¤¿¡£
°ì¤Ä¤Ï¥µ¡¼¥Ð¥µ¥¤¥É¤Ç¼Â¸½¤¹¤ë¤Ë¤ÏÉÁ²è³«»ÏÁ°¤ËÈ󯱴ü¥³¥ó¥Ý¡¼¥Í¥ó¥È¤òÀè¤Ë²ò·è¤¹¤ëɬÍפ¬¤¢¤ê¡¢¤³¤ì¤¬ Nuxt¤Çroute¤Ë±þ¤¸¤ÆVuex Store¤òmoduleʬ³ä¤¹¤ëÊýË¡ - ¤¢¡¼¤¢¤ê¤¬¤Á(2018-04-19) ¤Î registerModule ¤ÈÌ·½â¤·¤Æ¤¤¤¿¡£
¤â¤¦°ì¤Ä¤Ï route ¥ì¥Ù¥ë¤Ç¤Ê¤¤¾ì¹ç¤Ïñ½ã¤ËÆñ¤·¤¤¤È¤¤¤¦¤³¤È¡£
cf. ¥ë¡¼¥Æ¥£¥ó¥°¤È¥³¡¼¥Éʬ³ä · GitBook
Nuxt ¤Ç route ¤¬²ò·è¤µ¤ì¤¿¤¢¤È¤Ë Page component ¥ì¥Ù¥ë¤Ç dynamic component ¤ò»È¤Ã¤Æ route ¤òµ¶Áõ¤·¤è¤¦¤È¤¹¤ë¤Î¤Ï²Äǽ¤À¤¬¡¢ÌäÂ꤬ʣ»¨¤¹¤®¤¿¡£
Nuxt ¤ËÍê¤é¤º¼«Á°¤Ç router ¤òľÀܵ½Ò¤·¤Ä¤Ä Vue + SSR ¤ò¼Â¸½¤Ç¤¤ë¤Ê¤é¥¤¥±¤¿¤«¤â¤·¤ì¤Ê¤¤¤¬¡¢Page component ¤òÍøÍѤ·¤Ä¤Ä routing ¤òº¹¤·Âؤ¨¤ë¤Ë¤Ï¡¢¼Â¤Ï routes ¤òľÀܽñ¤´¹¤¨¤Æ¤·¤Þ¤¨¤Ð¤è¤¤¤³¤È¤¬Ê¬¤«¤Ã¤Æ¤¤¤ë¤Î¤Ç¡¢º£¤µ¤é¤ï¤¶¤ï¤¶¤³¤ÎÊýË¡¤òºÎÍѤ¹¤ëɬÍפâ¤Ê¤¤¤À¤í¤¦¡£
JavaScript¤ÇRuby¤ÎArray#replace¤Î¤è¤¦¤Ê¤³¤È¤ò¤·¤¿¤¤ - ¤¢¡¼¤¢¤ê¤¬¤Á(2018-04-26)
nuxt.config.js ¤Î
router: { extendRoutes(routes, resolve) { // <- ¤³¤Î routes ¤Í
store ¤È asyncData
¥µ¡¼¥Ð¥µ¥¤¥É¤Ç¤âÀ¸¤«¤¹¤Ë¤Ï root component ¤Î asyncData ¤ò»È¤¦¡£ ¤³¤¦¤¹¤ë¤³¤È¤Ç route ¤«¤éÆÃÄê¤Î½èÍý¤ò¶´¤ó¤Ç store ¤ËÍî¤È¤·¤Æ¤³¤ì¤ò¥¯¥é¥¤¥¢¥ó¥È¥µ¥¤¥É¤ÇÍøÍѤ¹¤ë¤³¤È¤¬¤Ç¤¤ë¡£
root component ¤Î asyncData Æâ¤Ç store.registerModule ¤¹¤ëÊýË¡¤â¤¢¤ë¤¬¡¢¤½¤Î¾ì¹ç¤Ï destroyed ¤Ç²òÊü¤·¤Æ¤ª¤«¤Ê¤¤¤È¥¯¥é¥¤¥¢¥ó¥È¥µ¥¤¥É¤ÇÆó½Å¤Ë register ¤·¤è¤¦¤È¤·¤Æ²õ¤ì¤ë¡£
¤¿¤À¤½¤â¤½¤â data reactivity ¤ò component ¤ò¤Þ¤¿¤¤¤Ç¼Â¸½¤·¤Ä¤Ä persisted ¤Ë¤·¤¿¤¤¡ÊÍ×¤Ï store ¤ò localStorage ¤Ê¤É¤ËÊݸ¤·¤¿¤¤¡Ë¤È¤«¤¤¤¦¾ì¹ç¤Ï¥µ¡¼¥Ð¥µ¥¤¥É¤Çư¤¯°ÕÌ£¤¬¤Ê¤¯¡¢asyncData ¤ÎÍøÍѤϸ¡Æ¤³°¤È¸À¤Ã¤Æ¤è¤¤¤À¤í¤¦¡£
¸Ä¿ÍŪ¤Þ¤È¤á
º£²óºÇ¸å¤Î store ÊÕ¤ê¤Ç»¶¡¹¶ì¤·¤ó¤À¤¬¡¢Íý¶þ¤Ïʬ¤«¤Ã¤Æ¤¤¤Ê¤«¤Ã¤¿¤¬¡¢Æ°ºî¤«¤éµÕ¤ËƳ¤¤¤Æ·ë²Ì¤È¤·¤ÆÀµ¤·¤¤ÁªÂò¤ò¤¹¤ë¤³¤È¤Ï¤Ç¤¤¿¤ß¤¿¤¤¤À¡£
Vue.js ¤Î SSR ¤Ë¤Ä¤¤¤ÆÍý²ò¤·¤Ê¤¤¤Þ¤Þ¤Ê¤ó¤«¤Ç¤¤ë¤Ã¤Ý¤¤¤è¤È¤¤¤¦Íýͳ¤Ç Nuxt ¤Ç½ñ¤»Ï¤á¤Æ¥Ï¥Þ¤Ã¤ÆÊ¬¤«¤Ã¤¿¤³¤È¤Ï¡¢SSR ¸ÇͤΥ¨¥é¡¼¤«¤É¤¦¤«¤Ï¥í¥°¤ò¸«¤Æ¤âÃ챤¬¤Ê¤¤¤È¤µ¤Ã¤Ñ¤êʬ¤«¤é¤Ê¤¤¤È¤¤¤¦¤³¤È¡£
¤È¤¤¤¦¤³¤È¤Ç¼«Ê¬¤Ç¥¼¥í¤«¤é½ñ¤«¤Ê¤¯¤Æ¤â¸ø¼°¤Î SSR ¤Î¥É¥¥å¥á¥ó¥È¤ÏÆÉ¤ó¤Ç¤ª¤³¤¦¡¢¤È¤¤¤¦Åö¤¿¤êÁ°¤ÎÏäËÌá¤Ã¤Æ¤¤Þ¤·¤¿¡£¤ª¤·¤Þ¤¤¡£
2018-05-06 [ĹǯÆüµ]
_ ViewModel Component¤ËModel¤òÄ̤¸¤ÆÀ¤³¦¤ÎÇÁ¤Áë¤òºî¤ë
ÀèÆüÍè JavaScript ¤Î ViewModel ·Ï¥Õ¥ì¡¼¥à¥ï¡¼¥¯¤Ç´Æ»ëÂоݳ°¤Î¥Ç¡¼¥¿¤ò¤É¤¦°·¤¦¤«¤È¤¤¤¦¤È¤³¤í¤ËÃíÌܤ·¤Æ¤¤¤ë¤Î¤À¤±¤É¡¢¤³¤ì¤Ë¤ÏÍýͳ¤¬¤¢¤Ã¤Æ¡¢
- VM Component ¤Îñ°Ì¤Ç±Æ¶Á¤òÊĤ¸¹þ¤á¤ë¤È¤¤¤¦È¯ÁÛ¤ÏGood
- ñÊý¸þ¤Î¥Ç¡¼¥¿¥Ð¥¤¥ó¥Ç¥£¥ó¥°¡¢¥Ç¡¼¥¿¥Õ¥í¡¼¤âGood
- VM Component ¤¬ UI ¤ò»Ê¤ë¤Î¤Ç¤É¤¦¤·¤Æ¤â VM Component ¤¬ Model ¤ò mount ¤¹¤ë¤È¤¤¤¦·Á¤Ë¤Ê¤ê¡¢¤«¤Ä¥â¥À¥ó JS ¤ÎÀ¤³¦¤Ç¤Ï Rails Ū¤Ë¤¹¤Ù¤Æ¤Î Model ¤¬ global ¤ËŸ³«¤µ¤ì¤ë¤È¤¤¤¦¹Í¤¨Êý¤Ï NG
- VM Component ¤Î¤É¤³¤«¤Ë Model ¤ò mount ¤·¤Ä¤Ä¡Ö¤¹¤Ù¤Æ¤Î¥Ç¡¼¥¿¤ò´Æ»ëÂоݤȤ¹¤ë¤ï¤±¤Ç¤Ï¤Ê¤¤¡×¤È¤¤¤¦·Á¤¬°·¤¤¤ä¤¹¤½¤¦
- Angular ¤Ç Change Detection ¤òÂǤÁ¾Ã¤·¤Þ¤¯¤í¤¦¤È¤¹¤ë¥¢¥×¥í¡¼¥Á¤Ï¡Öµ¤¤Ë¤·¤¿¤¯¤Ê¤¤¤â¤Î¤òÌÖÍ夹¤ë¡×¤È¤¤¤¦·Á¤Ë¤Ê¤ë¤Î¤Ç¸½¼ÂŪ¤Ê´¶¤¸¤¬¤·¤Ê¤¤¡Ê¤Þ¤ºÏ³¤ì¤ë¤È»×¤¦¡Ë
¤È¤¤¤¦¤³¤È¤Ç MobX ¤Ë¤¿¤É¤êÃ夤¤¿¤ï¤±¤À¡ÊVuex Store ¤¬ State Á°Ä󤹤®¤ë¤Î¤Ç¡Ë¡£¤¿¤À¤·¡¢MobX ¤Ç¤¹¤Ù¤Æ²ò·è¤È¤Ï»×¤Ã¤Æ¤¤¤Ê¤¯¤Æ¡¢¼«Ê¬¤Î´¶³Ð¤È¤·¤Æ¤Ï
- VM Component ¤¬À¤³¦¤Î¤¹¤Ù¤Æ¤òÃΤäƤ¤¤ëɬÍפϤʤ¤¡Ê¤à¤·¤í¥æ¡¼¥¶¡¼¤È¤Î¥¤¥ó¥¿¥é¥¯¥·¥ç¥ó¤ÈľÀÜ´Ø·¸¤·¤Ê¤¤¥í¥¸¥Ã¥¯¤ÇÀ¤³¦¤ÏËþ¤Á¤Æ¤¤¤ë¡Ë
- Component ¤Î³°¤ÎÀ¤³¦¤Ï¤¤¤¤Ê¤ê HTTP ¤È¤Ï¸ÂÄê¤Ç¤¤Ê¤¤
- Component ¤ò»Ê¤ë Parent Component ¤Ç Model ¤òÄ̤¸¤¿³°¤ÎÀ¤³¦¤ÎÇÁ¤Áë¤òÄ󶡤¹¤ë
¤¯¤é¤¤¤Î´¶¤¸¤¬¤¤¤¤¤Î¤«¤Ê¤È»×¤Ã¤Æ¤¤¤ë¡£
¤¤¤Ã¤¿¤ó¤Î¥¤¥á¡¼¥¸¤È¤·¤Æ¤Ï¿Þ¤Î¤è¤¦¤Ê´¶¤¸¡£
¤³¤³¤Ç¥í¥¸¥Ã¥¯¤È¤·¤Æ¡Ö¾¸°®¤¹¤ëÀ¤³¦¤¬¤è¤ê¹¤¤¡×¤Î¤Ï Model > VM Component ¤Ç¤¢¤ê¡¢Parent Component > Child Component ¤Ç¤¢¤ë¡£
Parent Component ¤Î½é´ü²½¤ÎºÝ¤Ë¡ÊVue + MobX ¤Ê¤é fromMobx ¤Î¤è¤¦¤ÊÊýË¡¤òÄ̤¸¤Æ¡Ë Model ¤ò»ý¤Á¡¢¤µ¤é¤Ë¤³¤Î Parent Component ¤¬ Child Component ¤òÀ¸À®¤¹¤ëºÝ¤Ë¤â¡ÊÎ㤨¤Ð v-for ¤Ê¤É¤Îµ½Ò¤ÎºÝ¤Ë¡ËParent Model ¤Î¡Öµ¡Ç½¡×¤ä¡ÖState ÁêÅö¤Î data¡×¤ò props ¤ÇÅϤ·¤Æ¤¢¤²¤ë¤è¤¦¤Ë¤¹¤ë¤³¤È¤Ç¡¢¤è¤ê¹¤¤¡ÖÀ¤³¦¡×¤ËÂФ¹¤ë¡ÖÇÁ¤Áë¡×¤ò¼ê¤ËÆþ¤ì¤ë¤È¤¤¤¦¶ñ¹ç¤Ç¤¢¤ë¡£
¡ÖÇÁ¤Áë¡×¤È¤¤¤¦¤Î¤¬´Î¿´¤Ê¤È¤³¤í¤Ç¡¢props ¤ÇÅϤµ¤ì¤¿¤â¤Î¤ò´Æ»ë¤·¤Ê¤¤¤Î¤Ï̵Íý¤À¤·¡¢Child Component ¤ÎÀÕ̳¤Ï´ðËÜŪ¤Ë¤Ï Model ¤Ø¤ÎľÀܤβðÆþ¤Ç¤Ï¤Ê¤¯ Parent Component ¤Ø¤Î Event Bubbling ¤Ëα¤á¤¿Êý¤¬¤è¤¤¤È¤¤¤¦È½ÃÇ¡£
ËÜÅö¤Ï Child Component ¤«¤é¤¦¤Þ¤¯ Model ¤Î°ìÉô¤Îµ¡Ç½¤Ë¥¿¥Ã¥Á¤¹¤ë¤³¤È¤¬¤Ç¤¤¿Êý¤¬ÊØÍø¤À¤Ê¤È»×¤Ã¤Æ¤¤¤¿¤ó¤À¤±¤É¡¢¤½¤ì¤ò¤ä¤ë¤Ë¤Ï¤ä¤Ï¤êÆÈ¼«¤Î̾Á°¶õ´Ö¤òÀÚ¤Ã¤Æ plugin ¤È¤·¤Æ Vue Component ¤Ë inject ¤·¤Æ¤ä¤é¤Ê¤¤¤È̵Íý¤Ã¤Ý¤¤¤Î¤Ç¡¢¤¤¤Ã¤¿¤ó¤Ï¡ÖÇÁ¤Áë¡×¤ÎÉôʬ¤À¤±¤òÌÀʸ²½¤·¤Æ¤ª¤³¤¦¤È»×¤Ã¤¿¼¡Âè¡£
º£²ó¤ÎÏÃ¤ÏÆÃ¤ËÌÜ¿·¤·¤¤Ïäâ¤Ê¤±¤ì¤ÐÊñ³çŪ¤ÊÀ߷׻ؿˤǤâ¤Ê¤¤¡£¤½¤¦¤¤¤¦ÏÃ¤Ï ¥á¥ó¥Æ¥Ê¥ó¥¹¤·¤ä¤¹¤¤VueComponent¤òÀ߷פ¹¤ë¤¿¤á¤Ëµ¤¤ò¤Ä¤±¤Æ¤¤¤ë¤³¤È ¤Ê¤É¤òÆÉ¤à¤È¤è¤¤¡£
¤Á¤Ê¤ß¤Ë¾å¤Ç¸À¤Ã¤Æ¤¤¤ë Parent ¤È Child ¤È¤¤¤¦¤Î¤Ï React ¤ò»²¹Í¤Ë¤·¤Ä¤ÄÍѸì¤òÀ°Íý¤·¤Æ¤¤¤¯¤È¤É¤¦¤â
Container ¤«Èݤ«
¤È¤¤¤¦ÀÚ¤êÊý¤ò¤¹¤ë¤Ã¤Ý¤¤¡£
¤³¤³¤Ç¸À¤¤Êý¤òÊѤ¨¤ë¤È Container ¤¬ Coponent À¸À®»þ¤Ë Model ¤«¤éÇÁ¤Áë¤ò props ¤ÇÅϤ¹ ¤È¤¤¤¦´¶¤¸¤«¡£
¤Ê¤ë¤Û¤É¤Ê¤ë¤Û¤É¡£
½çÈÖ¤¬Á°¸å¤·¤¿¤¬¡¢¤Ê¤¼¤ï¤¶¤ï¤¶¤³¤ì¤ò½ñ¤µ¯¤³¤·¤Æ¤¤¤ë¤«¤È¤¤¤¦¤³¤È¤òÀ°Íý¤·¤Æ¤ª¤·¤Þ¤¤¤Ë¤·¤è¤¦¤È»×¤¦¡£
React °Ê¹ß¤Î VirtualDOM Á°Äó¤Î ViewModel ¥Õ¥ì¡¼¥à¥ï¡¼¥¯¤Ï¤¢¤¯¤Þ¤Ç VirtualDOM ¤È¤¤¤¦¤´¤¯¸ÂÄêŪ¤ÊÀ¤³¦¤Î¤³¤È¤ò¤¦¤Þ¤¯°·¤¦¤è¤¦¤ËÆÃ²½¤·¤Æ¤ª¤ê¡¢ViewModel ¥Õ¥ì¡¼¥à¥ï¡¼¥¯¤Î¶¯¤¤À©Ìó¤Ï¤½¤ÎÃæ¤ÇÇËþ¤·¤Ê¤¤¤è¤¦¤Ë¤¹¤ë¤¿¤á¤Ë¤Ï¤è¤¤¹©ÉפǤϤ¢¤ë¤¬¡¢¥æ¡¼¥¶¡¼¤È¤Î¥¤¥ó¥¿¥é¥¯¥·¥ç¥ó¤ÏÀ¸DOM ¤ä Window, Canvas ¤Ê¤É VirtualDOM ¤Ç¤Ï¤É¤¦¤·¤è¤¦¤â¤Ê¤¤Éôʬ¤â´Þ¤ó¤Ç¤¤¤ë¤·¡¢Model ¼«ÂÎ¤Ï ViewModel Framework ¤ÎÀ©Ìó¤È¤ÏÆÈΩ¤·¤Æ¹Í¤¨¤Æ¤è¤¤¤È¤¤¤¦¤«ÆÈΩ¤·¤Æ¹Í¤¨¤ë¤Ù¤¡¢¤½¤¦¤Ç¤Ê¤¤¤È¤É¤¦¤·¤Æ¤â̵Íý¤¬½Ð¤ë¤È¸À¤Ã¤Æ¤è¤¤¤È»×¤¦¡£
¶Ëü¤ÊÏá¢ViewModel Framework ¤Ï Model ¤ÎÁ´ÂÎÁü¤Ê¤ÉÃΤé¤Ê¤¯¤Æ¤è¤¤¡Ö¤¢¤¯¤Þ¤Ç VirtualDOM ¤Ø¥Þ¥Ã¥×¤·¤ä¤¹¤¤¾ðÊó¤À¤±¤ò°·¤Ã¤Æ¤¤¤ë¤Î¤À¡×¤¯¤é¤¤¤Îǧ¼±¤Ë¤·¤Æ¤ª¤«¤Ê¤¤¤È Model Àß·×¤ÎºÝ¤Ë VM Component ¤ÎÀ©Ìó¤ÇƬ¤¬¸Ç¤Þ¤ê¤½¤¦¤ÇÉݤ¤¤Ê¡¢¤È´¶¤¸¤¿¤Î¤Ç¡¢ÁªÂò»è¤òºî¤ê*1¡¢¤½¤ì¤òʸ»ú¤Ëµ¯¤³¤·¤Æ¤ª¤¯¤³¤È¤Ë¤·¤¿¡£
¤¢¤È¤Ï¤Í¤§¡¢Rails ¤Î ActiveDecorator ¤ß¤¿¤¤¤Ê¤³¤È¤ò¤ä¤ì¤ì¤Ð Model ¤Ï¤µ¤é¤Ë¤¹¤Ã¤¤ê¤¹¤ë¤ó¤À¤±¤É¤Í¤§¡Ä¡£Model ¤Ë View ¸þ¤±¤ÎÊÑ´¹¤¬Æþ¤Ã¤Æ¤¤¤ë¤È¼ÙËâ¤À¤·¡¢¤«¤È¸À¤Ã¤Æ Component ¤Ç»ý¤Ä¤È»÷¤¿µ½Ò¤¬¤¢¤Á¤³¤Á¤Ë»¶¤é¤Ð¤ë¤·¡¢mixin ¤ò»È¤¨¤Ð¤Ç¤¤Ê¤¯¤Ï¤Ê¤¤¤ó¤À¤±¤É¡¢Model ¤ò¤É¤¦ Component Æâ¤Ë»ý¤Ä¤«¤Ï Component ¼¡Âè¤Ê¤Î¤Ç mixin ¤Ç²ò·è¤·¤¤ë¤Î¤Ï¤È¤Æ¤â¸·¤·¤¤¤ï¤±¤Ç¤¹¤è¡£¤Í¡£
»²¹Í
- ¥á¥ó¥Æ¥Ê¥ó¥¹¤·¤ä¤¹¤¤VueComponent¤òÀ߷פ¹¤ë¤¿¤á¤Ëµ¤¤ò¤Ä¤±¤Æ¤¤¤ë¤³¤È
- Vue+Vuex¤ÇMVVM¤ÊWebApplication¤òÀ߷פ¹¤ë¤È¤¤Ë¹Í¤¨¤¿¤¤¤³¤È
Getter¤ÎÊÕ¤ê¤Ë°ÛÏÀ¤Ï¤¢¤ë¤Î¤Ç¤¹¤¬¡¢¤è¤¯¤Þ¤È¤Þ¤Ã¤Æ¤¤¤ÆÈó¾ï¤Ë»²¹Í¤Ë¤Ê¤ê¤Þ¤¹¡£
*1 ´Æ»ë¤·¤Ê¤¤¥Ç¡¼¥¿¤È¥í¥¸¥Ã¥¯¤ÎÃÖ¤¾ì½ê¤ò³ÎÊݤ¹¤ë¤³¤È
2018-05-07 [ĹǯÆüµ]
_ ESLint¤Î--ignore-path¤ËÃí°Õ
eslint-cli ¤Î¥Þ¥Ë¥å¥¢¥ë¤Ë¤Ï --ignore-path ¤È¤¤¤¦ÀßÄ꤬ÀâÌÀ¤µ¤ì¤Æ¤¤¤Æ¡¢
Command Line Interface - ESLint - Pluggable JavaScript linter
¤½¤³¤Ë
eslint --ignore-path .gitignore file.js
¤Î¤è¤¦¤Ë .gitignore ¤ÈÁȤ߹ç¤ï¤»¤ëÊýË¡¤¬¾Ò²ð¤µ¤ì¤Æ¤¤¤ë¤Î¤À¤¬¡¢¤³¤ì¤Ï¤¢¤Ö¤Ê¤¤¡£¶ñÂÎŪ¤Ë¸À¤¦¤È
git ¤Ç¤Ï̵»ë¤µ¤ì¤Ê¤¤¤±¤É eslint ¤Ç¤Ï̵»ë¤µ¤ì¤ë¥Õ¥¡¥¤¥ë¤¬À¸¤Þ¤ì¤ë
²ÄǽÀ¤¬¤¢¤ë¡£
º£²ó¼«Ê¬¤¬¶ô¤é¤Ã¤¿¤Î¤Ï
*~
Emacsen »È¤¤¤Ê¤éʬ¤«¤ë¤È»×¤¦¤ó¤À¤±¤É¡¢¤³¤ó¤Ê¡ÖÉáÄ̤Πglob¡×¤ÇƧ¤ßÈ´¤¯¤È¤Ï»×¤ï¤º¡¢¤Ê¤¼¤«°Õ¿ÞÄ̤ê¤Ë lint ¤Ç·Ù¹ð¤µ¤ì¤Ê¤¤¤È¥¦¥ó¥¦¥ó2»þ´Ö¤â»þ´Ö¤ò¾ÃÈñ¤·¤Æ¤·¤Þ¤¤¤Þ¤·¤¿¤È¤µ¡£
¤Á¤Ê¤ß¤ËËÜÅö¤Ë°¤µ¤·¤Æ¤¤¤¿¤Î¤Ï ESLint ¤Ç¤Ï¤Ê¤¯
ESLint ¤Ç¤Ï https://t.co/xAT9N8H56e ¤ò»È¤Ã¤Æ ignore ¥Õ¥¡¥¤¥ë¤ò²òÀϤ·¤Æ¤¤¤Þ¤¹¤Î¤Ç¡¢ .gitignore ¤È°Û¤Ê¤ë²ò¼á¤Ë¤Ê¤ë¾ì¹ç¤Ï¥Ð¥°Êó¹ð¤·¤ÆÄº¤±¤ì¤Ð¤È»×¤¤¤Þ¤¹¡£
— Toru Nagashima (@mysticatea) May 7, 2018
¤Ê¤Î¤À¤½¤¦¤Ç¤¹¡£¤¦¡¼¤ó¡¢¤Ê¤ë¤Û¤É¡£
2018-05-13 [ĹǯÆüµ]
_ ²þ¤á¤ÆVue.js¤Î¥Ç¡¼¥¿¤Î´Æ»ëÊýË¡¤È²óÈòÊýË¡¤È¥³¥ó¥Ý¡¼¥Í¥ó¥ÈÀß·×
¤Þ¤È¤á
- Vue ¤Ç´Æ»ë¤·¤Æ¤¤¤¿¤Î¤Ï data ¤Ç¤Ï¤Ê¤¯ setter ¤òÄ̤俤«¤É¤¦¤«¤À¤Ã¤¿
- ¤½¤³¤Ï Backbone.js »þÂ夫¤éÊѤï¤Ã¤Æ¤Ê¤«¤Ã¤¿
- Array ¤ä Object ¤Î°ìÉô¤ò½ñ¤´¹¤¨¤ë½èÍý¤Ï setter ¤òÄ̤é¤Ê¤¤¤Î¤Ç Vue ¤Ï¸¡ÃΤǤ¤Ê¤¤
- µÕ¤Ë´Ý¤´¤È²õ¤»¤Ð setter ¤òÄ̤¹¤³¤È¤Ï¤Ç¤¤ë
- ¤·¤«¤·¶²¤é¤¯¤½¤Î¾ì¹ç¤Ï½ñ¤´¹¤¨¤ë DOM ¤ÎÈϰϤ¬¹¤¬¤ê¡¢VirtualDOM ¤Î®¤µ¤Î¥á¥ê¥Ã¥È¤¬¥¹¥Ý¥¤¥ë¤µ¤ì¤ë
- ¥³¥ó¥Ý¡¼¥Í¥ó¥È¤ò¾®¤µ¤¯¤·¤í¤È¤¤¤¦¤Î¤Ï¤½¤¦¤¤¤¦°ÕÌ£¤Ç¤â¤¢¤Ã¤¿
»²¹Í
- Vue.js 2.0 ¤Î»»½Ð¥×¥í¥Ñ¥Æ¥£¼þÊդΥ³¡¼¥É¥ê¡¼¥Ç¥£¥ó¥° - kitak blog
- Internels Vue.js »»½Ð¥×¥í¥Ñ¥Æ¥£¤Ï¤É¤¦¤ä¤Ã¤ÆÆ°¤¤¤Æ¤¤¤ë¤«
Array¤ÎÊѹ¹¡¢Object¤ÎÊѹ¹¤Ïsetter¤òÄ̤é¤Ê¤¤¤Î¤Ç¸¡ÃΤǤ¤Ê¤¤
¤Þ¤¡¡¢Ê¬¤«¤Ã¤Æ¤·¤Þ¤¨¤ÐÅö¤¿¤êÁ°¤ÎÏäʤó¤Ç¤¹¤±¤É¡¢¤³¤¦¤¤¤¦´¶¤¸¤Î¥³¡¼¥É¤¬¤¢¤ë¤È»×¤¤¤Í¤§¡£
data() { return { model: {} } }, methods: { action() { this.model['foo'] = 'bar' } }
¤³¤ì¡¢data ¤À¤«¤é¤È¤« computed ¤À¤«¤é¤È¤« watch ¤¸¤ã¤Ê¤¤¤«¤é¤È¤«¤¸¤ã¤Ê¤¯¤Æ¡¢Vue ¤Ç¤Ï¸¡ÃΤǤ¤Ê¤¤¤Ç¤¹¡£
¤³¤ì¤Ï¤´¤¯´Êñ¤ÊÍýͳ¤Ç
this.model = {foo: 'bar'}
¤¸¤ã¤Ê¤¤¤È setter ¤òÄ̤é¤Ê¤¤¤«¤é¡£¤Ä¤Þ¤ê¡¢
Vue¤ÏÃͤϴƻ뤷¤Æ¤¤¤Ê¤¤¡£setter ¤¬ÄÌÃΤ·¤Æ¤ë¤À¤±¡£
¤½¤¦¤Èʬ¤«¤ì¤ÐÏäϴÊñ¡£¤Ä¤Þ¤ê Bachbone.Model ¤Î»þÂ夫¤éËܼÁ¤ÏÊѤï¤Ã¤Æ¤¤¤Ê¤¤¤ï¤±¤Ç¤¹¡£¤¢¤Îº¢¤Ï Model ¦¤â event ¤òÄÌÃΤ¹¤ë½èÍý¤ò¼«Á°¤Ç½ñ¤¤¤Æ¤¤¤Þ¤·¤¿¤¬¡¢¤½¤ÎÉôʬ¤Îµ½Ò¤¬ setter ¤òÄ̤¹¤³¤È¤Ç¾Êά¤Ç¤¤Æ¤¤¤ë¤À¤±¡£
¤¸¤ã¤¢¸¡ÃΤµ¤»¤¿¤±¤ì¤Ðsetter¤òÄ̤»¤Ð¤è¤¤
¤½¤ÎÄ̤ꡣsetter ¤òÄ̤»¤Ð¤è¤¤¤Î¤Ç¤¹¡£
¾å¤Î¥³¡¼¥É¤òËÜÅö¤Ëư¤¯¤è¤¦¤Ë¤¹¤ë¤È°Ê²¼¤Î¤è¤¦¤Ë¤Ê¤ê¤Þ¤¹¡£
methods: { action() { let model = JSON.parse(JSON.stringify(this.model)) model['foo'] = 'bar' this.model = model } }
¤³¤¦¤¹¤ì¤Ð setter ¤òÄ̤ë¤Î¤ÇÊ£»¨¤Ê¥Ç¡¼¥¿¹½Â¤¤Ç¤â reactive system ¤òưºî¤µ¤»¤ë¤³¤È¤¬¤Ç¤¤Þ¤¹¡£
¤Ç¤â´Ø·¸¤¹¤ëVirtualDOM¤ÏÁ´½ñ¤´¹¤¨¤Ë¤Ê¤Ã¤Á¤ã¤¦¤·¡¢±Æ¶Á¤âÇİ®¤·¤Ë¤¯¤¤
Åö¤¿¤êÁ°¤Ç¤¹¤Í¡£¤½¤¦¤Ê¤ë¤È¤»¤Ã¤«¤¯Êѹ¹¤Î¤¢¤ëÉôʬ¤À¤±½ñ¤´¹¤¨¤ë¤³¤È¤òÍÆ°×¤Ë¼Â¸½¤Ç¤¤ë VirtualDOM ¤ÎÆÃŤ¬µ¾À·¤Ë¤Ê¤ë¤ï¤±¤Ç¤¹¡£Î㤨¤Ð Array ¤ÎÊѹ¹¤ò setter ¤ÇÄÌÃΤ·¤Æ¤·¤Þ¤¦¤È¡¢v-for ¤Ç²ó¤·¤Æ¤¤¤ëÉôʬ¤ÏÁ´½ñ¤´¹¤¨¤Ë¤Ê¤ê¤Þ¤¹¡£
¤µ¤é¤ËÊ£»¨¤Ç¿¼¤¤¹½Â¤¤Î¥Ç¡¼¥¿¤ò data ¤È¤·¤ÆÊÝ»ý¤·¤Æ¤¤¤Æ¡¢¤â¤·¤½¤ì¤¬¤½¤Î¤Þ¤Þɽ¼¨¤Ë´Ø·¸¤·¤Æ¤¤¤ë¾ì¹ç¡¢¤½¤Î component ¤È»Ò¤Î component ¤Ê¤É¡¢Â¿¤¯¤Î¾ì½ê¤Ç¤³¤Î data ¤Î½ñ¤´¹¤¨¤Î±Æ¶Á¤ò¼õ¤±¤Þ¤¹¡£¸À¤¤´¹¤¨¤ë¤È component ¤¬Â礤¹¤®¤ë¤ï¤±¤Ç¤¹¡£¤³¤ì¤Ï¼Â¹Ô®Å٤Ǥâ¥Þ¥¤¥Ê¥¹¤Ç¤¹¤¬¡¢Êѹ¹¤â¥Æ¥¹¥È¤â¤ä¤ê¤Ë¤¯¤¯¤Ê¤ê¤Þ¤¹¡£*1
ÁÇľ¤Ësetter¤ÇÅϤ»¤ëÈϰϤ¬Vue component¤ÎŬÀÚ¤ÊÂ礤µ¤Î°ì¤Ä¤Î»Ø¿Ë¤Ê¤Î¤«¤â
º£²ó setter ¤Î¸ºß¤Ë²þ¤á¤Æ¹Ô¤Ã夤¤Æ¡¢Ê£»¨¤Ê¹½Â¤¤Î¥Ç¡¼¥¿¤ÎÊѹ¹¤ò̵ÍýÌðÍý¸¡ÃΤµ¤»¤ë¤³¤È¤ò¤ä¤ê¤Þ¤·¤¿¤¬¡¢ËÜÅö¤Ï¤³¤ì¤Ï Vue Ū¤Ë¤Ï¥ª¥¹¥¹¥á¤Ç¤¤Ê¤¤ÊýË¡¤Î¤è¤¦¤Êµ¤¤¬¤·¤Þ¤¹¡£
º£²óµ¤¤Å¤¤¤¿ setter ¤Îưºî¤¬ÍýÁÛŪ¤Ê¤â¤Î¤Ê¤Î¤«µ»½ÑŪ¤ÊÀ©Ìó¤Ë´ð¤Å¤¯ÂŶ¨¤Ê¤Î¤«¤Ïʬ¤«¤ê¤Þ¤»¤ó¤¬¡¢¾¯¤Ê¤¯¤È¤â¥Õ¥ì¡¼¥à¥ï¡¼¥¯¤Ë¤È¤Ã¤Æ¼«Á³¤Êưºî¤òËþ¤¿¤¹¤è¤¦¤Ë¤·¤Æ¤ª¤¯¤È¤¤¤¦¤Î¤Ï¡¢Â¾¤Î¿Í¤È¥³¡¼¥É¤äÃ諤ò¶¦Í¤¹¤ëºÝ¤Ë͸ú¤Ç¤¹¡£µÕ¤Ë¥¤¥ì¥®¥å¥é¡¼¤Ê»È¤¤Êý¤Ï¤³¤Î¶¦Í¤òÆñ¤·¤¯¤·¤Þ¤¹¡£
¡Öcomponent ¤Ï¾®¤µ¤¯¡×¤È¤Ï¤è¤¯¸À¤ï¤ì¤Þ¤¹¤¬¡¢¤â¤·¤«¤·¤¿¤é¤³¤Î setter ¤ò°Õ¼±¤»¤º¤Ë»È¤¨¤ëÈϰϤ³¤½¤¬¡¢component ¤ÎŬÀÚ¤ÊÂ礤µ¤Ê¤Î¤«¤â¤·¤ì¤Ê¤¤¤È¤¤¤¦¡¢²þ¤á¤Æ¹Í¤¨¤ë¤È¤´¤¯¤´¤¯Åö¤¿¤êÁ°¤Î¤³¤È¤Ëµ¤¤Å¤¤¤¿¤È¤¤¤¦ÏäǤ·¤¿¡£
ÍîÊæ½¦¤¤
°Ê²¼¡¢¤¦¤Þ¤¯¥Ï¥Þ¤é¤Ê¤«¤Ã¤¿¤â¤Î¤ò²¥¤ê½ñ¤¤·¤Æ½ª¤ï¤ê¤Þ¤¹¡£
¡Öcomponent ¤Ï¾®¤µ¤¯¡×¤È¤Ï¸À¤¤¤Þ¤¹¤¬¡¢ÉÔɬÍפ˺î¤ê¤¹¤®¤Æ¤â´ÉÍý¤¬ÂçÊѤǤ¹¡£¾®¤µ¤¯ÊݤĤΤÏÂç»ö¤Ç¤¹¤¬¡¢¤¹¤Ù¤Æ¤ò component ¤Ëʬ¤±¤ëɬÍפϤʤ¤¤È»×¤¤¤Þ¤¹¡£
props ¥Ð¥±¥Ä¥ê¥ì¡¼¤Ï³Î¤«¤ËÌÌÅݤǤ¹¤¬¡¢2, 3 ³¬ÁØÄøÅ٤ʤé³ä¤È´·¤ì¤Þ¤¹¡£
props ¤ÇÅϤ¹¥Ç¡¼¥¿¤Î¿ô¤¬Áý¤¨¤Æ¤â¤¢¤ó¤Þ¤êµ¤¤Ë¤·¤Ê¤¤Êý¤¬¤¤¤¤¤«¤â¡£function ¤Î°ú¿ô¤È¤Ï°ÕÌ£¤¬°Û¤Ê¤ë¤Èª¤¨¡¢²¿¤â¹Í¤¨¤º¤Ë ¤ÇŸ³«¤Ç¤¤ëñ½ã¤µ¤òÍ¥À褷¤Æ¤â¤è¤¤¤È»×¤¤¤Þ¤¹¡£¡ÖÀÕ̳¤¬°ì¤Ä¤Ç¤¢¤ì¤Ð¥Ç¡¼¥¿¤Ï°ì¤Ä¤Ç¤Ê¤¯¤Æ¤â¤è¤¤¡×¤È¤¤¤¦¹Í¤¨Êý¡£
*1 Î㤨¤Ð¼«Æ°¥Æ¥¹¥È¤ò¤¹¤ë¤Ë¤·¤Æ¤â½é´ü²½¡¢stub out ¤¬ÌÌÅݤǤ¹¡£
2018-05-17 [ĹǯÆüµ]
_ Nuxt¥Ç¥Õ¥©¥ë¥È¥µ¡¼¥Ð¤ÏCache-Control¤Ç¤¤Ê¤¤¤Î¤ÇÃí°Õ
¤Þ¤È¤á
- Nuxt¤Ï³Æ¼ï¤Î¥µ¡¼¥Ð¥µ¥¤¥É¥Õ¥ì¡¼¥à¥ï¡¼¥¯¤ÈÁȤ߹ç¤ï¤»¤é¤ì¤ë¤¬Nuxt¤À¤±¤Ç¤â¥µ¡¼¥Ð¤È¤·¤Æµ¡Ç½¤¹¤ë
- ¥Ç¥Õ¥©¥ë¥È¤Ç ETag ¤ÏÅǤ¯¤¬ Cache-Control ¤ÏÅǤ«¤Ê¤¤¤Î¤Ç¤½¤Î¤Þ¤Þ CDN ¤Ë¿©¤ï¤»¤ë¤È¤¤¤Ä¤Þ¤Ç¤â¥ê¥Õ¥ì¥Ã¥·¥å¤µ¤ì¤Ê¤¤
- ¤³¤Î±Æ¶Á¤ò¼õ¤±¤ë¤Î¤Ï¤¢¤¯¤Þ¤Ç vue-router ¤ò·Ðͳ¤¹¤ë Page ¤À¤±
- assets ¤Ë´Ø¤·¤Æ¤Ï nuxt start ¤Ç serve ¤·¤Æ¤¤¤ë¾ì¹ç¤ÏÌäÅú̵ÍÑ¤Ç max-age ¤Ï 1 year ¤Ë¤Ê¤ë*1
- optional ¤Ê http response header ¤òÄɲ乤ë middleware ¤Ï¤É¤¦¤â¤Ê¤µ¤²
- ¾¤Î¥Õ¥ì¡¼¥à¥ï¡¼¥¯¤ÈÁȤ߹ç¤ï¤»¤Æ¤½¤Î middleware ¤ò»È¤¨¤ÐÄɲäǤ¤ë¡ÊKoa ¤Ç³ÎǧºÑ¤ß¡Ë
¤½¤â¤½¤âWeb¤Îcache¤Ã¤Æ
- private cache ¤È public cache ¤¬¤¢¤ë
- CDN ¤Ï public cache
- ¥Ö¥é¥¦¥¶¤Ï private cache
- Cache-Control ¤ò private ¤Ë¤¹¤ë¤È CDN ¤Ï cache ¤Ç¤¤Ê¤¤¡Ê¤·¤¿¤¬¤Ã¤Æ¡¢¥ê¥¯¥¨¥¹¥È¿ô¤âžÁ÷Î̤⸺¤é¤Ê¤¤¡Ë
- ¤È¤Ë¤«¤¯ Nuxt.js ¤Ï²¿¤Î¾ðÊó¤âÄɲ䷤ʤ¤
¢¨ public ¤È private ¤ÎÏäÏÃѤº¤«¤·¤Ê¤¬¤é CDNÀÚ¤êÂØ¤¨ºî¶È¤Ë¤ª¤±¤ë¡¢WebÈÇ¥á¥ë¥«¥ê¤Î¸Ä¿Í¾ðÊóή½Ð¤Î¸¶°ø¤Ë¤Ä¤¤Þ¤·¤Æ - Mercari Engineering Blog ¤Ë¤¢¤ë¤è¤¦¤Ë¥á¥ë¥«¥ê¤Î¤ä¤é¤«¤·¤ÇÃΤê¤Þ¤·¤¿¡£¡Ê¤Á¤Ê¤ß¤Ë Rails ¤Ï¥Ç¥Õ¥©¥ë¥È¤Ç max-age=0, private, must-revalidate ¤òÉղ乤ë¤Î¤ÇÆÃ¤Ë²¿¤â¹Í¤¨¤ëɬÍפʤ¯ CDN ¤Ï¥¹¥ë¡¼¤Ë¤Ê¤ë¡£¡Ë
CDN¦¤Ç¤Ï´ðËÜŪ¤Ëmax-age¤ò¿ä¾©¤·¤Æ¤ë
- CloudFront ¥¨¥Ã¥¸¥¥ã¥Ã¥·¥å¤Ë¥ª¥Ö¥¸¥§¥¯¥È¤òÊÝ»ý¤¹¤ë»þ´Ö¤Î»ØÄê¡Ê͸ú´ü¸ÂÀÚ¤ì¡Ë - Amazon CloudFront
- ¥Á¥å¡¼¥È¥ê¥¢¥ë: ¥¥ã¥Ã¥·¥åÀ©¸æ - ¥Á¥å¡¼¥È¥ê¥¢¥ë | Fastly Help Guides
´ðËÜŪ¤Ë¤Ï Cache-Control: max-age= ¤òÀßÄꤹ¤ë¤Î¤¬¤è¤µ¤²¡£¡ÊSurrogate-Control ¤ä s-maxage ¤À¤Ã¤¿¤ê¤â¤·¤Þ¤¹¤¬¡¢ºÙ¤«¤¤¤³¤È¤ÏÃÖ¤¤¤Æ¤ª¤¯¡£¡Ë
¤·¤«¤· Nuxt.js ¤Ë¤Ï¥µ¡¼¥Ð¦¤ÎÀßÄê¤Î;ÃϤ¬¤Ê¤¤¡£¡ÊSSRÍѤΠMartinLG/nuxt-custom-headers: Nuxt module to add custom headers to SSR rendered pages. ¤È¤¤¤¦¤â¤Î¤Ï¤¢¤ë¡£¡Ë
Nuxt¤Ç¤ÏETag¤È304¤·¤«¹Í¤¨¤Æ¤Ê¤¤
¶ñÂÎŪ¤Ê¥³¡¼¥É¤Ï°Ê²¼¤ÎÉôʬ¡£
lib/core/middleware/nuxt.js
// Add ETag header if (!error && this.options.render.etag) { const etag = generateETag(html, this.options.render.etag) if (fresh(req.headers, { etag })) { res.statusCode = 304 res.end() return } res.setHeader('ETag', etag) }
nuxt.config.js ¤Î render.etag option ¤ò¸«¤ë¤³¤ÎÊհʳ°¤Ë cache ¤ò¹Íθ¤·¤Æ¤¤¤ë¥³¡¼¥É¤Ï¸ºß¤·¤Ê¤¤¡£ETag ¤òÉÕ¤±¤ë¤«ÉÕ¤±¤Ê¤¤¤«¤À¤±¡£Ä¾Àܥ֥饦¥¶¤È¤ä¤ê¤È¤ê¤¹¤ë¤Ê¤é¤³¤ì¤À¤±¤Ç¤â½½Ê¬¤«¤â¤·¤ì¤Ê¤¤¤¬ CDN ¤òÄ̤¹¾ì¹ç¤Ï¤½¤¦¤Ï¤¤¤«¤Ê¤¤¡£
¤½¤³¤ÇNode.js¤Î¥µ¡¼¥Ð¥µ¥¤¥É¥Õ¥ì¡¼¥à¥ï¡¼¥¯¤ÈÁȤ߹ç¤ï¤»¤ë
nuxt-community/create-nuxt-app: Create Nuxt.js App in seconds.
¤ò»È¤¨¤Ð Express, Koa, Hapi, ... ¤Ê¤É¤Ê¤É¤«¤é¥Õ¥ì¡¼¥à¥ï¡¼¥¯¤òÁª¤Ù¤ë¡£¤³¤ì¤é¤Î middleware ¤Ç custom header ¤òÅǤ¤¤Æ¤¢¤²¤ì¤Ð¤ªk
¶ñÂÎŪ¤Ë¸ú²ÌŪ¤Ëcache¤¹¤ë¤Ë¤Ï
Î㤨¤Ð Koa ¤Ç¤¢¤ì¤Ð
- Koa - next generation web framework for node.js
- koajs/ctx-cache-control: Augment Koa with ctx.cacheControl(maxAge)
¤òÁȤ߹ç¤ï¤»¤Æ¡¢./server/index.js ¤Ç
const Koa = require('koa') const app = new Koa() require('koa-ctx-cache-control')(app) app.use(async (ctx, next) => { ctx.cacheControl('max-age=0')
¤³¤ó¤Ê´¶¤¸¡£
¤³¤¦¤¹¤ë¤È pages °Ê²¼¤Î component ¤ò serve ¤¹¤ë»þ¤Ë¤Ï Cache-Control: max-age=0 ¤¬Éղ䵤줿¤¦¤¨¤Ç ETag ¤Ç¤Î¥¥ã¥Ã¥·¥åÆâÍÆ¤Î¥Á¥§¥Ã¥¯¤¬¹Ô¤ï¤ì¤ë¤Î¤Ç¡¢origin ¥µ¡¼¥Ð¤«¤éľÀÜžÁ÷¤µ¤ì¤ë¤â¤Î¤Ï¥³¥ó¥Æ¥ó¥Ä¤ÎÁ¯ÅÙ¥Á¥§¥Ã¥¯¤Ï¤·¤Ä¤Ä¤âžÁ÷¤Ï¤Û¤Ü¥¨¥Ã¥Â¥µ¡¼¥Ð¤«¤é¹Ô¤ï¤ì¤ë¤Î¤Ç®¤¤¡£¡Ê¤Ï¤º¡Ë
*1 cache buster ¤Î¸ú¤¯¥Õ¥¡¥¤¥ë¤¬À¸À®¤µ¤ì¤Æ¤¤¤ë
2018-05-23 [ĹǯÆüµ]
_ eslint-plugin-node¤ÇNode8¤ò»È¤¤¤Ä¤ÄNode6¤ÇÌäÂê¤Îµ¯¤¤Ê¤¤¥³¡¼¥É¤ò½ñ¤¯
¤¤¤ä¡¢¼ÂºÝ¤Ë¤Ï¤Á¤ã¤ó¤È¥×¥í¥À¥¯¥·¥ç¥ó¥³¡¼¥É¤ò½ñ¤¤¤Æ¤¤¤Ê¤¤¤Î¤Ç¡¢Â¾¤Ë¤âµ¤¤ò¤Ä¤±¤ë¤Ù¤¥Ý¥¤¥ó¥È¤Ï¤¢¤ë¤È»×¤¦¤Î¤Ç¤¹¤¬¡¢¤È¤ê¤¢¤¨¤º¤Ä¤¤¤Ã¤¿¡¼¤Ç¡Ö Google Functions ¤Ï¤Ê¤¼Ì¤¤À¤Ë Node 6 ¤Ê¤Î¤«¡×¤ß¤¿¤¤¤Ê¤ò¸«¤«¤±¤Æ¡¢
¤½¤¦¤¤¤ä¡¢Node 8 LTS ¤ò´ð½à¤Ë´Ä¶ºî¤Ã¤Æ¤Æ Node 6 Í׵ᤵ¤ì¤¿¤éÌÌÅݤ¯¤µ¤¤¤Ê
¤Èµ¤¤Ë¤Ê¤Ã¤¿¤Î¤ÇÄ´¤Ù¤Æ¤ß¤Þ¤·¤¿¡£
Ä´¤Ù¤¿¤Î¤ÏÆó¤Ä¤Ç¡¢
- babel-preset-node6
- eslint-plugin-node
¤Ç¤¹¡£
ºÇ½é¡Önode 8 ¤Ç½ñ¤¤Ä¤Ä¥Ç¥×¥í¥¤»þ¤Ë node 6 ¤Çư¤¯¥³¡¼¥É¤ËÊÑ´¹¤Ç¤¤ì¤Ð¤¤¤ó¤¸¤ã¤Í¡©¡×¤È»×¤Ã¤Æ¡¢¤½¤ì¤Ã¤Ý¤¤Ì¾Á°¤Î babel-preset-node6 ¤ò»î¤·¤Æ¤ß¤Þ¤·¤¿¤¬¡¢¤½¤ó¤Ê¤³¤È¤Ï̵Íý¤Ç¤·¤¿¡£¤³¤¤¤Ä¤ÎÌò³ä¤Ï V8 native ¤Çư¤¯¥³¡¼¥É¤Ï¤½¤Î¤Þ¤Þ¤Ë¡¢node6 ¤Ç ES2015 compat ¤¸¤ã¤Ê¤¤Éôʬ¤òÊ䤦¤¿¤á¤Î¤â¤Î¤Ç¡¢ÌÜŪ¤Ï¡¢transpile ¤Î¹â®²½¤Ç¤¹¤Í¡£
¤Ç¡¢ÊÑ´¹¤Ç¤É¤¦¤Ë¤«¤¹¤ë¤Î¤ÏÁ᡹¤ËÄü¤á¤Æ¡¢¤¸¤ã¡¼ lint ¤À¤Ê¤È¡£
mysticatea/eslint-plugin-node: Additional ESLint's rules for Node.js
¤Ç¤¤Þ¤·¤¿¡£
package.json ¤Ç¼¨¤¹¤È°Ê²¼¤Î¤è¤¦¤Ê´¶¤¸¤Ç»ØÄꤹ¤ì¤Ð ok.
{ "engines": { "node": ">= 6" // <- ¤³¤³¤ÇÂоݥС¼¥¸¥ç¥ó¤ò»ØÄê }, "devDependencies": { "eslint": "*", "eslint-plugin-node": "*" } "eslintConfig": { "plugins": ["node"], "extends": ["plugin:node/recommended"] } }
¤³¤ì¤ÇÎ㤨¤Ð°Ê²¼¤Î¤è¤¦¤ËÅܤé¤ì¤Þ¤¹¡£
error Async functions are not supported yet on Node >=6.0.0 \ node/no-unsupported-features
¤¦¤ó¤¦¤ó¡£
package.json ¤Î engines »ØÄê¤Î°ÕÌ£¤¬Áý¤¨¤ë¤Î¤Ï¤Á¤ç¤Ã¤È¤É¤¦¤Ê¤Î¤«¤Ê¤È¤¤¤¦µ¤¤Ï¤¹¤ë¤Î¤Ç¤¹¤¬*1¡¢¤Þ¤¡¤È¤ê¤¢¤¨¤ºÊýË¡¤Ïʬ¤«¤Ã¤¿¤Î¤Ç¤è¤·¤È¤·¤Þ¤¹¡£
*1 Î㤨¤Ð½ù¡¹¤Ë¥Ð¡¼¥¸¥ç¥ó¤ò¾å¤²¤Æ¤¤¤³¤¦¤È¤Ê¤Ã¤¿¾ì¹ç¤Ê¤É¤Ë
2018-05-26 [ĹǯÆüµ]
_ ES2017¤Îasync/await¤Î¥¥½Îý½¬
ºÇ¶á¡Ê2018-05¸½ºß¡Ë¤Ï¥é¥¤¥Ö¥é¥ê¤Ç Promise Á°Äó¤Î¤â¤Î¤¬Áý¤¨¤Æ¤¤Æ¤ë¤·¥µ¥ó¥×¥ë¤Ë¤â¤·¤ì¤Ã¤ÈÉáÄ̤δé¤Ç async/await ¤¬Åо줹¤ë¤Î¤Ç´·¤ì¤Æ¤ª¤«¤Ê¤¤¤È¤¤¤±¤Ê¤¤¡£ÆÃ¤Ë Node.js ¤Ç¤Ï¤â¤¦ LTS ¤Ç¤¢¤ë 8 ¡ÊÀµ³Î¤Ë¤Ï 7 ¤ÎÅÓÃæ¡Ë¤Çɸ½àŪ¤Ë»È¤¨¤ë¤Î¤Ç¡¢º£¸å¤Ï¤â¤Ã¤ÈÅö¤¿¤êÁ°¤ËÅо줷¤Æ¤¯¤ëµ¡²ñ¤¬Áý¤¨¤Æ¤¯¤ë¤³¤È¤¬Í½ÁÛ¤µ¤ì¤ë¡£*1
¤È¤¤¤¦¤³¤È¤Çº£²ó¤Ïasync/await¤ÎÎý½¬¡£¤¿¤À¤· await ¤ÎÆþ¤ì»Ò¤ä Promise.all ¤Ç«¤Í¤ë¤È¤¤¤Ã¤¿Ê£»¨¤Ê¤³¤È¤Ï°·¤Ã¤Æ¤¤¤Ê¤¤¡£
¢¨ Promise.all() ¤ÎÏÃ¤Ï async/await¤äPromise¤Çµ¤¤ò¤Ä¤±¤ë¤³¤È - ¤¢¡¼¤¢¤ê¤¬¤Á(2018-06-15) ¤Ç¡ª
¤Þ¤¿¤³¤³¤Ç°·¤Ã¤Æ¤¤¤ë¤Î¤Ï¤¢¤¯¤Þ¤Ç ES2017 ¤Î async/await ¤Ç¤¢¤Ã¤ÆÂ¾¤ÎÆÈ¼«¤Ë¼ÂÁõ¤µ¤ì¤¿ async ¥é¥¤¥Ö¥é¥ê¤Î¤³¤È¤Ç¤â¤Ê¤¤¤Ç¤¹¡£³Îǧ¤ÏÁǤΠNode 8 ¤Ç¹Ô¤Ã¤Æ¤Þ¤¹¡£
¤Þ¤º¤ÏPromise
Ê·°Ïµ¤¤À¤±¤Ê¤é¤³¤Á¤é¤ò¤É¤¦¤¾¡£ jQuery.deferred¤ò·Ðͳ¤·¤Ä¤ÄES2015¤ËÆþ¤Ã¤¿Promise¤ÎÊ·°Ïµ¤¤òÌ£¤ï¤¦ - ¤¢¡¼¤¢¤ê¤¬¤Á(2016-06-19)
async/await ¤ÎÍý²ò¤Ë¤Ï Promise ¤ÎÍý²ò¤¬·ç¤«¤»¤Ê¤¤¡£¤Ê¤¼¤Ê¤é async/await ¤Ï¤¢¤¯¤Þ¤Ç Promise ¤òƱ´üŪ¤Ë¡¢¼ê³¤Åª¤Ê½èÍý¤Î¤è¤¦¤Ë½ñ¤±¤ë¤À¤±¤À¤«¤é¡£
¤µ¤Æ¡£
¤Þ¤º Promise ¤¬¤ä¤Ã¤Æ¤¯¤ì¤ë¤Î¤ÏÈ󯱴ü½èÍý¤òÃê¾Ý²½¤·¡¢Åý°ì¥¤¥ó¥¿¡¼¥Õ¥§¥¤¥¹¤òÄ󶡤¹¤ë¤³¤È¡£
¥×¥í¥ß¥¹¤Ï¤¤¤ÄÀ¸À®¤µ¤ì¤ë¤«¤ï¤«¤é¤Ê¤¤ÃÍ¤Î¥×¥í¥¥·¤Î¤è¤¦¤Ê¤â¤Î¤Ç¤¢¤ê¡¢À®¸ù¤·¤¿¤ê¼ºÇÔ¤·¤¿¤ê¤¹¤ëưºî¤ò°·¤¦»þ¤ÎÍýÁÛŪ¤Ê¥Ñ¥¿¡¼¥ó¤Ç¤¹
JavaScript¤Ë¤ª¤±¤ëÈ󯱴ü¥Ñ¥¿¡¼¥ó #ËÝÌõ « Tatyusa's Note
Î㤨¤Ð Node.js ɸ½à¤Î callback ´Ø¿ô¤Î¼õ¤±¼è¤êÊý¤È jQuery ¤Î¤½¤ì¤Ï¥ë¡¼¥ë¤¬°Û¤Ê¤ë¡£*2¤³¤ì¤¬ ES6 Promise ¤Ç¤Ï then(), catch() ¤ËÀ©Ì󤵤ì¤ë¤·¡¢Promise ¤Ï ÄêµÁ¤µ¤ì¤¿¾õÂÖ¤·¤«»ý¤¿¤Ê¤¤¡£¤½¤Î¤¦¤Á¤Î°ìÉô¤¬ fulfilled ¤ä rejected ¤Ç¤¢¤ë¡£
¤Ä¤Þ¤ê¡¢¡ÖPromise ¤òÊÖ¤¹¡×¤È¤µ¤¨¸À¤¨¤Ð¤¢¤È¤Ï»È¤¤Êý¤Ï¡ÖPromise ¤òÊÙ¶¯¤·¤Æ¤¯¤ì¡×¤ÇºÑ¤à¡£¼ÂÁõ¼Ô´Ö¤Î¶¦Ä̸À¸ì¡¢¥¤¥ó¥¿¡¼¥Õ¥§¥¤¥¹¤È¤·¤ÆÈó¾ï¤ËÍ¥¤ì¤Æ¤¤¤ë¡£¡Ê¤¿¤À¤·³Ø½¬¥³¥¹¥È¤Ï°ì»þŪ¤Ë¤Ï¾å¤¬¤ë¡£¡Ë
Promise¤ÎÎã
Promise ¤Ï¾å¤Ë¤¢¤ë¤è¤¦¤ËÈ󯱴ü½èÍý¤ËÆÃ²½¤·¤¿¤â¤Î¤Ç¤Ï¤Ê¤¤¡£
ñ¤Ê¤ë¨ÃͤǤ¢¤Ã¤Æ¤â Array ¤Ç¤¢¤Ã¤Æ¤â Promise ¥ª¥Ö¥¸¥§¥¯¥È¤êÆÀ¤ë¡£Î㤨¤Ð°Ê²¼¤Î¤è¤¦¤ÊĶû¤¤¥³¡¼¥É¤â Promise ¥ª¥Ö¥¸¥§¥¯¥È¤Ç¤Ï¤¢¤ë¡£
const p1 = Promise.resolve('a')
¤³¤ì¤ò console.log ¤¹¤ë¤È
Promise { 'a' }
¤Èɽ¼¨¤µ¤ì¤ë¡£¤è¤¯Ê¬¤«¤é¤Ê¤¤¤±¤É 'a' ¤òÊÖ¤·¤Æ¤¯¤ì¤ë Promise ¤Ê¤ó¤À¤Ê¤È¤¤¤¦Ê·°Ïµ¤¤ÏÅÁ¤ï¤Ã¤Æ¤¯¤ë¡£
¼ÂºÝ¤ËÍߤ·¤¤¤Î¤Ï Promise ¤¸¤ã¤Ê¤¯¤ÆÃͤÀ¡© ¤´¤â¤Ã¤È¤â¡£¤½¤Î¤¿¤á¤Ë¤Ï arrow function ¤ò»È¤¨¤Ð°Ê²¼¤Î¤è¤¦¤ËÈó¾ï¤Ëû¤¤µ½Ò¤Ç¼è¤ê½Ð¤»¤ë¡£*3
p1.then(data => console.log(data))
async function¤Èawait±é»»»Ò
¤Þ¤º¤Ï´ðËÜŪ¤Ê¤³¤È¤«¤é
- async function ¤Ï Promise ¤òÊÖ¤¹
- Promise ¤ò return ¤·¤Æ¤¤¤Ê¤¤¾ì¹ç¤Ï¼«Æ°Åª¤ËÊä´°¤µ¤ì¤ë
- ¤¿¤À¤· callback ¤ò Promise ¤ËÊÑ´¹¤¹¤ë¤Î¤Ï¼«Ê¬¤Ç½ñ¤¯¤Ù¤
Î㤨¤Ð¾å¤Î Promise ¤Ï async function ¤ò»È¤¦¤È°Ê²¼¤Î¤è¤¦¤Ë½ñ¤±¤ë¡£
async function asyncValue() { return 'a' }
Àµ³Î¤Ë¤Ï Promise ¤òÊÖ¤¹ function ¤òÄêµÁ¤·¤¿¤À¤±¤Ê¤Î¤Ç¡¢Æ±¤¸µóư¤ò¤¹¤ë¤è¤¦¤Ë¼êľ¤·¤ò¤¹¤ë¤È¡¢´Ø¿ô¤Î¨»þ¼Â¹Ô¤ò»È¤Ã¤Æ°Ê²¼¤Î¤è¤¦¤Ë¤Ê¤ë¡£
const p2 = (async function() { return 'a' })()
¤À¤ë¤¤¤Ç¤¹¤Í¡£arrow function ¤Ç¤³¤¦¤·¤Á¤ã¤¦¡£
const p2 = (async () => 'a')()
callback¤ò¼õ¤±¼è¤ë¤â¤Î¤ÏÌÀ¼¨Åª¤ËPromise¤ËÁȤßľ¤¹
async function ¤Ï³Î¤«¤Ë¼«Æ°¤Ç Promise ¤òÊÖ¤¹¤ó¤À¤±¤É¡¢setTimeout ¤Ê¤É¤Î callback ¤ò¼õ¤±ÉÕ¤±¤ë¤â¤Î¤Ï¼«Ê¬¤Ç wrap ¤·¤Ê¤¤¤È resolve »þ¤Ë²¿¤¬ÅϤäƤ¯¤ë¤Î¤«Ê¬¤«¤é¤Ê¤¤¤Î¤Ç¡¢°Ê²¼¤Î¤è¤¦¤ËÊÑ´¹¤¹¤ë¡£
async function lazyA() { return new Promise(resolve => { setTimeout(() => { resolve('a') }, 1000) }) }
¤³¤Î¾ì¹ç¡¢async ¤Ï¤¢¤Ã¤Æ¤â¤Ê¤¯¤Æ¤â Promise ¤òÊÖ¤¹¡£Promise ¤¬Æó½Å²½¤¹¤ë¤³¤È¤Ï¤Ê¤¯¤Æ¡¢Promise ¤òÊÖ¤¹¤â¤Î¤Ï¤½¤Î¤Þ¤Þ¥¹¥ë¡¼¤·¤Æ¤¯¤ì¤ë¡£¤È¤¤¤¦¤³¤È¤Ç¡¢
Promise ¤òÊÖ¤¹¤â¤Î¤Ï´·½¬¤È¤·¤Æ async ¤òƬ¤ËÉÕ¤±¤Á¤ã¤¦
¤È¤¤¤¦±¿ÍѤǤ褤¤è¤¦¤Êµ¤¤¬¤¹¤ë¡£¡Ê¤À¤Ã¤¿¤é¤Ê¤¯¤Æ¤â¤¤¤ó¤¸¤ã¤Í¡©¤È»×¤¦¤«¤â¤·¤ì¤Ê¤¤¤¬¡¢°Ê²¼¤ÎÍýͳ¤Ë¤è¤ê¡¢µÕ¤Î±¿ÍѤÎÊý¤¬¤è¤¤¤Î¤À¡£¡Ë
await¤Ï¡Ö²ò·èºÑ¤ß¡×¤ÎÃͤò¼è¤ê½Ð¤¹±é»»»Ò
²ò·èºÑ¤ß¤Þ¤ÇÂԤĤΤÇÎ㤨¤Ð¾å¤Î lazyA() ¤òÎã¤Ë¤È¤ë¤È
await lazyA()
¤È¤¹¤ë¤È then() ¤È¤«ÌÌÅݤʤ³¤È¤·¤Ê¤¯¤Æ¤â 'a' ¤ò¼è¤ê½Ð¤¹¤³¤È¤¬¤Ç¤¤ë¡£
¤¿¤À¤·await¤Ï¼«Í³¤Ë¤Ï»È¤¨¤Ê¤¤
- async ¤ÎÃæ¤Ç¤·¤«»È¤¨¤Ê¤¤
µÕ¤Ë¸À¤¦¤È async function ¤ÎÃæ¤Ç¤Ï¾¤Î async function ¤ò await ¤Ç¸Æ¤Ù¤ë¤È¤¤¤¦¤³¤È¤Ç¤¢¤ë¡£
- ²ò·èºÑ¤ß¤Î Promise ¤ÎÃͤò¥ª¥Ö¥¸¥§¥¯¥È¤È¤·¤Æ¥á¥½¥Ã¥É¥Á¥§¥¤¥ó¤Ï¤Ç¤¤Ê¤¤
(async () => { const a = await lazyA() })()
¤ÏÀµ¤·¤¯ 'a' ¤Ë¤Ê¤ë¡£¤·¤«¤·°Ê²¼¤Î¤è¤¦¤Ë¤Ï½ñ¤±¤Ê¤¤¡£
(async () => { (await lazyA()).length })()
¤Ä¤Þ¤ê°Ê²¼¤Î¤è¤¦¤Ë¤â½ñ¤±¤Ê¤¤¡£
(async () => { (await lazyArray()).map(e => ..) })()
¤³¤¦¤¤¤¦½ñ¤Êý¤Ë¤·¤è¤¦¤È¤¹¤ë¤È·ë¶É Promise ¤¬´é¤ò½Ð¤·¤Æ¤¯¤ë¡£
¤³¤³¤Ç
[rv] = await expression;
¤È½ñ¤«¤ì¤Æ¤¤¤ë¤Î¤Ï¤É¤¦¤â¡ÖÃͤò¼õ¤±¼è¤ë¿Í¡×¤¬É¬Íפäݤ¤¡£
await¤Î¸å¤í¤ÏÀÚ¤ë
¤È¤¤¤¦¤³¤È¤ÇƱ´ü½èÍý¤ò»Ï¤á¤ëÁ°¤Ë await ¤Î·ë²Ì¤ÏÂåÆþ¤·¤Æ½èÍý¤ÏÀÚ¤ì¤ë¤è¤¦¤Ë¤·¤Æ¤ª¤¯¡£°Ê²¼¤Î¤è¤¦¤Ê´¶¤¸¡£
(async () => { const arr = await lazyArray() arr.map(e => e * 2) })
¤¿¤À¤·¸å¤í¤Ë·Ò¤²¤ë¤Î¤Ï¥À¥á¤À¤¬¡¢Á°¤Ê¤é¤è¤¤¡£¤³¤ó¤Ê´¶¤¸¡£¡Ê¤Ï¤Ã¤¤êÂåÆþ¤Ç¤Ï¤Ê¤¤¤¬¡¢°·¤¤¤È¤·¤Æ¤ÏƱ¤¸¤Ã¤Ý¤¤¡£¡Ë
let newVal = [] for ( let e on lazyArray ) { newVal.push(e * 2) }
»²¹Í
- ES2017 async/await ¤Ç sleep ½èÍý¤ò½ñ¤¯
- setTimeout¤òasync/await¥×¥í¥°¥é¥ß¥ó¥°¤Ç»È¤¦
- Tips for using async functions (ES2017)
- 5. Async functions
- await - JavaScript | MDN
- async/await¤¬¼ê¤Ë¤Ê¤¸¤à¤Þ¤Ç¿§¡¹½ñ¤¤¤Æ¤ß¤ë¤è〜 - ²¶¡¢¥µ¡¼¥Ó¥¹Çä¤Ã¤Æ²ÈÇ㤦¤ó¤À
- È󯱴ü´Ø¿ô - Promise ¤ò¤ï¤«¤ê¤ä¤¹¤¯¤¹¤ë | Web | Google Developers
- async - Documentation
- ÆÈ¼«¥é¥¤¥Ö¥é¥ê¡£async.map ¤È¤«¤ÏÊØÍø¤½¤¦¤À¤±¤É¡¢º£¤«¤é»È¤¦¤Î¤Ïí´í°¤¹¤ë¡£
2018-05-27 [ĹǯÆüµ]
_ ES2015¤Îarrow function¤ò»¨¤Ë¤Þ¤È¤á¤Æ¤ª¤¯
JavaScriptÉü½¬2017 - import¤Èuse strict¤È¥á¥½¥Ã¥ÉÄêµÁ - - ¤¢¡¼¤¢¤ê¤¬¤Á(2017-02-19)
¤Ç¤Ï¤¢¤¨¤Æ¤Û¤È¤ó¤É¾Êά¤·¤Æ¤¤¤¿ arrow function ¤Î¼«Ê¬¸þ¤±¥á¥â¡£
»²¹Í 13. Arrow functions
¼«Ê¬¤Î¥Ð¥Ã¥¯¥°¥é¥¦¥ó¥É
CoffeeScript¤Ï³ä¤È¹¥¤¡£
- Á´Éô¡Ö¼°¡×¤Ë¤Ê¤ë¤Î¤Ï°µÅÝŪ¤ËÀµ¤·¤¤
- ÆÃ¤Ë spec ¤ò½ñ¤¯ºÝ¤Ë function() {} ¤¸¤ã¤Ê¤¯¤Æ -> ¤À¤±¤Ç¥µ¥¯¥Ã¤È½ñ¤±¤¿¤Î¤ÏËÜÅö¤Ë¤è¤«¤Ã¤¿
- ¥¤¥ó¥Ç¥ó¥È¡© ÉáÄ̼é¤ë¤Ç¤·¤ç
arrow function¤Î¥á¥ê¥Ã¥È
¤Ê¤ó¤È¤¤¤Ã¤Æ¤â function() {} ¤È¤¤¤¦¥¯¥½Ä¹¤¤Ê¸»úÎó¤ò¸«¤Ê¤¯¤Æ¤è¤¯¤Ê¤ë
¤³¤ì¤Ç¤è¤¦¤ä¤¯¥Æ¥¹¥È¤Î¤¿¤á¤À¤±¤Ë CoffeeScript ¤¬Îø¤·¤¯¤Ê¤ë¤³¤È¤Ï¤Ê¤¯¤Ê¤ë¡£
this ¤òµ¤¤Ë¤·¤Ê¤¯¤Æ¤è¤¯¤Ê¤ë
¡Öµ¤¤Ë¤·¤Ê¤¯¤Æ¤è¤¤¡×¤ÏÈó¾ï¤ËÛ£Ëæ¤Êɽ¸½¤À¤¬¡¢¿´ÍýŪ¤Ë¤Ï»ö¼Â¡£¤è¤êÀµ³Î¤Ê¸À¤¤Êý¤ò¤¹¤ë¤È Function ¤È arrow function ¤Ï¥¹¥³¡¼¥×¤Î°·¤¤¤¬°Û¤Ê¤ë¡£
JavaScript ¤Î this ¤ÏÈó¾ï¤Ë¤ä¤Ã¤«¤¤¤Ê¸ºß¤Ç¡¢JavaScript ¤Î function ¤Ï¤³¤Î this ¤òÏǤ魯¸µ¶§¤Ê¤Î¤Ë JavaScript ¤Ç¤ÏÉáÄ̤Πfunction ¤â class ¤â function ¤Ç¤«¤Ä callback ¤ò»È¤¤¤Þ¤¯¤ë¤È¤¤¤¦ÃϹö¤Î¤è¤¦¤Ê»ÅÍͤˤʤäƤ¤¤¿¡£
var self = this
¤ß¤¿¤¤¤Ê¥³¡¼¥É¤¬¤½¤³¤éÃæ¤Ë½ñ¤«¤ì¤Æ¤·¤Þ¤¦¤Î¤Ï¤½¤¦¤¤¤¦Íýͳ¤À¡£¤³¤ì¤¬ arrow function ¤Ç¤Ï this ¤Ï¾¤ÎÊÑ¿ôƱÍͥ쥥·¥«¥ë¤Ë·è¤Þ¤ë¡£arrow function ¤ÎÃæ¤È³°¤Ç this ¤ÏƱ¤¸¤â¤Î¤ò»Ø¤¹¤³¤È¤Ë¤Ê¤ë¡£
Ruby ¤Î¥Ö¥í¥Ã¥¯¤Î¤è¤¦¤Ë¤«¤Ê¤ê¥«¥¸¥å¥¢¥ë¤Ë function ¤¬»È¤¨¤ë¤è¤¦¤Ë¤Ê¤Ã¤¿¤È¸À¤Ã¤Æ¤è¤¤¤È»×¤¦¡£
arrow function¤ÎÃí°ÕÅÀ
() ¤Î¾Êά¤¬¥Ó¥ß¥ç¤¤
() ¤Ï¡Ö°ú¿ô¤¬1¤Ä¤Î»þ¤À¤±¡×¾Êά¤Ç¤¤ë¡£¤³¤ì¤¬ CoffeeScript ¤Î¤è¤¦¤Ë¡Ö°ú¿ô¤¬¤¢¤ì¤Ð¾Êά¤Ç¤¤ë¡×¤È»×¤¦¤È¥Ï¥Þ¤ë¡£
() ¤Î¾Êά¤Ê¤ó¤Æ¤Ê¤«¤Ã¤¿¤ó¤ä¤È»×¤Ã¤¿Êý¤¬´Ö°ã¤¤¤Ë¤¯¤¤¤È»×¤¦¡£
{} ¤Î¾Êά¤¬¥Ó¥ß¥ç¤¤
{} ¤Ï¾Êά¤Ç¤¤ë¤¬¾Êά¤¹¤ë¤È°ÕÌ£¤¬ÊѤï¤ë¡£
() => { statement }
() => expression
{} ¤ò¾Êά¤¹¤ë¤È return ¤ò¾Êά¤Ç¤¤ë¡£µÕ¤Ë¸À¤¦¤È return ¤ò¾Êά¤¹¤ë¤¿¤á¤Ë¤Ï {} ¤¬¾Êά¤Ç¤¤Ê¤±¤ì¤Ð¤¤¤±¤Ê¤¤¤¬¡¢¤½¤¦¤¹¤ë¤ÈŤ¤½èÍý¤Ï½ñ¤¤Ë¤¯¤¤¤È¤¤¤¦¤«»ö¼Â¾å¤Ï½ñ¤±¤Ê¤¯¤Ê¤ë¡£
{} ¤Î¾Êά¤Ê¤ó¤Æ¤Ê¤«¤Ã¤¿¤ó¤ä¤È»×¤Ã¤¿Êý¤¬´Ö°ã¤¤¤Ë¤¯¤¤¤È»×¤¦¡£
¢¨ ¤É¤Ã¤Á¤âû¤±¤ì¤Ðû¤¤Êý¤¬¤è¤¤Îãʸ¤Ç¤Ï»È¤Ã¤Æ¤·¤Þ¤¦¤ó¤À¤Ê¤¡¡£
_ ¤Õ¤¡¤é¤ª²ÃÆ£ [> ´Ö°ã¤¨¤Æ¤ë²ÄǽÀ¤Ï¤ª¤ª¤¤¤Ë¤¢¤ê¤Þ¤¹¡ª¡ª£± ¡Ö1¡×¤¬¤Þ¤¶¤Ã¤Æ¤Þ¤¹¡£¤¢¡¢¤ï¤¶¤È¡©]