革命と秩序とSPA

Frontend Meetup vol.1 LT
http://connpass.com/event/38112/
react + flux + floetypw

Transcript

1. ֵ໋ͱடংͱSPA @joe_re
2. Who am I? • twitter: @joe_re • github: @joe-re • freeeͱ͍͏ޒ൓ాͷ
 ձࣾͰಇ͍͍ͯ·͢ • Ϋϥ΢υձܭιϑτΛ
 ࡞͍ͬͯ·͢
4. ࿩͢͜ͱ • ϑϩϯτΤϯυͷύϥμΠϜγϑτͱ
 freeeͷؔΘΓํ • React + Fluxͷߏங • flowtypeʹΑΔtype-safe flux
5. ͬ͘͟ΓϑϩϯτΤϯυͷྺ࢙ΛৼΓฦΔ http://qiita.com/joe-re/items/3b6730eb90dbeb2f8272
6. ͬ͘͟ΓϑϩϯτΤϯυͷྺ࢙ΛৼΓฦΔ "KBYͷൃݟ
 1SPUPUZQFKTɺK2VFSZͷ੮ר #BDLCPOFKTͷొ৔
 ϑϩϯτΤϯυʹ.7$͕࣋ͪࠐ·ΕΔ XBZCJOEJOHͷྲྀߦ .77. 
 "OHVMBSKTɺ7VFKTɺ.BSJOPOFUUFKT
   FUDʜ ձܭGSFFFϩʔϯν 7JSUVBM%0.ͷొ৔
 %FLVɺ3FBDUɺ7VFKT Y
   FUDʜ main topics of fronted history of freee 2010 2005 2012 2014 څ༩ܭࢉGSFFFϩʔϯν ձܭGSFFF։ൃ։࢝ ձࣾઃཱGSFFFϩʔϯν now!
7. ॳظͷձܭfreeeͷϑϩϯτΤϯυ • 2012೥౰࣌ΑΖ͘͠ɺϑϩϯτ͸Backbone.js • جຊతʹRailsଆͰϨϯμϦϯά • Backbone.js͸ಈ͖Λ͚ͭΔఔ౓ • SPAͰ͸ͳ͍
8. ͕࣌ܦͭʹͭΕߴ·ΔSPAཉ
9. ঃʑʹBackboneMVCΛ
 ϑϧʹ׆͔ͨ͠
 ΞʔΩςΫνϟ΁
 (ϖʔδ୯ҐͰͷSPA)
10. ͦͯ͠ߴ·ΔͭΒΈ
11. ͭΒΈ • Backbone.jsͷviewಉ࢜ͷΠϕϯτϋϯυϦϯάͭ Β͍ • ਌ࢠؔ܎ʹ͋Δviewͷఆ͕ٛᐆດ • ։ൃऀ͕૿͑Δʹ͕ͨͬͯ͠ɺΠϕϯτͷߪಡղআ ϛεʹΑΔϝϞϦϦʔΫ͕ى͖ͨΓͯͨ͠ • ͦ΋ͦ΋DOMૢ࡞ਓؒͷ΍Δ͜ͱ͡Όͳ͍
12. ֵ໋
13. freee-mvc-framework
 ͱ͍͏ࣾ಺ϑϨʔϜϫʔΫ͕
 ੜ·Εͨ
14. freee-mvc-frameworkͰ
 ΍͍ͬͯΔ͜ͱ • backbone.jsΛϥοϓͯ͠ػೳڧԽ • viewͷΤϯτϦʔϙΠϯτͱͳΔ’page view’ͷ௥Ճ • backbone.jsͷϥΠϑαΠΫϧΛڧԽ • renderingͷޙʹɺ1౓͚ͩΑ͹ΕΔϥΠϑαΠΫϧ΍renderingޙʹݺͿϥΠϑαΠΫ ϧͷ௥ՃͳͲͳͲ • ঢ়ଶ؅ཧ΋ڧԽͯ͠ɺin-documented͔ͦ͏Ͱͳ͍͔ͳͲΛߟྀͨ͠͏͑Ͱͷ
 ϋϯυϦϯά΋Մೳʹͨ͠ • ਌ࢠؔ܎ͷDOMૢ࡞ɺΠϕϯτϋϯυϦϯάͷڧԽ • ͋ͱద౰ʹศརౕΛಥͬࠐΉ
