Skip to main content

What's new in Svelte: 2021年10月

What's new in Svelte は1周年

Dani Sandoval

翻訳 : Svelte日本コミュニティ 原文 : https://svelte.dev/blog/whats-new-in-svelte-october-2021

日本語版は原文をよりよく理解するための参考となることを目的としています。 正確な内容についてはsvelte.devの原文を参照してください。 日本語訳に誤解を招く内容がある場合は下記のいずれかからお知らせください。

やぁみんな👋 Svelteブログに「What's new in Svelte」を掲載し始めてから1年が経ちました。いつも読んでくださっている皆さん、そして毎月投稿してくださっている皆さんにこの場を借りて感謝の気持ちをお伝えしたいと思います。メンテナから、DiscordやRedditに投稿してくれる皆さんまで、Svelteコミュニティを素晴らしいものにするための努力を目の当たりにするのは素晴らしいことです。

皆さん、これからもがんばっていきましょう！それでは、今月のニュースに飛び込んでみましょう…

New around Svelte

  • Svelteのエクスポートマップに新たな機能が追加され、SSRのライフサイクル関数のno-opバージョンが公開されるようになりました (Svelte 3.43.0)
  • src属性を持つカスタムコンポーネントが、svelte-nativeのビルドを崩さなくなりました (Svelte 3.42.4)
  • TypeScriptプラグインを有効にしていないSvelteプラグインのユーザは、TypeScriptプラグインを有効にするよう促されるようになりました。TypeScriptプラグインはSvelteファイルを取り扱うためのインテリセンスを追加し、TypeScriptとJavaScriptのファイルを強化します。使用されている方は、フィードバックをお願いします (Svelte extensions 105.4.0)
  • イベントモディファイヤがインテリセンスに追加され、オートコンプリートされたりホバーで情報が表示されたりするようになりました (Svelte extensions 105.4.0)
  • Svelteバージョン3.39以降とsvelte-preprocessバージョン4.9.5以降を使用している場合、TypeScriptユーザは型のインポートと値のインポートを厳密に分ける必要がなくなりました。つまり、import type { MyInterface } from './somewhere'; import { myValue } from './somewhere'の代わりに、import { MyInterface, myValue } from './somewhere'と書くことができるようになりました。主にこの機能を実装したコミュニティメンバの@SomaticIT氏に厚く感謝します！

機能やバグフィックスの全リストは、SvelteのChangelogをご覧ください。

SvelteKit Updates

先月も100近いPRがコミットされましたが、まだまだやるべきことはたくさんあり、SvelteメンテナはSvelteKitを1.0にするための支援を求めています。Antonyは、この問題に関する最近のコメントの中で、このように言っていました:

もし自分がコントリビュートできないほどのドシロートだと思うなら（そんなことはありませんが）、テストを追加するか、追加したい機能のテストを書いてから追加してください！小さく始めて、その方法でコードベースを学びましょう。

貢献したい方は、「help wanted」とラベル付けされた1.0へのマイルストーンのIssueのいずれかに取り組むことをご検討ください。

今月のSvelteKitの注目すべき改善点は…

  • サービスワーカーが$libエイリアスを使用してファイルにアクセスできるようになりました (#2326)
  • SvelteのライブラリがViteの設定なしですぐに動作するようになりました (#2343)
  • package exportsフィールドの改善 (#2345と #2327)
  • [重要]prerender.pages設定オプションの名称がprerender.entriesに変更されました (#2380)
  • フックからのBodyの型付けを可能にするために、新しいジェネリック引数が追加されました (#2413)
  • packageコマンドの実行時にpackage.jsonにsvelteフィールドが追加されるようになりました (#2431)
  • [重要]load関数のcontextパラメータがstuffに改名されました (#2439)
  • adapter-nodeを使ってカスタムサーバを構築するときのために、entryPointオプションを追加しました (#2414)
  • vite-plugin-svelteは、SvelteコンポーネントのTypeScript、PostCSS、Scssなどの自動プリプロセッサにViteを使用するuseVitePreprocessのサポートを改善しました (#173)

SvelteKitのすべての更新を確認するには、SvelteKitのChangelogをご覧ください。

Community Showcase

Apps & Sites

  • radiofranceは、ウェブサイトをSvelteKitに移行しました
  • FLAYKSは、SvelteKit、Sanity、Anime.jsで作られたFélix Péaultのポートフォリオサイトです
  • hirehiveは、求職者と仕事のトラッキングサイトです
  • Microsocialは、実験的なPeer-to-Peerソーシャルプラットフォームです
  • Dylan Ipsumは、lorem ipsumをBob Dylanの歌詞に置き換えるランダムテキストジェネレータです
  • Chip8 Svelteは、CHIP8 TypeScriptの上に構築されたCHIP-8エミュレータのフロントエンドです

**Svelteのプロジェクトをお探しですか？ウェブ上でのSvelteの存在感を高めることに興味がありますか？**SvelteKitでのSvelte Societyの書き換えに貢献したい方は、オープンなIssueのリストをチェックしてください。

Podcasts Featuring Svelte

Educational Content

Libraries, Tools & Components

  • sveltekit-netlify-cmsは、Netlify CMSで使用するために構成されたSvelteKitスケルトンアプリです
  • SvelteFireTSは、Fireship.ioにインスパイアされた、SvelteKit + TypeScript + Firebaseライブラリです
  • stores-xは、vueXのようにSvelteストアを使用することができます
  • sveltekit-snippetsは、SvelteKitとVanilla Svelteの共通パターンのスニペットを提供するVSCode拡張です
  • svelte-xactorは、xactorマシンをストアコントラクトを実装したグローバルストアに簡単に変換することができるミドルウェアです
  • vite-plugin-pages-svelteは、ファイルシステムベースの自動ルーティングのためのviteプラグインです
  • sveltioは、proxy-stateライブラリであるvaltioのSvelteラッパーです
  • svelte-transition-classesは、CSSクラスを追加および交換するためのSvelteカスタムトランジションです
  • Svelte-Boring-Avatarsは、人気の高いReactプロジェクト「Boring Avatars」のSvelte移植版です
  • Svelte DataTablesは、データを簡単に表形式で表示できるJavaScriptライブラリDataTableをSvelteプロジェクトに移植したものです
  • focus-svelteは、依存関係をもたないSvelte用のフォーカストラップです
  • filedrop-svelteは、Svelte用のファイルドロップゾーンのアクションとコンポーネントです

コミュニティサイトsveltesociety.devには、Svelteエコシステムのテンプレート、アダー、アダプタが多数掲載されていますので、ぜひご覧ください。

Before you go, answer the call for speakers!

Svelte Summit Fall 2021（2021年11月20日開催）では、講演者を募集しています。10月30日までにトークプロポーザルを提出してください…どなたでも発表や参加が可能です。

More info on the sessionize site

サミットまで待てませんか？RedditやDiscordにご参加ください！