メインコンテンツへスキップ

Svelteの最新情報：2021年2月

電光石火の勢いで進む統合と改善...

ダニ・サンドバル

今年も一番短い月がやってきましたが、Svelteのメンテナーとコミュニティメンバーは、この1ヶ月間、svelte-loader、prettier-plugin-svelte、rollup-plugin-svelte、language-toolsの大幅な変更から、Sapperやsvelte-preprocessの着実な進歩に至るまで、活発に活動してきました。その一方で、多くの人々がSvelteを他の人気フレームワークと統合することに励んでいます。

コンパイラーの新機能

  • WAI-ARIA Graphics ModuleのAriaロールが、Svelteコンポーネントで有効なariaロールとして認識されるようになりました（3.31.1）。
  • 一般的なReact属性であるclassNameとhtmlForに対するコンパイラの警告により、ReactコンポーネントをSvelteに移植するのが簡単になりました（3.31.1）。

コンパイラ機能の提案や、新機能/バグ修正の実装を手伝いたいですか？Svelteの「triage: good first issue」タグをご覧ください。

language-toolsの新機能

  • ユーザーによって無効化された自動インポートの提案が、VS Codeで表示されなくなりました（103.0.0）。
  • 名前が変更された変数へのプレフィックス/サフィックスのスマートな追加により、変数の名前変更がより安全になりました（104.0.0）。
  • TypeScriptユーザー向けのセマンティック（トークン）ハイライトにより、テーマ作成者は、もしサポートされていれば、テーマ内でセマンティックスタイルを適用できます（104.0.0）。
  • コンテキストメニューに「コンポーネントの抽出」が追加されました。これにより、「Svelte: コンポーネントの抽出」とコマンドウィンドウに入力しなくても、ファイルからコンポーネントを抽出できます（104.0.0）。
  • VS Code拡張機能がJavaScript/TypeScriptファイルの変更を監視するようになりました。変更を認識させるためにファイルを保存する必要がなくなりました（104.1.0）。

変更の完全なリストについては、language-toolsのリリースページをご覧ください。

language-toolsを試すのに最適な方法は、VSCode用のSvelte拡張機能をダウンロードすることです。この拡張機能は、Svelte言語サーバーを使用して、VS CodeのSvelteコンポーネントの構文ハイライトと豊富なインテリセンスを提供します。お使いのエディターの拡張機能ソースを調べて、IDE用のSvelteプラグインがあるかどうかを確認するか、自分で作成してください（例：coc-svelte）！

Svelteエコシステム全体での大きな改善

  • svelte-loaderがメジャーバージョン3.0.0をリリースしました。Webpack 5とNode 14のサポート、ホットリロードの改善、rollup-plugin-svelteに合わせた新しいcompilerOptionsが搭載されています。破壊的な変更には、Svelte 2とNode 8のサポートの終了が含まれます。詳細については、変更履歴をご覧ください
  • rollup-plugin-svelteがバージョン7.xになりました。相対ファイル名のサポート、ソースマップの処理の改善、一貫性のあるcompilerOptionsが搭載されています。アップグレード時の破壊的な変更については、変更履歴を確認してください。
  • svelte-preprocessは、今月、postcssとscssの処理を改善し、typescriptユーザー向けのソースマップ変換を修正するために、いくつかの4.6.xリリースを繰り返しました。詳細については、変更履歴をご覧ください
  • Sapperでは、スクロール追跡とエンコードクエリパラメータの処理が改善されました。また、ESモジュールをサポートしていないブラウザでも、動的インポートが期待どおりに動作するようになりました。0.29.0からのこれらの変更とステップバイステップの移行ガイドは、変更履歴にあります。
  • prettier-plugin-svelteバージョン2がリリースされました。オーバーホールが行われ、HTMLフォーマットの書き直しが付属しています。出力は、標準のPrettierがHTMLをフォーマットする方法にさらに近いものになりました。svelteBracketNewLineとoptions-scripts-markup-stylesのデフォルトが改善されたため、コードブロックの順序をユーザーの大多数が好む方法に一致させる必要があります。さらに、PrettierのhtmlWhitespaceSensitivity設定がサポートされるようになりました。詳細については、変更履歴をご覧ください

Svelte SocietyのWebサイトへの新しい変更には、便利なコードパターンに簡単にアクセスできる新しいチートシートと、サイト全体のいくつかの小さな視覚的な修正が含まれています。Svelte SocietyのWebサイトを公開に向けて準備するのを手伝いませんか？GitHubリポジトリをチェックアウトして始めましょう！

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

アプリ＆サイト

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

  • Svelte Reactive Debuggerは、Firefox devtoolsでSvelteのリアクティブステートメントを監視する方法です。
  • svelte-actionsは、将来的に公式アクションに含めるためのSvelteアクションのプロトタイプセットです。RFCと高レベルポリシーに関する議論をご覧ください。
  • （Svelte Discordの）@jojaによって作成されたこのCSSグリッドギャラリーは、ユーザーのマウス位置に基づいてグリッドトランジションを備えています。
  • Patchcabは、Web Audioで作成されたモジュラーEurorackスタイルのシンセサイザーです。
  • svelte-knobは、スピードメーターのような視覚化に役立つノブコントロールです。
  • descent-rippleは、ボタン用の高度にカスタマイズ可能なJavaScriptリップルアニメーションです。
  • makeItSnowは、どのコンポーネントにも❄️snow❄️を追加するために使用できる（Svelte Discordの）@MrPouleによって作成されたSvelteアクションです（デモ）。
  • svelte-video-playerは、カスタマイズ可能なVideoPlayerコンポーネントです。
  • svelte-readonlyは、読み取り可能なインターフェイスのみを公開する非常に小さなストアです。

新しい統合とスターター

  • svelte-derver-starterは、SvelteベースのクライアントとDerverによって駆動されるサーバー側でフルスタックアプリケーションを構築するためのスターターです。
  • eleventy-plugin-embed-svelteを使用すると、Svelteコンポーネントを11tyサイトに簡単に埋め込むことができます。
  • svelte-tailwind-extension-boilerplateは、JavaScriptまたはTypeScript、フロントエンド用のSvelte、スタイリング用のTailwind CSS、テスト用のJest、およびビルドシステムとしてのRollupを使用してChrome拡張機能を作成するための優れた基盤です。
  • snowpack-uiを使用すると、ターミナルではなくブラウザからSnowpackプロジェクトを実行および管理できます。
  • Svelte for Appwriteは、自己ホスト型のFirebase代替であるAppwriteとの統合方法について説明しています。GitHubリポジトリ
  • here-maps-svelteを使用すると、SvelteアプリにHEREマップを簡単に含めることができます。
  • p5-svelteは、クリエイティブコーディング/スケッチツールであるp5をプロジェクトに投入するための非常にシンプルな方法です。
  • svelte-windicss-preprocessは、windicssコンパイラに基づいてビルド時にtailwindcssをコンパイルするためのSvelteプリプロセッサです。
  • MitzaCoder/svelte-boilerplateは、TypeScript、TailwindCSS、IE11互換性（Babelを使用）、および遅延ロードされたモジュールの構成を備えています。

Svelteコンポーネントを世界と共有しませんか？Svelte Societyサイトのパッケージリストに独自のコンポーネントを送信してください。

学習リソース

来月お会いしましょう！

ショーケースにあなたの作品を追加しませんか？Svelteに貢献しませんか？Svelte Society、Reddit、Discordをチェックして、参加してください！