Svelte採用記 - 位置情報と可視化の会社で、全社の標準技術スタックに選ぶまで / Svelte Japan Online Meetup #3

by Sorami Hisamoto

Slide 1

Slide 1 text

SVELTE採用記 Ґஔ৘ใͱՄࢹԽͷձࣾͰɺ શࣾͷඪ४ٕज़ελοΫʹબͿ·Ͱ TPSBNJ 4WFMUF+BQBO0OMJOF.FFUVQ 画像: DreamStudio (SDXL v4.6) で⽣成

Slide 2

Slide 2 text

@sorami 久本空海ひさもとそらみ ๏ ιϑτ΢ΣΞɾΤϯδχΞ ๏ Ґஔ৘ใՄࢹԽूஂʮ.*&36/&ʯॴଐ ๏ ೥͔Β๺ւಓࡏॅ SVELTE JAPAN のみなさん、こんばんは！

Slide 3

Slide 3 text

本日の札幌

Slide 4

Slide 4 text

https://tenki.jp/forecaster/deskpart/D6DE/6F/DE/DGGG6.html

Slide 5

Slide 5 text

https://www.stv.jp/weather/tanki/index.html 本日 5/24金の北海道出典: STV札幌テレビきょう・あすの予報

Slide 6

Slide 6 text

No content

Slide 7

Slide 7 text

https://svelte.dev/

Slide 8

Slide 8 text

MIE UNE社では全社の標準技術スタックとして SVELTEを採用

Slide 9

Slide 9 text

๏ もともとは主に Vue.js 2 → Vue.js 3 ๏ 2023年ごろから、Svelteを一部で導入 ๏ 2024年に、Svelteを正式に全社採用

Slide 10

Slide 10 text

以降、特別な理由がない限り全ての新規プロジェクトが SVELTE

Slide 11

Slide 11 text

๏ 4WFMUFͱ.*&36/& 4WFMUFͱࢲ ๏ .*&36/&Ͱ4WFMUFΛ࠾༻͢Δ·Ͱ ๏ 4WFMUFͱՄࢹԽ ๏ ࠷ۙͷ՝୊ ๏ 4WFMUFΛֶͿʹ͸ ๏ 4WFMUFͷࢥ૝ 発表のアウトライン

Slide 12

Slide 12 text

MIERUNE みえるね

Slide 13

Slide 13 text

๏ Ґஔ৘ใΛѻ͏ɺՄࢹԽͷઐ໳ूஂ ๏ ೥ઃཱ ๺ւಓ͕ڌ఺ ๏ ໊೥݄ શࠃͷϑϧϦϞʔτϝϯόʔؚΉ

Slide 14

Slide 14 text

https://ds.yahoo.co.jp/ 人流データ可視化 Yahoo! JAPAN マインクラフト札幌市, 高松市, etc. AIST 3DDB Client 産総研 www.digiarc.aist.go.jp/team/gsvrt/information/aist-Nddb-client/ https://takamatsu-mymachi.jp/ Project PLATEAU 国土交通省 https://github.com/Project-PLATEAU/mapengine-survey

Slide 15

Slide 15 text

オープンソースのコミュニティから生まれた会社

Slide 16

Slide 16 text

https://internet.watch.impress.co.jp/docs/special/wf_hokkaido/4DGD4GF.html ๏ ϧʔπ͸ʮ'044()PLLBJEPʯ ๏ ஍ཧۭؒ৘ใͷ044ܥΠϕϯτ ๏ ˠӡӦʹؔΘ໊͍ͬͯͨͰىۀ

Slide 17

Slide 17 text

IUUQTXXXNJFSVOFDPKQBCPVUVT 8F—044 ࢿۚఏڙ ӡӦҕһձࢀՃ ࣗࣾίʔυެ։

Slide 18

Slide 18 text

IUUQTWVFGFTKQ

Slide 19

Slide 19 text