15. ͦΕͰ΋DOMૢ࡞ͷͭΒΈ͸ ܰݮ͞Εͳ͍͠ɺ
 ΠϕϯτϋϯυϦϯά΋
 ଟ͗ͯ͢ෳࡶոحͳͷ͸
 มΘΒͣ
16. ͦͷࠒੈؒͰ͸
 2way-binding͕ྲྀߦ͠ɺ
 ੈ͸·͞ʹେϑϩϯτΤϯυ ϑϨʔϜϫʔΫ࣌୅
 (2013ʙ2014)
17. ࣌Λಉͯ͘͡͠
 څ༩ܭࢉfreeeͷϩʔϯν
18. څ༩ܭࢉfreeeͷελοΫ • freee-js-framework(based on backbone) • Vue.js(MVVM) • ׬શͳSPA
19. ͱ͜ΖͰMVVMͱ͸ 7JFX .PEFM 7JFX.PEFM User
 2way binding apply notify interaction #BDLCPOF
    7JFX #BDLCPOF
    .PEFM 7VF
20. MVVMʹΑͬͯಘͨ΋ͷ • 2way-bindingʹΑΔDOMૢ࡞͔Βͷ։์ • View͸ঢ়ଶΛ࣋ͨͳͯ͘ྑ͍(VM΁) • View͔Β൥ࡶͳϩδοΫͷআڈ
21. fin..?
22. ͦΜͳΘ͚͸ͳ͘ • ෳ਺Ϟσϧ͕ొ৔͢ΔViewͰ͸
 VMͰؔ࿈Λ੍ޚ͢Δͷ͕ͭΒ͍ • ModelͱVMͷঢ়ଶͷ྆ํΛ؅ཧ͢ΔͷͭΒ͍ • ·ͱΊΔͱঢ়ଶ؅ཧͭΒ͍ • Object.obseve΋ࢮΜͩ͠…
23. ·͞ʹ͜Ε(͜ͷਤ͸MVC͚ͩͲ) https://www.infoq.com/news/2014/05/facebook-mvc-flux
24. ͋ͱVue.jsɺ0.10.6͔Β0.11.x΁ ͷBreaking changesଟ͗͢ • https://github.com/vuejs/vue/wiki/0.10- to-0.11-migration-guide
25. freee-mvc-framework͸
 εέʔϧ͠ͳ͍ • ෳࡶԽ͍ͯ͘͠ΞϓϦέʔγϣϯʹ͸
 ঃʑʹଠ౛ଧͪͰ͖ͳ͘ͳ͍ͬͯΔ • ΠϕϯτϋϯυϦϯά΍Viewͷ਌ࢠؔ܎ΛՄࢹԽ͢Δ͜ͱ ͕ୈҰͷ໨తͳͷͰɺDOMૢ࡞ͷͭΒ͞͸ܰݮ͞Εͳ͍ • ύϥμΠϜͷมԽʹରԠ͢Δؾྗ͸ͳ͘ɺਰୀ͍ͯ͘͠ • ·͊ࣾ಺ಠࣗFWͷ຤࿏ͳΜͯ͜Μͳ΋ͷͰ͢ΑͶ
26. ֵ໋
27. React + Flux
28. React͓͞Β͍ • Facebook੡ͷViewϥΠϒϥϦ • ঢ়ଶ؅ཧΛపఈతʹview͔Βഉআ͢Δ
 (ঢ়ଶ؅ཧ͸fluxʹΑΓStore΁) • Propsͱͯ͋͠Δ஋Λ౉͞ΕΔݶΓɺ
 ඞͣಉ͡ϨϯμϦϯάΛ͢Δؔ਺ܕతΞϓϩʔν
 (React͸DOMม׵ثʹͳΔ) • ࠩ෼Λܭࢉͯ͠൓ө͢ΔɺVirtualDOMͷ࣮૷
29. Flux͓͞Β͍ • ୯ํ޲σʔλϑϩʔΛ࣮ݱ͢Δ࣮૷ύλʔϯ • ActionCreator → Dispatcher → Store → View • Component͔Βঢ়ଶ͸੾Γ཭͞ΕɺStoreʹ֨ೲ͞ΕΔ • ඳըͷͨΊʹඞཁͳϩδοΫ͸StoreʹͭΊ͜ΈɺViewʹ͸ඳըʹඞཁͳ৘ใ͕ߏ੒ࡁΈ
 Ͱ௨஌͞ΕΔͷͰݟ௨͕͠ྑ͘ͳΔ
