What's the difference between JavaScript and Java?

by Masayuki Izumi

Slide 1

Slide 1 text

8IBUTUIFEJ⒎FSFODFCFUXFFO +BWB4DSJQUBOE+BWB .BTBZVLJ*;6.*!J[VNJO %SPJE,BJHJ%": 'FC

Slide 2

Slide 2 text

> Masayuki IZUMI a.k.a. @izumin5210 > Rekimoto Lab. at the Univ. of Tokyo > Strobo, Inc. / Wantedly, Inc. > Rubyist / Androider / {Java,Type}Scripter

Slide 3

Slide 3 text

8IBUTUIFEJ⒎FSFODFCFUXFFO +BWB4DSJQUBOE+BWB

Slide 4

Slide 4 text

8IBUTUIFEJ⒎FSFODFCFUXFFO +BWB4DSJQUBOE+BWB NPEFSOGSPOUFOE+4 BOESPJEBQQMJDBUJPO BSDIJUFDUVSFEFTJHO

Slide 5

Slide 5 text

?8IBUEPZPVUIJOLBCPVU ʠ'SPOUFOE+BWB4DSJQUʡ

Slide 6

Slide 6 text

*OUIFNFBOUJNF UIFMBUFTUBOEHSFBUFTU+BWB4DSJQUGSBNFXPSL DPNFTBSPVOEFWFSZTJYUFFONJOVUFT IUUQTXXXBMMFOQJLFDPNKBWBTDSJQUGSBNFXPSLGBUJHVF "+4GSBNFXPSLPOFWFSZUBCMF"MMFO1JLF

Slide 7

Slide 7 text

5IFSF ZPVDBOTFFIPX +BWB4DSJQUBQQGSBNFXPSLTʟ UPEPFYBNQMFT DPNQBSFUPKVTUK2VFSZPSWBOJMMB+BWB4DSJQU "+4GSBNFXPSLPOFWFSZUBCMF"MMFO1JLF

Slide 8

Slide 8 text

0CKFDUJWFJOUIJTQSFTFOUBUJPO 5SZJOUSPEVDJOH ʠ&YQMPTJWF(SPXUIPG+BWBTDSJQUʡ JOUP"OESPJE+BWB IUUQTEFWFMPQFSTBMFTGPSDFDPNCMPHTEFWFMPQFSSFMBUJPOTFYQMPTJWFHSPXUIKBWBTDSJQUOQNFOUFSQSJTFIUNM

Slide 9

Slide 9 text

$IBOHFTJO'SPOUFOE+BWB4DSJQU -JCSBSJFT'SBNFXPSLT"SDIJUFDUVSFT 3FWJFX

Slide 10

Slide 10 text

$IBOHFTJO+4%BXOPGEZOBNJDXFC * QSPUPUZQFKT * K2VFSZ 5PBCTUSBDUBXBZCSPXTFSJODPOTJTUFODJFT (We really wanted document.querySelector() !!!!!)

Slide 11

Slide 11 text

$IBOHFTJO+43*" 3JDI*OUFSOFU"QQMJDBUJPO 41" 4JOHMF1BHF"QQMJDBUJPO .78 .PEFM7JFX8IBUFWFS $PNQPOFOU "SDIJUFDUVSF -JCSBSZ #BDLCPOFKT &NCFSKT ,OPDLPVUKT "OHVMBS+4 3FBDU "OHVMBS 'MVY 3FEVY

Slide 12

Slide 12 text

$IBOHFTJO+43*" 3JDI*OUFSOFU"QQMJDBUJPO 41" 4JOHMF1BHF"QQMJDBUJPO .78 .PEFM7JFX8IBUFWFS #BDLCPOFKT &NCFSKT ,OPDLPVUKT "OHVMBS+4 $PNQPOFOU "SDIJUFDUVSF -JCSBSZ 3FBDU "OHVMBS 'MVY 3FEVY %BUB#JOEJOH

Slide 13

Slide 13 text

$IBOHFTJO+43*" 3JDI*OUFSOFU"QQMJDBUJPO 41" 4JOHMF1BHF"QQMJDBUJPO $PNQPOFOU .78 .PEFM7JFX8IBUFWFS #BDLCPOFKT &NCFSKT ,OPDLPVUKT "OHVMBS+4 3FBDU 7JSUVBM%0. "OHVMBS 5ZQF4DSJQU3Y+4 "SDIJUFDUVSF -JCSBSZ 'MVY 3FEVY

Slide 14

Slide 14 text

$IBOHFTJO+43*" 3JDI*OUFSOFU"QQMJDBUJPO 41" 4JOHMF1BHF"QQMJDBUJPO "SDIJUFDUVSF -JCSBSZ .78 .PEFM7JFX8IBUFWFS #BDLCPOFKT &NCFSKT ,OPDLPVUKT "OHVMBS+4 $PNQPOFOU 3FBDU "OHVMBS 'MVY 3FEVY 6OJEJSFDUJPOBMEBUBqPX

Slide 15

Slide 15 text

'SPOUFOE+4 5IFSFBSFNBOZJNQMFNFOUBUJPOT "OESPJE+BWB 5IFSFBSFGFXJNQMFNFOUBUJPOT "QQMJDBUJPOBSDIJUFDUVSFJNQMFNFOUBUJPOT

Slide 16

Slide 16 text

'SPOUFOE+4 5IFSFBSFNBOZJNQMFNFOUBUJPOT "OESPJE+BWB 5IFSFBSFGFXJNQMFNFOUBUJPOT "QQMJDBUJPOBSDIJUFDUVSFJNQMFNFOUBUJPOT "OESPJE'SBNFXPSL ͕ൺֱత͔ͬ͠Γͯ͠Δ

Slide 17

Slide 17 text

2 8IZTIPVMEXFJOUSPEVDF BQQMJDBUJPOBSDIJUFDUVSFJOUPPVSBQQMJDBUJPO " *UIJOL

Slide 18

Slide 18 text

2 8IZTIPVMEXFJOUSPEVDF BQQMJDBUJPOBSDIJUFDUVSFJOUPPVSBQQMJDBUJPO SFBEBCJMJUZ NBJOUBJOBCJMJUZ UFTUBCJMJUZ " *UIJOL

Slide 19

Slide 19 text

2 8IZTIPVMEXFJOUSPEVDF BQQMJDBUJPOBSDIJUFDUVSFJOUPPVSBQQMJDBUJPO SFBEBCJMJUZ NBJOUBJOBCJMJUZ UFTUBCJMJUZ " *UIJOL "OESPJE'SBNFXPSL ͚ͩͰ͸ݫ͘͠ͳ͖ͬͯͨ

Slide 20

Slide 20 text

&YBNQMFTPG BQQMJDBUJPOBSDIJUFDUVSF JO'SPOUFOE+4

Slide 21

Slide 21 text

"QQMJDBUJPOBSDIJUFDUVSFJO'SPOUFOE+4 .78 'MVY 3FEVY

Slide 22

Slide 22 text

.78 .PEFM7JFX8IBUFWFS 7 $ . 7 7. . 7 1 . DataBinding .78 'MVY 3FEVY

Slide 23

Slide 23 text

.78 .PEFM7JFX8IBUFWFS 7 $ . 7 7. . 7 1 . DataBinding IUUQTGBDFCPPLHJUIVCJPqVYEPDTPWFSWJFXIUNM .78 'MVY 3FEVY 5IFTFEFQFOEFODJFTBOEDBTDBEJOHVQEBUFT PGUFOPDDVSJOBMBSHF.7$BQQMJDBUJPO MFBEJOHUPBUBOHMFEXFBWFPGEBUBqPX BOEVOQSFEJDUBCMFSFTVMUT 'MVY]"QQMJDBUJPO"SDIJUFDUVSFGPS#VJMEJOH6TFS*OUFSGBDFT

Slide 24

Slide 24 text

GBDFCPPLqVYVUJMJ[JOHBVOJEJSFDUJPOBMEBUBqPX IUUQTGBDFCPPLHJUIVCJPqVYEPDTPWFSWJFXIUNM .78 'MVY 3FEVY

Slide 25

Slide 25 text

GBDFCPPLqVYVUJMJ[JOHBVOJEJSFDUJPOBMEBUBqPX IUUQTGBDFCPPLHJUIVCJPqVYEPDTPWFSWJFXIUNM .78 'MVY 3FEVY 6OJEJSFDUJPOBM%BUB'MPX

Slide 26

Slide 26 text

GBDFCPPLqVYVUJMJ[JOHBVOJEJSFDUJPOBMEBUBqPX .78 'MVY 3FEVY 6OJEJSFDUJPOBM%BUB'MPX IUUQCMPHBOESFXSBZNFSFBDUKTGPSTUVQJEQFPQMF 5IFDPODFQU'MVYJTTJNQMZ UIBUZPVSWJFXUSJHHFSTBOFWFOU TBZ BGUFSVTFSUZQFTBOBNFJOBUFYUpFME UIBUFWFOUVQEBUFTBNPEFM UIFOUIFNPEFMUSJHHFSTBOFWFOU BOEUIFWJFXSFTQPOETUPUIBUNPEFMTFWFOU CZSFSFOEFSJOHXJUIUIFMBUFTUEBUB5IBUTJU 3FBDU+4'PS4UVQJE1FPQMF

Slide 27

Slide 27 text

GBDFCPPLqVYVUJMJ[JOHBVOJEJSFDUJPOBMEBUBqPX .78 'MVY 3FEVY 6OJEJSFDUJPOBM%BUB'MPX JOPUIFSXPSET 0CTFSWFSQBUUFSO

Slide 28

Slide 28 text

SBDLUSFEVYQSFEJDUBCMFTUBUFDPOUBJOFS .78 'MVY 3FEVY

Slide 29

Slide 29 text

SBDLUSFEVYQSFEJDUBCMFTUBUFDPOUBJOFS .78 'MVY 3FEVY FWFOU QSPQBHBUJPO .FTTBHF EJTQBUDI XJUI"DUJPO VQEBUF JGOFFEFE IUUQTTQFBLFSEFDLDPNBYSPTTJOUSPEVDUJPOUPSFEVY

Slide 30

Slide 30 text

SBDLUSFEVYQSFEJDUBCMFTUBUFDPOUBJOFS .78 'MVY 3FEVY FWFOU QSPQBHBUJPO .FTTBHF EJTQBUDI XJUI"DUJPO VQEBUF JGOFFEFE 3FEVYJT'MVYJNQMFNFOUBUJPO UIBUJTHPPEBUNBOBHJOHTUBUFT *OUSPEVDUJPOUP3FEVY4QFBLFS%FDL IUUQTTQFBLFSEFDLDPNBYSPTTJOUSPEVDUJPOUPSFEVY

Slide 31

Slide 31 text

0CKFDUJWFJOUIJTQSFTFOUBUJPO 5SZJOUSPEVDJOH ʠ&YQMPTJWF(SPXUIPG+BWBTDSJQUʡ JOUP"OESPJE+BWB

Slide 32

Slide 32 text

5SZQPSUJOH ʠ3FEVYʡJOUP"OESPJEBQQMJDBUJPO

Slide 33

Slide 33 text

J[VNJO%SPJEVY

Slide 34

Slide 34 text

%J⒎FSFODFCX+BWB4DSJQUBOE"OESPJE+BWB BOOPUBUJPOQSPDFTTJOH TUSPOHUZQJOH +BWB EVDLUZQJOH pSTUDMBTTGVODUJPO QSPNJTF +BWB4DSJQU

Slide 35

Slide 35 text

%J⒎FSFODFCX+BWB4DSJQUBOE"OESPJE+BWB BOOPUBUJPOQSPDFTTJOH TUSPOHUZQJOH +BWB EVDLUZQJOH pSTUDMBTTGVODUJPO QSPNJTF +BWB4DSJQU BOOPUBUJPOQSPDFTTJOH Ͱ ର߅͢Δ

Slide 36

Slide 36 text

%J⒎FSFODFCX+BWB4DSJQUBOE"OESPJE+BWB EVDLUZQJOH pSTUDMBTTGVODUJPO QSPNJTF +BWB4DSJQU BOOPUBUJPOQSPDFTTJOH Ͱ ର߅͢Δ BOOPUBUJPOQSPDFTTJOH TUSPOHUZQJOH +BWB @Reducer(Counter.class) public class CounterReducer { @Dispatchable(IncrementCountAction.class) public Counter increment(Counter state) { return new Counter(state.getCount() + 1); } @Dispatchable(DecrementCountAction.class) public Counter decrement(Counter state) { return new Counter(state.getCount() - 1); } @Dispatchable(ClearCountAction.class) public Counter clear() { return new Counter(0); } } export default function counter(state = 0, action) { switch (action.type) { case 'INCREMENT' : return state + 1 case 'DECREMENT' : return state - 1 default: return state } }

Slide 37

Slide 37 text

%J⒎FSFODFCX+BWB4DSJQUBOE"OESPJE+BWB BOOPUBUJPOQSPDFTTJOH TUSPOHUZQJOH +BWB EVDLUZQJOH pSTUDMBTTGVODUJPO QSPNJTF +BWB4DSJQU ڧྗͳܕ੍໿ʹΑΓ +4 ʹൺ΂ ݎ࿚ͳઃܭΛ૊Έ΍͍͢

Slide 38

Slide 38 text

%J⒎FSFODFCX+BWB4DSJQUBOE"OESPJE+BWB BOOPUBUJPOQSPDFTTJOH TUSPOHUZQJOH +BWB EVDLUZQJOH pSTUDMBTTGVODUJPO QSPNJTF +BWB4DSJQU 3Y+BWB ͷ SY0CTFSWBCMF5 Λ 1SPNJTFMJLF ͳڞ௨ *' ͱ͢Δ

Slide 39

Slide 39 text

%J⒎FSFODFCX+BWB4DSJQUBOE"OESPJE+BWB BOOPUBUJPOQSPDFTTJOH TUSPOHUZQJOH +BWB EVDLUZQJOH pSTUDMBTTGVODUJPO QSPNJTF +BWB4DSJQU 3Y+BWB ͷ SY0CTFSWBCMF5 Λ 1SPNJTFMJLF ͳڞ௨ *' ͱ͢Δ function fetchPosts(reddit) { return dispatch => { dispatch(requestPosts(reddit)) return fetch(`https://www.reddit.com/r/${reddit}.json`) .then(response => response.json()) .then(json => dispatch(receivePosts(reddit, json))) } } (MPCBM'FUDI ͕ 1SPNJTF Λฦ͢

Slide 40

Slide 40 text

%J⒎FSFODFCX+BWB4DSJQUBOE"OESPJE+BWB BOOPUBUJPOQSPDFTTJOH TUSPOHUZQJOH +BWB EVDLUZQJOH pSTUDMBTTGVODUJPO QSPNJTF +BWB4DSJQU 3Y+BWB ͷ SY0CTFSWBCMF5 Λ 1SPNJTFMJLF ͳڞ௨ *' ͱ͢Δ public Observable call(Dispatcher dispatcher) { return dispatcher.dispatch(new DoingFetchAction()) .flatMap(_action -> client.fetch()) .map(todoList -> { this.todoList = todoList; return new ReceiveTodoListAction(todoList); }); } 0CTFSWBCMF"DUJPO Λฦ͢

Slide 41

Slide 41 text

8JUIWJFX FWFOU QSPQBHBUJPO .FTTBHF EJTQBUDI XJUI"DUJPO VQEBUF JGOFFEFE IUUQTTQFBLFSEFDLDPNBYSPTTJOUSPEVDUJPOUPSFEVY 'SPOUFOE+4 3FBDU "OHVMBS FUD

Slide 42

Slide 42 text

8JUIWJFX FWFOU QSPQBHBUJPO .FTTBHF EJTQBUDI XJUI"DUJPO VQEBUF JGOFFEFE IUUQTTQFBLFSEFDLDPNBYSPTTJOUSPEVDUJPOUPSFEVY "OESPJE "DUJWJUZ 'SBHNFOU FUD

Slide 43

Slide 43 text

8JUIWJFX FWFOU QSPQBHBUJPO .FTTBHF EJTQBUDI XJUI"DUJPO VQEBUF JGOFFEFE IUUQTTQFBLFSEFDLDPNBYSPTTJOUSPEVDUJPOUPSFEVY "OESPJE "DUJWJUZ 'SBHNFOU FUD %BUB#JOEJOH

Slide 44

Slide 44 text

8JUIWJFX FWFOU QSPQBHBUJPO .FTTBHF EJTQBUDI XJUI"DUJPO VQEBUF JGOFFEFE IUUQTTQFBLFSEFDLDPNBYSPTTJOUSPEVDUJPOUPSFEVY "OESPJE "DUJWJUZ 'SBHNFOU FUD %BUB#JOEJOH

Slide 45

Slide 45 text

FH%SPJEVY%BUB#JOEJOH 7JFX 4UPSF MBZPVU OPUJGZ1SPQFSUZ$IBOHFE VTFSFWFOU BDUJPO EJTQBUDI

Slide 46

Slide 46 text

FH.71%SPJEVY%BUB#JOEJOH 7JFX 4UPSF MBZPVU OPUJGZ1SPQFSUZ$IBOHFE VTFSFWFOU BDUJPO EJTQBUDI 1SFTFOUFS EFMFHBUF PQFSBUF MPHJD JP FUD DBMM"TZOD"DUJPO PQFSBUF

Slide 47

Slide 47 text

FH$MFBO"SDIJUFDUVSF%SPJEVY%BUB#JOEJOH 7JFX 4UPSF MBZPVU OPUJGZ VTFSFWFOU BDUJPO EJTQBUDI )BOEMFST EFMFHBUF MPHJD JP FUD DBMM"TZOD"DUJPO 1SFTFOUFS OPUJGZ PQFSBUF PQFSBUF

Slide 48

Slide 48 text

༨ஊ

Slide 49

Slide 49 text

$MFBO"SDIJUFDUVSF

Slide 50

Slide 50 text

IUUQTCMPHUIMJHIUDPNVODMFCPCUIFDMFBOBSDIJUFDUVSFIUNM

Slide 51

Slide 51 text

FH$MFBO"SDIJUFDUVSF%BHHFS%SPJEVY%BUB#JOEJOH 7JFX 4UPSF MBZPVU OPUJGZ VTFSFWFOU BDUJPO EJTQBUDI )BOEMFST EFMFHBUF MPHJD JP FUD DBMM"TZOD"DUJPO 1SFTFOUFS OPUJGZ PQFSBUF PQFSBUF

Slide 52

Slide 52 text

Slide 53

Slide 53 text

FH$MFBO"SDIJUFDUVSF%BHHFS%SPJEVY%BUB#JOEJOH 7JFX 4UPSF MBZPVU OPUJGZ VTFSFWFOU BDUJPO EJTQBUDI )BOEMFST EFMFHBUF MPHJD JP FUD DBMM"TZOD"DUJPO 1SFTFOUFS OPUJGZ PQFSBUF PQFSBUF @TimelineScope class TimelineHandlers { private final TimelineView view; private final RootStore store; @Inject TimelineHandlers(TimelineView view, RootStore store) { this.view = view; this.store = store; } /* snip. */ } ˞1SFTFOUFS ΋ಉ༷ͳͷͰলུ

Slide 54

Slide 54 text

FH$MFBO"SDIJUFDUVSF%BHHFS%SPJEVY%BUB#JOEJOH 7JFX 4UPSF MBZPVU OPUJGZ VTFSFWFOU BDUJPO EJTQBUDI )BOEMFST EFMFHBUF MPHJD JP FUD DBMM"TZOD"DUJPO 1SFTFOUFS OPUJGZ PQFSBUF PQFSBUF @Module class TimelineModule { private final TimelineView view; TimelineModule(TimelineView view) { this.view = view; } @Provides @TimelineScope TimelineView provideTimelineView() { return view; } }

Slide 55

Slide 55 text

$MFBO"SDIJUFDUVSF%SPJEVY ͷ QSPTDPOT QSPT 4UPSF Ͱ͢΂ͯͷঢ়ଶΛ؅ཧͰ͖Ε͹ɼ 1SFTFOUFS ͸ 4UPSF Λ؂ࢹ͢Δ͚ͩʹͳΔ )BOEMFST ΋ 4UPSF ʹ EJTQBUDI ͢Δ͚ͩ ϩδοΫ͸ "DUJPO ͷ޲͜͏ଆʢ3FQPTJUPSZ ͳͲʣʹ -PDBMVOJUUFTU ͰΧόʔͰ͖Δൣғ͕ѹ౗తʹ޿͍ ѹ౗తʹෳࡶʜοʂʂʢ͜͜·Ͱ΍Δඞཁ͋Δʁʣ DPOT

Slide 56

Slide 56 text

$PODMVTJPO

Slide 57

Slide 57 text

$PODMVTJPO "QQMJDBUPJOBSDIJUFDUVSFPO'SPOUFOE+4 .78 .PEFM7JFX8IBUFWFS $PNQPOFOUCBTFVOJEJSFDUJPOBMEBUBqPX QPSUJOHSBDLUSFEVYJ[VNJO%SPJEVY "OOPUBUJPOQSPDFTTJOH Ͱॊೈ͞Λิ͏ 3Y+BWB Ͱ 1SPNJTF ͷ୅ΘΓͱͳΔڞ௨ *' Ծ૝ %0. ͸ͳ͍͚Ͳ %BUB#JOEJOH ͸ศར $MFBO"SDIJUFDUVSF ͸͍͍ͧ