採用事例の少ないSvelteを選んだ理由とそれを正解にするためにやっていること

© 2024 Ateam Inc. 採⽤事例の少ないSvelteを選んだ理由とそれを正解にするためにやっていること 2024/12/12 フロントエンドの技術選定~2024年を振り返る~Lunch LT 株式会社エイチームライフデザイン
シニアエンジニア oe kazuma

© 2024 Ateam Inc. 株式会社エイチームライフデザインシニアエンジニア oe kazuma 2 ⾃⼰紹介
@oekazuma

© 2024 Ateam Inc. 11 Svelteを選んだ理由例えば... • 現在使⽤しているPHP/Symfonyに慣れているのでテンプレート型がいい •
エンジニアとデザイナーが分業しやすいものがいい • デザイナーはJavaScriptをあまり書かないものがいい • 学習コストはできるだけ低いほうがいい • TypeScriptは使って型安全に開発できたほうがいい

© 2024 Ateam Inc. 17 • エコシステムが未成熟 (2020年当時) ◦ ルーティングライブラリは？
◦ ESLint？Prettier？ ◦ テスティングライブラリは？ ◦ UIコンポーネントライブラリは？ Svelteを選んだことを正解にするために何をしたのか SvelteKitはまだ存在せず、前⾝のSapperの開発中⽌がほのめかされたりしました 😢 引用: https://www.youtube.com/watch?v=luM5uobewhA

© 2024 Ateam Inc. 20 • 2024年のエコシステム ◦ メタフレームワーク ▪
SvelteKit (Svelte公式) ▪ Astro ◦ テスティングライブラリ ▪ Vitest ▪ Playwright ▪ StoryBook ◦ コード整形/リンター ▪ prettier-plugin-svelte (Svelte公式) ▪ eslint-plugin-svelte (Svelte公式) ▪ Biome Svelteを選んだことを正解にするために何をしたのか ◦ UIライブラリ ▪ Skelton ▪ Shadcn-Svelte ◦ フォームバリデーション ▪ superforms ◦ 認証ライブラリ ▪ auth.js ◦ 画像最適化ライブラリ ▪ enhanced-img (Svelte公式) ▪ @unpic/svelte etc.

© 2024 Ateam Inc. 37 Svelteを選んだことを正解にするために何をしたのか • 現在使⽤しているPHP/Symfonyに慣れているのでテンプレート型がいい ◦ <?php
if () ?> と {#if} など似ている構⽂も多く、違和感なく移⾏することができている • エンジニアとデザイナーが分業しやすいものがいい ◦ 純粋なHTML、CSSが書けるので最初にデザイナーにマークアップをしていただいて、終わったらエンジニアがJavaScript部分を書くという分業ができている • デザイナーはJavaScriptをあまり書かないものがいい ◦ コンポーネントをimportするときは少しJavaScriptを書きますが、マークアップするだけなら JavaScript書く必要ないのであまり書かなくていい • 学習コストはできるだけ低いほうがいい ◦ SvelteはHTMLファーストな設計を謳っていて、APIもSimpleかつEasyなので理解がしやすい • TypeScriptは使って型安全に開発できたほうがいい ◦ 年々SvelteはTypeScriptのサポートを強化してきていて、最新のSvelte5ではHTML部でも型がつくようになっていて問題なくTypeScriptで開発できている

© 2024 Ateam Inc. 38 Svelteを選んだことを正解にするために何をしたのか • 現在使⽤しているPHP/Symfonyに慣れているのでテンプレート型がいい ◦ <?php
if () ?> と {#if} など似ている構⽂も多く、違和感なく移⾏することができている • エンジニアとデザイナーが分業しやすいものがいい ◦ 純粋なHTML、CSSが書けるので最初にデザイナーにマークアップをしていただいて、終わったらエンジニアがJavaScript部分を書くという分業ができている • デザイナーはJavaScriptをあまり書かないものがいい ◦ コンポーネントをimportするときは少しJavaScriptを書きますが、マークアップするだけなら JavaScript書く必要ないのであまり書かなくていい • 学習コストはできるだけ低いほうがいい ◦ SvelteはHTMLファーストな設計を謳っていて、APIもSimpleかつEasyなので理解がしやすい • TypeScriptは使って型安全に開発できたほうがいい ◦ 年々SvelteはTypeScriptのサポートを強化してきていて、最新のSvelte5ではHTML部でも型がつくようになっていて問題なくTypeScriptで開発できている

© 2024 Ateam Inc. 40 ⾃分にとって技術選定で⼤事なこと実際に開発するチームメンバーやプロダクトに合っているものを選ぶこと採⽤事例の少ない⾔語やライブラリを選んだとしてもOSS活動をしたり、コミュニティ貢献をしたりして輪を広げていく覚悟
があること技術選定した中⼼メンバーが熱意を持って最後までやりきる想いを持っていること

採用事例の少ないSvelteを選んだ理由と それを正解にするためにやっていること

採用事例の少ないSvelteを選んだ理由と それを正解にするためにやっていること

Transcript

More Decks by Kazuma Oe

Other Decks in Programming

Featured

採用事例の少ないSvelteを選んだ理由とそれを正解にするためにやっていること

採用事例の少ないSvelteを選んだ理由とそれを正解にするためにやっていること