¥È¥Ã¥× ºÇ¿· Äɵ­

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).

State and Lifecycle - React

Angular 2+

Angular 2+ ¤Ï Zone ¤È¤¤¤¦¥é¥¤¥Ö¥é¥ê¤ò»È¤Ã¤Æ

  • ¥æ¡¼¥¶¡¼¤Î fire ¤·¤¿¥¤¥Ù¥ó¥È
  • XHR
  • ¥¿¥¤¥Þ¡¼

¤ò´Æ»ë¤·¤Æ¤ª¤ê¡¢¤³¤Î·ë²Ì¤Î component ¤ÎÊѲ½¤Ï¼«Æ°¤Ç¸¡ÃΡÊChange Detection¡Ë¤µ¤ì¤ë¡£

NgZone#runOutsideAngular ¤ÎÃæ¤Ç¼Â¹Ô¤·¤¿¤â¤Î¤Ï Change Detection ¤ÎÂоݳ°¤Ë¤Ê¤ë¤é¤·¤¤¤Î¤Ç¡¢ÆÃÄê¤Î property ¤ÎÊѹ¹¤Ë´óÍ¿¤¹¤ë¥¤¥Ù¥ó¥È¤ò¤³¤ì¤Ç°Ï¤ó¤Ç¤¢¤²¤ë¤È¤è¤µ¤²¡£

¤Þ¤È¤á

¤³¤ì¤Þ¤Ç¤¢¤Þ¤êµ¤¤Ë¤·¤Æ¤¤¤Ê¤«¤Ã¤¿¤¬¡¢¼Â¤Ï¥á¥¸¥ã¡¼¤ÊViewModel·Ï¤Î¥Õ¥ì¡¼¥à¥ï¡¼¥¯¤Î¹Í¤¨Êý¤Ï

  1. ÆÃÄê¤Î¥Ç¡¼¥¿´Æ»ë·Ï¡ÊReact, Vue¡Ë
  2. ¥¤¥Ù¥ó¥È´Æ»ë·Ï¡ÊMithril¡Ë
  3. È󯱴ü½èÍý´Æ»ë·Ï¡ÊAngularJS¡Ë

¤ËʬÎà¤Ç¤­¤ë¤³¤È¤¬Ê¬¤«¤Ã¤¿¡£¡Ê¤¢¤¨¤Æ¸À¤¦¤È 2 ¤Ï 3 ¤Î´ÊάÈǤߤ¿¤¤¤Ê¤â¤Î¤È¸À¤¨¤ë¤«¤â¤·¤ì¤Ê¤¤¡£¡Ë

Tags: JavaScript
ËÜÆü¤Î¥Ä¥Ã¥³¥ß(Á´1·ï) [¥Ä¥Ã¥³¥ß¤òÆþ¤ì¤ë]

_ ¤Õ¤¡¤é¤ª²ÃÆ£ [> ´Ö°ã¤¨¤Æ¤ë²ÄǽÀ­¤Ï¤ª¤ª¤¤¤Ë¤¢¤ê¤Þ¤¹¡ª¡ª£± ¡Ö1¡×¤¬¤Þ¤¶¤Ã¤Æ¤Þ¤¹¡£¤¢¡¢¤ï¤¶¤È¡©]


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.

Introduction | 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 ¤Ë¿¶¤Ã¤Æ¤¤¤¯¤«¤â¤·¤ì¤Ê¤¤¤Ê¡¼¤È¤¤¤¦µ¤¤¬¤·¤Æ¤Þ¤¹¡£

