ep.164『コアメンバーと語る！Svelte 5の革新』 | UIT INSIDE

2024/10/30 に公開1398 views

このエピソードについて

@TheoSteiner が @tomoam_mat、@baseballyama_に、Svelte 5について話を聞きました。

ゲスト

@tomoam_mat
- Svelte Japanのコアメンバー
- 製造業向けシステムベンダーに勤務
@baseballyama_
- Svelteのコアチームメンバー
- Flyleでソフトウェアエンジニア

Svelte 5の主な新機能

runes: Svelte版の Signal であり、リアクティビティをより柔軟に扱えるようになった。
イベント処理の改善: props を経由したコンポーネント間のやり取りが可能になり、学習コストが低下
パフォーマンスの向上: 新しいAPIにより、SolidやVueに匹敵するパフォーマンスを実現

マイグレーションと互換性

Svelte 5はSvelte 4との互換性を保ちつつ、新しいAPIを導入
マイグレーションツールを使用することで、ほとんど問題なく移行可能

コミュニティの反応

新しいAPIに対するコミュニティの初期反応は複雑だったが、徐々に受け入れられるようになった
Svelteコアチームは、ユーザーのフィードバックを受け入れ、改善を続けている

学習リソース

Svelteの公式サイトに統合された学習リソースで、インタラクティブなチュートリアルが利用可能
日本語版の翻訳もSvelte JapanのDiscordでサポート可能な状態で進行中

採用について

使用素材・クレジット

BGM&SE

音声書き起こし

1. オープニング・ゲスト自己紹介 00:00

@TheoSteiner 00:08
こんにちは。UITのTheoです。ユーザーインターフェイスとテクノロジーを愛する開発者のためのウィークリーポッドキャストUIT INSIDE、今週も始めたいと思います。今回はSvelteをテーマに話していきます。Tomさん、山下さん、本日はよろしくお願いします。

@tomoam 00:26
よろしくお願いします。

@TheoSteiner 00:28
早速ですが、せっかく今回Svelteの日本のコミュニティからゲストが来てくれているので、最初に軽い自己紹介をお願いできますでしょうか。

@tomoam 00:40
はい。Tomと申します。TomoamでSvelte Japanのコアメンバーで、Svelte.devのサイトの翻訳などを行っていて、普段は製造業向けのシステムベンダーに勤めています。

@TheoSteiner 00:54
よろしくお願いします。

@baseballyama 00:55
はい、山下です。Baseballやというハンドルネームで活動しています。Svelteのコアチームメンバーで、普段はFlyleという会社でソフトウェアエンジニアをしています。よろしくお願いします。

@TheoSteiner 01:08
よろしくお願いします。では、早速ですけど、今日の本題に入りたいと思います。10月18日にSvelteサミットというSvelteのコミュニティの一番大きいイベントで、Svelte 5がやっとリリースされました。いえいえいえ。

2. svelte 5の機能①（runes） 01:10

@tomoam 01:27
おめでたいですね。

@TheoSteiner 01:28
そのSvelte 5はSvelteのコミュニティにとって大きなリリースになると思いますけど、その背景について話したいと思います。最初に、Tomさんと山下さんがSvelte 5の機能で、これは大きいなと思う機能ってありますか。

@tomoam 01:51
私はもうそれはもうもちろんRuneですね。何より。

@TheoSteiner 01:55
というと、どういうことを指していますか。

@tomoam 01:57
Svelteの中ではもともとステートの扱い、ステートがどのように画面に反映されるかというところを全てコンパイラで処理していたんですけれど、それが他のフレームワークだと、いわゆるsignalsのように始めたsignalっていうものがSvelteに取り入れられて、それがRuneと呼ばれているものになっています。なのでSvelte版 Signal といって差し支えないと思いますが、詳しい仕組みは山下さんの方に聞いたほうがいいかもしれないですね。

@TheoSteiner 02:24
その中の詳しい説明に入る前に、多分視聴者の中でSvelte 4の現状を知らない方もいると思うので、そのRuneという機能で大きくリアクティビティが変わったと思いますけど、そのRuneが導入される前はどういう仕組みになってたんですか。

