Type-safe front-end development using Rust/Rustを使った型安全なフロントエンド開発

Objective:
Introducing type-safe front-end development using Rust, now a reality

Composition:

TypeScript is not type-safe
Problems with type-safe AltJS
Concerns of front-end development using Rust(WASM)

Knowledge of JavaScript frameworks cannot be appropriated
Overhead of data conversion between WASM and JavaScript (UTF-8 and UTF-16, etc.)
Increase in data size due to WASM
Increase in memory used at runtime due to WASM

Transcript

1. UJQP
    3VTUΛ࢖ͬͨܕ҆શͳϑϩϯτ Τϯυ։ൃ
2. ϓϨθϯͷ໨తͱߏ੒ w ໨త
   w 3VTUΛ࢖ͬͨܕ҆શͳϑϩϯτΤϯυ։ൃ͕ɺݱ࣮తʹͳͬͨ͜ͱΛ঺հ
   w ߏ੒
   w 5ZQF4DSJQU͸ܕ҆શͰ͸ͳ͍
   w ܕ҆શͳ"MU+4ͷ໰୊఺
   w 3VTU 8"4. Λ࢖ͬͨϑϩϯτΤϯυ։ൃͷݒ೦఺
   
   w 3VTU༻ϑϩϯτΤϯυϑϨʔϜϫʔΫ
   w +T
   XFC
   GSBNFXPSLT
   CFODINBSL
   $ISPNF
   ͷ݁Ռ
3. 5ZQF4DSJQU͸ܕ҆શͰ͸ͳ͍ w +BWB4DSJQU͔Βͷஈ֊తͳҠߦΛ໨ࢦͨͨ͠Ί
   w ۩ମྫ
   w BOZܕ
   w OVNCFSܕͱTUSJOHܕͷ҉໧ͷܕม׵ +BWB4DSJQUͱͷޓ׵ੑͷͨΊ function add(a: number, b: string) : string { return a + b; } console.log(add(1, "2")); → ”12”
4. ܕ҆શͳ"MU+4ͷ໰୊఺  w ܕ҆શͳ"MU+4͸ؔ਺ܕ͕ଟ͍ͨΊɺ+BWB4DSJQU͔Βͷ৐Γ׵͕͑ࠔ೉
   w 3FBTPO.-
   1VSF4DSJQU
   &MN
   3F4DSJQU
   w ϑϩϯτΤϯυϑϨʔϜϫʔΫͷબ୒ʹ੍ݶ ݴޠ 3FBDU
   W 7VF
   W "OHVMBS
   W 4PMJE+4
   W 3FBTPO.- W W 7  1VSF4DSJQU W 7 7 7 &MN 7 7 7  3F4DSJQU 7   7
5. ܕ҆શͳ"MU+4ͷ໰୊఺  w ֤ݴޠͷ։ൃ͕௿ௐ ݴޠ (JU)VC
   4UBS (JU)VC
   "DUJWF
   QVMM
   SFRVFTUT
   
   NPOUI (JU)VC
   "DUJWF
   JTTVFT
   
   NPOUI 5ZQF4DSJQU L   3FBTPO.- L   1VSF4DSJQU L   &MN L   3F4DSJQU L   3VTU L  
6. 3VTU 8"4. Λ࢖ͬͨϑϩϯτΤϯυ։ൃͷݒ೦఺ w +BWB4DSJQU༻ϑϨʔϜϫʔΫͷ஌ࣝΛྲྀ༻Ͱ͖ͳ͍
   w +BWB4DSJQU༻ϑϨʔϜϫʔΫʹΠϯεύΠϠ͞Εͨ3VTU༻ϑϨʔϜϫʔΫ͕ଘࡏ
   w 8"4.ͱ+BWB4DSJQUͷσʔλม׵ 65'ͱ65'ͳͲ ͷΦʔόϔου
   w +T
   XFC
   GSBNFXPSLT
   CFODINBSL
   $ISPNF
   ͷ%VSBUJPOͰ͸ɺ+BWB4DSJQU༻ϑϨʔϜϫʔΫΑΓ଎͍ 3VTU༻ϑϨʔΫϫʔΫ͕ଘࡏ
   w 8"4.ԽʹΑΔσʔλαΠζͷ૿େ
   w +T
   XFC
   GSBNFXPSLT
   CFODINBSL
   $ISPNF
   ͷ4UBSUVQ
   NFUSJDTͰ͸ɺ+BWB4DSJQU༻ϑϨʔϜϫʔΫ ΑΓૣ͍3VTU༻ϑϨʔΫϫʔΫ͕ଘࡏ
   w 8"4.ԽʹΑΔ࣮ߦ࣌ʹ࢖༻͢ΔϝϞϦͷ૿େ
   w +T
   XFC
   GSBNFXPSLT
   CFODINBSL
   $ISPNF
   ͷ.FNPSZ
   BMMPDBUJPOͰɺ+BWB4DSJQU༻ϑϨʔϜϫʔΫ ΑΓ3VTU༻ϑϨʔϜϫʔΫͷํ͕࢖༻ϝϞϦ͕େ͖͍͜ͱΛ֬ೝɺվળ͕ඞཁ
