Svelte最新情報：2020年10月

新しいオブジェクトメソッド、詳細な学習リソース、そして数多くの統合例が登場！

Dani Sandoval 2020年10月1日

「Svelteの最新情報」シリーズの第一弾へようこそ！今後はこのブログ記事を毎月更新し、新機能、バグ修正、そしてコミュニティからのSvelteプロジェクトのショーケースを紹介していきます。

新機能

use:obj.methodにより、オブジェクト内で定義された関数をアクション内で使用できるようになりました（例、3.26.0、警告は3.27.0で削除）。
_が「数値セパレータ」としてサポートされるようになりました。.や,と同様です（例、3.26.0）。
import.metaがテンプレート式で動作するようになりました（例、3.26.0）。
~と+コンバイナを使用したCSSセレクタがサポートされるようになりました（例、3.27.0、コンパイラ修正は3.29.0）。
{#key}ブロックが利用可能になり、任意のコンテンツを式に基づいてキー化できるようになりました。式の変更時に、{#key}ブロック内のコンテンツは破棄され、再作成されます。詳細な説明と実装方法については、SvelteチームメンバーのTan Li Hauによる新しいブログ記事をご覧ください。（詳細情報、3.29.0）。
スロットを子コンポーネント経由で転送できるようになりました！以前は、余分なラッパー<div>を追加する必要がありました。（詳細情報、3.29.0）。
TypeScriptを使用する場合、createEventDispatcherメソッドの型を指定できるようになりました。

<script lang="ts">
	import { createEventDispatcher } from 'svelte';

	const dispatch = createEventDispatcher<{
		/**
		 * you can also add docs
		 */
		checked: boolean; // Will translate to `CustomEvent<boolean>`
		hello: string;
	}>();

	// ...
</script>

これにより、指定されたイベント名とその型を使用してのみdispatchを呼び出すことができます。VS Code拡張機能のSvelteもこの新機能に対応するよう更新されました。これらのイベントに対して強力な型付け、自動補完、ホバー情報を提供します。

Sapperからの新機能！

Sapper 0.28.9がリリースされました。主なハイライトとしては、CSP nonceのサポートの大幅な向上、エクスポートされたページのアセットプリロードサポート、エラーページの$pageストアでのエラー詳細の提供などがあります。

さらに、最近のリリースでSapperのCSS処理が書き直され、既存のCSS処理のバグが修正され、Rollupプラグイン内で完全にCSS処理が行われるようになり、ルーティングシステムでCSSを内部的に登録する必要がなくなりました。Sapper開発者の皆様、素晴らしい仕事に感謝いたします！

重要なバグ修正

<details>要素のopen属性に対するルールが、CSSコンパイルによって削除されなくなりました（例、3.26.0）。
prettier-plugin-svelteが、特にインライン要素周辺の空白文字の処理において、より優れた動作をするようになりました。また、<pre>タグ内の書式を保持し、Prettierでサポートされていない言語（SASS、Pug、Stylusなど）の書式設定を行わなくなりました。

今後の予定

Svelteの第二回グローバルオンラインカンファレンスであるSvelte Summitが10月18日に開催されます！無料登録して、リマインダーと講演の最新情報を受け取りましょう！

すべての機能とバグ修正については、SvelteとSapperのCHANGELOGをご覧ください。

Svelteショーケース

このCustomMenuの例は、OSの右クリックメニューを置き換える方法を示しています。
GitHubテトリスでは、Gitコミット履歴内でテトリスのようなゲームをプレイできます。
私の代表者は、米国の居住者が議会の代表者に関する情報を取得するのに役立つ、Svelteで構築されたウェブサイトです。
Pick Paletteは、Svelteで作成されたカラーパレットマネージャーです！

詳細な学習：

Svelte 3 Up and Runningは、Svelte 3を使用して本番環境対応の静的Webアプリを構築する方法について解説した新しい書籍です。
Sapperチュートリアル（集中講座）では、SvelteベースのアプリケーションフレームワークであるSapperの機能を詳しく解説しています。
Svelte Society Day Franceが9月27日に開催され、さまざまなトピックがフランス語で紹介されました！完全版の録画はこちらで見ることができます。

プラグアンドプレイコンポーネント：

svelte-zoomは、デスクトップとモバイルで画像に「ほぼネイティブな」パンとズーム機能を提供します。
svelte-materialifyは、50以上のコンポーネントを備えたSvelte用のマテリアルコンポーネントライブラリです。
svelte-undoableを使用すると、bind:を使用して簡単に元に戻す/やり直す機能を実装できます。
このTiltコンポーネントは、マウスに追従してホバーされた要素が傾く一般的なUXパターンを実装しています。

今月のJS技術の使用方法に関する多くの例：

お知らせ：Svelteをスタックに統合する方法（その逆も同様）を示すSvelte integrationsリポジトリがあります。特定の技術をSvelteで使用する方法について質問がある場合は、そこで回答が見つかるかもしれません...そして、Svelteで何か動作するものを実現した場合は、貢献をご検討ください！

さらに素晴らしいSvelteプロジェクトについては、Svelte Society、Reddit、Discordをご覧ください…そして、ぜひあなた自身の作品も投稿してください！

来月お会いしましょう！

ちなみに、SvelteにはOpenCollectiveがあります！すべての寄付と費用は、透明性の高い公開元帳に掲載されています。寄付者、寄付額、資金の使い道を確認したり、経費を申請して払い戻しを受けたりすることができます！