@baseballyama 02:43
Svelte 4の時は、ドルサインっていうんですかね、ドルサインってものを使ってリアクティビティを実現してました。リアクティブ変数とか、あと派生型の値のダブルドル、バリュー掛ける2みたいな派生の値とか、あとエフェクトみたいなものを全部ドルっていう1つの統一された記号で表現していたっていうのが、まずSvelte 4のリアクティビティの実現の仕方でした。ただ、これの問題点は、Svelteファイル以外で、例えばただのJavaScriptファイルとかでこの記法を使うことができなかったので、SvelteファイルとJavaScriptファイルの間で等価的にリアクティビティを実現したいっていうときに、ストアってものを使う必要がありました。というところで、いわゆるUIに依存しない部品とかを作るのが少し難しかったっていうのがSvelte 4の現状とSvelte 4で書かれていた課題。簡単な要約になるかなと思います。

@tomoam 03:41
あとはSvelte 4だとレッドも全て基本的にはリアクティブ。リアクティブな形で使っていたらリアクティブみたいな形に勝手にマークをされていたっていうのと、あとそのストアがSvelteコンポーネントの中だとそのストアに対して接頭時にドルを付けると値のように使えるんですけれど、JSファイルの中だとそのドルストアという書き方だと全然値にはならない。ただのJavaScriptなので、違う宣言がされた。今まで未定義のものが急に使われてるみたいな扱いになってしまったと。そういう意味で、多分コピペとかが使い回しができなかったっていうところが辛いかなというふうに言われていました。

@TheoSteiner 04:19
そうですね。今までSvelteの中に2つの世界が存在していて、そのSvelteコンポーネントの中では、すごいエレガントな、シンプルなシンタックスで、レッドの代入だけでリアクティブになるような振る舞いになってたんですけど、その.svelteのコンポーネントから離れた時点で、ストアというストアもオブザバブルの契約に従っているものなので、そこまで複雑ではないですけど、別の概念を理解しないといけないっていう辛さはちょっとありましたね。で、そのRuneで言うと、複数のRuneはあると思いますけど、全部言えますか。今までのレッドがドルステートっていうRuneになっています。全てのRuneはインポートせずに使えるっていうのが特徴ですかね。ドル、ちょっと口でコード言うのもあれですけど、レッドカウントイコールドルステートで、ドルステートは関数みたいな書き方していて、ドルステートに引数として0を渡したら、0で初期化されたリアクティブな値が得られます。ドルステート以外はどういうRuneがありますでしょうか。

@tomoam 05:34
今何も見ないで言おうとすると、ドルステートで、ドルステートロー、ドルステートスナップショットがあって、あとドルエフェクト、ドル props 、あとドルドライブ、ドルインスペクト、あとドルホストがあります。

@TheoSteiner 05:58
開発時に使えるドルインスペクトですね。コンソールログの代わりに使えるんです。あと、ドルホストは多分ウェブコンポーネント専用の部分だと思います。Webコンポーネント内で、そのWebコンポーネントのホストエレメントがいつでも取得できるような部分ですね。

@TheoSteiner 06:19
RuneはいくつかのRuneがあると思いますけど、その中で最も大事なRuneは主にドルステートとドルドライブとドルエフェクトの3つですかね。リアクティビティの基本で言うと、ドルステートはリアクティブの値ですね。ドルドライブとドルエフェクトはどういうものでしょう。エフェクトは大体の方は分かると思いますけど、ドライブはちょっと名前が独特だと思いますけど、何を指していますか。

@baseballyama 06:52
ドルドライブは、Vueでいうコンピューテッドみたいなものと思っていいと思います。例えば、カウントがあって、それを2倍したものを変数として持っておきたいみたいな時に、ドルドライブダブルイコールドルステートのカウント掛ける2みたいなものをやっておくと、ステートが変わるたびにドルドライブの値も一緒に変わってくれるみたいな、そういった機能です。