30. 2015೥ॳ಄ɺԶ͕࠷ڧͷFlux ࣮૷ͩઓ૪ຄൃ • Alt • Reflux • Fluxxor • Fluxible • nuclear-js • Arda • Material Flux • Delorean • Flummox • Redux • etc...
31. ଟ͍…
32. ԿΛબͿ͔
 ͋Δ͍͸બ͹ͳ͍͔
33. Reduxͷ୆಄(2015೥5݄) • શͯͷঢ়ଶ͸1ͭͷJSONͰද͢(Single Store) • Data Flowͷొ৔ਓ෺(Action, Reducer)͸
 Pureͳؔ਺ʹͳΔ • state͕ActionΛ௨ͯ͡ߋ৽͞ΕΔࡍʹɺ
 reducerͱ͍͏Pureͳؔ਺Λ௨͢͜ͱͰߋ৽͢Δ
34. ReduxͷੈքΛͬ͘͟Γ
35. طଘ࣮૷͕͋Δͱ͜Ζʹ
 ಋೖ͢Δ্ͰɺRedux͸ͭΒ͍
36. ͪͳΈʹ࠷ॳʹಋೖ͞Εͨػೳ ͸͜Ε(on Backbone view)
37. Single Store͸Ͳ͜ʹ
 ࣋ͭ…??
38. flux-utilsΛ࢖͏ͱ͍͏બ୒ • ReduxΛ࢝Ίͱ͢Δflux࣮૷Ͱఏࣔ͞ΕͨϕετϓϥΫςΟεΛ facebook͕͍͍ͱ͜औΓͨ͠(ओ؍) • ͜Ε·Ͱఏڙ͍ͯͨ͠Dispatcher͚ͩͰͳ͘
 Storeͷϕʔε࣮૷ͱContainerͱ͍͏֓೦͕௥Ճ͞Εͨ • fluxʹର͢Δཉ๬Λશͯຬͨ͢΋ͷͰ͸ͳ͍
 (ϛχϚϜͳ࣮૷ͰɺϩοΫΠϯ͕গͳ͍) • ౰࣌Redux͕όζ͍͚ͬͯͨͲɺ·ͩ·࣮ͩ༻ྫ͕গͳͯ͘
 εέʔϧ͢Δ͔Ͳ͏͔֬৴͕ͳ͔ͬͨͱ͍͏ͷ΋͋Δ
39. αϙʔτൣғ͸খ͍͞
 (ϑϨʔϜϫʔΫͰ͸ͳ͍)
40. Reduxͱͷڞ௨఺ • ContainerComponent → Container • Reducer → Reduce Store
41. flux-utilsͷ͍͍ͱ͜Ζ • طଘͷflux͔Βဃ཭͠ͳ͍ • αϙʔτൣғ͕খ͍͞෼ɺϩοΫΠϯ͕গͳ ͍(͍͟ͱͳΕ͹ࣗ෼Ͱ࣮૷Ͱ͖ΔϨϕϧ) • ΞϓϦέʔγϣϯશମʹؔΘΔϞδϡʔϧ͸ ͳ͍ͷͰɺ෦෼తʹద༻Մೳ
42. ͦͯ͠΍͍ͬͯ͘ؾ࣋ͪ • ϑϩϯτΤϯυҕһձΛ݁੒ • bowerΛ΍Ίͯnpm΁Ҡߦ • SprocketsΛࣺͯͯwebpack΁ • ౖ౭ͷґଘղܾྗ(sprockets͔Βͷ୤٫) • React + FluxΛಋೖͰ͖Δج൫Λ੔͑ͨ
43. fin..?
44. ͱ͍͏Θ͚͸ͳ͘ • ϩοΫΠϯ͠ͳ͍෼ɺ࣮૷ʹ͸ࣗ༝͕͋Δ • Actionͷ࣮૷΍IFʹ౷Ұੑ͕ͳ͍ • Storeͷঢ়ଶ͕ෳࡶʹ͋Γɺ࣌ͱͯ͠Viewʹ
 ϩδοΫ͕࿙Εग़ͯ͠Δ • StoreΛݟ͚ͨͩͰ͸Ͳ͏͍͏ঢ়ଶΛ؅ཧ͍ͯ͠Δͷ ͔෼͔ΓͮΒ͍
