Upgrade to Pro
— share decks privately, control downloads, hide ads and more …
Speaker Deck
Features
Speaker Deck
PRO
Sign in
Sign up for free
Search
Search
Svelte採用記 - 位置情報と可視化の会社で、全社の標準技術スタックに選ぶまで / Sve...
Search
Sorami Hisamoto
May 24, 2024
Programming
2
420
Svelte採用記 - 位置情報と可視化の会社で、全社の標準技術スタックに選ぶまで / Svelte Japan Online Meetup #3
https://svelte-jp.connpass.com/event/315825/
Sorami Hisamoto
May 24, 2024
Tweet
Share
More Decks by Sorami Hisamoto
See All by Sorami Hisamoto
データ可視化をやりたくて北海道におひっこし / TechRAMEN 2024 Conference
sorami
1
590
「スクローリーテリング」から考えるジューシーなメディア / Data Visualization Japan Meetup 2023
sorami
1
290
AIST 3DDB Client: an open-source web application for the 3D database / FOSS4G ASIA 2023
sorami
0
450
数々の多様性
sorami
1
550
Vue.jsと3D可視化 - 産総研のOSS「AIST 3DDB Client」を例に / Vue Fes Japan 2023
sorami
2
1.4k
カクトビック数字 - 人間と文化にあわせた多様な表現の可能性 / Kaktovik Numerals
sorami
0
580
AIST 3DDB Client: 産総研3DデータベースのためのオープンソースWebアプリ / FOSS4G 2023 Japan@FUKUI
sorami
0
620
データ可視化をやりたくて北海道に移住した話 / SaCSS Season 2 Vol. 2
sorami
1
610
めくるめくスクロールとデータ可視化の世界 - 「スクローリーテリング」ってなに? / MIERUNE BBQ #02
sorami
1
570
Other Decks in Programming
See All in Programming
座談会 「Strict ConcurrencyとSwift 6が開く新時代: 私たちはどう生きるか?」
shiz
4
2.9k
Meet BrowserEngineKit
swiftty
0
190
長期運用プロダクトの開発速度を維持し続けるためのリファクタリング実践例
wataruss
8
2.5k
複雑さに立ち向かうための ソフトウェア開発入門
shiz
2
580
REXML改善のその後
naitoh
0
150
LangChainの現在とv0.3にむけて
os1ma
3
650
現代のVueとTypeScript - 型安全の活用術
minako__ph
4
3.1k
フロントエンドカンファレンス北海道2024 『小規模サイトでも使えるVite 〜HTMLコーディングをよりスマートに〜』長谷川広武(ハム)
h2ham
1
2.5k
dRuby 入門者によるあなたの身近にあるdRuby 入門
makicamel
4
340
仮想ファイルシステムを導入して開発環境のストレージ課題を解消する
segadevtech
2
390
初めてのiOS関連GitHub ActionsをMarketplaceに公開するまでの実録
konifar
3
200
LangGraphでのHuman-in-the-Loopの実装
os1ma
3
550
Featured
See All Featured
10 Git Anti Patterns You Should be Aware of
lemiorhan
653
58k
Why You Should Never Use an ORM
jnunemaker
PRO
53
8.9k
Agile that works and the tools we love
rasmusluckow
327
20k
4 Signs Your Business is Dying
shpigford
179
21k
Building Adaptive Systems
keathley
36
2.1k
How to Create Impact in a Changing Tech Landscape [PerfNow 2023]
tammyeverts
42
2k
No one is an island. Learnings from fostering a developers community.
thoeni
18
2.9k
Easily Structure & Communicate Ideas using Wireframe
afnizarnur
190
16k
RailsConf & Balkan Ruby 2019: The Past, Present, and Future of Rails at GitHub
eileencodes
131
32k
Code Reviewing Like a Champion
maltzj
518
39k
Atom: Resistance is Futile
akmur
261
25k
Making the Leap to Tech Lead
cromwellryan
128
8.8k
Transcript
SVELTE採用記 ҐஔใͱՄࢹԽͷձࣾͰɺ શࣾͷඪ४ٕज़ελοΫʹબͿ·Ͱ TPSBNJ 4WFMUF+BQBO0OMJOF.FFUVQ 画像: DreamStudio (SDXL v4.6)
で⽣成
@sorami 久本空海 ひさもとそらみ ๏ ιϑτΣΞɾΤϯδχΞ ๏ ҐஔใՄࢹԽूஂʮ.*&36/&ʯॴଐ ๏ ͔Βւಓࡏॅ SVELTE
JAPAN のみなさん、こんばんは!
本日の札幌
https://tenki.jp/forecaster/deskpart/D6DE/6F/DE/DGGG6.html
https://www.stv.jp/weather/tanki/index.html 本日 5/24金 の北海道 出典: STV札幌テレビ きょう・あすの予報
None
https://svelte.dev/
MIE UNE社では 全社の 標準技術スタックとして SVELTEを採用
๏ もともとは主に Vue.js 2 → Vue.js 3 ๏ 2023年ごろから、Svelteを一部で導入 ๏
2024年に、Svelteを正式に全社採用
以降、特別な理由がない限り 全ての新規プロジェクトが SVELTE
๏ 4WFMUFͱ.*&36/& 4WFMUFͱࢲ ๏ .*&36/&Ͱ4WFMUFΛ࠾༻͢Δ·Ͱ ๏ 4WFMUFͱՄࢹԽ ๏ ࠷ۙͷ՝ ๏
4WFMUFΛֶͿʹ ๏ 4WFMUFͷࢥ 発表のアウトライン
MIERUNE み え る ね
๏ ҐஔใΛѻ͏ɺՄࢹԽͷઐूஂ ๏ ઃཱ ւಓ͕ڌ ๏ ໊݄ શࠃͷϑϧϦϞʔτϝϯόʔؚΉ
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
オープンソースのコミュニティ から 生まれた会社
https://internet.watch.impress.co.jp/docs/special/wf_hokkaido/4DGD4GF.html ๏ ϧʔπʮ'044()PLLBJEPʯ ๏ ཧۭؒใͷ044ܥΠϕϯτ ๏ ˠӡӦʹؔΘ໊͍ͬͯͨͰىۀ
IUUQTXXXNJFSVOFDPKQBCPVUVT 8F—044 ࢿۚఏڙ ӡӦҕһձࢀՃ ࣗࣾίʔυެ։
IUUQTWVFGFTKQ
シルバースポンサー
None
None
X&WBO:PV ! ! ! !
SVELTE と MIE UNE
公開事例を いくつか紹介 ...
文化財総覧WebGIS 2024年5月に全面改訂, Vue.js → Svelteへ https://heritagemap.nabunken.go.jp/ 奈 良 文 化
財 研 究 所
https://data.wingarc.com/localdxlab-DV-nara-EWVXN
国 土 交 通 省 PLATEAU GIS Converter CityGML形式の3D都市モデルを、一般的なデータ形式に変換するツール。 国交省「Project
PLATEAU」の一環で開発、OSSとして公開 https://github.com/MIERUNE/plateau-gis-converter Svelte, Tauri, Rust
https://speakerdeck.com/nokonoko4D6N/rusttegisnaoss
自 社 プ ロ ダ ク ト れきちず MIERUNEのデザイナー @chizutodesign
が個人開発していたものを、会社で継承 江戸時代の地図を、現代風のWebサービスへ https://rekichizu.jp/
ʰਤͱ͔࿏ઢਤͱ͔!DIJ[VUPEFTJHOʱ ఱເਓ https://chizutodesign.com/
twitter.com/MIERUNE_inc/status/4XV4NF4E6NXEEXENWWX 地域メッシュ見えるくん 社内ハッカソンで開発したツール https://mesh.mierune.io/ 自 社 プ ロ ダ ク
ト
SVELTE と 私
https://speakerdeck.com/sorami/sacss-season-D-vol-D
もともと、 NLP 自然言語処理 をやっていた ... 044ܗଶૉղੳث4VEBDIJ ϫʔΫεಙౡਓೳ/-1ݚڀॴ https://zenn.dev/sorami/articles/cVaF6W666fd4fbd4cfVG ຽࣄܾΦʔϓϯσʔλ -FHBMTDBQF
༁ϞσϧͷϓϥΠόγʔ +PIOT)PQLJOT6OJWFSTJUZ https://note.com/legalscape/n/nfWNE4VE6deaa Hisamoto et al., TACL D6D6
ݴޠ ਤ ՄࢹԽ
ݴޠ ਤ ՄࢹԽ 「思考のための道具」に興味がある ๏ ʮݴޠʯʮਤʯɺࢥߟͷͨΊͷಓ۩ ๏ ਓؒͷೝɺͦͷਓମߏʹ੍͞ΕΔ ๏ ͦΕͰɺಓ۩֓೦Ͱɺ
͜Ε·Ͱߟ͑ΒΕͳ͔ͬͨ͜ͱΛࢥߟͰ͖Δ
˞ݱࡏ׆ಈٳࢭ https://data-viz-manabiba.visualizing.jp データ可視化のコミュニティで、MIERUNEを知った
https://speakerdeck.com/sorami/mierune-meetup-mini-number-64 MIERUNEの勉強会で発表してみたら、それが縁で入社へ
https://speakerdeck.com/sorami/mierune-meetup-mini-number-64 MIERUNEの勉強会で発表してみたら、それが縁で入社へ
https://speakerdeck.com/sorami/mierune-meetup-mini-number-64 MIERUNEの勉強会で発表してみたら、それが縁で入社へ ある意味、 SVELTE転職
それから、個人開発は全てSvelte (ブログはAstro)
MIE UNE で SVELTE を 採用 するまで
https://www.chooseyourframework.dev/
https://www.chooseyourframework.dev/
https://twitter.com/flaviocopes/status/4XN6GVFV44GWE4GVDVV
https://github.com/svelte-jp/japanese-svelte-companies
もともとは、主に Vue.js だった ๏ தࠒ·Ͱɺ7VF ๏ ͦͷޙɺ7VF 4DSJQUTFUVQߏจ $PNQPTJUJPO"1* ๏
/VYUKT࠾༻͍ͯ͠ͳ͍
なぜ、 eactではないか? ๏ 8FCਤϥΠϒϥϦ .BQ-JCSF.BQCPY(-+4 ๏ ͦͷਤΤϯδϯࣗମ͕ɺ3FBDUͷੈքͰ෭࡞༻ ख͕͔͔ؒΔɺ3FBDUͷྑ͕͞ग़ͤͳ͍ ๏ 3FBDU.BQ(-ͱ͍͏ϥούʔ͋Δ͕ɺ
ৄࡉͳͱ͜ΖʹखΛೖΕΔͱ͖ɺͭΒ͘ͳΔՄೳੑ
MIE UNEの特徴 ๏ ਤҐஔใʹ͠ΜͰ͖ͨਓ͕ଟ͍ ੜଶֶ ཧֶ ਫ࢈ֶ ݐઃίϯαϧ ۀࡦ ෆಈ࢈ؑఆ
ؾ మಓ ఉࢣ ࣗ࡞ਤ ๏ υϝΠϯࣝɺ࡞Γ͍ͨͷɺղ͖͍ͨ՝͕͋Δ ๏ ͕ͩɺϑϩϯτΤϯυ։ൃʹशख़͍ͯ͠ΔΘ͚Ͱͳ͍
https://cameron.rs/blog/svelte-is-better/
https://cameron.rs/blog/svelte-is-better/ ๏ チュートリアル(後述) ๏ シンプルさ 「フロントエンド開発を学ぶには、 eactよりSvelteが良い」
None
https://component-party.dev/
あるメンバーのコメント Svelteなら、 “フロントエンド出来そう” と思えた
๏ ͝Ζ͔ΒɺࣾͷษڧձͳͲͰڞ༗ ๏ ݄ɺ4WFMUF,JUWϦϦʔε ๏ ϋοΧιϯ1P$ϓϩδΣΫτͳͲͰར༻ ๏ େنҊ݅ʢ7VFʣͷϦϓϨʔε࣌ʹ4WFMUFΛ࠾༻ ๏ ɺશࣾͷඪ४ٕज़ελοΫ੍ఆ
Svelteが “絶対” ではない ๏ ձࣾͷΣϒαΠτࠓͰ/FYUKT ๏ ՄࢹԽϥΠϒϥϦEFDLHMɺ3FBDUͱੑ͕ඇৗʹڧ͍ ˠͦͷࡍʹɺ/FYUKTͳͲΛ࠾༻͢Δ͜ͱ͕ଟ͍ ๏ ਤαʔϏεͳͲͰͳ͘ɺ੩తίϯςϯπ͕ओͳ߹
ݸਓ։ൃͰͷܦݧ͔Β"TUSP͕ඇৗʹ༏Ε͍ͯΔͱߟ͑Δ
SVELTE と 可視化
https://www.youtube.com/watch?v=CenLcPGBwLQ
https://www.youtube.com/watch?v=CenLcPGBwLQ Svelteは、データ可視化の界隈で広く受容されている Svelteの作者 Rich Harris は、もともと The New York Times
の グラフィック・エディターだった
https://www.youtube.com/watch?v=CenLcPGBwLQ ジャーナリズムの現場で求められる技術 例えば、大規模なデータを扱い、動かす。 → パフォーマンスが重要 現場の実践者たちは、実現したいことのための 手段としてJavaScript に触れている。 そのため、シンプルで、馴染みのあるものが良い
アニメーション シンプルな仕組み、豊富な標準機能 https://svelte.dev/docs/ https://svelte.dev/examples/easing
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)
The Pudding 可視化メディアのフロントランナー - Svelteを積極的に利用 https://github.com/the-pudding https://pudding.cool/
https://reuters-graphics.github.io/example_svelte-graph-patterns/ Svelte Patterns データ可視化パターン集 - ロイター通信
https://layercake.graphics/ Layer Cake グラフィック・フレームワーク - Michael Keller, NYTimes
Threlte SvelteとThree.jsをもとにした3Dフレームワーク - Grischa Erbe https://threlte.xyz/ ๏ 宣言的な形式で、 Three.jsにある全ての機能を利用可能 ๏
物理エンジンの apierや、 アニメーションライブラリTheatre.jsも統合 ๏ lTFを変換するツールや、 V /A のための機能も用意
最近 の 課題
UIライブラリの選定 ๏ ·ͩʮίϨʯͱ͍͏ݟ͕ͳ͍ௐࠪத 4LFMFUPO6*.FMU6*ɺྑͦ͞͏ɻ TIBEDOTWFMUFͲ͏ͩΖ͏ʁ ๏ ݱঢ়ɺ5BJMXJOE$446OP$44ͷΈͰશ࣮ͯ 5BJMXJOE6*ߪೖ͍ͯͬͯ͠Δ
Svelte 5 への移行 ๏ ه๏Έ͕େ͖͘มΘΔ෦͕͋Δ 3VOFT PQUJO TOJQQFUT ΠϕϯτϋϯυϦϯά
๏ ݄ʹ3FMFBTF$BOEJEBUFొ ๏ ͜Ε͔ΒֶͿਓɺ࠷ॳ͔ΒʮʯͰ͍͍ʁ ๏ ͱΓ͋͑ͣ ɺ·ͣݸਓతʹࢼͯ͠Έ͍ͯΔ
SVELTE を 学ぶ には
https://learn.svelte.dev/tutorial/deferred-transitions 公式チュートリアル!
公式チュートリアル! https://learn.svelte.dev/tutorial/deferred-transitions ๏ 小さなステップごとのコンテンツ ๏ 自分で動かしながら学べる ๏ 必要なのはブラウザだけ とても注力されており、よくできている
https://www.youtube.com/watch?v=RwBolXXVPis
https://www.youtube.com/watch?v=RwBolXXVPis ๏ 安全第一 ”マトリックス” ( 999) ๏ 繰り返す ”ベスト・キッド” (
984) ๏ 救済する ”スター・ウォーズ エピソード5/帝国の逆襲” ( 980) ๏ 学生たちはカオス ”キンダガートン・コップ” ( 990) ๏ 相手の立場に合わせて接する ”天使にラブ・ソングを2 ” ( 993) 映画から学ぶ、教え方の原則
.*&36/&ͰɺΈΜͳͰ ͻͨ͢ΒνϡʔτϦΞϧΛΔ ʮ4WFMUF͘͘ձʯΛ։࠵ͨ͠
https://frontendmasters.com/courses/svelte-vD/ https://frontendmasters.com/courses/sveltekit/ Frontend Masters の Svelte/SvelteKitコース Svelteの作者Rich Harrisが自ら、公式チュートリアルをもとに解説。 コース最後の「プロジェクト実装」が特に面白い!
SVELTE の 思想
https://www.youtube.com/watch?v=zXn4XajJpCo “ If I were you, I wouldn’t start from
here ”
https://ja.wikipedia.org/wiki/XY問題
https://www.youtube.com/watch?v=zXn4XajJpCo
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.”
https://www.youtube.com/watch?v=zXn4XajJpCo 多くの人々は、率直に言って、 フロントエンド業界のたわごとに 付き合っている暇はない。 “A lot of people candidly just
don’t have time for the front-end industry’s bullshit.”
https://www.youtube.com/watch?v=kMlkCYLVqo6
https://www.youtube.com/watch?v=kMlkCYLVqo6 “Svelte Origins” by OfferZen SVELTEのドキュメンタリー映画
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
SVELTE採用記 ҐஔใͱՄࢹԽͷձࣾͰɺ શࣾͷඪ४ٕज़ελοΫʹબͿ·Ͱ TPSBNJ 4WFMUF+BQBO0OMJOF.FFUVQ
We are hirin カジュアル面談やってます www.mierune.co.jp/careers