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

by tipo159

Slide 1

Slide 1 text

UJQP 3VTUΛ࢖ͬͨܕ҆શͳϑϩϯτ Τϯυ։ൃ

Slide 2

Slide 2 text

ϓϨθϯͷ໨తͱߏ੒ w ໨త w 3VTUΛ࢖ͬͨܕ҆શͳϑϩϯτΤϯυ։ൃ͕ɺݱ࣮తʹͳͬͨ͜ͱΛ঺հ w ߏ੒ w 5ZQF4DSJQU͸ܕ҆શͰ͸ͳ͍ w ܕ҆શͳ"MU+4ͷ໰୊఺ w 3VTU 8"4. Λ࢖ͬͨϑϩϯτΤϯυ։ൃͷݒ೦఺ w 3VTU༻ϑϩϯτΤϯυϑϨʔϜϫʔΫ w +TXFCGSBNFXPSLTCFODINBSL$ISPNFͷ݁Ռ

Slide 3

Slide 3 text

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”

Slide 4

Slide 4 text

ܕ҆શͳ"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

Slide 5

Slide 5 text

ܕ҆શͳ"MU+4ͷ໰୊఺ w ֤ݴޠͷ։ൃ͕௿ௐ ݴޠ (JU)VC4UBS (JU)VC "DUJWFQVMMSFRVFTUT NPOUI (JU)VC "DUJWFJTTVFTNPOUI 5ZQF4DSJQU L 3FBTPO.- L 1VSF4DSJQU L &MN L 3F4DSJQU L 3VTU L

Slide 6

Slide 6 text

3VTU 8"4. Λ࢖ͬͨϑϩϯτΤϯυ։ൃͷݒ೦఺ w +BWB4DSJQU༻ϑϨʔϜϫʔΫͷ஌ࣝΛྲྀ༻Ͱ͖ͳ͍ w +BWB4DSJQU༻ϑϨʔϜϫʔΫʹΠϯεύΠϠ͞Εͨ3VTU༻ϑϨʔϜϫʔΫ͕ଘࡏ w 8"4.ͱ+BWB4DSJQUͷσʔλม׵ 65'ͱ65'ͳͲ ͷΦʔόϔου w +TXFCGSBNFXPSLTCFODINBSL$ISPNFͷ%VSBUJPOͰ͸ɺ+BWB4DSJQU༻ϑϨʔϜϫʔΫΑΓ଎͍ 3VTU༻ϑϨʔΫϫʔΫ͕ଘࡏ w 8"4.ԽʹΑΔσʔλαΠζͷ૿େ w +TXFCGSBNFXPSLTCFODINBSL$ISPNFͷ4UBSUVQNFUSJDTͰ͸ɺ+BWB4DSJQU༻ϑϨʔϜϫʔΫ ΑΓૣ͍3VTU༻ϑϨʔΫϫʔΫ͕ଘࡏ w 8"4.ԽʹΑΔ࣮ߦ࣌ʹ࢖༻͢ΔϝϞϦͷ૿େ w +TXFCGSBNFXPSLTCFODINBSL$ISPNFͷ.FNPSZBMMPDBUJPOͰɺ+BWB4DSJQU༻ϑϨʔϜϫʔΫ ΑΓ3VTU༻ϑϨʔϜϫʔΫͷํ͕࢖༻ϝϞϦ͕େ͖͍͜ͱΛ֬ೝɺվળ͕ඞཁ

Slide 7

Slide 7 text

3VTU༻ϑϩϯτΤϯυϑϨʔϜϫʔΫ ϑϨʔϜϫʔΫ όʔδϣϯ ԿʹΠϯεύΠϠ͞Ε͔ͨ උߟ -FQUPT 7 4PMJE+4 Ծ૝%0.ෆ࢖༻ 4FSWFS4JEF3FOEFSJOH 443 ͚ͩͰͳ ͘ɺ)ZESBUJPO΋αϙʔτ 4ZDBNPSF 7 4PMJE+4 Ծ૝%0.ෆ࢖༻ 443͚ͩͰͳ͘ɺ)ZESBUJPO΋αϙʔτ :FX 7 3FBDU Ծ૝%0.࢖༻ 443͚ͩͰͳ͘ɺ)ZESBUJPO΋αϙʔτ %JPYVT 7 3FBDU Ծ૝%0.࢖༻ TVCUSFFNFNPSJ[BUJPO EJPYVTXFC$MJFOU4JEF3FOEFSJOH EJPYVTMJWFWJFX443 EJPYVTGVMMTUBDL443)ZESBUJPO *DFE 7 5IF&MN"SDIJUFDUVSF 4UBUF .FTTBHFT 7JFXMPHJD 6QEBUFMPHJD &MNͰ͸.PEFM 7JFX 6QEBUF JDFE@XFC͸FYQFSJNFOUBM

