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

https://svelte-jp.connpass.com/event/315825/

Transcript

1. SVELTE採用記 Ґஔ৘ใͱՄࢹԽͷձࣾͰɺ
   શࣾͷඪ४ٕज़ελοΫʹબͿ·Ͱ TPSBNJ
   
   4WFMUF
   +BQBO
   0OMJOF
   .FFUVQ
    画像: DreamStudio (SDXL v4.6) で⽣成
2. @sorami 久本空海 ひさもとそらみ ๏ ιϑτ΢ΣΞɾΤϯδχΞ
   ๏ Ґஔ৘ใՄࢹԽूஂʮ.*&36/&ʯॴଐ
   
   ๏ ೥͔Β๺ւಓࡏॅ SVELTE JAPAN のみなさん、こんばんは！
3. 本日の札幌
4. https://tenki.jp/forecaster/deskpart/D6DE/6F/DE/DGGG6.html
5. https://www.stv.jp/weather/tanki/index.html 本日 5/24金 の北海道 出典: STV札幌テレビ きょう・あすの予報
7. https://svelte.dev/
8. MIE UNE社では 全社の 標準技術スタックとして SVELTEを採用
9. ๏ もともとは主に Vue.js 2 → Vue.js 3 ๏ 2023年ごろから、Svelteを一部で導入 ๏ 2024年に、Svelteを正式に全社採用
10. 以降、特別な理由がない限り 全ての新規プロジェクトが SVELTE
11. ๏ 4WFMUFͱ.*&36/&
    4WFMUFͱࢲ
    ๏ .*&36/&Ͱ4WFMUFΛ࠾༻͢Δ·Ͱ
    ๏ 4WFMUFͱՄࢹԽ
    ๏ ࠷ۙͷ՝୊
    ๏ 4WFMUFΛֶͿʹ͸
    ๏ 4WFMUFͷࢥ૝ 発表のアウトライン
12. MIERUNE み え る ね
13. ๏ Ґஔ৘ใΛѻ͏ɺՄࢹԽͷઐ໳ूஂ
    ๏ ೥ઃཱ
    ๺ւಓ͕ڌ఺
    ๏ ໊
    
    ೥݄
    શࠃͷϑϧϦϞʔτϝϯόʔؚΉ
14. 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
15. オープンソースのコミュニティ から 生まれた会社
16. https://internet.watch.impress.co.jp/docs/special/wf_hokkaido/4DGD4GF.html ๏ ϧʔπ͸ʮ'044(
    )PLLBJEPʯ
    ๏ ஍ཧۭؒ৘ใͷ044ܥΠϕϯτ
    ๏ ˠ
    ӡӦʹؔΘ໊͍ͬͯͨͰىۀ
17. IUUQTXXXNJFSVOFDPKQBCPVUVT 8F
    —
    044
     ࢿۚఏڙ
    
    ӡӦҕһձࢀՃ
    
    ࣗࣾίʔυެ։
    
18. IUUQTWVFGFTKQ
19. シルバースポンサー
22. X
    &WBO
    :PV ! ! ! !
