svelte.dev: 完全リニューアル
新しいサイトでは、アクセシビリティの修正、新機能、下部ナビゲーションバーが提供されます。
4年前、Svelte v3の初期バージョンがリリースされた際には、皆さんご存知のシングルページのドキュメントが含まれていました。そのドキュメント構造は、SvelteのAPIが増え続け、詳細が追加されても、そのまま維持されていました。その結果、シングルページはどんどん大きくなり、必要な情報を見つけるのが難しくなってきました。コミュニティからは刷新を求める声が上がっていましたが、ついに実現しました！
新しいsvelte.devをご紹介します。これは、古いウェブサイトを完全に刷新したものです。
複数ページのドキュメント
目次が非常に大きくなり、全体を見るには画面を6つほどスクロールする必要がありました。皆様のご意見を反映し、ドキュメントはすべて複数のページに分割され、すべてのページのセクションが右側のサイドバーにリストアップされるようになりました。
Svelteによって公開されているすべてのモジュールも、サイドバーの `ランタイム` セクションにリストされています。
svelte/compiler は**コンパイラとAPI**セクションにあります。
また、古いウェブサイトからのすべてのリンクが新しい正しいページにリダイレクトされるように、細心の注意を払っています。
検索
検索機能がないため、Ctrl+Fでは重要度順ではなく出現順に結果が返されるため、必要な情報を見つけるのが面倒でした。Ctrl+FはJSを必要としないなどの利点がありましたが、サイトが複数ページになったため、もはや選択肢ではなくなりました。
そこで、新しいウェブサイトには検索バーが搭載され、ドキュメントとAPI全体を検索できるようになりました。Ctrl+K（Macユーザーの場合はCMD+K）を押して検索を開始してください。JavaScriptがなくても動作します！
ライト、TypeScript、アクション！
新しいウェブサイトには、JavaScript / TypeScriptの切り替え機能が搭載されているため、好みの言語でドキュメントを表示できます。各モジュールのエクスポートされた型は、ページの下部にリスト表示され、簡単に参照できます。型はSvelteのソースコードから自動的に生成されるため、常に最新の状態に保たれます。
すべてのJavaScriptとTypeScriptのコードスニペットには、型ヒントが用意されています。変数にカーソルを合わせると、その型が表示されます。これにより、ビルド時にドキュメントの型チェックが可能になり、常に最新の状態に保たれます。
また、（ついに！）アクションのドキュメントを追加しました。SvelteアクションはDOMと対話する方法であり、アプリケーションにインタラクティビティを追加する優れた方法です。アクションのドキュメントはTypeScriptでも利用できます。
<script lang="ts">
import type { Action } from 'svelte/action';
const foo: Action = (node) => {
// the node has been mounted in the DOM
return {
destroy() {
// the node has been removed from the DOM
}
};
};
</script>
<div use:foo />ダークモード
夜間のコーディングセッションでドキュメントを読めるように、ウェブサイトにダークモードを追加してほしいというユーザーからの長年の要望に応え、ついに追加しました！ ウェブサイトにはダークモードの切り替え機能が追加され、OSのダークモード設定とも同期されます。上部ナビゲーションバー（モバイルでは下部ナビゲーションバー）から切り替えることができます。
REPLの更新
REPLは完全にタイプセーフになるようにゼロから書き直され、ダークモードなどの機能が搭載されました。CodeMirror 6にアップグレードするために再実装され、アクセシビリティの向上、複数選択モード、パフォーマンスの向上、ツリーシェイキングなど、多くの機能が追加されました。
ホームページのデザイン変更
ホームページが同じように愛されなければ、ウェブサイトのリニューアルとは言えませんよね？ 🙃
ホームページもkit.svelte.devに合わせて更新され、@vedamによる美しいSvelte Machineが掲載されています。
下部ナビゲーション！
従来の上部ナビゲーションバーではなく、モバイルでの下部ナビゲーションバーの実験についてツイートしました。反響は非常に好意的だったため、導入を決定しました。これにより、片手だけでモバイルでウェブサイトを簡単に操作できるようになります。また、できるだけ少ない操作で目的の場所にたどり着けるように配慮しました。サイトのドキュメントセクションにいる場合は、他のドキュメントページを参照したいと思うでしょう。そのため、ナビゲーションバーを開くと、デフォルトでこれらのページが表示され、一般的なサイトナビゲーションに1レベル上がるオプションも用意されています。
モバイルの場合は、すでに下部に表示されています。デスクトップの場合は、ブラウザウィンドウのサイズを小さくすることで表示できます。
Svelteウェブサイトの統合
svelte.dev、kit.svelte.dev、learn.svelte.devはすべて同じデザインシステムを使用し、互いに一貫性が高くなりました。これにより、ウェブサイト間のナビゲーションが容易になり、メンテナンスも容易になります。サイト間で共有される`@sveltejs/site-kit`というパッケージがあり、過去4か月間にすべての共通コードをこのパッケージに移動する際に、厳格な変更が行われました。
たとえば、ダークモードトグルは`@sveltejs/site-kit`に実装しました。その後、learn.svelte.devとkit.svelte.devのパッケージを更新するだけで、これらのサイトにダークモードトグルが自動的に追加されました（これが、これらのサイトにsvelte.devの再起動前にダークモードトグルが追加された理由です）。
今後の予定
リリース後も、多くの計画があります。その一部をご紹介します。
- ブログページのデザイン変更
- 検索の改善
- プレイグラウンド：REPLとサンプルページの統合
- フォールバックとしてrollupを使用したwebcontainerベースのREPLを作成することで、Svelte REPLとチュートリアルのインフラストラクチャを統合
- フィードバックへの対応