@TheoSteiner 07:17
ご説明ありがとうございます。じゃあ、Tomoさんが一番個人的に大きいと思っている機能がRuneということで、山下さんはもうRune以外のものを選ばないといけないんですけど、Rune以外だったらSvelte 5でどういう機能がつきましたか。

3. svelte 5の機能②（events） 07:19

@baseballyama 07:37
これRune取られちゃいましたか。でも個人的に嬉しいと思うのは、イベントの対処の仕方ですかね。Svelte 4まではcreateEventDispatcherっていうものを使ってイベントを親子コンポーネント間でやり取りしていたんですけど、Svelte 5ではそういうものは全て、コンポーネント間のやり取りは全て props を経由してできるようになりました。それによってある種学習コストは下がった。とにかく親と子のコンポーネントのやり取りは props を使いましょうと。イベントだろうが、Vueでいうエミットだろうが、プロップだろうが、引数だろうが props で渡しましょうと。そうするとうまくできるようになりますよっていうのは、個人的に物事がシンプルになって、いわゆるSvelteらしさが出ているところかなって思います。そして、これに関連して、特にデザインシステムで有効なんですけど、デザインシステムで定義されたコンポーネントで、例えばインプットみたいなものがあったとして、ブルアーとかフォーカスとか、いろんなイベントを親コンポーネントに伝えたいみたいな時に、Svelte 4だと全部をonClickみたいなイベントを登録しなきゃいけなかったですけど、Svelte 5はそれが動的にイベントを登録できるようになったので、 props にonで始まる関数を与えるとイベント登録できるようになったっていうのは、特にデザインシステムの文脈で非常に力強くなったポイントかなって思います。ここら辺が個人的にお気に入りポイントの1つですかね。

@tomoam 09:22
山下さんは確か前にSvelte 4でそのあたりをどうにかするための、なんか魔法のようなライブラリを作ったりしてましたよね。

@baseballyama 09:30
そうですね。やっぱりここはSvelte 4の時も要望がすごく大きいポイントだったと思いますし、Svelteのエコシステムを反映させていくっていう意味でも、デザインシステムを提供する上で1つのネックポイントではあったと思うんですよね。なので、これがしっかりと解決されたっていうのは個人的には良かったかなと感じます。

@TheoSteiner 09:50
まとめてみると、Svelte 5の主方針は以前からちょっとややこしい課題があって、それを解決する、またはAPIをちょっと統一させることによって学習コストを削減させることですね。それによって結構APIが大きく変わったと思いますけど、そのマイグレーションにちょっと触れてみたくて。そんなにAPIが変わってきたら、きっとマイグレーションが大変になるでしょうか。

4. Migrationに関して 10:09

@tomoam 10:23
昨日ちょうど1つマイグレーションしてみた私からいくとですね、まずSvelte 5は基本的にSvelte 4とほとんど互換性を保っています。なので、マイグレーションしなきゃいけないってわけじゃなくて、ほとんどのものはそのまま動きます。裏側の仕込みが変わるだけで。でも実際に、例えば今までSvelte 4の書き方でやっていたものをSvelte 5で書き直してみようと、新しいAPIを使ってみようっていったときには、マイグレート用のコマンドツールが用意されているので、それを使うことでほとんど問題なく修正ができるようになっています。よっぽど、例えばオンマウントの中ですごい変わったことをやっているとか、もともとストアを使っていて、そこの部分をRuneにするとかっていう時は、ちょっと手で色々やらなきゃいけないんですけど、もともとエクスポートレットであるとか、ドルを使っているっていうところに関しては、ほぼ正確に簡単に書き換えてくれるようになっています。

@baseballyama 11:15
すごいですね。僕も個人で使っているSvelteKitのプロジェクト、ちっちゃいプロジェクトですけど、何ヶ月か前にSvelte 5に上げて、あと何も修正せずに全部がうまく動きました。びっくり仰天ですよ。