23. SVELTE と MIE UNE
24. 公開事例を いくつか紹介 ...
25. 文化財総覧WebGIS 2024年5月に全面改訂, Vue.js → Svelteへ https://heritagemap.nabunken.go.jp/ 奈 良 文 化 財 研 究 所
26. https://data.wingarc.com/localdxlab-DV-nara-EWVXN
27. 国 土 交 通 省 PLATEAU GIS Converter CityGML形式の3D都市モデルを、一般的なデータ形式に変換するツール。 国交省「Project PLATEAU」の一環で開発、OSSとして公開 https://github.com/MIERUNE/plateau-gis-converter Svelte, Tauri, Rust
28. https://speakerdeck.com/nokonoko4D6N/rusttegisnaoss
29. 自 社 プ ロ ダ ク ト れきちず MIERUNEのデザイナー @chizutodesign が個人開発していたものを、会社で継承 江戸時代の地図を、現代風のWebサービスへ https://rekichizu.jp/
30. ʰ஍ਤͱ͔࿏ઢਤͱ͔!DIJ[VUPEFTJHOʱ
    ఱເਓ
     https://chizutodesign.com/
31. twitter.com/MIERUNE_inc/status/4XV4NF4E6NXEEXENWWX 地域メッシュ見えるくん 社内ハッカソンで開発したツール https://mesh.mierune.io/ 自 社 プ ロ ダ ク ト
32. SVELTE と 私
33. https://speakerdeck.com/sorami/sacss-season-D-vol-D
34. もともと、 NLP 自然言語処理 をやっていた ... 044ܗଶૉղੳث
    4VEBDIJ
    ϫʔΫεಙౡਓ޻஌ೳ/-1ݚڀॴ https://zenn.dev/sorami/articles/cVaF6W666fd4fbd4cfVG ຽࣄ൑ܾΦʔϓϯσʔλ
    -FHBMTDBQF ຋༁ϞσϧͷϓϥΠόγʔ
    +PIOT
    )PQLJOT
    6OJWFSTJUZ https://note.com/legalscape/n/nfWNE4VE6deaa Hisamoto et al., TACL D6D6
35. ݴޠ ஍ਤ ՄࢹԽ
36. ݴޠ ஍ਤ ՄࢹԽ 「思考のための道具」に興味がある ๏ ʮݴޠʯ΋ʮ஍ਤʯ΋ɺࢥߟͷͨΊͷಓ۩
    ๏ ਓؒͷೝ஌͸ɺͦͷਓମߏ଄ʹ੍໿͞ΕΔ
    ๏ ͦΕͰ΋ɺಓ۩΍֓೦Ͱɺ
    ͜Ε·Ͱߟ͑ΒΕͳ͔ͬͨ͜ͱΛࢥߟͰ͖Δ
37. ˞
    ݱࡏ͸׆ಈٳࢭ https://data-viz-manabiba.visualizing.jp データ可視化のコミュニティで、MIERUNEを知った
38. https://speakerdeck.com/sorami/mierune-meetup-mini-number-64 MIERUNEの勉強会で発表してみたら、それが縁で入社へ
39. https://speakerdeck.com/sorami/mierune-meetup-mini-number-64 MIERUNEの勉強会で発表してみたら、それが縁で入社へ
40. https://speakerdeck.com/sorami/mierune-meetup-mini-number-64 MIERUNEの勉強会で発表してみたら、それが縁で入社へ ある意味、 SVELTE転職
41. それから、個人開発は全てSvelte （ブログはAstro）
42. MIE UNE で SVELTE を 採用 するまで
43. https://www.chooseyourframework.dev/
44. https://www.chooseyourframework.dev/
45. https://twitter.com/flaviocopes/status/4XN6GVFV44GWE4GVDVV
46. https://github.com/svelte-jp/japanese-svelte-companies
47. もともとは、主に Vue.js だった ๏ ೥தࠒ·Ͱ͸ɺ7VF
    
    ๏ ͦͷޙɺ7VF
    
    ΁
    4DSJQU
    TFUVQߏจ
    $PNQPTJUJPO
    "1*
    ๏ /VYUKT
    ͸࠾༻͍ͯ͠ͳ͍