シルバースポンサー

Slide 20

Slide 20 text

No content

Slide 21

Slide 21 text

No content

Slide 22

Slide 22 text

X&WBO:PV ! ! ! !

Slide 23

Slide 23 text

SVELTE と MIE UNE

Slide 24

Slide 24 text

公開事例をいくつか紹介 ...

Slide 25

Slide 25 text

文化財総覧WebGIS 2024年5月に全面改訂, Vue.js → Svelteへ https://heritagemap.nabunken.go.jp/ 奈良文化財研究所

Slide 26

Slide 26 text

https://data.wingarc.com/localdxlab-DV-nara-EWVXN

Slide 27

Slide 27 text

国土交通省 PLATEAU GIS Converter CityGML形式の3D都市モデルを、一般的なデータ形式に変換するツール。国交省「Project PLATEAU」の一環で開発、OSSとして公開 https://github.com/MIERUNE/plateau-gis-converter Svelte, Tauri, Rust

Slide 28

Slide 28 text

https://speakerdeck.com/nokonoko4D6N/rusttegisnaoss

Slide 29

Slide 29 text

自社プロダクトれきちず MIERUNEのデザイナー @chizutodesign が個人開発していたものを、会社で継承江戸時代の地図を、現代風のWebサービスへ https://rekichizu.jp/

Slide 30

Slide 30 text

