©2018 Wantedly, Inc. Mint Language Level Support for SPA 2.Aug.2018 - Naomichi Agata 

©2018 Wantedly, Inc. agatan Software engineer at Wantedly, Inc. Server side + Machine learning Github Twitter @agatan @agatan_ 

©2018 Wantedly, Inc. Single Page Application Ͳ͏࡞Γ·͔͢ʁ 

©2018 Wantedly, Inc. React Vue Angular 

©2018 Wantedly, Inc. React Redux Vue react-router universal-router Angular styled-components webpack-serve Typescript Immutable.js 

©2018 Wantedly, Inc. React Redux Vue react-router universal-router Angular styled-components webpack-serve Typescript Immutable.js CSS Modules flow prettier preact redux-saga redux-thunk npm esdoc webpack parcel jest mocha jasmin hyperapp Vuex 

©2018 Wantedly, Inc. https://www.mint-lang.com/ 

©2018 Wantedly, Inc. Mint w IUUQTNJOUMBOHDPN
w front-end web ͷͨΊͷϓϩάϥϛϯάݴޠ
w ੩తܕݕࠪ
w SPAs
ͷͨΊͷ༷ʑͳػೳΛݴޠϨϕϧͰαϙʔτ
• Reusable components • Styling • Routing • Global and local state handling • Synchronous and asynchronous computations that might fail 

©2018 Wantedly, Inc. Hello, world! DPNQPOFOU
.BJO
\




GVO
SFOEFS

)UNM
\








EJW












\
l)FMMP
XPSMEz
^








EJW




^
^ 

©2018 Wantedly, Inc. Styling with CSS DPNQPOFOU
.BJO
\




TUZMF
CVUUPO
\








CBDLHSPVOE
SFE








DPMPS
XIJUF








CPSEFS





^




GVO
SFOEFS

)UNM
\








CVUUPOCVUUPO












\
$MJDL
.&
^








CVUUPO




^
^ Style ͸ఆٛ͞Εͨ
components
ͷ

scope
ʹด͡Δ 

©2018 Wantedly, Inc. Routing SPVUFT
\





\








"QQMJDBUJPOTFU1BHF JOEFY




^







VTFSTJE
JE
/VNCFS
\








EP
\












"QQMJDBUJPOTFU1BHF TIPX












"QQMJDBUJPOMPBE6TFS JE








^




^
^ 

©2018 Wantedly, Inc. Components DPNQPOFOU
5FTU
\




QSPQFSUZ
TJ[F

4USJOH

TNBMM




QSPQFSUZ
DPMPS

4USJOH

SFE







GVO
SFOEFS

)UNM
\








EJW












\
DPMPS
^












\
TJ[F
^








EJW




^
^ React.Component property Λ࣋ͯΔ
render ؔ਺Λ࣋ͭ 

©2018 Wantedly, Inc. Passing properties DPNQPOFOU
.BJO
\




GVO
SFOEFS

)UNM
\








5FTU
DPMPSCMVF
TJ[FCJH




^
^ ਌͔Βࢠͷ property Λ౉ͤΔ 

©2018 Wantedly, Inc. JavaScript interpolation DPNQPOFOU
.BJO
\




GVO
IBOEMF$MJDL
FWFOU

)UNM&WFOU

7PJE
\








ABMFSU )FMMP A




^







GVO
SFOEFS

)UNM
\








EJW
PO$MJDL\IBOEMF$MJDL^\
$MJDL
UP
BMFSU
^EJW




^
^ 

©2018 Wantedly, Inc. Anonymous functions DPNQPOFOU
(SFFUFS
\




GVO
SFOEFS

)UNM
\








EJW
PO$MJDL\ FWFOU

)UNM&WFOU

7PJE

\
EP
\
%FCVHMPH )FMMP
^^^












\
$MJDL
.F
^








EJW




^
^ 

©2018 Wantedly, Inc. Store TUPSF
$PVOUFS4UPSF
\




TUBUF
DPVOUFS

/VNCFS






GVO
JODSFNFOU

7PJE
\








OFYU
\
DPVOUFS

DPVOUFS


^




^




GVO
EFDSFNFOU

7PJE
\








OFYU
\
DPVOUFS

DPVOUFS


^




^
^ Flux
ͷ
Store 

©2018 Wantedly, Inc. Connect connect Ͱ component ͱ store Λͭͳ͙ DPNQPOFOU
.BJO
\




DPOOFDU
$PVOUFS
FYQPTJOH
\
DPVOU
JODSFNFOU
^




GVO
SFOEFS

)UNM
\








EJW












\
/VNCFSUP4USJOH DPVOU
^












CVUUPO
PO$MJDL\ FWFOU

)UNM&WFOU

7PJE

\
















JODSFNFOU












^^\

^CVUUPO








EJW




^
^ 

©2018 Wantedly, Inc. Testing TVJUF
.BJO
\




UFTU
(SFFUT
.JOU
\








XJUI
5FTU)UNM
\












