2
0

Delete article

Deleted articles cannot be recovered.

Draft of this article would be also deleted.

Are you sure you want to delete this article?

SvelteAdvent Calendar 2024

Day 7

Svelte で 3D 表示を行うライブラリ Threlte Ex1: Svelte5 対応を試す

Last updated at Posted at 2024-12-06

はじめに

Svelte 5 が出てもう2か月目となったが、その間の開発周辺のサポートはまだまちまちだったりするものもある。
という事で、Svelte 5 の採用をどこまで判断するか考えるべく、周辺のライブラリを漁りにいくわけだが…。はて、Threlte はどうだろうかと気になった。
僕は、以前から Threlte の記事を Qiita 上に上げて行っているが、これは Svlete 4 で作成したもの。
もちろん、そのまま動くとは思わないので、対応状況がキニナルわけだ。

という事で僕はこのアドカレネタというのも込みで、 Ex シリーズとしてこの調査に乗り出した :spy:

Svelte 5 の対応状況の調査

とりあえずまぁ、対応状況を調べるには公式レポジトリを探しに行くのが一番話が速い。

ということで Issue の中で Svelte 5 対応がないかを検索する。。
としたら、速攻で出てきた。

Issue のステータスを見てみると、既に Closed とある。
お??とワクワクしつつ、やり取りを見てみる…。

ナント、もうすでに9月時点で対応が終わってた!!!!

実際に試してみる

ということで、早速試してみる。

プロジェクト作成

現状は next ブランチに入っているものを使用することになるため、そこからプロジェクトを作成していく。

npm create thlelte@next

すると気付く…。
おや、Svelte 5 対応は、Threlte 8 に入っている様だ。Threlte 8 が準備中だ!!

image.png

もろもろオプションを選択して、プロジェクトの作成を完了させる。

image.png

作成が終わったら、パッケージをインストールする。
(処理が速い pnpm を使いたいので、npm ではインストールせずに後から pnpm でインストールするように指定した。

cd threlte7-svelte5
pnpm install

2024-11-28 のこのポスト執筆時点では、npm create threlte で作成されるプロジェクトはまだ Svelte 4 を使用している様だった。
なので、今回はマニュアルインストールの手段を取った。

image.png

開発環境を起動してみる

開発環境を立ち上げて、実際に動くかを見てみる。

pnpm run dev --oepn

ちゃんと動いた!

2024-11-28 07.18.46 localhost 670cf9a3e40d.png

ロードマップを見てみる

Threlte は GitHub Project で Svelte 5 対応の Issue を管理している。

これを見てみると、現時点では以下のタスクが残っている様子。

  • 以降ガイドの作成
  • <Gizmo> の内部を <HUD> を使うように移行
  • ハードコードされた svelte.d.ts タイプファイルの型定義から生成された型定義に移行する
    • こちらはどうやら Threlte 8 における部分での「目標」の様子

残っているタスクも少ないので、そこまで時間はかからなそうという印象。

まとめ

これで、Threlte が Svelte 5 に対応できている事が分かった。
また、この検証のおかげで Threlte 8 が準備中であることも分かった。
次回は Threlte 8 を調査してみるのも面白いかもしれない。

2
0
0

Register as a new user and use Qiita more conveniently

  1. You get articles that match your needs
  2. You can efficiently read back useful information
  3. You can use dark theme
What you can do with signing up
2
0

Delete article

Deleted articles cannot be recovered.

Draft of this article would be also deleted.

Are you sure you want to delete this article?