*1 MVW ¤Ã¤Æ¸À¤Ã¤Æ¤¿ Angular ¤Ç¤µ¤¨ M ¤Î¤³¤È¤ÏÃΤé¤ó¤Æ¤Ê¤Ã¤Æ¤ë´¶¤¸¤¬¤¹¤´¤¤(¾®Ê´¶

*2 action ¤Ï¤¤¤Ã¤¿¤óÃÖ¤¤¤Æ¤ª¤¯


2018-05-03 [ĹǯÆüµ­]

_ Vue.js x SSR¥á¥â

¤³¤ìÆÉ¤á¡£

Introduction · GitBook

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. ¥ë¡¼¥Æ¥£¥ó¥°¤È¥³¡¼¥Éʬ³ä &#183; 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 ¤Ç¤¹¤Ù¤Æ²ò·è¤È¤Ï»×¤Ã¤Æ¤¤¤Ê¤¯¤Æ¡¢¼«Ê¬¤Î´¶³Ð¤È¤·¤Æ¤Ï

  1. VM Component ¤¬À¤³¦¤Î¤¹¤Ù¤Æ¤òÃΤäƤ¤¤ëɬÍפϤʤ¤¡Ê¤à¤·¤í¥æ¡¼¥¶¡¼¤È¤Î¥¤¥ó¥¿¥é¥¯¥·¥ç¥ó¤ÈľÀÜ´Ø·¸¤·¤Ê¤¤¥í¥¸¥Ã¥¯¤ÇÀ¤³¦¤ÏËþ¤Á¤Æ¤¤¤ë¡Ë
  2. Component ¤Î³°¤ÎÀ¤³¦¤Ï¤¤¤­¤Ê¤ê HTTP ¤È¤Ï¸ÂÄê¤Ç¤­¤Ê¤¤
  3. Component ¤ò»Ê¤ë Parent Component ¤Ç Model ¤òÄ̤¸¤¿³°¤ÎÀ¤³¦¤ÎÇÁ¤­Áë¤òÄ󶡤¹¤ë

¤¯¤é¤¤¤Î´¶¤¸¤¬¤¤¤¤¤Î¤«¤Ê¤È»×¤Ã¤Æ¤¤¤ë¡£

Model¤ò´ÉÍý¤¹¤ëModel¤«¤éParent Component¤¬Child Component¤ËÀ¤³¦¤ÎÇÁ¤­Áë¤ò¶µ¤¨¤Æ¤¢¤²¤ë´Ø·¸¿Þ

¤¤¤Ã¤¿¤ó¤Î¥¤¥á¡¼¥¸¤È¤·¤Æ¤Ï¿Þ¤Î¤è¤¦¤Ê´¶¤¸¡£

¤³¤³¤Ç¥í¥¸¥Ã¥¯¤È¤·¤Æ¡Ö¾¸°®¤¹¤ëÀ¤³¦¤¬¤è¤ê¹­¤¤¡×¤Î¤Ï 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 ¤Ç²ò·è¤·¤­¤ë¤Î¤Ï¤È¤Æ¤â¸·¤·¤¤¤ï¤±¤Ç¤¹¤è¡£¤Í¡£

»²¹Í

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 ¤Ç¤Ï¤Ê¤¯

kaelzhang/node-ignore: &#128269; node-ignore is the manager and filter for .gitignore rules, the one used by eslint, gitbook and many others.

¤Ê¤Î¤À¤½¤¦¤Ç¤¹¡£¤¦¡¼¤ó¡¢¤Ê¤ë¤Û¤É¡£

Tags: JavaScript

2018-05-13 [ĹǯÆüµ­]

_ ²þ¤á¤ÆVue.js¤Î¥Ç¡¼¥¿¤Î´Æ»ëÊýË¡¤È²óÈòÊýË¡¤È¥³¥ó¥Ý¡¼¥Í¥ó¥ÈÀß·×

¤Þ¤È¤á

  • Vue ¤Ç´Æ»ë¤·¤Æ¤¤¤¿¤Î¤Ï data ¤Ç¤Ï¤Ê¤¯ setter ¤òÄ̤俤«¤É¤¦¤«¤À¤Ã¤¿
    • ¤½¤³¤Ï Backbone.js »þÂ夫¤éÊѤï¤Ã¤Æ¤Ê¤«¤Ã¤¿
  • Array ¤ä Object ¤Î°ìÉô¤ò½ñ¤­´¹¤¨¤ë½èÍý¤Ï setter ¤òÄ̤é¤Ê¤¤¤Î¤Ç Vue ¤Ï¸¡ÃΤǤ­¤Ê¤¤
  • µÕ¤Ë´Ý¤´¤È²õ¤»¤Ð setter ¤òÄ̤¹¤³¤È¤Ï¤Ç¤­¤ë
  • ¤·¤«¤·¶²¤é¤¯¤½¤Î¾ì¹ç¤Ï½ñ¤­´¹¤¨¤ë DOM ¤ÎÈϰϤ¬¹­¤¬¤ê¡¢VirtualDOM ¤Î®¤µ¤Î¥á¥ê¥Ã¥È¤¬¥¹¥Ý¥¤¥ë¤µ¤ì¤ë
  • ¥³¥ó¥Ý¡¼¥Í¥ó¥È¤ò¾®¤µ¤¯¤·¤í¤È¤¤¤¦¤Î¤Ï¤½¤¦¤¤¤¦°ÕÌ£¤Ç¤â¤¢¤Ã¤¿
»²¹Í

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¤ò¿ä¾©¤·¤Æ¤ë

´ðËÜŪ¤Ë¤Ï 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 ¤Ç¤¢¤ì¤Ð

¤òÁȤ߹ç¤ï¤»¤Æ¡¢./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¤Ë¤ª¤±¤ëÈ󯱴ü¥Ñ¥¿¡¼¥ó #ËÝÌõ &#171; 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 ¤¬´é¤ò½Ð¤·¤Æ¤¯¤ë¡£

await - JavaScript | MDN

¤³¤³¤Ç

[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)
}