.BJO












c
TUBSU












c
BTTFSU5FYU0G EJW
)FMMP
.JOU








^




^
^ 

©2018 Wantedly, Inc. dev-server ࣗಈίϯύΠϧ ܕݕࠪɺsyntax error ͷදࣔ 

©2018 Wantedly, Inc. ಺෦࣮૷ Ὂ ίϯύΠϥͳͲ͸
Crystal
Ͱ࣮૷͞Ε͍ͯΔ
Ὂ ίϯύΠϧ͢Δͱ
React 
ࣗલ
flux ʹͳΔ
Ὂ component → React.Component Ὂ Ttore → global variable
ʹ 

©2018 Wantedly, Inc. Component before DPNQPOFOU
.BJO
\




DPOOFDU
$PVOUFS
FYQPTJOH
\
DPVOU
JODSFNFOU
^




GVO
SFOEFS

)UNM
\








EJW












\
/VNCFSUP4USJOH DPVOU
^












CVUUPO
PO$MJDL\ FWFOU

)UNM&WFOU

7PJE

\
















JODSFNFOU












^^\

^CVUUPO








EJW




^
^ 

©2018 Wantedly, Inc. Component after DMBTT
.BJO
FYUFOET
$PNQPOFOU
\




HFU
DPVOU
\
SFUVSO
$PVOUFSDPVOU
^




JODSFNFOU QBSBNT
\
SFUVSO
$PVOUFSJODSFNFOU QBSBNT
^




DPNQPOFOU8JMM6ONPVOU
\








$PVOUFS@VOTVCTDSJCF UIJT




^




DPNQPOFOU%JE.PVOU
\








$PVOUFS@TVCTDSJCF UIJT




^




SFOEFS
\








SFUVSO
@DSFBUF&MFNFOU EJW
\^
</VNCFSUP4USJOH UIJTDPVOU
@DSFBUF&MFNFOU CVUUPO
\












PO$MJDL
FWFOU

FWFOU

\
















SFUVSO
UIJTJODSFNFOUCJOE UIJT












^ @OPSNBMJ[F&WFOU FWFOU








^
>




^
^ 

©2018 Wantedly, Inc. Store before & after DPOTU
$PVOUFS

OFX
DMBTT
FYUFOET
4UPSF
\




DPOTUSVDUPS
\




TVQFS




UIJTTUBUF

\








DPVOU





^


^


HFU
DPVOU
\
SFUVSO
UIJTTUBUFDPVOU
^


JODSFNFOU
\




SFUVSO
OFX
1SPNJTF @SFTPMWF

\






UIJTTFU4UBUF @VQEBUF UIJTTUBUF
OFX
3FDPSE \









DPVOU
UIJTDPVOU









^
@SFTPMWF




^


^
^
$PVOUFS@@EJTQMBZ/BNF

A$PVOUFSA TUPSF
$PVOUFS
\




TUBUF
DPVOU
/VNCFS






GVO
JODSFNFOU

7PJE
\








OFYU
\
DPVOU

DPVOU


^




^
^ 

©2018 Wantedly, Inc. ඪ४ϥΠϒϥϦ Ὂ IUUQTHJUIVCDPNNJOUMBOHNJOUDPSF
Ὂ Maybe, Promise, Result, etc. Ὂ ΄ͱΜͲ
js interpolation
NPEVMF
"SSBZ
\




GVO
TJ[F
BSSBZ

"SSBZ B

/VNCFS
\








ABSSBZMFOHUIA




^
^ NPEVMF
+TPO
\




GVO
QBSTF
JOQVU

4USJOH

.BZCF 0CKFDU
\








A










\










USZ
\












SFUVSO
OFX
+VTU +40/QBSTF JOQVU










^
DBUDI
FSSPS
\












SFUVSO
OFX
/PUIJOH










^








^








A




^
^ 

©2018 Wantedly, Inc. ײ૝ͱ·ͱΊ Ὂ ΋ͷ͘͢͝Ϧον
Ὂ ݴޠػೳ΋ͯΜ͜੝Γͩ͠ɺπʔϧతͳػೳ΋๛෋
Ὂ dev-server, formatter, etc. Ὂ ෳࡶͳ SPAs Λ࡞ΔΞϓϩʔνͷҰͭͱ͓ͯ͘͢͠͝΋͠Ζ͍ͳͱࢥ͍·ͨ͠
Ὂ Elm
Λ͞Βʹ
SPAs
ಛԽͤͨ͞Α͏ͳݴޠ
Ὂ ࣮͸
SPAs
ॻ͍ͨ͜ͱͳ͍Ͱ͢
Ὂ JSer
ͷօ༷ͷײ૝Λௌ͖ͨͯ͘ൃද͠·ͨ͠
Ὂ Elm
΍
mint
ͷΑ͏ͳΞϓϩʔνʹ͍ͭͯͲ͏ࢥ͍ͬͯ·͔͢ʁʁ