45. ػೳ௥Ճͷࡍʹ֤૚ͷIFΛ
 ཧղͤͣʹ৔౰ͨΓతʹ࣮૷ ͞ΕΔͷ͕ෳࡶ͞Λ૿͢ҰҼ ʹͳ͍ͬͯΔ
46. jsʹ΋ܕ͕͋Ε͹…
47. ܕ…
48. டং
49. flowtype
50. flowtype͓͞Β͍ • Facebook੡ͷJavaScriptͷੈքʹ੩తͳܕνΣοΫΛಋೖͰ͖Δπʔϧ • OCaml੡ • ASTղੳͯ͠ɺґଘؔ܎ͷ͋Δ΋ͷ͚ͩΛ
 νΣοΫର৅ʹ͢ΔͷͰ2౓໨Ҏ߱ͷίϯύΠϧ͕ര଎ • ڧྗͳܕਪ࿦ • ఏڙ͢Δͷ͸ܕ෇͚༻ͷγϯλοΫεͱɺͦͷղੳͱิ׬ͷΈ
 (Not AltJS) • ͢ͰʹbabelΛ࢖͍ͬͯΔ৔߹ʹ͸pluginΛ௥Ճ͢Δ͚ͩͰ͙͢࢖͑Δ
51. ཱ৔ • jsʹඞͣ͠΋ܕ͕ඞཁ͔ͱ͍͏ͱͦ͏Ͱ͸ͳ͍͚Ͳɺ
 νʔϜ։ൃͰ͸ඞਢͱߟ͍͑ͯΔ • ࣗ෼͕࣮૷ͨ͠ϞδϡʔϧͷIFΛ໌֬ʹ͢Δ͜ͱͰ
 յΕʹ͍࣮͘૷ʹͰ͖Δ
 (յ͞ΕͨΒΤϥʔʹͳΔ) • νΣοΫ͕Ұ൪ͷ໨త͚ͩͲɺ
 ิ׬ʹΑΔ։ൃޮ཰ͷ޲্΋ૂͬͯߦ͖͍ͨ
52. flow-typed component UZQF
    1SPQT
    
    \
    
    
    UJUMF
    TUSJOH
    
    
    WJTJUFE
    CPPMFBO
    
    
    PO$MJDL
    
    
    WPJE
    ^
    DMBTT
    #VUUPO
    FYUFOET
    3FBDU$PNQPOFOU
    \
    
    
    QSPQT
    1SPQT
    
    
    TUBUF
    \
    
    
    
    
    EJTQMBZ
    TUBUJD
    c
    IPWFS
    c
    BDUJWF
    
    
    ^
    
    
    ʜ
    ^
    Ϋϥε௚Լʹ1SPQTɺ4UBUFͷUZQFΛࢦఆ
 ˞
    ཁUSBOTGPSNDMBTTQSPQFSUJFT TUBHF
53. flow-typed component FYQPSU
    EFGBVMU
    DMBTT
    )PHF$PNQPOFOU
    FYUFOET
    3FBDU$PNQPOFOU
    \
    
    
    SFOEFS
    \
    
    
    
    
    SFUVSO
    
    
    
    
    
    
    
    #VUUPO
    UJUMFIJHF
    WJTJUFE\GBMTF^
    
    
    
    
    
    
    
    
    ^
    ^ PO$MJDLϓϩύςΟΛ౉͠๨Ε͍ͯΔͷͰ
 Τϥʔ͕ग़Δ 
    qPX
    )PHF$PNQPFOUOKTY
    
    
    
    
    
    
    
    
    
    #VUUPO
    UJUMFIJHF
    WJTJUFE\GBMTF^
    
    
    
    
    
    
    
    
    
    
    
    
    ???????????????????????????????????????
    3FBDU
    FMFNFOU
    A#VUUPOA
    
    
    
    
    QSPQT
    1SPQT
    
    
    
    
    
    
    
    
    
    
    
    
    
    
    ?????
    QSPQFSUZ
    APO$MJDLA
    1SPQFSUZ
    OPU
    GPVOE
    JO
    4FF
    CVUUPOKTY
    
    
    
    
    
    
    
    
    
    #VUUPO
    UJUMFIJHF
    WJTJUFE\GBMTF^
    
    
    
    
    
    
    
    
    
    
    
    
    ???????????????????????????????????????
    QSPQT
    PG
    3FBDU
    FMFNFOU
    A#VUUPOA
    
