.PC9ͷ࿩ 2017/7/22 Yokohama North Meetup ˌ6 #yokohama_north bati (@bati11_ )

3FBDU/BUJWFͰΞϓϦ࡞ͬͨ

• 3FBDU/BUJWF • ࢖ͬͯΔϥΠϒϥϦ • XJYSFBDUOBUJWFOBWJHBUJPO SFBDUOBUJWF JOUFSBDUBCMF SFBDUOBUJWFDBMFOEBS SFBDU OBUJWFTWH FUD • ετΞͲ͏͠Α͏ʁ

• ετΞͲ͏͠Α͏ʁ • 8FCͷํͰ͸7VFKTͱ7VFY࢖ͬͯΔ • 3FEVY͸ͳΜ͔৮Γ৺஍͕͋Μ·Γͩͬͨ • .PC9ʹͨ͠ • 7VFYʹ৮Γ৺஍͕͍ۙɺؾ͕ͨ͠ • IUUQTNPCYKTPSH

.PC9ͷલʹ

// @flow import { autorun, observable, action, computed } from 'mobx'; type Task = { task: string, completed: boolean, assignee: ?string, } export default class TodoStore { @observable todos: Array = []; @observable pendingRequests: number = 0; constructor() { autorun(() => console.log(this.report)); } @computed get completedTodosCount(): number { return this.todos.filter(todo => todo.completed === true).length; } @computed get report(): string { if (this.todos.length === 0) { return ""; } else { return `Next todo: "${this.todos[0].task}". ` + `Progress: ${this.completedTodosCount}/${this.todos.length}`; } } @action addTodo(task: string): void { this.todos.push({task, completed: false, assignee: null}); } }

Α͘෼͔Βͳ͍ͷ͕͍Δ

// @flow import { autorun, observable, action, computed } from 'mobx'; type Task = { task: string, completed: boolean, assignee: ?string, } export default class TodoStore { @observable todos: Array = []; @observable pendingRequests: number = 0; constructor() { autorun(() => console.log(this.report)); } @computed get completedTodosCount(): number { return this.todos.filter(todo => todo.completed === true).length; } @computed get report(): string { if (this.todos.length === 0) { return ""; } else { return `Next todo: "${this.todos[0].task}". ` + `Progress: ${this.completedTodosCount}/${this.todos.length}`; } } @action addTodo(task: string): void { this.todos.push({task, completed: false, assignee: null}); } } アロー構文 IUUQTEFWFMPQFSNP[JMMBPSHKBEPDT8FC +BWB4DSJQU3FGFSFODFBSSPX@GVODUJPOT

// @flow import { autorun, observable, action, computed } from 'mobx'; type Task = { task: string, completed: boolean, assignee: ?string, } export default class TodoStore { @observable todos: Array = []; @observable pendingRequests: number = 0; constructor() { autorun(() => console.log(this.report)); } @computed get completedTodosCount(): number { return this.todos.filter(todo => todo.completed === true).length; } @computed get report(): string { if (this.todos.length === 0) { return ""; } else { return `Next todo: "${this.todos[0].task}". ` + `Progress: ${this.completedTodosCount}/${this.todos.length}`; } } @action addTodo(task: string): void { this.todos.push({task, completed: false, assignee: null}); } } クラス、コンストラクタ、メソッド IUUQTEFWFMPQFSNP[JMMBPSHKBEPDT8FC +BWB4DSJQU3FGFSFODF$MBTTFT

// @flow import { autorun, observable, action, computed } from 'mobx'; type Task = { task: string, completed: boolean, assignee: ?string, } export default class TodoStore { @observable todos: Array = []; @observable pendingRequests: number = 0; constructor() { autorun(() => console.log(this.report)); } @computed get completedTodosCount(): number { return this.todos.filter(todo => todo.completed === true).length; } @computed get report(): string { if (this.todos.length === 0) { return ""; } else { return `Next todo: "${this.todos[0].task}". ` + `Progress: ${this.completedTodosCount}/${this.todos.length}`; } } @action addTodo(task: string): void { this.todos.push({task, completed: false, assignee: null}); } } getter IUUQTCBCFMKTJPMFBSOFT FDNBTDSJQUGFBUVSFTNPEVMFT

