What's new in Svelte: 2021年4月
SvelteKitベータとslotの新しい使い方
翻訳 : Svelte日本コミュニティ
原文 : https://svelte.dev/blog/whats-new-in-svelte-april-2021日本語版は原文をよりよく理解するための参考となることを目的としています。
正確な内容についてはsvelte.devの原文を参照してください。
日本語訳に誤解を招く内容がある場合は下記のいずれかからお知らせください。
数ヶ月(数年)かけて進めてきた2つのプロジェクトが公開されました。SvelteKitは現在パブリックベータとなり、slotted components はSvelteで使えるようになりました!
SvelteKitはどう?(What's up with SvelteKit?)permalink
SvelteKit - SSR、サーバーレスアプリケーション、SPAなどを構築するためのSvelteの汎用的なフレームワーク - が正式にパブリックベータになりました。バグがあるかも! 詳細は最新のブログ記事をご覧ください。1.0がいつリリースされるか知りたいですか? githubのマイルストーンをチェックしてみてください。
訳注 :
最新のブログ記事
の日本語翻訳版はこちらです。
始め方、Sapperとの違い、新しい機能や移行方法を学びたいですか? 今週のSvelte Radioのエピソードで、AntonyとKevとSwyxが深く掘り下げているのでチェックしてみてください。
SvelteとLanguageツールの新着情報(New in Svelte & Language Tools)permalink
- 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 Showcasepermalink
アプリ & サイト
- 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 からチェックしてみてください。
学習リソース
- How to Build a Website with Svelte and SvelteKit は新しいSvelteKitのセットアップを順を追って説明するチュートリアルです。
- A Svelte store for prefers-reduced-motion では、ユーザーがモーションの軽減を要求しているかどうかを示す値を持つカスタムのSvelte storeを作成して、アクセシビリティを向上させる方法について説明しています。
- TypeScript support in Svelte はSvelteでTypeScriptを使う方法についてのMDNのガイドです。
- How to merge cells with svelte-window は、テーブルのセルをマージする人気ツール react-window の移植版である svelte-window の解説をしています。この移行の詳細については from react-window 1:1 to svelte-window をご覧ください。
- Easy-to-Embed Svelte Components では、Rollupとscriptタグを使ってSvelteコンポーネントを任意の場所に埋め込む方法を説明しています。
- Convert Svelte project from Rollup to Snowpack は一般的な移行パターンについてビデオで解説しています。
- How to internationalize routing in Svelte & Sapper では、leaf.cloud がどのようにサイトをオランダ語に翻訳したかを説明しています。
- Svelte Store: Reactive context using Svelte Store は "どうやって[a]context の値をリアクティブにするのか" という質問に答えているビデオです。
- Creating Social Sharing Images with Cloudinary and Svelte はJAMstackのWebサイト向けのOpen GraphのイメージやTwitterカードを動的に開発する方法を説明するCloudinaryのビデオです。
また来月お会いしましょう!(See you next month!)permalink
なにかご意見がありますか? Svelte Society、Reddit、Discordにジョインしてください!