ʰ஍ਤͱ͔࿏ઢਤͱ͔!DIJ[VUPEFTJHOʱ ఱເਓ https://chizutodesign.com/

Slide 31

Slide 31 text

twitter.com/MIERUNE_inc/status/4XV4NF4E6NXEEXENWWX 地域メッシュ見えるくん社内ハッカソンで開発したツール https://mesh.mierune.io/ 自社プロダクト

Slide 32

Slide 32 text

SVELTE と私

Slide 33

Slide 33 text

https://speakerdeck.com/sorami/sacss-season-D-vol-D

Slide 34

Slide 34 text

もともと、 NLP 自然言語処理をやっていた ... 044ܗଶૉղੳث4VEBDIJ ϫʔΫεಙౡਓ޻஌ೳ/-1ݚڀॴ https://zenn.dev/sorami/articles/cVaF6W666fd4fbd4cfVG ຽࣄ൑ܾΦʔϓϯσʔλ -FHBMTDBQF ຋༁ϞσϧͷϓϥΠόγʔ +PIOT)PQLJOT6OJWFSTJUZ https://note.com/legalscape/n/nfWNE4VE6deaa Hisamoto et al., TACL D6D6

Slide 35

Slide 35 text

ݴޠ ஍ਤ ՄࢹԽ

Slide 36

Slide 36 text

ݴޠ ஍ਤ ՄࢹԽ 「思考のための道具」に興味がある ๏ ʮݴޠʯ΋ʮ஍ਤʯ΋ɺࢥߟͷͨΊͷಓ۩ ๏ ਓؒͷೝ஌͸ɺͦͷਓମߏ଄ʹ੍໿͞ΕΔ ๏ ͦΕͰ΋ɺಓ۩΍֓೦Ͱɺ ͜Ε·Ͱߟ͑ΒΕͳ͔ͬͨ͜ͱΛࢥߟͰ͖Δ

Slide 37

Slide 37 text

˞ݱࡏ͸׆ಈٳࢭ https://data-viz-manabiba.visualizing.jp データ可視化のコミュニティで、MIERUNEを知った

Slide 38

Slide 38 text

https://speakerdeck.com/sorami/mierune-meetup-mini-number-64 MIERUNEの勉強会で発表してみたら、それが縁で入社へ

Slide 39

Slide 39 text

https://speakerdeck.com/sorami/mierune-meetup-mini-number-64 MIERUNEの勉強会で発表してみたら、それが縁で入社へ

Slide 40

Slide 40 text

https://speakerdeck.com/sorami/mierune-meetup-mini-number-64 MIERUNEの勉強会で発表してみたら、それが縁で入社へある意味、 SVELTE転職

Slide 41

Slide 41 text

それから、個人開発は全てSvelte （ブログはAstro）

Slide 42

Slide 42 text

MIE UNE で SVELTE を採用するまで

Slide 43

Slide 43 text

https://www.chooseyourframework.dev/

Slide 44

Slide 44 text

https://www.chooseyourframework.dev/

Slide 45

Slide 45 text

https://twitter.com/ﬂaviocopes/status/4XN6GVFV44GWE4GVDVV

Slide 46

Slide 46 text

https://github.com/svelte-jp/japanese-svelte-companies

Slide 47

Slide 47 text

もともとは、主に Vue.js だった ๏ ೥தࠒ·Ͱ͸ɺ7VF ๏ ͦͷޙɺ7VF΁ 4DSJQUTFUVQߏจ $PNQPTJUJPO"1* ๏ /VYUKT͸࠾༻͍ͯ͠ͳ͍

Slide 48

Slide 48 text

なぜ、 eactではないか？ ๏ 8FC஍ਤϥΠϒϥϦ .BQ-JCSF.BQCPY(-+4 ๏ ͦͷ஍ਤΤϯδϯࣗମ͕ɺ3FBDUͷੈքͰ͸෭࡞༻ ख͕͔͔ؒΔɺ3FBDUͷྑ͕͞ग़ͤͳ͍ ๏ 3FBDU.BQ(-ͱ͍͏ϥούʔ΋͋Δ͕ɺ ৄࡉͳͱ͜ΖʹखΛೖΕΔͱ͖ɺͭΒ͘ͳΔՄೳੑ

Slide 49

Slide 49 text

MIE UNEの特徴 ๏ ஍ਤ΍Ґஔ৘ใʹ਌͠ΜͰ͖ͨਓ͕ଟ͍ ੜଶֶ ஍ཧֶ ਫ࢈ֶ ݐઃίϯαϧ ೶ۀ੓ࡦ ෆಈ࢈ؑఆ ؾ৅ మಓ ఉࢣ ࣗ࡞஍ਤ ๏ υϝΠϯ஌ࣝɺ࡞Γ͍ͨ΋ͷɺղ͖͍ͨ՝୊͕͋Δ ๏ ͕ͩɺϑϩϯτΤϯυ։ൃʹशख़͍ͯ͠ΔΘ͚Ͱ͸ͳ͍

Slide 50

Slide 50 text

https://cameron.rs/blog/svelte-is-better/

Slide 51

Slide 51 text

https://cameron.rs/blog/svelte-is-better/ ๏ チュートリアル（後述） ๏ シンプルさ「フロントエンド開発を学ぶには、 eactよりSvelteが良い」

Slide 52

Slide 52 text

No content

Slide 53

Slide 53 text

https://component-party.dev/

Slide 54

Slide 54 text

あるメンバーのコメント Svelteなら、 “フロントエンド出来そう” と思えた

Slide 55

Slide 55 text

๏ ೥຤͝Ζ͔Βɺࣾ಺ͷษڧձͳͲͰڞ༗ ๏ ೥݄ɺ4WFMUF,JUWϦϦʔε ๏ ϋοΧιϯ΍1P$ϓϩδΣΫτͳͲͰར༻ ๏ େن໛Ҋ݅ʢ7VFʣͷϦϓϨʔε࣌ʹ4WFMUFΛ࠾༻ ๏ ೥ɺશࣾͷඪ४ٕज़ελοΫ΁੍ఆ

Slide 56

Slide 56 text

Svelteが “絶対” ではない ๏ ձࣾͷ΢ΣϒαΠτ͸ࠓͰ΋/FYUKT ๏ ՄࢹԽϥΠϒϥϦEFDLHM͸ɺ3FBDUͱ਌࿨ੑ͕ඇৗʹڧ͍ ˠͦͷࡍʹ͸ɺ/FYUKTͳͲΛ࠾༻͢Δ͜ͱ͕ଟ͍ ๏ ஍ਤαʔϏεͳͲͰ͸ͳ͘ɺ੩తίϯςϯπ͕ओͳ৔߹͸ ݸਓ։ൃͰͷܦݧ͔Β΋"TUSP͕ඇৗʹ༏Ε͍ͯΔͱߟ͑Δ

Slide 57

Slide 57 text

SVELTE と可視化

Slide 58

Slide 58 text

https://www.youtube.com/watch?v=CenLcPGBwLQ

Slide 59

Slide 59 text

https://www.youtube.com/watch?v=CenLcPGBwLQ Svelteは、データ可視化の界隈で広く受容されている Svelteの作者 Rich Harris は、もともと The New York Times のグラフィック・エディターだった

Slide 60

Slide 60 text

https://www.youtube.com/watch?v=CenLcPGBwLQ ジャーナリズムの現場で求められる技術例えば、大規模なデータを扱い、動かす。 → パフォーマンスが重要現場の実践者たちは、実現したいことのための手段としてJavaScript に触れている。そのため、シンプルで、馴染みのあるものが良い

Slide 61

Slide 61 text

アニメーションシンプルな仕組み、豊富な標準機能 https://svelte.dev/docs/ https://svelte.dev/examples/easing

Slide 62

Slide 62 text

Svelte Summit https://www.youtube.com/watch?v=xtTrcCpDaVU https://www.youtube.com/watch?v=FfocjEPJUJs Matthias Stahl, ドイツ『デア・シュピーゲル』誌 SVELTE SUMMIT 2020 SVELTE SUMMIT SPRING (2022)

Slide 63

Slide 63 text

The Pudding 可視化メディアのフロントランナー - Svelteを積極的に利用 https://github.com/the-pudding https://pudding.cool/

Slide 64

Slide 64 text

https://reuters-graphics.github.io/example_svelte-graph-patterns/ Svelte Patterns データ可視化パターン集 - ロイター通信

Slide 65

Slide 65 text

https://layercake.graphics/ Layer Cake グラフィック・フレームワーク - Michael Keller, NYTimes

Slide 66

Slide 66 text

Threlte SvelteとThree.jsをもとにした3Dフレームワーク - Grischa Erbe https://threlte.xyz/ ๏ 宣言的な形式で、 Three.jsにある全ての機能を利用可能 ๏ 物理エンジンの apierや、アニメーションライブラリTheatre.jsも統合 ๏ lTFを変換するツールや、 V /A のための機能も用意

Slide 67

Slide 67 text

Slide 68

Slide 68 text

UIライブラリの選定 ๏ ·ͩʮίϨʯͱ͍͏஌ݟ͕ͳ͍ௐࠪத 4LFMFUPO6*΍.FMU6*ɺྑͦ͞͏ɻ TIBEDOTWFMUF͸Ͳ͏ͩΖ͏ʁ ๏ ݱঢ়ɺ5BJMXJOE$446OP$44ͷΈͰશ࣮ͯ૷ 5BJMXJOE6*΋ߪೖͯ͠࢖͍ͬͯΔ

Slide 69

Slide 69 text

Svelte 5 への移行 ๏ ه๏΍࢓૊Έ͕େ͖͘มΘΔ෦෼͕͋Δ 3VOFT PQUJO TOJQQFUT ΠϕϯτϋϯυϦϯά ๏ ೥݄ʹ3FMFBTF$BOEJEBUFొ৔ ๏ ͜Ε͔ΒֶͿਓ͸ɺ࠷ॳ͔ΒʮʯͰ΋͍͍ʁ ๏ ͱΓ͋͑ͣ ɺ·ͣݸਓతʹࢼͯ͠Έ͍ͯΔ

Slide 70

Slide 70 text

SVELTE を学ぶには

Slide 71

Slide 71 text

https://learn.svelte.dev/tutorial/deferred-transitions 公式チュートリアル！

Slide 72

Slide 72 text

公式チュートリアル！ https://learn.svelte.dev/tutorial/deferred-transitions ๏ 小さなステップごとのコンテンツ ๏ 自分で動かしながら学べる ๏ 必要なのはブラウザだけとても注力されており、よくできている

Slide 73

Slide 73 text

https://www.youtube.com/watch?v=RwBolXXVPis

Slide 74

Slide 74 text

https://www.youtube.com/watch?v=RwBolXXVPis ๏ 安全第一 ”マトリックス” ( 999) ๏ 繰り返す ”ベスト・キッド” ( 984) ๏ 救済する ”スター・ウォーズエピソード5/帝国の逆襲” ( 980) ๏ 学生たちはカオス ”キンダガートン・コップ” ( 990) ๏ 相手の立場に合わせて接する ”天使にラブ・ソングを2 ” ( 993) 映画から学ぶ、教え方の原則

Slide 75

Slide 75 text

.*&36/&Ͱ͸ɺΈΜͳͰ ͻͨ͢ΒνϡʔτϦΞϧΛ΍Δ ʮ4WFMUF΋͘΋͘ձʯΛ։࠵ͨ͠

Slide 76

Slide 76 text

https://frontendmasters.com/courses/svelte-vD/ https://frontendmasters.com/courses/sveltekit/ Frontend Masters の Svelte/SvelteKitコース Svelteの作者Rich Harrisが自ら、公式チュートリアルをもとに解説。コース最後の「プロジェクト実装」が特に面白い！

Slide 77

Slide 77 text

SVELTE の思想

Slide 78

Slide 78 text

https://www.youtube.com/watch?v=zXn4XajJpCo “ If I were you, I wouldn’t start from here ”

Slide 79

Slide 79 text

https://ja.wikipedia.org/wiki/XY問題

Slide 80

Slide 80 text

https://www.youtube.com/watch?v=zXn4XajJpCo

Slide 81

Slide 81 text

https://www.youtube.com/watch?v=zXn4XajJpCo 根本的な問題は、Web開発が難しすぎること。 Svelteは、より多くの人々がリッチでインタラクティブなWebアプリを作れるよう、もう少し簡単に、扱いやすくする試みだ。 “The fundamental problem is that the web development is too hard. Svelte is an attempt to make it a little bit easier, to make it a little bit more tractable for a wider group of people to build rich, interactive web applications.”

Slide 82

Slide 82 text

https://www.youtube.com/watch?v=zXn4XajJpCo 多くの人々は、率直に言って、フロントエンド業界のたわごとに付き合っている暇はない。 “A lot of people candidly just don’t have time for the front-end industry’s bullshit.”

Slide 83

Slide 83 text

https://www.youtube.com/watch?v=kMlkCYLVqo6

Slide 84

Slide 84 text

https://www.youtube.com/watch?v=kMlkCYLVqo6 “Svelte Origins” by OfferZen SVELTEのドキュメンタリー映画

Slide 85

Slide 85 text

https://www.youtube.com/watch?v=kMlkCYLVqo6 “We would rather have a thing that a small number of people love than a thing a large number of people tolerate.” 多くの人々が耐えながら使うものより、少数の人々に愛されるものを。 - Rich Harris, creator of Svelte

Slide 86

Slide 86 text

SVELTE採用記 Ґஔ৘ใͱՄࢹԽͷձࣾͰɺ શࣾͷඪ४ٕज़ελοΫʹબͿ·Ͱ TPSBNJ 4WFMUF+BQBO0OMJOF.FFUVQ

Slide 87

Slide 87 text

We are hirin カジュアル面談やってます www.mierune.co.jp/careers