@TheoSteiner 11:34
実はLINEヤフーも最近、内部で使っているコンポーネントライブラリをSvelte 5に移行させて、思ったより簡単にマイグレーションできたので、ちょっと拍子抜けしました。逆に簡単すぎて、全然盛り上がりませんでした。

5. パフォーマンス向上の裏側に関して 11:52

@TheoSteiner 11:53
今までの結構Svelte 5の新しいAPIについて話してきたんですけど、裏側の、新しいAPIで可能になったパフォーマンスとか、そういう改善について触れたいなと思います。実は同じ10月18日にVue Fesっていうイベントがあって、そこになんと山下さんが登壇して、Vue 3とVue 5とSvelte 5のコンパイルアウトプットを比較した発表があったんですけど、それにちょっと乗っかって、Svelte 5の新しいパフォーマンスについて語っていただけますか。

@baseballyama 12:31
まず、かなりメタ的な視点からのコメントになるんですけど、もともとSvelte 4までは、Rich Harrisさんが主にほとんどの部分を作っていたっていうことになってました。で、Svelte 5になって、Dominic Gannawayさんっていう方が入ってこられて。彼はもともとFacebookでReact作ってたり、Infernoっていうフレームワークですかね、を作ったりしてる人で、彼はChromeのパフォーマンス改善とかにすごく長けていて、Svelte 5のランタイムを実装するときも、そういうパフォーマンスにかなり気を付けて実装を続けていたっていう、非常にメタ的ですけど、そういう背景がありました。それがSvelte 5にもかなり生きていて、性能が良くなってるっていうのはまず言えるんじゃないかって思います。1個だけ、これちょっと微妙な例かもしれないですけど、面白い例があって、変数をJavaScriptで宣言する時って、varとかletとかconstって使えて、基本的にはconstとかを使うのは望ましいって僕らは一般に習ってると思うんですけど、Svelte 5では積極的にvarを使っていて、これは一見すると悪いプログラミングに思えるんですけど、varを使うとconstとかletを使うよりも80倍ぐらい高速になるらしくて。なので積極的にvarを使えるところはvarを使うみたいなことをしてるんですよね。あとは、その関数に引数を渡すときに、ポリモーフィックとかメガモーフィックみたいに呼ばれる、いろんな引数のパターンがあると、Chromeのエンジンの最適化がされづらいっていうのがあって、そういうのもツールを使ってそういうのが起きないように最適化したり調整をずっとかけていたんですよね。だから、性能みたいなところは、ランタイムの構造がどう変わったっていうのもあるんですけど、それ以上に、そういうとこに非常に気を使って実装を続けていたっていうのが、パフォーマンスが大きく変わっているはずであるって言える1つのファクターなのかなって思いますね。

@TheoSteiner 14:38
すごい低レベルのパフォーマンスチューニングが、今回のSvelteのコンパイルアウトプットに入ってきたということですね。

@tomoam 14:45
そうですね。ドミニクさん、面白いのが、今Svelteのリポジトリ行くと、ベンチマークのディレクトリがあるんですよね。それを使いながら、常に改善を入れて計測して、みたいなことを続けられてるみたいなんで、本当にパフォーマンスにはかなり気を使って詰められてるのかなって思いますね。

@TheoSteiner 15:06
結果として、SolidとかVue並みのパフォーマンスになったってことですよね。

@tomoam 15:13
そうですね。有名なJSフレームワークベンチマークっていうのがありますね。フロントエンドフレームワークのDOM上での操作のベンチマークです。あれの中では、Solidであるとか、そういったあたりのスコアが出るようになって、しかも面白いのが、彼らはあんまりそこで高いスコアを出すことを狙ってないんですよ。例えば、1000行ぐらいあるテーブルの中で1行を選択するというベンチマークのテスト項目があるんですけれど、それってちょっと簡単な関数を作れば、割とすごいスコアを上げやすい項目があるんですね。で、Solidとかもそういう関数を持ってて、もちろんSolidがね、そういうずるをしてるとかいう、そういうわけじゃないんですけど、そういう関数を持ってるんですけれど、Svelteはもともとそれを持ってたんですが、それ別に一般的に意味ないねって。一般的に有用な関数じゃない。僕たちはもっと実用的なフレームワークを目指すべきだって言って、わざわざその関数を削ってるんですよね。そういうところから見ても、あまりこう、マイクロベンチマークでチートをするとか、そういったことは全く目指していなくて、実アプリケーション上でのパフォーマンスをどう出すかっていうところに主眼を置いて進めている。それでいて、Solidとかああいったくらいのスコアを叩き出してるというところが、Svelte 5のパフォーマンスの本当のすごさだと思います。