// @flow import { autorun, observable, action, computed } from 'mobx'; type Task = { task: string, completed: boolean, assignee: ?string, } export default class TodoStore { @observable todos: Array = []; @observable pendingRequests: number = 0; constructor() { autorun(() => console.log(this.report)); } @computed get completedTodosCount(): number { return this.todos.filter(todo => todo.completed === true).length; } @computed get report(): string { if (this.todos.length === 0) { return ""; } else { return `Next todo: "${this.todos[0].task}". ` + `Progress: ${this.completedTodosCount}/${this.todos.length}`; } } @action addTodo(task: string): void { this.todos.push({task, completed: false, assignee: null}); } } プロパティの省略形 IUUQTEFWFMPQFSNP[JMMBPSHKBEPDT8FC +BWB4DSJQU3FGFSFODF0QFSBUPST0CKFDU@JOJUJBMJ[FS

// @flow import { autorun, observable, action, computed } from 'mobx'; type Task = { task: string, completed: boolean, assignee: ?string, } export default class TodoStore { @observable todos: Array = []; @observable pendingRequests: number = 0; constructor() { autorun(() => console.log(this.report)); } @computed get completedTodosCount(): number { return this.todos.filter(todo => todo.completed === true).length; } @computed get report(): string { if (this.todos.length === 0) { return ""; } else { return `Next todo: "${this.todos[0].task}". ` + `Progress: ${this.completedTodosCount}/${this.todos.length}`; } } @action addTodo(task: string): void { this.todos.push({task, completed: false, assignee: null}); } } テンプレート文字列 IUUQTCBCFMKTJPMFBSOFTFDNBTDSJQU GFBUVSFTUFNQMBUFTUSJOHT

// @flow import { autorun, observable, action, computed } from 'mobx'; type Task = { task: string, completed: boolean, assignee: ?string, } export default class TodoStore { @observable todos: Array = []; @observable pendingRequests: number = 0; constructor() { autorun(() => console.log(this.report)); } @computed get completedTodosCount(): number { return this.todos.filter(todo => todo.completed === true).length; } @computed get report(): string { if (this.todos.length === 0) { return ""; } else { return `Next todo: "${this.todos[0].task}". ` + `Progress: ${this.completedTodosCount}/${this.todos.length}`; } } @action addTodo(task: string): void { this.todos.push({task, completed: false, assignee: null}); } } モジュール（export, import） IUUQTCBCFMKTJPMFBSOFTFDNBTDSJQU GFBUVSFTNPEVMFT

// @flow import { autorun, observable, action, computed } from 'mobx'; type Task = { task: string, completed: boolean, assignee: ?string, } export default class TodoStore { @observable todos: Array = []; @observable pendingRequests: number = 0; constructor() { autorun(() => console.log(this.report)); } @computed get completedTodosCount(): number { return this.todos.filter(todo => todo.completed === true).length; } @computed get report(): string { if (this.todos.length === 0) { return ""; } else { return `Next todo: "${this.todos[0].task}". ` + `Progress: ${this.completedTodosCount}/${this.todos.length}`; } } @action addTodo(task: string): void { this.todos.push({task, completed: false, assignee: null}); } } クラスのプロパティ IUUQTHJUIVCDPNUDQSPQPTBMDMBTTQVCMJDpFMET