7. 3VTU༻ϑϩϯτΤϯυϑϨʔϜϫʔΫ ϑϨʔϜϫʔΫ όʔδϣϯ ԿʹΠϯεύΠϠ͞Ε͔ͨ උߟ -FQUPT 7 4PMJE+4 Ծ૝%0.ෆ࢖༻ 4FSWFS
   4JEF
   3FOEFSJOH 443 ͚ͩͰͳ ͘ɺ)ZESBUJPO΋αϙʔτ 4ZDBNPSF 7 4PMJE+4 Ծ૝%0.ෆ࢖༻ 443͚ͩͰͳ͘ɺ)ZESBUJPO΋αϙʔτ :FX 7 3FBDU
   Ծ૝%0.࢖༻ 443͚ͩͰͳ͘ɺ)ZESBUJPO΋αϙʔτ %JPYVT 7 3FBDU
   Ծ૝%0.࢖༻
   TVCUSFF
   NFNPSJ[BUJPO EJPYVTXFC
   $MJFOU
   4JEF
   3FOEFSJOH
   EJPYVTMJWFWJFX
   443
   EJPYVTGVMMTUBDL
   443
   
   )ZESBUJPO *DFE 7 5IF
   &MN
   "SDIJUFDUVSF
   4UBUF
   .FTTBHFT
   7JFX
   MPHJD
   6QEBUF
   MPHJD
   &MNͰ͸.PEFM
   7JFX
   6QEBUF JDFE@XFC͸FYQFSJNFOUBM
8. 3VTU༻ϑϩϯτΤϯυϑϨʔϜϫʔΫͷΞΫςΟϏςΟ ϑϨʔϜϫʔΫ (JU)VC
   4UBS (JU)VC
   "DUJWF
   QVMM
   SFRVFTUT
   
   NPOUI (JU)VC
   "DUJWF
   JTTVFT
   
   NPOUI -FQUPT L   4ZDBNPSF L   :FX L   %JPYVT L   *DFE L   4PMJE+4 L   3FBDU L   7VF L   "OHVMBS L  
9. 4PMJE+4 +BWB4DSJQU ͷهड़ྫ import { createSignal } from "solid-js"; export default function Counter() { const [count, setCount] = createSignal(0); return ( <button onClick={() => setCount(count() + 1)}> Clicks: {count()} </button> ); }
10. -FQUPT 3VTU ͷهड़ྫ use leptos::*; #[component] pub fn Counter() -> impl IntoView { let (count, set_count) = create_signal(0); view! { <button on:click=move |_| set_count.update(|count| *count += 1)> ”Clicks: " {count} // = {move || count.get()} </button> } } pub fn main() { mount_to_body(|| view! { <Counter/> }) }
11. 3VTU 8"4. Λ࢖ͬͨϑϩϯτΤϯυ։ൃͷݒ೦఺ w +BWB4DSJQU༻ϑϨʔϜϫʔΫͷ஌ࣝΛྲྀ༻Ͱ͖ͳ͍
    w +BWB4DSJQU༻ϑϨʔϜϫʔΫʹΠϯεύΠϠ͞Εͨ3VTU༻ϑϨʔϜϫʔΫ͕ଘࡏ
    w 8"4.ͱ+BWB4DSJQUͷσʔλม׵ 65'ͱ65'ͳͲ ͷΦʔόϔου
    w +T
    XFC
    GSBNFXPSLT
    CFODINBSL
    $ISPNF
    ͷ%VSBUJPOͰ͸ɺ+BWB4DSJQU༻ϑϨʔϜϫʔΫΑΓ଎͍ 3VTU༻ϑϨʔΫϫʔΫ͕ଘࡏ
    w 8"4.ԽʹΑΔσʔλαΠζͷ૿େ
    w +T
    XFC
    GSBNFXPSLT
    CFODINBSL
    $ISPNF
    ͷ4UBSUVQ
    NFUSJDTͰ͸ɺ+BWB4DSJQU༻ϑϨʔϜϫʔΫ ΑΓૣ͍3VTU༻ϑϨʔΫϫʔΫ͕ଘࡏ
    w 8"4.ԽʹΑΔ࣮ߦ࣌ʹ࢖༻͢ΔϝϞϦͷ૿େ
    w +T
    XFC
    GSBNFXPSLT
    CFODINBSL
    $ISPNF
    ͷ.FNPSZ
    BMMPDBUJPOͰɺ+BWB4DSJQU༻ϑϨʔϜϫʔΫ ΑΓ3VTU༻ϑϨʔϜϫʔΫͷํ͕࢖༻ϝϞϦ͕େ͖͍͜ͱΛ֬ೝɺվળ͕ඞཁ
