最近MIERUNEではフロントエンドのフレークワークとして、SvelteJSを採用することが増えていて、社内では日頃からSvelteがどれくらい便利なのかを実感しています。
しかし、Svelteは新しいフレームワークであること、そして、Svelte 5がリリースされてからあまり時間が経っていないこともあって、ドキュメントや使用例がまだ少ないことが現在Svelteを採用する一つのデメリットです。
実際、ChatGPTとかの生成系AIにSvelteのコードの書き方について質問した際にもSvelte 4のコードが吐き出されたりすることが結構多いです。
一方で、Svelteは最近開発されたフレームワークということもあって、公式では生成AIに対応するためのドキュメントをすでに公開されています。
SvelteJSのLLMs向けドキュメント
SvelteJSのドキュメントページにアクセスすると、一般的な人間向けのドキュメントの他に「Docs for LLMS」というページも用意されています。
「Docs for LLMs」のドキュメントページでは、生成AI向けのtxt形式のドキュメントが用意されていて、例えば llms-full.txt を見てみると、生成AI向けにSvelteJSのドキュメントをまとめたファイルが用意されているのがわかります。
実際SvelteJSの生成AI向けドキュメントを使ってみる
実際SvelteJSの生成AI向けドキュメントを使うためには、ChatGPTで独自の資料を読み込ませたGPTを作るための機能を使います。
ChatGPTの「MyGPTを作成」の機能から独自の資料を読み込ませた生成AIを作成することができて、知識部分でSvelte公式が提供している llms-full.txt を読み込ませることによってChatGPTに最新のSvelteJSについての知識を提供することができます。
AIを使ってみる
実際SvelteJSのドキュメントを読み込ませたAIを使ってSvelteJSのコンポーネントを生成させてみます。
まずは、普通のGPT-4oでインターネットでの検索をオフにした状態で数字を数えるためのコンポーネントを生成させてみます。
「Svelte 5を使ってクリックされたら表示されている数字が増えるボタンのコンポーネントを作って」のプロンプトでSvelte 5を指定した状態でコンポーネントを生成させましたが、出力されたコードは以下のようにSvelte 4の構文になっているのがよくわかります。
<script>
// カウントの状態を保持する変数
let count = 0;
// カウントを増加させる関数
function increment() {
count += 1;
}
</script>
<style>
button {
padding: 10px 20px;
font-size: 16px;
background-color: #007BFF;
color: white;
border: none;
border-radius: 5px;
cursor: pointer;
transition: background-color 0.3s;
}
button:hover {
background-color: #0056b3;
}
</style>
<!-- ボタンを表示し、クリック時に数字を増やす -->
<button on:click={increment}>
カウント: {count}
</button>
次は、ドキュメントを読み込ませたAIモデル（SvelteGPTと呼びます）に同じプロンプトを実行してみます。
同じプロンプトを入力して数字を数えるコンポーネントを作らせましたら、しっかりとSvelte5で実装されたRunes機能を使ったコンポーネントが出力されました。
<script>
// カウンターの状態を保持
let count = $state(0);
// ボタンクリック時の動作
function increment() {
count += 1;
}
</script>
<button onclick={increment}>
数字: {count}
</button>
<style>
button {
font-size: 1.5rem;
padding: 0.5rem 1rem;
border: none;
background-color: #6200ea;
color: white;
border-radius: 0.25rem;
cursor: pointer;
transition: background-color 0.3s ease;
}
button:hover {
background-color: #3700b3;
}
</style>
結論
SvelteJSが比較的に新しいフレームワークということもあって、日本語でのドキュメントが他のメジャなフレームワークと比較して少ないことや、学習データが少ないことでChatGPTとかの生成AIに頼った際に正しくない情報が返されるリスクが高いなどのデメリットが挙げられます。
しかし、令和のフレームワークということもあって、公式から生成AI向けのドキュメントが提供されていて、公式のドキュメントからAIを使って最新の情報を選び抜いてユースケースに適用できるのが一つの大きなメリットです。
Svelteの最新ドキュメントを読み込ませたモデルは結構手軽に作れるので、Svelteを触っている方はぜひ試してみてください。