What's new in Svelte: 2021年10月
What's new in Svelte は1周年
翻訳 : 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 Sveltepermalink
- 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 Updatespermalink
先月も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 Showcasepermalink
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
- Syntax Podcast: From React to SvelteKit ReactからSvelteKitへ Level Up TutorialsをReactからSvelteKitに移行した理由、方法、利点、注意すべき点などについて、ScottとWesが語ります!
- Web Rush Podcast: Svelte Tools and Svelte Society Kevin Åberg Kultalahtiが、Svelte Societyとは何か、Svelteに期待していること、製品にとってドキュメントがいかに重要であるか、など など について語ります
- Svelte: The Compiled Future of Front Endでは、コンポーネントベースのフロントエンドの歴史と、コンパイラがどのようにすべてを変えるかについて詳しく説明しています
- Svelte Radio: Contributing to Svelte with Martin 'Grygrflzr' Krisnanto Putra Grygrflzrがメンテナになるまでの道のりや、React、Vite、その他多くのことについての見解を語っています
- Svelte Radio: Routify 3 with Jake and Willow Svelte RadioクルーがRoutifyのメンテナと一緒に、リリースされたばかりのRoutify 3について語ります
- JS Party: 1Passwordがページ内提案にSvelteを使用していることに言及している、The Changelog's JS Partyの最新エピソードです
Educational Content
- How I built a blog with Svelte and SvelteKitは、Svelte、SvelteKit、プログレッシブ・エンハンスメントについて、コード例を交えて紹介しています
- I built a decentralized chat dappは、GUNのような一般的なweb3技術を使って、分散型ウェブアプリ(dapp)を構築する方法についてのチュートリアルです
- Writing a Svelte Store with TypeScriptは、TypeScriptを使ってSvelteストアを書くことについて、深く掘り下げています
- How Svelte scopes component stylesでは、クラスを使用やより複雑なCSS指定子を使用したスコープの作り方について説明しています。
- SvelteKit Hooksでは、Sveltekitでのhooks.jsの使用方法を説明しています。終わったら、パート2をご覧ください
- An early look at SvelteKitは、Infoworld社がSvelteKitの機能とオンボーディングについて解説した記事です
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!permalink
Svelte Summit Fall 2021(2021年11月20日開催)では、講演者を募集しています。10月30日までにトークプロポーザルを提出してください…どなたでも発表や参加が可能です。