@TheoSteiner 16:21
だから、リアルワールドで使えるようなパフォーマンスを提供してるんですね。そこまでベンチマーク用のファインチューニングが昔入ってたんですね。じゃあ、今日、せっかくSvelteコアチームの方と日本のSvelteのコミュニティのコアチームの方がいるので、そのコミュニティ対Svelte 5のクリエイターの関係性をちょっと利用したくて、このSvelte 5のAPIで、多分コミュニティの反応が最初の方に結構複雑だったと思いますけど、その、今となってコミュニティでSvelte 5のAPIを批判してる方があんまりいなくなったんですけど、最初はあんまり喜んでいなかった現象とかはあったと思いますけど、それの説明をちょっとしていただけますか。

6. コミュニティの反応に関して 16:34

@tomoam 17:16
はい。じゃあ、コミュニティサイドから行きますか。私は最初から新しいAPIRuneとかああいったところに抵抗はなかったんですけれど、一般的にコミュニティから上がっていたのは、ただレッドを書くだけで、本当にJavaScript初心者の人でもリアクティブを実現できるみたいなところが、シンプルさがSvelteの良さだったんだみたいな。シンプルさといつ、その後ろには多分イージーの部分が含まれてたと思うんですけれど、それがSvelteの良さだったんだ。なんでこんなことを書かなきゃいけないんだ。みたいなのが、コミュニティから最初あったんですよね、抵抗が。それに対してどうでしょう。コアチームとしてはどういう対応をしていったんですか。

@baseballyama 17:56
正確にリッチさんとかが何を考えてたかはわからないですけど。ただ、やっぱり今となって思えば、リアクティビティにはステートとドライブドとエフェクトって3つの概念があるってことは、やっぱり最初、フロントエンドのコードを書く上で理解しとかなきゃいけないポイントだと思うんですよね。そのSvelte 4までは、それを理解せずとも書けたとも言えるわけですけど、一方でその理解しなきゃいけない基本的な概念を理解せずにそのまま書けてしまうっていうのを悪く捉えるという見方もあるわけで。そうすると、やっぱりコードってのが汚くなっていく、メンテナンス性とかが悪くなっていくっていうような見方もあったと思うんですよね。なので、最低限の概念はしっかりとコードとして表現して、クリーンな、よりクリーンなコードをこれで作れるはずだっていう考えがまずSvelteコアチームにはあったので、で、あと、リッチハリ大先生っていう感じで、こう、人間は変化を嫌うって。だから、それが非常にSvelteのことを考えて何年もやり続けてた。僕らがいいと思ったことも、どうそれが真に良かったとしても、やっぱり人々は変化を嫌うんで、最初やっぱ悪い意見を言うんですよね。それ、リッチ大先生もわかってるから、そのうちそういうのは落ち着くでしょみたいなトーンだったような気もしてますね。

@tomoam 19:19
確かにね。実際のところ、あれを発表して結構抵抗があったところを、だからいろんな人がリッチさんとか他のコアメンバーの方に色々文句を言っていうのを、1件1件ちゃんと丁寧に返信して、いや、その場合はこうした方がいいからだとか、自分の考えをちゃんと伝えたりとか、あとはいいから使ってみろよっていう他のコミュニティの支援があったりとか、多分そういうの結構根強く続けてたと思うんですよね。冷静に冷静に。で、実際使ってみるとこんなにいいものなんだっていうのが徐々に徐々にコミュニティの中でSvelteの既存のユーザーもどんどん気づいていって今に至るっていうようなことが起きていたのかなと思います。