12. +T
    XFC
    GSBNFXPSLT
    CFODINBSL
    $ISPNF
     %VSBUJPO
    JO
    NJMMJTFDPOET /BNF 4PMJE+4 %JPYVT -FQUPT 7VF 4ZDBNPSF "OHVMBS &MN 3FBDU :FX DSFBUF
    SPXT          SFQMBDF
    BMM
    SPXT          QBSUJBM
    VQEBUF          TFMFDU
    SPX          TXBQ
    SPXT          SFNPWF
    SPX          DSFBUF
    NBOZ
    SPXT           BQQFOE
    SPXT
    UP
    MBSHF
    UBCMF          DMFBS
    SPXT          XFJHIUFE
    HFPNFUSJD
    NFBO         
13. 3VTU 8"4. Λ࢖ͬͨϑϩϯτΤϯυ։ൃͷݒ೦఺ w +BWB4DSJQU༻ϑϨʔϜϫʔΫͷ஌ࣝΛྲྀ༻Ͱ͖ͳ͍
    w +BWB4DSJQU༻ϑϨʔϜϫʔΫʹΠϯεύΠϠ͞Εͨ3VTU༻ϑϨʔϜϫʔΫ͕ଘࡏ
    w 8"4.ͱ+BWB4DSJQUͷσʔλม׵ 65'ͱ65'ͳͲ ͷΦʔόϔου
    w +T
    XFC
    GSBNFXPSLT
    CFODINBSL
    $ISPNF
    ͷ%VSBUJPOͰ͸ɺ+BWB4DSJQU༻ϑϨʔϜϫʔΫΑΓ଎͍ 3VTU༻ϑϨʔΫϫʔΫ͕ଘࡏ
    w 8"4.ԽʹΑΔσʔλαΠζͷ૿େ
    w +T
    XFC
    GSBNFXPSLT
    CFODINBSL
    $ISPNF
    ͷ4UBSUVQ
    NFUSJDTͰ͸ɺ+BWB4DSJQU༻ϑϨʔϜϫʔΫ ΑΓૣ͍3VTU༻ϑϨʔΫϫʔΫ͕ଘࡏ
    w 8"4.ԽʹΑΔ࣮ߦ࣌ʹ࢖༻͢ΔϝϞϦͷ૿େ
    w +T
    XFC
    GSBNFXPSLT
    CFODINBSL
    $ISPNF
    ͷ.FNPSZ
    BMMPDBUJPOͰɺ+BWB4DSJQU༻ϑϨʔϜϫʔΫ ΑΓ3VTU༻ϑϨʔϜϫʔΫͷํ͕࢖༻ϝϞϦ͕େ͖͍͜ͱΛ֬ೝɺվળ͕ඞཁ
14. +T
    XFC
    GSBNFXPSLT
    CFODINBSL
    $ISPNF
     4UBSUVQ
    NFUSJDT
    MJHIUIPVTF
    XJUI
    NPCJMF
    TJNVMBUJPO /BNF 4PMJE+4 %JPYVT -FQUPT 7VF 4ZDBN PSF "OHVMB S &MN 3FBDU :FX DPOTJTUFOUMZ
    JOUFSBDUJWF                   UPUBM
    LJMPCZUF
    XFJHIU          HFPNFUSJD
    NFBO         
