Svelte の最新情報: 2021年4月

数ヶ月（あるいは数年）にわたる開発を経て、2つのプロジェクトがついに公開されました。SvelteKit がパブリックベータ版になり、スロット付きコンポーネントが Svelte で利用可能になりました！

SvelteKit の最新情報

SvelteKit - SSR、サーバーレスアプリケーション、または SPA を構築するための Svelte の汎用性の高いフレームワーク - が正式にパブリックベータ版になりました。バグがあることを想定してください！詳細は最新のブログ記事をご覧ください。1.0 のリリースが近い時期を知りたいですか？GitHub のマイルストーンを確認してください。

使用方法、Sapper との違い、新機能、移行パスについて詳しく知りたいですか？Antony、Kev、Swyx とのディスカッションを深掘りした、今週のSvelte Radio のエピソードをご覧ください。

Svelte & 言語ツールの新機能

• <svelte:fragment slot="..."> を含むスロット付きコンポーネントにより、コンポーネントの利用者はリッチコンテンツで特定のスロットをターゲットにすることができます（Svelte 3.35.0、言語ツール 104.5.0）
• リンク編集が Svelte ファイルの HTML で機能するようになりました（言語ツール、104.6.0）
• 型定義 svelte.d.ts が順番に解決されるようになり、ライブラリの作者は Svelte コンポーネントと共に型定義を提供できるようになりました（言語ツール、104.7.0）
• vite-plugin-svelte は、Vite で Svelte を一般的に使用するために利用できます。npm init @vitejs/app にはこのプラグインを使用した Svelte オプションが含まれています。

---

コミュニティショーケース

アプリ & サイト

• Nagato は、一般的な時間追跡ツールと To Do ツールを 1 か所にまとめるタスク管理ツールです。
• type-kana は、日本語のひらがなとカタカナを学ぶためのクイズアプリです。
• Pittsburgh Steps は、ペンシルベニア州ピッツバーグにある 800 を超える公共の屋外階段のインタラクティブマップです。
• Music Mode Wheels は、音楽モードをインタラクティブなホイールとして表示するウェブサイトです。
• Critical Notes は、ゲームマスターとプレイヤーがロールプレイングゲームのキャンペーンと冒険を追跡するのに役立ちます。
• Svelte Game of Life は、TypeScript + Svelte で実装された Conway's Game of Life の教育的な実装です。
• foxql は、ブラウザ上で動作するピアツーピアの全文検索エンジンです。

デモ、ライブラリ、ツール & コンポーネント

• svelte-nodegui は、Node.js と Svelte を使用して高性能なネイティブクロスプラットフォームデスクトップアプリケーションを構築する方法です。
• Svelte Story Format を使用すると、Storybook で Svelte 構文を使用して「ストーリー」を記述できます。詳細はStorybook ブログをご覧ください。
• SelectMadu は、検索、複数選択、非同期データの読み込みなどをサポートする、select メニューの代替です。
• Svelte Checklist は、Svelte で構築されたカスタマイズ可能なチェックリストです。
• Suspense for Svelte は、React の <Suspense> のコアアイデアを実装する Svelte コンポーネントです。
• MiniRx は、Svelte および TypeScript で動作する RxJS Redux Store です。
• svelte-formly は、Svelte および Sapper 用の動的フォームを生成します。
• 7ty は、Svelte を使用し、コンポーネントの部分的なハイドレーションをサポートし、Sapper や 11ty に似たファイルベースのルーティングを使用する静的サイトジェネレーターです。

独自のコンポーネントを提供したいですか？ 独自のコンポーネントを送信して、Svelte Society サイトのパッケージリストに追加してください。

スターター

• sveltekit-electron は、SvelteKit を使用した Electron のスターターキットです。
• sveltekit-tailwindcss-external-api は、create-svelte を使用して TailwindCSS と外部 API を備えた Svelte プロジェクトを構築するために必要なすべてです。
• Sapper Netlify は、Netlify 関数で実行できる Sapper プロジェクトです。

特定のスターターをお探しですか？ svelte-adders と、コミュニティサイト sveltesociety.dev の他の多くのテンプレート例をご覧ください。

学習リソース

• Svelte と SvelteKit で Web サイトを構築する方法 は、新しい SvelteKit セットアップを段階的に説明するチュートリアルです。
• prefers-reduced-motion 用の Svelte ストア は、ユーザーがモーションの削減を要求したかどうかを示す値を持つカスタム Svelte ストアを作成し、アクセシビリティを向上させる方法を示しています。
• Svelte での TypeScript のサポート は、Svelte で TypeScript を使用するための MDN ガイドです。
• svelte-window でセルをマージする方法 は、表のセルをマージするための人気の react-window ツールのポートである svelte-window のチュートリアルです。この移行の詳細については、react-window 1:1 から svelte-window へ をご覧ください。
• 簡単に埋め込める Svelte コンポーネント は、Rollup と script タグを使用して Svelte コンポーネントをどこにでも埋め込む方法を説明しています。
• Svelte プロジェクトを Rollup から Snowpack に変換する は、一般的な移行パターンをビデオで説明しています。
• Svelte & Sapper でルーティングを国際化する方法 は、leaf.cloud がサイトをオランダ語に翻訳した方法を説明しています。
• Svelte Store: Svelte Store を使用したリアクティブコンテキスト は、「コンテキスト値をリアクティブにするにはどうすればよいですか？」という質問に対するビデオ回答です。
• Cloudinary と Svelte でソーシャル共有画像を作成する は、JAMstack Web サイトの Open Graph 画像と Twitter カードを動的に開発する方法を示す Cloudinary のビデオです。

来月もお会いしましょう！

何か追加したいことはありますか？Svelte Society、Reddit、Discord に参加してください！