54. flow-typed action UZQF
    '&5$)@"--
    
    \
    UZQF
    bGFUDI@BMM`
    IPQFT
    "SSBZ)PHF
    ^
    UZQF
    4"7&
    
    \
    UZQF
    TBWF
    IPHF
    )PHF
    ^
    UZQF
    %&-&5&
    
    \
    UZQF
    EFMFUF
    JE
    OVNCFS
    ^
    FYQPSU
    UZQF
    "DUJPO5ZQFT
    
    '&5$)@"--
    c
    4"7&
    c
    %&-&5&
    GVODUJPO
    EJBQBUDI QBSBNT
    "DUJPO5ZQFT
    \
    
    
    "QQ%JTQBUDIFSEJTQBUDI QBSBNT 
    ^
    FYQPSU
    EFGBVMU
    \
    
    
    GFUDI"MM
    \
    
    
    
    
    
    HFU bIPHF` UIFO EBUB
    
    EJBQBUDI \
    UZQF
    bGFUDI@BMM`
    IPHFT
    EBUBIPHFT
    ^
    ^ 
    
    
    ^
    
    
    TBWF IPHF
    )PHF
    \
    
    
    
    
    
    QVU AIPHF\IPHFJE^A
    \
     ʜIPHF`T
    QBSBNT
    
    ^ 

    
    
    
    
    
    
    UIFO EBUB
    
    EJBQBUDI \
    UZQF
    bGFUDI@BMM`
    IPHF
    EBUBIPHF
    ^
    ^ 
    
    
    ^
    
    
    EFMFUF JE
    OVNCFS
    \
    
    
    
    
    EFMFUF AIPHF\JE^A UIFO @EBUB
    
    EJTQBUDI \
    UZQF
    bEFMFUF`
    JE
    ^ 
    
    
    ^
    ֤"DUJPOͷUZQFΛఆٛ͠ɺ
 VOJPO
    UZQFTͱͯ͠·ͱΊΔ BDUJPOͰEJTQBUDI͢ΔUZQFΛ
 ఆٛͨ͠VOJPO
    UZQFTʹ͢Δ ֤EJTQBUDI͸ఆٛͨ͠
 VOJPO
    UZQFTͷ͍ͣΕ͔Λ
 ຬͨ͢