@baseballyama 19:56
これ面白いのが、コアチームのメンバーですらやっぱり2分されてましたよ。ダラーでよくねえかって。やっぱり概念をしっかり理解して、その暗にステート、ドライブド、エフェクトとかを使い分けれる人にとっては、自分の目で見て、それが網膜を通してこれはドライブドだって変換されて見えるんでいいんですけど、多くの人はそうじゃなかったり、知らないコードを読んだ時にそうではないんで。それでSvelteコアチームの中でも、いや、RuneなんかReactみたいになってしまって残念だみたいな人もいたんですけど、やっぱり最近になって、やっぱRuneは最高だなみたいな、言ってた当時反対だった人もやっぱり言ったりとかしてるんで、そういうもんだっていうのはあったかもしれないですね。

@tomoam 20:39
コアチームの方の返答ですごい面白いのが、こういう風にすればよかったんじゃないか。例えば、まだラー制度じゃなくてダラー括弧で良くないか。みたいな意見に対して、いや、それは実は試作で試していて、スタックで試していて、コードを検索するときの検索性が非常に悪くなるんだみたいなことを言ったりとかして。でもそういうのがいろんなパターンであるんですよ。ものすごい。だから色々本当に試作して試作して、色々試して試して、今の形に行き着いてるんだと思いますね。

@baseballyama 21:07
そうですね。プライベートリポジトリで相当いろんな案を試してディスカッションして今のインターフェースに至ってるんで、相当な試行錯誤を経てますね、実際に。

@TheoSteiner 21:19
実際に新しいAPIで何が手に入るかわかったら、このAPI嫌だって思えなくなる気もしますね。やっぱり今までビューとかReactである程度当たり前だったコンポーザビリティは今までSvelteにあんまりなかったので、たぶんすごいシンプルなアプリとか、今までしか使ってこなかった方とかはやるとかいらないでしょって思うかもしれないんですけど、ある程度の複雑さを超えたら、やっぱりそのコンポーザビリティ、いわゆるフックが必要になってくると思うので、それがRune前のシンタックスでほぼ実装不可能だったので、主にライブラリのメンテナーとか、ちょっとでかい大規模のプロジェクトのメンテナーは、この新しいAPIを手に入ってたぶんすごい喜ぶと思います。続いてですけども、この新しいAPIについて学びたい時はどこに行けばいいですか。Tomoさんいつもウェブサイトの翻訳すごい頑張っているので、ちょっと新しいサイトについて振っても大丈夫ですか。

7. omnisiteのリリース（日本語に翻訳予定？） 22:11

@tomoam 22:25
はい、大丈夫です。まず、Svelteの公式のホームページ、英語版の方ですね。そちらの方では、今までは、Svelte自体のドキュメントサイトで、SvelteKitのドキュメントサイトで、あと、learn.svelte.devという、そのSvelteを学習するためのサイトっていうふうに3つ分かれていたんですね。それが今、1つのサイトにまとまりました。リリースと同時に、ちょっと何日か遅れたんですけど、リリースと同時に1つのサイトにまとまって、そこでチュートリアルができるようになっています。なので、svelte.devもしくは、Svelteで検索していただくと、そのSvelteの公式ページに行って、チュートリアルっていうところに行くとですね、インタラクティブなチュートリアルをちょっとずつ学習が進めていける。これ自体は、Svelteの方からあったんですけれど、非常に簡単にSvelteが学習できて、本当に、学習し終わった後に、自分がアプリケーションを作れるようになるまで構成されているチュートリアルが、このサイトに入っています。日本語版の方なんですけれど、日本語もようやく最近、翻訳の方とやり始めまして、その準備が整い次第公開という形になります。Svelteのチームって、本当に自分たちで作ったそのSvelte、SvelteKitを使って、ちゃんと自分たちのサイトを結構毎回毎回1から作り直すんですよね。本当に自分たちがファーストユーザーになるっていう意味でも、色々やったりするんですよ。それはすごい良いことなんですけれど、今回また構成が色々変わってしまったので、ちょっと少しだけ、日本語サイトの方もそれに追随するのにお時間いただくかもしれないです。