»²¹Í

Tags: JavaScript

*1 Node 8 ¤¬½Ð¤¿¤Î¤Ï¤Á¤ç¤¦¤É1ǯÁ°¤Î2017ǯ5·î¤Ç¤¹¡ª

*2 jQuery ¤Ç¤Ï»È¤¤¤¿¤¤ API ¤Ë¤è¤Ã¤Æ¤â°Û¤Ê¤ë¡£

*3 ¤¿¤À¤·¼è¤ê½Ð¤·¤¬ then() ¤ÎÃæ¤Î callback ¤È¤¤¤¦·Á¤Ë¤Ê¤Ã¤Æ¤·¤Þ¤¦¡£Promise ¤Ï callback ÃϹö¤ò²ò·è¤·¤Æ¤¯¤ì¤ë¤Î¤Ç¤Ï¡©¤È¤¤¤¦µ¤»ý¤Á¤Ë¤Ê¤ëÉôʬ¤Ç¤â¤¢¤ë¡£


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 ¤ò¾Êά¤¹¤ë¤¿¤á¤Ë¤Ï {} ¤¬¾Êά¤Ç¤­¤Ê¤±¤ì¤Ð¤¤¤±¤Ê¤¤¤¬¡¢¤½¤¦¤¹¤ë¤ÈŤ¤½èÍý¤Ï½ñ¤­¤Ë¤¯¤¤¤È¤¤¤¦¤«»ö¼Â¾å¤Ï½ñ¤±¤Ê¤¯¤Ê¤ë¡£

{} ¤Î¾Êά¤Ê¤ó¤Æ¤Ê¤«¤Ã¤¿¤ó¤ä¤È»×¤Ã¤¿Êý¤¬´Ö°ã¤¤¤Ë¤¯¤¤¤È»×¤¦¡£

¢¨ ¤É¤Ã¤Á¤âû¤±¤ì¤Ðû¤¤Êý¤¬¤è¤¤Îãʸ¤Ç¤Ï»È¤Ã¤Æ¤·¤Þ¤¦¤ó¤À¤Ê¤¡¡£

»²¹Í

13. Arrow functions

Tags: JavaScript