Slide 8

Slide 8 text

3VTU༻ϑϩϯτΤϯυϑϨʔϜϫʔΫͷΞΫςΟϏςΟ ϑϨʔϜϫʔΫ (JU)VC4UBS (JU)VC "DUJWFQVMMSFRVFTUT NPOUI (JU)VC "DUJWFJTTVFTNPOUI -FQUPT L 4ZDBNPSF L :FX L %JPYVT L *DFE L 4PMJE+4 L 3FBDU L 7VF L "OHVMBS L

Slide 9

Slide 9 text

4PMJE+4 +BWB4DSJQU ͷهड़ྫ import { createSignal } from "solid-js"; export default function Counter() { const [count, setCount] = createSignal(0); return ( setCount(count() + 1)}> Clicks: {count()} ); }

Slide 10

Slide 10 text

-FQUPT 3VTU ͷهड़ྫ use leptos::*; #[component] pub fn Counter() -> impl IntoView { let (count, set_count) = create_signal(0); view! { ”Clicks: " {count} // = {move || count.get()} } } pub fn main() { mount_to_body(|| view! { }) }

Slide 11

Slide 11 text

Slide 12

Slide 12 text

+TXFCGSBNFXPSLTCFODINBSL$ISPNF %VSBUJPOJONJMMJTFDPOET /BNF 4PMJE+4 %JPYVT -FQUPT 7VF 4ZDBNPSF "OHVMBS &MN 3FBDU :FX DSFBUFSPXT SFQMBDFBMMSPXT QBSUJBMVQEBUF TFMFDUSPX TXBQSPXT SFNPWFSPX DSFBUFNBOZSPXT BQQFOESPXTUPMBSHFUBCMF DMFBSSPXT XFJHIUFEHFPNFUSJDNFBO

Slide 13

Slide 13 text

Slide 14

Slide 14 text

+TXFCGSBNFXPSLTCFODINBSL$ISPNF 4UBSUVQNFUSJDT MJHIUIPVTFXJUINPCJMFTJNVMBUJPO /BNF 4PMJE+4 %JPYVT -FQUPT 7VF 4ZDBN PSF "OHVMB S &MN 3FBDU :FX DPOTJTUFOUMZJOUFSBDUJWF UPUBMLJMPCZUFXFJHIU HFPNFUSJDNFBO

Slide 15

Slide 15 text

Slide 16

Slide 16 text

+TXFCGSBNFXPSLTCFODINBSL$ISPNF .FNPSZBMMPDBUJPOJO.#T /BNF 4PMJE+4 %JPYVT -FQUPT 7VF 4ZDBNP SF "OHVMBS &MN 3FBDU :FX SFBEZNFNPSZ SVONFNPSZ VQEBUFFWFSZUISPXGPSL SPXT DSFBUJOHDMFBSJOHLSPXT SVONFNPSZL HFPNFUSJDNFBO

Slide 17

Slide 17 text

No content

Slide 18

Slide 18 text

3VTUίʔυͷղઆ #[component] ← ҎԼͷؔ਺ʹίϯϙʔωϯτଐੑΛ෇༩͢Δଐੑ෩ϚΫϩ(Attribute-like macros) pub fn Counter() -> impl IntoView { ↑ IntoView τϨΠτ(Trait)Λ໭Γ஋ʹ͢ΔͨΊʹɺimpl IntoViewͱهड़ let (count, set_count) = create_signal(0); ↑ ଟ஋Λ୅ೖ͢ΔͨΊʹɺλϓϧ(Tuple)Λ࢖༻ view! { ↑ Ϋϩʔδϟ(Closure):؀ڥΛΩϟϓνϟͰ͖Δಗ໊ؔ਺ ↑ Ϋϩʔδϟͷ1ͭͷҾ਺Λ࢖༻͠ͳ͍ ↑ Ϋϩʔδϟ͸ɺ؀ڥͰ࢖༻͍ͯ͠Δ஋ͷॴ༗ݖΛڧ੍తʹୣ͏ .update()͸ɺγάφϧͷݱࡏ஋΁ͷมߋՄೳͳࢀরΛҾ਺ʹऔΔؔ਺ΛҾ਺ʹ औΓɺߋ৽͕ඞཁͳαϒεΫϥΠόʹ௨஌ ”Clicks: " {count} // = {move || count.get()} .get()͸ɺγάφϧͷݱࡏ஋ΛΫϩʔϯ͠ɺকདྷͷ஋ͷมԽΛ௥੻ } }