@TheoSteiner 23:51
はい。ドキュメントとかもすごい変わってきたと思うので、その翻訳自体も時間かかりそうです。

@tomoam 23:58
そうですね。ただ、テンプレートシンタックスって、もともとはifやeachとか多分そのあたりとか変わってないのと、SvelteKit自体のドキュメントもあまり変わっていないので、多分その辺りは割とすぐに移行できるかなと。チュートリアルも多分リアクティビティの辺りとかイベント周りは変わってるんですけれど、それ以外の基本的なところ、スタイリングのスコープの話であるとか、そういったところはあまり変わっていないので、多分大丈夫かなと。でも、今回のキーであるRuneとかは、もう完全に1から書かれているので、ちょっと少しお時間をいただくかもしれないです。

@TheoSteiner 24:30
実はこのOmniサイトもちょっとした変更があったと思いますけど、なんと、フォント周りで変更がありました。英語でセリフのフォントを使って、ちょっと新聞っぽく書いてあるんですけど、日本語もセリフフォントを使う予定です。

@tomoam 24:47
まず最初のデフォルトの、公式のOmniサイトの方だと、もちろん日本語のフォントとか最初から入っていないので、英語の方でセリフが指定されるようになってるので、これ多分、ブラウザの細かい挙動を知ってるわけじゃないんですけれど、多分日本語だと明朝体にフォールバックされるようになると思います。なので、多分それぞれお使いの、例えばWindowsであったりMacだったり、Macだったら多分ヒラギノ明朝が使われるんだと思うんですけれど、それで表示されるようになると思います。今実際少し翻訳作業を進めているんですけれども、結構見やすい、読みやすいですね。ポップな感じっていうよりはちょっとシリアスな感じにはなるんですけれど、結構印象的で読みやすいと個人的には思います。山下さん、このあたり、意見はどうですか。

@baseballyama 25:28
僕、特にデザインみたいなところはちょっと無頓着というか、あまりセンスがないんで。うん、いいんじゃないですかね。感想しかちょっとなかったですね。でもね、このフォントもあれなんですよ。これも何回も試行錯誤して、最初は全部の箇所で同じようなフォントを使ってたんだけど、やっぱりプレイグラウンドとか場所によって、ここはこのフォントの方がいいみたいなので。これ、場所によって結構フォント、今確か違うの使ってますよね。

@tomoam 25:57
そうですね。プレイグラウンドとかチュートリアルとかの、もちろんエディタの中ではちゃんと等幅フォントを使ってますし。そのエディタの中の、チュートリアルの中の、デモ画面で使われてるフォントっていうのはセリフではなかった気がします。

@baseballyama 26:14
ここも結構ユースケースというか、利用箇所ごとに最もいいと思われるフォントを選んでやってるっていうのもSvelteらしいですね。

@TheoSteiner 26:24
こだわっているフレームワークですね。つまり、リッチさんがすごいこだわってる方なので、リッチさんから広まってる文化って言ってもいいかもしれません。そのOmniサイトが日本語にポートされてから、どこからアクセスできますか。Svelte.jpになる

@tomoam 26:41
そうですね。今までと同じSvelte.jpでホストすることになると思います。

8. svelteのコミュニティ周り 26:45

@TheoSteiner 26:46
じゃあ最後にちょっとSvelte日本のコミュニティ面に入りたいと思います。せっかく今日コミュニティの方がいるので、これをきっかけにもうちょっとSvelteについて詳しくなりたい方もいると思うので、その人たちはどこに行けばSvelteの日本のコミュニティに入れますか。