55. flow-typed action FYQPSU
    EFGBVMU
    \
    
    
    GFUDI"MM
    \
    
    
    
    
    
    HFU bIPHF` UIFO EBUB
    
    EJBQBUDI \
    UZQF
    bGFUDI@BMM`
    IPHFT
    EBUBIPHFT
    ^
    ^ 
    
    
    ^
    
    
    TBWF IPHF
    )PHF
    \
    
    
    
    
    
    QVU AIPHF\IPHFJE^A
    \
     ʜIPHF`T
    QBSBNT
    
    ^ 

    
    
    
    
    
    
    UIFO EBUB
    
    EJBQBUDI \
    UZQF
    bGFUDI@BMM`
    IPHF
    EBUBIPHF
    ^
    ^ 
    
    
    ^
    
    
    EFMFUF JE
    OVNCFS
    \
    
    
    
    
    EFMFUF AIPHF\JE^A UIFO @EBUB
    
    EJTQBUDI \
    UZQF
    bEFMFUF`
    JE
    ^ 
    
    
    ^
    FYQPSU
    EFGBVMU
    )PHF$PNQPOFOU
    FYUFOET
    3FBDU$PNQPOFOU
    \
    
    
    IBOEMF$MJDL%FMFUF)PHF F
    \

    
    
    
    "DUJPOEFMFUF \
    JE
    UIJTTUBUFTFMFDUFE
    ^
    
    
    ^
    

    
    
    ʜ
    ^ Action Component $PNQPOFOU͔Β"DUJPO$SFBUFS Λୟ͘ࡍͷ*'΋อূ͞ΕΔ
56. flow-typed state JNQPSU
    UZQFT
    \
    "DUJPO5ZQFT
    ^
    GSPN
    )PHF"DUJPO
    FYQPSU
    UZQF
    4UBUF
    
    \
    IPHFT
    \
    <LFZ
    OVNCFS>
    )PHFT
    ^
    ^
    DMBTT
    )PHF4UPSF
    FYUFOET
    3FEVDF4UPSF4UBUF
    \
    
    
    HFU*OJUJBM4UBUF 
    4UBUF
    \
    
    
    
    
    SFUVSO
    \
    )PHFT
    \^
    ^
    
    
    ^
    
    
    SFEVDF TUBUF
    4UBUF
    BDUJPO
    "DUJPO5ZQFT 
    4UBUF
    \
    
    
    
    
    TXJUDI
    BDUJPOUZQF
    \
    
    
    
    
    DBTF
    GFUDI@BMM
    
    
    
    
    
    
    SFUVSO
    \
    IPHFT
    BDUJPOIPHFTSFEVDF D
    W
    
    \
    
    
    
    
    
    
    
    
    D<WJE>
    
    W
    
    
    
    
    
    
    
    
    SFUVSO
    D
    
    
    
    
    
    
    ^
    \^
    ^
    
    
    
    
    DBTF
    TBWF
    
    
    
    
    
    
    DPOTU
    IPHF
    
    \^
    
    
    
    
    
    
    IPHF<BDUJPOIPHFJE>
    
    BDUJPOIPHF
    
    
    
    
    
    
    SFUVSO
    0CKFDUBTTJHO \^
    TUBUF
    IPHF 
    
    
    
    
    DBTF
    EFMFUF
    
    
    
    
    
    
    SFUVSO
    TUBUFIPHFTTFMFDU IPHF
    
    IPHFJE
    
    BDUJPOJE 
    
    
    
    
    ʜ "DUJPO5ZQFT VOJPO
    UZQFT ΛJNQPSU 4UBUFΛఆٛͯ͠4UPSFʹ౉͢
 ࢖͍Έͪ͸ޙड़ DBTFจʹΑͬͯVOJPO
    UZQFT͕ߜΒΕΔ
 BDUJPOTIPHFTʹΞΫηεͰ͖Δͷ͸GFUDI@BMMԼͷϒϩοΫ͚ͩ BDUJPOTIPHFʹΞΫηεͰ͖Δͷ͸TBWFԼͷϒϩοΫ͚ͩ BDUJPOTJEʹΞΫηεͰ͖Δͷ͸EFMFUFԼͷϒϩοΫ͚ͩ
57. flow-typed store EFDMBSF
    NPEVMF
    qVYVUJMT
    \
    
    
    EFDMBSF
    DMBTT
    3FEVDF4UPSF5
    \
    
    
    
    
    HFU4UBUF 
    5
    
    
    
    
    
    
    
    ^
    ^ JNQPSU
    )PHF4UPSF
    GSPN
    )PHF4UPSF
    JNQPSU
    UZQF
    \
    4UBUF
    ^
    GSPN
    )PHF4UPSF
    DMBTT
    )PHF$POUBJOFS
    FYUFOET
    3FBDU$PNQPOFOU
    \
    
    
    TUBUF
    4UBUF
    
    
    TUBUJD
    HFU4UPSFT
    \
    SFUVSO
    <
    )PHF4UPSF
    >
    ^
    
    
    TUBUJD
    DBMDVMBUF4UBUF @QSFW4UBUF
    4UBUF 
    4UBUF
    \
    
    
    
    
    SFUVSO
    )PHF4UPSFHFU4UBUF 
    
    
    ^
    
    
    SFOEFS
    \
    
    
    
    
    ʜ
    Declare ReduceStore Component HFOFSJDTͰ4UPSFʹ༩͑ͨ
 ܕΛHFU4UBUFͰड͚औΕΔΑ͏ʹ͢Δ 3FEVDF4UPSFͷHFU4UBUFΛݺͼग़ͨ࣌͠ʹ
 4UPSFͰఆٛͨ͠ܕ৘ใΛड͚औΕΔ
58. We got type-safe flux!
59. ͱ͍ͬͨ΋ͷͷ
 ͜͜·Ͱग़དྷ͍ͯΔ
 ͱ͜Ζ͕͋Δ͔ͱ͍͏ͱ
 ࣮ͷͱ͜Ζ·ͩ͋·Γͳ͍

60. We are hiring! http://jobs.jobvite.com/freee/jobs
61. Thank you
 for your attention!