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
3
860
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
Scrollytelling the 53 Stations of Tōkaidō: An Interactive Journey Through Japan’s Historic Route / FOSS4G ASIA 2024
sorami
1
44
Rust for Geospatial Data Processing: A Case Study with CityGML Converter for PLATEAU, Japan's Open Digital Twin Models / FOSS4G ASIA 2024
sorami
1
79
CSSを積み重ねる - 2024年のMasonry Layout / MIERUNE 朝LT #297
sorami
3
130
可視化がやりたくてMIERUNEに転職した話 〜“思考のための道具”とコンピューターによる新たな表現〜 / MIERUNE JCT - Tokyo 2024
sorami
4
1.4k
Scrollytelling the 53 Stations of Tōkaidō: An Interactive Journey Through Japan’s Historic Route / BUILD with Mapbox 2024
sorami
1
80
データ可視化をやりたくて北海道におひっこし / TechRAMEN 2024 Conference
sorami
2
920
「スクローリーテリング」から考えるジューシーなメディア / Data Visualization Japan Meetup 2023
sorami
3
930
AIST 3DDB Client: an open-source web application for the 3D database / FOSS4G ASIA 2023
sorami
1
580
数々の多様性
sorami
2
660
Other Decks in Programming
See All in Programming
pylint custom ruleで始めるレビュー自動化
shogoujiie
0
130
Pythonでもちょっとリッチな見た目のアプリを設計してみる
ueponx
1
590
Domain-Driven Transformation
hschwentner
2
1.9k
Conform を推す - Advocating for Conform
mizoguchicoji
3
700
CDK開発におけるコーディング規約の運用
yamanashi_ren01
2
180
さいきょうのレイヤードアーキテクチャについて考えてみた
yahiru
3
760
ソフトウェアエンジニアの成長
masuda220
PRO
12
2k
PHPのバージョンアップ時にも役立ったAST
matsuo_atsushi
0
170
コミュニティ駆動 AWS CDK ライブラリ「Open Constructs Library」 / community-cdk-library
gotok365
2
170
お前もAI鬼にならないか?👹Bolt & Cursor & Supabase & Vercelで人間をやめるぞ、ジョジョー!👺
taishiyade
7
4.1k
クリーンアーキテクチャから見る依存の向きの大切さ
shimabox
4
870
CSS Linter による Baseline サポートの仕組み
ryo_manba
1
130
Featured
See All Featured
Build The Right Thing And Hit Your Dates
maggiecrowley
34
2.5k
How to Think Like a Performance Engineer
csswizardry
22
1.4k
Sharpening the Axe: The Primacy of Toolmaking
bcantrill
40
2k
How to Create Impact in a Changing Tech Landscape [PerfNow 2023]
tammyeverts
49
2.3k
What's in a price? How to price your products and services
michaelherold
244
12k
Principles of Awesome APIs and How to Build Them.
keavy
126
17k
Producing Creativity
orderedlist
PRO
344
39k
The Art of Delivering Value - GDevCon NA Keynote
reverentgeek
10
1.3k
Fashionably flexible responsive web design (full day workshop)
malarkey
406
66k
[RailsConf 2023] Rails as a piece of cake
palkan
53
5.3k
Fantastic passwords and where to find them - at NoRuKo
philnash
51
3k
Making the Leap to Tech Lead
cromwellryan
133
9.1k
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