@tomoam 27:07
ありがとうございます。Svelteは、元々のSvelteの公式自体はDiscordの方で活動してるんですけれど、今新しくDiscordに行くと、各国用のDiscordがあって、そこをたどれるようになってます。なので、公式のDiscordに行っていただいて、そこから日本のDiscordを選ぶと、日本のDiscordに行きつくことができます。あと、ミートアップも定期的にSvelte Japanのコアチームで開催してまして、Svelteコアチームのメンバーですね。SvelteコアチームのメンバーのShamoKidさんという方と、あとSvelte Meta Tagの作者である大江さんという方がいらっしゃいまして、その2人が今度11月の8日にSvelte Japanオンラインミートアップというのを開催されます。なので、興味がある方はそれに参加してみてください。

@TheoSteiner 27:51
このエピソードの編集が間に合うかはちょっとわからないんですけど、もし編集の都合で間に合わなかったら、きっとこれ、結構頻繁にオンラインミートアップ開いてるので、きっと年内にはもしかしたらないかもしれないですけど、遅くて来年の頭にもう1回多分オンラインミートアップがあると思うので、Discordに入っていればだいたいそのイベント周りはわかるので、ぜひDiscordに入っておいてください。インターナショナルのDiscordのアクセスの仕方ですけど、実はsvelte.devのチャットにアクセスすればそのSvelteのコミュニティのDiscordに入れるので、そこから日本のコミュニティのDiscordにもたどり着くのでぜひ見てください。実は2方は知ってるかどうかはまだわからないんですけど、Svelte Hackっていう大会が実は今開催中。確か3つのカテゴリーで3000ドルまでもらえるので、初めてSvelteに触る人でもまあまあのチャンスかもしれません。Svelte使ってみたいとかって思ったら、使ってみて3000ドル稼ぐのもいいかもしれないです。

@tomoam 29:03
いいですね。

9. 最後に伝えたいこと 29:05

@TheoSteiner 29:05
このポッドキャストを終わらせる前に、何か話しておきたいこととか、触れてみたいことってありますか。

@baseballyama 29:12
Svelteの前半の方であった機能みたいなところで、これちょっとお気に入りだけど、さっきそびれちゃったみたいなのがあるんですけど、ちょっと2個あって、1個はテンプレート部でTypeScript使えるようになった。大事ですね。型大好きの人たち、僕も含めてにとっては結構いいニュースだと思うんで、これは結構いい進化だなって思うのと、あとCSSスタイル部のところで、Svelteというか、これはCSSパーサーの問題だったんですけど、例えばコンテナクエリとか一部の最新の機能が、パーサーの対応がボトルネックになってちょっと使えないみたいなことがたまに起きてたんですけど、それを受けてSvelte 5ではCSSパーサーも自作してます。Svelteコンパイラーにとって必要なパースって、普通のCSSが必要とするパースよりもちっちゃいサブセットのパースでいいんですよね。なので、必要なパースだけをするようにすることで、最新の言語仕様とか、何もしなくても対応できたり、対応するにしてもすごい少ない労力で対応できるようになった。ここもちっちゃいところですけど、いい進化だなって個人的には思ってます。

@TheoSteiner 30:29
こういうふうにちょっとずつ進化して、もっと今っぽいフレームワークになっていくなって、僕も見て感動します。

@tomoam 30:38
本当に。Svelte 5のリリースっていうのは、もちろん、先ほど話したRuneであるとかパフォーマンスの面でもそうですし、JavaScriptのバンドルサイズっていうところでもそうですし、それでいて互換性を保ちつつって、チュートリアルもすごい充実している。どんな規模のアプリケーションでもサイトでも構築が可能になっているフレームワークになっているので、ぜひこれを聞いて興味がある方に使っていただきたいなと思ってます。何かわからないことがあれば、Svelte JapanのDiscordに来ていただければ日本語でも対応できますので、よろしくお願いします。

10. クロージング 31:08

@TheoSteiner 31:08
というわけで、今回はSvelte 5について話していきました。LINEのフロントエンド開発組織UITでは、このようなフロントエンドに関する議論やキャッチアップを日々行っております。過去のエピソードでは社内の学習企画から始まったコンテンツも多くありますので、今後も発信していければなと思います。Tomさん、山下さん、ありがとうございました。

@tomoam 31:33
ありがとうございました。