// @flow import { autorun, observable, action, computed } from 'mobx'; type Task = { task: string, completed: boolean, assignee: ?string, } export default class TodoStore { @observable todos: Array = []; @observable pendingRequests: number = 0; constructor() { autorun(() => console.log(this.report)); } @computed get completedTodosCount(): number { return this.todos.filter(todo => todo.completed === true).length; } @computed get report(): string { if (this.todos.length === 0) { return ""; } else { return `Next todo: "${this.todos[0].task}". ` + `Progress: ${this.completedTodosCount}/${this.todos.length}`; } } @action addTodo(task: string): void { this.todos.push({task, completed: false, assignee: null}); } } デコレータ IUUQTHJUIVCDPNUDQSPQPTBMEFDPSBUPST

// @flow import { autorun, observable, action, computed } from 'mobx'; type Task = { task: string, completed: boolean, assignee: ?string, } export default class TodoStore { @observable todos: Array = []; @observable pendingRequests: number = 0; constructor() { autorun(() => console.log(this.report)); } @computed get completedTodosCount(): number { return this.todos.filter(todo => todo.completed === true).length; } @computed get report(): string { if (this.todos.length === 0) { return ""; } else { return `Next todo: "${this.todos[0].task}". ` + `Progress: ${this.completedTodosCount}/${this.todos.length}`; } } @action addTodo(task: string): void { this.todos.push({task, completed: false, assignee: null}); } } Flow IUUQTqPXPSH

// @flow import { autorun, observable, action, computed } from 'mobx'; type Task = { task: string, completed: boolean, assignee: ?string, } export default class TodoStore { @observable todos: Array = []; @observable pendingRequests: number = 0; constructor() { autorun(() => console.log(this.report)); } @computed get completedTodosCount(): number { return this.todos.filter(todo => todo.completed === true).length; } @computed get report(): string { if (this.todos.length === 0) { return ""; } else { return `Next todo: "${this.todos[0].task}". ` + `Progress: ${this.completedTodosCount}/${this.todos.length}`; } } @action addTodo(task: string): void { this.todos.push({task, completed: false, assignee: null}); } }

.PC9Ͱ50%0ετΞ

• ಈ͔͠ͳ͕Βݟ͍͖ͯ·͠ΐ͏ʂ • ಈ͔͢લʹ

GMPXͳ͠Ͱ͍͖·͢

import { autorun, observable, action, computed } from 'mobx'; export default class TodoStore { @observable todos = []; @observable pendingRequests = 0; constructor() { autorun(() => console.log(this.report)); } @computed get completedTodosCount() { return this.todos.filter(todo => todo.completed === true).length; } @computed get report() { if (this.todos.length === 0) { return ""; } else { return `Next todo: "${this.todos[0].task}". ` + `Progress: ${this.completedTodosCount}/${this.todos.length}`; } } @action addTodo(task) { this.todos.push({task, completed: false, assignee: null}); } }

.PC9%FW5PPMTΛ ಋೖ͓͖ͯ͠·͢

