革命と秩序とSPA

Transcript

1. ֵ໋ͱடংͱSPA @joe_re

2. Who am I? • twitter: @joe_re • github: @joe-re •

   freeeͱ͍͏ޒ൓ాͷ
 ձࣾͰಇ͍͍ͯ·͢ • Ϋϥ΢υձܭιϑτΛ
 ࡞͍ͬͯ·͢
3. None

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!