$ZDMFKT ϦΞΫςΟϒɾϓϩάϥϛϯάʹಛԽͨ͠+4ϑϨʔϜϫʔΫ - A functional and reactive JavaScript framework for predictable code - /BPLJ:"."%" !XBLBNTIB /PEFֶԂ࣌ݶ໨.FHVSPFTº(PUBOEBKT

8IBU`T$ZDMFKT $ZDMFKTͬͯԿʁ

7JSUVBM%0. 0CTFSWBCMF 0CTFSWBCMFͱ7JSUVBM%0.Λ XFCΞϓϦ։ൃ͠΍͘͢͢ΔͨΊʹʰബ͘ʱϥοϓͨ͠΋ͷ 8IBU`T$ZDMFKT

-JCSBSJFTUIBUTVQQPSU$ZDMFKT

YTUSFBN3Y+4 w 0CTFSWBCMFTͱ͍͏ΞʔΩςΫνϟΛ༻͍ͨϦΞΫςΟϒϓ ϩάϥϛϯά༻ͷϥΠϒϥϦ w ඇಉظॲཧΛ؆͔ܿͭՄಡੑߴ͘ίʔσΟϯάͰ͖Δ w YTUSFBN͸3T+4ͷܰྔ൛ w ˞ΦϖϨʔλͷ਺΍ϝιου໊͕Ұ෦ҟͳΔ w 3Y+4Ͱͷ୅༻΋Մೳ w ˞Ұ෦Ωϟετ͕ඞཁ

4OBCCEPN w Ծ૝%0.ΛૢΔγϯϓϧͳϥΠϒϥϦ w ϞδϡʔϧػೳΛ༗͓ͯ͠Γɺػೳ֦ு͕༰қʹՄೳ w %0.ੜ੒෦෼͸)ZQFS4DSJQUͷΞʔΩςΫνϟΛ࠾༻ w div()΍input()ͳͲ)5.-λά໊ͦͷ··ͷϝιο υ໊͕༻ҙ͞Ε͍ͯΔ

#BTJD&YBNQMF ಈ͔ͯ͠ΈΑ͏

#BTJD&YBNQMF

import {Observable} from 'rxjs'; import {div, label, input, hr, h1, VNode, makeDOMDriver} from '@cycle/dom'; import {run} from '@cycle/rxjs-run'; import {DOMSource} from '@cycle/dom/rxjs-typings'; type Sources = { DOM: DOMSource; } type Sinks = { DOM: Observable; } /** * ΞϓϦέʔγϣϯ * @param sources * @returns {{DOM: Observable}} */ function main(sources: Sources): Sinks { // ΩʔೖྗΠϕϯτΛऔಘ ( Intent ) const input$: Observable = sources.DOM.select('.field').events('input'); // ೖྗΠϕϯτ͔Βݱࡏͷঢ়ଶͳ͍͠஋Λऔಘ ( Model ) const name$: Observable = Observable.from(input$) .map((ev: Event) => ev.target.value) .startWith(''); // ݱࡏͷঢ়ଶΛը໘ʹඳը ( View ) const vdom$: Observable = name$.map(name => {

/** * ΞϓϦέʔγϣϯ * @param sources * @returns {{DOM: Observable}} */ function main(sources: Sources): Sinks { // ΩʔೖྗΠϕϯτΛऔಘ ( Intent ) const input$: Observable = sources.DOM.select('.field').events('input'); // ೖྗΠϕϯτ͔Βݱࡏͷঢ়ଶͳ͍͠஋Λऔಘ ( Model ) const name$: Observable = Observable.from(input$) .map((ev: Event) => ev.target.value) .startWith(''); // ݱࡏͷঢ়ଶΛը໘ʹඳը ( View ) const vdom$: Observable = name$.map(name => { return div('.well', [ div('.form-group', [ label('Name: '), input('.field.form-control', {attrs: {type: 'text'}}), ]), hr(), h1(`Hello ${name}`) ]); }); // ݁ՌΛυϥΠόʹग़ྗ͢Δ ( Sinks ) return { DOM: vdom$ }; }

label('Name: '), input('.field.form-control', {attrs: {type: 'text'}}), ]), hr(), h1(`Hello ${name}`) ]); }); // ݁ՌΛυϥΠόʹग़ྗ͢Δ ( Sinks ) return { DOM: vdom$ }; } // ΞϓϦέʔγϣϯ͔Βͷ໭Γ஋Λड͚औΔυϥΠό܈Λఆٛ const drivers = { DOM: makeDOMDriver('#app-container') }; // ΞϓϦέʔγϣϯͱυϥΠόΛ݁ͼ͚ͭΔ run(main, drivers);