48. なぜ、 eactではないか？ ๏ 8FC஍ਤϥΠϒϥϦ
    .BQ-JCSF
    
    .BQCPY
    (-
    +4
    ๏ ͦͷ஍ਤΤϯδϯࣗମ͕ɺ3FBDUͷੈքͰ͸෭࡞༻
    ख͕͔͔ؒΔɺ3FBDUͷྑ͕͞ग़ͤͳ͍
    ๏ 3FBDU
    .BQ
    (-ͱ͍͏ϥούʔ΋͋Δ͕ɺ
    ৄࡉͳͱ͜ΖʹखΛೖΕΔͱ͖ɺͭΒ͘ͳΔՄೳੑ
49. MIE UNEの特徴 ๏ ஍ਤ΍Ґஔ৘ใʹ਌͠ΜͰ͖ͨਓ͕ଟ͍
    ੜଶֶ
    ஍ཧֶ
    ਫ࢈ֶ
    ݐઃίϯαϧ
    ೶ۀ੓ࡦ
    ෆಈ࢈ؑఆ
    ؾ৅
    మಓ
    ఉࢣ
    ࣗ࡞஍ਤ
    
    ๏ υϝΠϯ஌ࣝɺ࡞Γ͍ͨ΋ͷɺղ͖͍ͨ՝୊͕͋Δ
    ๏ ͕ͩɺϑϩϯτΤϯυ։ൃʹशख़͍ͯ͠ΔΘ͚Ͱ͸ͳ͍
50. https://cameron.rs/blog/svelte-is-better/
51. https://cameron.rs/blog/svelte-is-better/ ๏ チュートリアル（後述） ๏ シンプルさ 「フロントエンド開発を学ぶには、 eactよりSvelteが良い」
53. https://component-party.dev/
54. あるメンバーのコメント Svelteなら、 “フロントエンド出来そう” と思えた
55. ๏ ೥຤͝Ζ͔Βɺࣾ಺ͷษڧձͳͲͰڞ༗
    ๏ ೥݄ɺ4WFMUF,JU
    W
    ϦϦʔε
    ๏ ϋοΧιϯ΍1P$ϓϩδΣΫτͳͲͰར༻
    ๏ େن໛Ҋ݅ʢ7VF
    ʣͷϦϓϨʔε࣌ʹ
    4WFMUF
    Λ࠾༻
    ๏ ೥ɺશࣾͷඪ४ٕज़ελοΫ΁੍ఆ
56. Svelteが “絶対” ではない ๏ ձࣾͷ΢ΣϒαΠτ͸ࠓͰ΋
    /FYUKT
    ๏ ՄࢹԽϥΠϒϥϦ
    EFDLHM
    ͸ɺ3FBDUͱ਌࿨ੑ͕ඇৗʹڧ͍
    
    ˠ
    ͦͷࡍʹ͸ɺ/FYUKTͳͲΛ࠾༻͢Δ͜ͱ͕ଟ͍
    ๏ ஍ਤαʔϏεͳͲͰ͸ͳ͘ɺ੩తίϯςϯπ͕ओͳ৔߹͸
    ݸਓ։ൃͰͷܦݧ͔Β΋
    "TUSP
    ͕ඇৗʹ༏Ε͍ͯΔͱߟ͑Δ
57. SVELTE と 可視化
58. https://www.youtube.com/watch?v=CenLcPGBwLQ
59. https://www.youtube.com/watch?v=CenLcPGBwLQ Svelteは、データ可視化の界隈で広く受容されている Svelteの作者 Rich Harris は、もともと The New York Times の グラフィック・エディターだった
60. https://www.youtube.com/watch?v=CenLcPGBwLQ ジャーナリズムの現場で求められる技術 例えば、大規模なデータを扱い、動かす。 → パフォーマンスが重要 現場の実践者たちは、実現したいことのための 手段としてJavaScript に触れている。 そのため、シンプルで、馴染みのあるものが良い
61. アニメーション シンプルな仕組み、豊富な標準機能 https://svelte.dev/docs/ https://svelte.dev/examples/easing
62. 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)
63. The Pudding 可視化メディアのフロントランナー - Svelteを積極的に利用 https://github.com/the-pudding https://pudding.cool/
64. https://reuters-graphics.github.io/example_svelte-graph-patterns/ Svelte Patterns データ可視化パターン集 - ロイター通信
65. https://layercake.graphics/ Layer Cake グラフィック・フレームワーク - Michael Keller, NYTimes
66. Threlte SvelteとThree.jsをもとにした3Dフレームワーク - Grischa Erbe https://threlte.xyz/ ๏ 宣言的な形式で、 Three.jsにある全ての機能を利用可能 ๏ 物理エンジンの apierや、 アニメーションライブラリTheatre.jsも統合 ๏ lTFを変換するツールや、 V /A のための機能も用意
67. 最近 の 課題
68. UIライブラリの選定 ๏ ·ͩʮίϨʯͱ͍͏஌ݟ͕ͳ͍
    
    ௐࠪத
    4LFMFUPO
    6*
    ΍
    .FMU
    6*ɺྑͦ͞͏ɻ
    TIBEDOTWFMUF
    ͸Ͳ͏ͩΖ͏ʁ
    ๏ ݱঢ়ɺ5BJMXJOE
    $44
    
    6OP$44
    ͷΈͰશ࣮ͯ૷
    5BJMXJOE
    6*
    ΋ߪೖͯ͠࢖͍ͬͯΔ
69. Svelte 5 への移行 ๏ ه๏΍࢓૊Έ͕େ͖͘มΘΔ෦෼͕͋Δ
    3VOFT
    PQUJO
    TOJQQFUT
    ΠϕϯτϋϯυϦϯά
    
    
    ๏ ೥݄ʹ
    3FMFBTF
    $BOEJEBUF
    ొ৔
    ๏ ͜Ε͔ΒֶͿਓ͸ɺ࠷ॳ͔ΒʮʯͰ΋͍͍ʁ
    ๏ ͱΓ͋͑ͣ ɺ·ͣݸਓతʹࢼͯ͠Έ͍ͯΔ
70. SVELTE を 学ぶ には
71. https://learn.svelte.dev/tutorial/deferred-transitions 公式チュートリアル！
72. 公式チュートリアル！ https://learn.svelte.dev/tutorial/deferred-transitions ๏ 小さなステップごとのコンテンツ ๏ 自分で動かしながら学べる ๏ 必要なのはブラウザだけ とても注力されており、よくできている
73. https://www.youtube.com/watch?v=RwBolXXVPis
74. https://www.youtube.com/watch?v=RwBolXXVPis ๏ 安全第一 ”マトリックス” ( 999) ๏ 繰り返す ”ベスト・キッド” ( 984) ๏ 救済する ”スター・ウォーズ エピソード5/帝国の逆襲” ( 980) ๏ 学生たちはカオス ”キンダガートン・コップ” ( 990) ๏ 相手の立場に合わせて接する ”天使にラブ・ソングを2 ” ( 993) 映画から学ぶ、教え方の原則
75. .*&36/&Ͱ͸ɺΈΜͳͰ
    ͻͨ͢ΒνϡʔτϦΞϧΛ΍Δ
    ʮ4WFMUF΋͘΋͘ձʯΛ։࠵ͨ͠
76. https://frontendmasters.com/courses/svelte-vD/ https://frontendmasters.com/courses/sveltekit/ Frontend Masters の Svelte/SvelteKitコース Svelteの作者Rich Harrisが自ら、公式チュートリアルをもとに解説。 コース最後の「プロジェクト実装」が特に面白い！
77. SVELTE の 思想
78. https://www.youtube.com/watch?v=zXn4XajJpCo “ If I were you, I wouldn’t start from here ”
79. https://ja.wikipedia.org/wiki/XY問題
80. https://www.youtube.com/watch?v=zXn4XajJpCo
81. 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.”
82. https://www.youtube.com/watch?v=zXn4XajJpCo 多くの人々は、率直に言って、 フロントエンド業界のたわごとに 付き合っている暇はない。 “A lot of people candidly just don’t have time for the front-end industry’s bullshit.”
83. https://www.youtube.com/watch?v=kMlkCYLVqo6
84. https://www.youtube.com/watch?v=kMlkCYLVqo6 “Svelte Origins” by OfferZen SVELTEのドキュメンタリー映画
85. 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
86. SVELTE採用記 Ґஔ৘ใͱՄࢹԽͷձࣾͰɺ
    શࣾͷඪ४ٕज़ελοΫʹબͿ·Ͱ TPSBNJ
    
    4WFMUF
    +BQBO
    0OMJOF
    .FFUVQ
    
87. We are hirin カジュアル面談やってます www.mierune.co.jp/careers