Skip to main content

What’s new in Svelte: 2021年4月

SvelteKitベータとslotの新しい使い方

Dani Sandoval

数ヶ月(数年)かけて進めてきた2つのプロジェクトが公開されました。SvelteKitは現在パブリックベータとなり、slotted components はSvelteで使えるようになりました！

SvelteKitはどう？(What’s up with SvelteKit?)

SvelteKit - SSR、サーバーレスアプリケーション、SPAなどを構築するためのSvelteの汎用的なフレームワーク - が正式にパブリックベータになりました。バグがあるかも！　詳細は最新のブログ記事をご覧ください。1.0がいつリリースされるか知りたいですか？ githubのマイルストーンをチェックしてみてください。

始め方、Sapperとの違い、新しい機能や移行方法を学びたいですか？　今週のSvelte Radioのエピソードで、AntonyとKevとSwyxが深く掘り下げているのでチェックしてみてください。

SvelteとLanguageツールの新着情報(New in Svelte & Language Tools)

  • Slotted components (<svelte:fragment slot="...">を含む) を使用すると、コンポーネントの利用者が特定のスロットにリッチなコンテンツを割り当てることができます (Svelte 3.35.0, Language Tools 104.5.0, docs と tutorial をチェックしてみてください)
  • Linked editing がSvelteファイル内のHTMLで機能するようになりました (Language Tools, 104.6.0)
  • 型定義 svelte.d.ts が正常に解決されるようになり、ライブラリの作成者がSvelteコンポーネントと一緒に型定義を配布できるようになりました (Language Tools, 104.7.0)
  • ViteでSvelteを使用するのに vite-plugin-svelte が利用可能になりました。npm init @vitejs/app はこのプラグインを使用したSvelteオプションが含まれています。

Community Showcase

アプリ & サイト

  • Nagato はポピュラーなタイムトラッキングツールやToDoツールを1箇所につなげられるタスク管理ツールです。
  • type-kana は日本の文字である ひらがな (hiragana) と カタカナ (katakana) を学ぶのに役に立つクイズアプリです。
  • Pittsburgh Steps はペンシルベニア州ピッツバーグにある800以上の公共の屋外階段のインタラクティブなマップです。
  • Music Mode Wheels は音楽のモードをインタラクティブなホイールとして表示するWebサイトです。
  • Critical Notes はゲームマスターとプレイヤーがロールプレイングゲームのキャンペーンやアドベンチャーを記録するのに役立ちます。
  • Svelte Game of Life はコンウェイのライフゲームの教育向けの実装で、TypeScriptとSvelteで書かれています。
  • foxql はブラウザ上で動作するピアツーピアの全文検索エンジンです。

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

  • svelte-nodegui はパフォーマンスの良いネイティブでクロスプラットフォームなデスクトップアプリケーションをNode.jsとSvelteで構築する方法です。
  • Svelte Story Format は、Svelteの構文でStorybookの “ストーリー(stories)” を書くことができます。詳しくは Storybook blog をご覧ください。
  • SelectMadu は検索、複数選択、非同期データロードなどをサポートする、セレクトメニューの代替です。
  • 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 のサイトから提出して頂ければ、パッケージのリストに追加することができます。

スターター(Starters)

  • sveltekit-electron はSvelteKitを使ったElectronのスターターキットです。
  • sveltekit-tailwindcss-external-api はTailwindCSSと外部のAPIを使用するSvelteプロジェクトを構築するために必要なことが全て揃っており、create-svelteで作られました。
  • Sapper Netlify は Netlify functions 上で動作するSapper Projectです。

特定のスターターをお探しですか？ svelte-adders や、その他多数のテンプレート例をコミュニティサイト sveltesociety.dev からチェックしてみてください。

学習リソース

また来月お会いしましょう！(See you next month!)

なにかご意見がありますか？ Svelte Society、Reddit、Discordにジョインしてください！