label('Name: '), input('.field.form-control', {attrs: {type: 'text'}}), ]), hr(), h1(`Hello ${name}`) ]); }); // ݁ՌΛυϥΠόʹग़ྗ͢Δ ( Sinks ) return { DOM: vdom$ }; } // ΞϓϦέʔγϣϯ͔Βͷ໭Γ஋Λड͚औΔυϥΠό܈Λఆٛ const drivers = { DOM: makeDOMDriver('#app-container') }; // ΞϓϦέʔγϣϯͱυϥΠόΛ݁ͼ͚ͭΔ run(main, drivers);

%FTJHOQIJMPTPQIZPG$ZDMFKT $ZDMFKTͷઃܭࢥ૝

Application Application %FTJHOQIJMPTPQIZPG$ZDMFKT

driver() main() %FTJHOQIJMPTPQIZPG$ZDMFKT

driver() main() ෭࡞༻ ( Effective ) DOM API %FTJHOQIJMPTPQIZPG$ZDMFKT

driver() main() ෭࡞༻ ( Effective ) DOM API Source Stream %FTJHOQIJMPTPQIZPG$ZDMFKT

driver() main() ঢ়ଶ ( State ) ෭࡞༻ ( Effective ) DOM API Source Stream %FTJHOQIJMPTPQIZPG$ZDMFKT

driver() main() ঢ়ଶ ( State ) ෭࡞༻ ( Effective ) DOM API Source Stream Sink Stream %FTJHOQIJMPTPQIZPG$ZDMFKT

Rx.Observable .timer(0, 1000) .map(i => `Seconds elapsed: ${i}`) .subscribe( (text: string) => { const container = document.querySelector('#app'); container.textContent = text; } ); ঢ়ଶ ( State ) ෭࡞༻ ( Effective ) %FTJHOQIJMPTPQIZPG$ZDMFKT

Rx.Observable .timer(0, 1000) .map(i => `Seconds elapsed: ${i}`) .subscribe( (text: string) => { const container = document.querySelector('#app'); container.textContent = text; } ); ঢ়ଶ ( State ) ෭࡞༻ ( Effective ) %FTJHOQIJMPTPQIZPG$ZDMFKT

Rx.Observable .timer(0, 1000) .map(i => `Seconds elapsed: ${i}`) .subscribe( (text: string) => { const container = document.querySelector('#app'); container.textContent = text; } ); Observable Subject ঢ়ଶ ( State ) ෭࡞༻ ( Effective ) %FTJHOQIJMPTPQIZPG$ZDMFKT

function main() { return Rx.Observable .timer(0, 1000) .map(i => `Seconds elapsed: ${i}`); } function DOMDriver(text$: Observable) { text$.subscribe( (text: string) => { const container = document.querySelector('#app'); container.textContent = text; } ); } Observable Subject %FTJHOQIJMPTPQIZPG$ZDMFKT

function main() { return Rx.Observable .timer(0, 1000) .map(i => `Seconds elapsed: ${i}`); } function DOMDriver(text$: Observable) { text$.subscribe( (text: string) => { const container = document.querySelector('#app'); container.textContent = text; } ); } // Run const sink = main(); DOMDriver(sink);

function main() { return Rx.Observable .timer(0, 1000) .map(i => `Seconds elapsed: ${i}`); } function DOMDriver(text$: Observable) { text$.subscribe( (text: string) => { const container = document.querySelector('#app'); container.textContent = text; } ); } // Run const sink = main(); DOMDriver(sink); // υϥΠό܈Λఆٛ
 const drivers = {
 DOM: makeDOMDriver('#app')
 };
 // main ͱυϥΠόΛ݁ͼ͚ͭΔ
 run(main, drivers);

*OUSPEVDFNZTFMG Զͷ໊લΛݴͬͯΈΖ ࣗݾ঺հ

גࣜձࣾϦΫϧʔτϚʔέςΟϯάύʔτφʔζ XFCϑϩϯτΤϯυΤϯδχΞ ࢁా ௚थ /BPLJ:"."%" *OUSPEVDFNZTFMG !XBLBNTIB

http://tech.recruit-mp.co.jp NET BIZ DIV. TECH BLOG

No content

http://tech.recruit-mp.co.jp 3.1 ϒϩά

5IBOLZPV