• .PC9%FW5PPMT • IUUQTHJUIVCDPN[BMNPYJTVTNPCYSFNPUFEFW import { autorun, observable, action, computed } from 'mobx'; import remotedev from 'mobx-remotedev/lib/dev'; @remotedev export default class TodoStore { ・・・ }

ಈ͔ͯ͠Έ·͢

• ಈ͔͠ͳ͕Βݟ͍͖ͯ·͠ΐ͏ʂ • ಈ͔͢·Ͱͷखॱ͸ϒϩάʹॻ͖·ͨ͠ • IUUQCBUJCMPHIBUFOBCMPHDPNFOUSZ

• !PCTFSWBCMFͳϓϩύςΟΛมߋ͢Δͱɾɾɾ • BVUPSVOʹࢦఆͨ͠ॲཧ͕ࣗಈతʹ࣮ߦ͞ΕΔ export default class TodoStore { @observable todos = []; @observable pendingRequests = 0; constructor() { autorun(() => console.log(this.report)); } ・・・ @action addTodo(task) { this.todos.push({task, completed: false, assignee: null}); } }

• !BDUJPOͳϝιουͰ!PCTFSWBCMFͳϓϩύ ςΟΛมߋ͢Δ • VTF4USJDUΛ࢖͍ͬͯΔͱɺ!BDUJPOͳϝιο υҎ֎Ͱ!PCTFSWBCMFͳϓϩύςΟΛߋ৽ ͍ͯ͠ΔͱɺܯࠂΛग़ͯ͘͠ΕΔ • ݁Ռɺίʔυͷݟ௨͕͠ྑ͘ͳΔ

• !DPNQVUFEͳHFUUFSͷ݁Ռ͸Ωϟογϡ͞Ε Δ • DPOTPMFMPHΛॻ͍ͯࢼ͢ͱ෼͔Δ constructor() { autorun(() => console.log(this.report)); } @computed get report() { console.log("report"); if (this.todos.length === 0) { return ""; } else { return `Next todo: "${this.todos[0].task}". ` + `Progress: ${this.completedTodosCount}/${this.todos.length}`; } }

3FBDU%PN.PC9 Ͱ50%0ΞϓϦ

• NPCYSFBDU • IUUQTHJUIVCDPNNPCYKTNPCYSFBDU • !PCTFSWFS͕࢖͑ΔΑ͏ʹͳΔ • 3FBDUͷ$PNQPOFOUΫϥεʹ!PCTFSWFSΛ ͚ͭΔͱSFOEFSϝιου͕BVUPSVOͷର৅ʹ ͳΔ • ͭ·Γɺ!PCTFSWBCMFͳϓϩύςΟͷมߋ͕6* ʹ൓ө͞ΕΔʂ

• ಈ͔͠ͳ͕Βݟ͍͖ͯ·͠ΐ͏ʂ • ίʔυ͸ͪ͜Β • IUUQTHJTUHJUIVCDPN CBUJBC⒎FGGGDEBD

3FBDU/BUJWF.PC9

• 3FBDU/BUJWFͰ΋5PEP4UPSF͸ͦͷ··࢖͑Δ • 6*ͷ࡞Γํ͕%PN༻ͷ$PNQPOFOU͔ΒωΠςΟ ϒΞϓϦ༻ͷ$PNQPOFOUʹมΘΔ • ελΠϧ͸΍΍ࣅͯΔ

• ಈ͔͠ͳ͕Βݟ͍͖ͯ·͠ΐ͏ʂ • ίʔυ͸ͪ͜Β • IUUQTHJTUHJUIVCDPN CBUJEDGFFECC • 3FBDU/BUJWF%FCVHHFS • IUUQTHJUIVCDPNKIFOSFBDUOBUJWFEFCVHHFS

·ͱΊ

• .PC9ྑ͍ • .PC9ͷνϡʔτϦΞϧ • IUUQTNPCYKTPSHHFUUJOHTUBSUFEIUNM • ͨΊʹͳΔϒϩάهࣄ • IUUQMFBMPHIBUFCMPKQBSDIJWFDBUFHPSZ.PC9

• ָͰྑ͍ͷ͚ͩͲɺͦͷ൓໘ɺܾ·ͬͨϨʔϧ ͕ͳ͍ͷͰɺ࠷ॳʹઃܭͪΌΜͱ΍Βͳ͍ͱ࣮ ૷͢ΔਓʹΑͬͯɺ࣮૷ͷ࢓ํ͕όϥόϥʹͳΔ Մೳੑ͕ߴͦ͏ • ࣮ࡍͳΓ͔͚ͨ • ʂʂʂେࣄͳ͜ͱʂʂʂؾΛ͚ͭͳ͍ͱSFOEFS ͕Կճ΋࣮ߦ͞ΕΔɻˣಡΜͩํ͕ྑ͍ • IUUQTNPCYKTPSHCFTUSFBDUIUNM • IUUQTNPCYKTPSHSFGHVJEFNPEJpFSTIUNM