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採用記 - 位置情報と可視化の会社で、全社の標準技術スタックに選ぶまで / Svelte Japan Online Meetup #3
Search
Sorami Hisamoto
May 24, 2024
Programming
2
350
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
「スクローリーテリング」から考えるジューシーなメディア / Data Visualization Japan Meetup 2023
sorami
1
240
AIST 3DDB Client: an open-source web application for the 3D database / FOSS4G ASIA 2023
sorami
0
400
数々の多様性
sorami
1
520
Vue.jsと3D可視化 - 産総研のOSS「AIST 3DDB Client」を例に / Vue Fes Japan 2023
sorami
2
1.3k
カクトビック数字 - 人間と文化にあわせた多様な表現の可能性 / Kaktovik Numerals
sorami
0
520
AIST 3DDB Client: 産総研3DデータベースのためのオープンソースWebアプリ / FOSS4G 2023 Japan@FUKUI
sorami
0
550
データ可視化をやりたくて北海道に移住した話 / SaCSS Season 2 Vol. 2
sorami
1
570
めくるめくスクロールとデータ可視化の世界 - 「スクローリーテリング」ってなに? / MIERUNE BBQ #02
sorami
1
530
場所参照表現と位置情報を紐付けるジオコーディングの概観と発展に向けての考察 / 言語処理学会第29回年次大会(NLP2023)
sorami
0
2k
Other Decks in Programming
See All in Programming
コード生成を伴うLLMエージェント - 2024.07.18 Tokyo AI
smiyawaki0820
11
4.1k
ピグパーティにおけるMongoDB CommunityバージョンからAtlasへの移行事例
10969hotaka
0
130
MIERUNE BBQにおけるユーザー中心設計()
mierune
PRO
1
110
最古の関数型言語「Lisp」ことはじめ / lisp_in_kamiyama
uhooi
1
190
企業向け生成AIアプリの 開発から得られた知見
takaakikakei
0
310
Jetpack for KMP
fornewid
1
290
Advanced App Shrinking Techniques
cbeyls
2
150
Prompt FlowによるLLMアプリケーション開発
yuto2000
1
1k
Android開発者のための Kotlin Multiplatform入門
ntaro
0
190
Microservices rules (July 2024) : what good looks like
cer
PRO
0
1.6k
3 Effective Rules for Success with Signals in Angular
manfredsteyer
PRO
0
120
GraphQL はいいぞ! ~Laravel で学ぶ GraphQL 入門~
azuki
1
160
Featured
See All Featured
Facilitating Awesome Meetings
lara
46
5.8k
Pencils Down: Stop Designing & Start Developing
hursman
118
11k
Visualization
eitanlees
139
14k
How GitHub (no longer) Works
holman
305
140k
The Cult of Friendly URLs
andyhume
75
5.9k
How to name files
jennybc
67
96k
Practical Orchestrator
shlominoach
185
10k
Making the Leap to Tech Lead
cromwellryan
127
8.7k
Designing Dashboards & Data Visualisations in Web Apps
destraynor
226
52k
WebSockets: Embracing the real-time Web
robhawkes
59
7.2k
ReactJS: Keep Simple. Everything can be a component!
pedronauck
662
120k
Side Projects
sachag
451
42k
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