15. 3VTU 8"4. Λ࢖ͬͨϑϩϯτΤϯυ։ൃͷݒ೦఺ w +BWB4DSJQU༻ϑϨʔϜϫʔΫͷ஌ࣝΛྲྀ༻Ͱ͖ͳ͍
    w +BWB4DSJQU༻ϑϨʔϜϫʔΫʹΠϯεύΠϠ͞Εͨ3VTU༻ϑϨʔϜϫʔΫ͕ଘࡏ
    w 8"4.ͱ+BWB4DSJQUͷσʔλม׵ 65'ͱ65'ͳͲ ͷΦʔόϔου
    w +T
    XFC
    GSBNFXPSLT
    CFODINBSL
    $ISPNF
    ͷ%VSBUJPOͰ͸ɺ+BWB4DSJQU༻ϑϨʔϜϫʔΫΑΓ଎͍ 3VTU༻ϑϨʔΫϫʔΫ͕ଘࡏ
    w 8"4.ԽʹΑΔσʔλαΠζͷ૿େ
    w +T
    XFC
    GSBNFXPSLT
    CFODINBSL
    $ISPNF
    ͷ4UBSUVQ
    NFUSJDTͰ͸ɺ+BWB4DSJQU༻ϑϨʔϜϫʔΫ ΑΓૣ͍3VTU༻ϑϨʔΫϫʔΫ͕ଘࡏ
    w 8"4.ԽʹΑΔ࣮ߦ࣌ʹ࢖༻͢ΔϝϞϦͷ૿େ
    w +T
    XFC
    GSBNFXPSLT
    CFODINBSL
    $ISPNF
    ͷ.FNPSZ
    BMMPDBUJPOͰɺ+BWB4DSJQU༻ϑϨʔϜϫʔΫ ΑΓ3VTU༻ϑϨʔϜϫʔΫͷํ͕࢖༻ϝϞϦ͕େ͖͍͜ͱΛ֬ೝɺվળ͕ඞཁ
16. +T
    XFC
    GSBNFXPSLT
    CFODINBSL
    $ISPNF
     .FNPSZ
    BMMPDBUJPO
    JO
    .#T /BNF 4PMJE+4 %JPYVT -FQUPT 7VF 4ZDBNP SF "OHVMBS &MN 3FBDU :FX SFBEZ
    NFNPSZ          SVO
    NFNPSZ          VQEBUF
    FWFSZ
    UI
    SPX
    GPS
    L
    SPXT          DSFBUJOHDMFBSJOH
    L
    SPXT          SVO
    NFNPSZ
    L          HFPNFUSJD
    NFBO         
18. 3VTUίʔυͷղઆ #[component] ← ҎԼͷؔ਺ʹίϯϙʔωϯτଐੑΛ෇༩͢Δଐੑ෩ϚΫϩ(Attribute-like macros) pub fn Counter() -> impl IntoView { ↑ IntoView τϨΠτ(Trait)Λ໭Γ஋ʹ͢ΔͨΊʹɺimpl IntoViewͱهड़ let (count, set_count) = create_signal(0); ↑ ଟ஋Λ୅ೖ͢ΔͨΊʹɺλϓϧ(Tuple)Λ࢖༻ view! { <button on:click=move |_| set_count.update(|count| *count += 1)> ↑ Ϋϩʔδϟ(Closure):؀ڥΛΩϟϓνϟͰ͖Δಗ໊ؔ਺ ↑ Ϋϩʔδϟͷ1ͭͷҾ਺Λ࢖༻͠ͳ͍ ↑ Ϋϩʔδϟ͸ɺ؀ڥͰ࢖༻͍ͯ͠Δ஋ͷॴ༗ݖΛڧ੍తʹୣ͏ .update()͸ɺγάφϧͷݱࡏ஋΁ͷมߋՄೳͳࢀরΛҾ਺ʹऔΔؔ਺ΛҾ਺ʹ औΓɺߋ৽͕ඞཁͳαϒεΫϥΠόʹ௨஌ ”Clicks: " {count} // = {move || count.get()} .get()͸ɺγάφϧͷݱࡏ஋ΛΫϩʔϯ͠ɺকདྷͷ஋ͷมԽΛ௥੻ </button> } }