開発

プロジェクトの開発フェーズで、Litコンポーネントを作成する際に、以下のツールは生産性を向上させるのに役立ちます。

ビルド手順なしでコードをプレビューするための開発サーバー。
型チェックされたコードを作成するためのTypeScript。
Javascriptエラーを検出するためのリンター。
コードを統一的にフォーマットするためのコードフォーマッター。
Litテンプレートのリンティングと構文強調表示を行うための、Lit固有のIDEプラグイン。

これらの機能がすべて事前に設定された開発環境を簡単にセットアップするには、スターターキットのドキュメントをご覧ください。

開発ビルドと本番ビルド

すべてのLitパッケージは、Nodeのエクスポート条件のサポートを使用して、開発ビルドと本番ビルドで公開されています。

本番ビルドは、非常に積極的な縮小設定で最適化されています。開発ビルドはデバッグを容易にするために縮小されておらず、追加のチェックと警告が含まれています。デフォルトのビルドは本番ビルドであるため、プロジェクトが誤って大きな開発ビルドをデプロイすることはありません。

Rollup、Webpack、Web Dev Serverなど、エクスポート条件をサポートするツールで"development"エクスポート条件を指定することで、開発ビルドをオプトインする必要があります。これはツールごとに異なって行われます。

たとえば、Rollupでは、@rollup/node-resolveプラグインを使用して、exportConditionsオプションで開発ビルドを選択できます。

import { nodeResolve } from '@rollup/plugin-node-resolve';

export default {
  // ...
  plugins: [nodeResolve({
    exportConditions: ['development']
  })]
};

開発ビルドのランタイム警告

「開発ビルドのランタイム警告」へのパーマリンク

ReactiveElementとLitElementの開発ビルドは、本番ビルドでチェックするにはコストがかかる問題を特定するのに役立つ追加のランタイム警告をサポートしています.

一部の警告は常に表示されます。オンまたはオフにできる_オプションの警告_の2つのカテゴリもあります。

'migration'。LitElement 2.xからの移行に関する警告。デフォルトではオフです。
'change-in-update'。更新中にリアクティブ状態を変更することに関する警告。デフォルトではオンです。

ReactiveElement.disableWarning()およびReactiveElement.enableWarning()メソッドを使用して、オプションの警告を制御できます。これらは、`LitElement`や独自のクラスを含む、`ReactiveElement`の任意のサブクラスで呼び出すことができます。指定されたクラスでメソッドを呼び出すと、そのクラスとすべてのサブクラスの警告がオンまたはオフになります。たとえば、すべての`ReactiveElement`クラス、すべての`LitElement`クラス、または特定の`LitElement`サブクラスで、警告のカテゴリをオフにすることができます。

これらのメソッドは開発ビルドでのみ使用できるため、アクセスをガードしてください。オプショナルチェーンの使用をお勧めします。

例

import {LitElement, ReactiveElement} from 'lit';

// Turn off migration warnings on all ReactiveElements,
// including LitElements
ReactiveElement.disableWarning?.('migration');

// Turn off update warnings on all LitElements
LitElement.disableWarning?.('change-in-update');

// Turn off update warnings on one element
MyElement.disableWarning?.('change-in-update');

また、`static enabledWarnings`プロパティを定義することで、単一のクラス内で警告を制御することもできます。

class MyElement extends LitElement {
  static enabledWarnings = ['migration'];
}

警告を制御するためのコードが独自の本番ビルドで削除される場合、コードサイズにとって最適です。

複数バージョンのLitの警告

「複数バージョンのLitの警告」へのパーマリンク

Litコアパッケージ（`lit-html`、`lit-element`、`@lit/reactive-element`）の複数バージョン、または同じバージョンの複数コピーが検出された場合、開発モードのみの警告がトリガーされます。

Litが要素の内部依存関係として使用されている場合、要素は異なるバージョンのLitを使用でき、完全に相互運用可能です。また、Lit 2とLit 3がお互いにほぼ互換性があるように注意しています。たとえば、Lit 2テンプレートをLit 3レンダー関数に渡したり、その逆も可能です。

では、なぜ警告が表示されるのでしょうか？ Litは、異なるフレームワークバージョンを使用するコンポーネントが混在していると、しばしば壊れるフレームワークと比較されることがあります。したがって、気づかずに誤って複数バージョンのLitをインストールしてしまう可能性が高くなります。

互換性のある複数バージョンのLitを読み込むことは、重複したバイトがユーザーに送信される必要があるため、最適ではありません。

Litを使用するライブラリを公開する場合は、公開のベストプラクティスに従って、ライブラリのユーザーがプロジェクトでLitを重複排除できるようにしてください。

複数バージョンのLitの解決

以下の手順に従っても、Litを重複排除できない場合があります（たとえば、依存しているライブラリが特定のバージョンのLitをバンドルしている場合）。このような場合、警告は無視できます。

`複数バージョンのLitがロードされました`という開発モードの警告が表示される場合は、いくつかの試すことができます。

ブラウザコンソールで次の変数を確認して、どのLitライブラリに複数バージョンがロードされているかを確認します：`window.litElementVersions`、`window.reactiveElementVersions`、`window.litHtmlVersions`。
`npm ls`（注：検索するライブラリを正確に指定できます。例：`npm ls @lit/reactive-element`）を使用して、どの依存関係が複数バージョンのLitをロードしているかを絞り込みます。
`npm dedupe`を使用してLitの重複を排除してみてください。 `npm ls`を使用して、重複したLitパッケージが正常に重複排除されたかどうかを確認します。
`npm i @lit/reactive-element@latest lit-element@latest lit-html@latest`を使用して、コアLitパッケージの特定のバージョンをプロジェクトの直接の依存関係としてインストールすることにより、`npm`に特定のバージョンのコアLitパッケージを強制的にホストさせることができます。 `latest`は重複排除するバージョンに置き換えてください。
それでも重複が発生する場合は、パッケージロックと`node_modules`を削除する必要がある場合があります。その後、目的のバージョンの`lit`を明示的にインストールしてから、依存関係をインストールします。

ローカル開発サーバー

「ローカル開発サーバー」へのパーマリンク

LitはJavaScriptモジュールとしてパッケージ化されており、ほとんどのブラウザではまだネイティブにサポートされていないベリモジュール指定子を使用します。ベリモジュール指定子は一般的に使用されており、独自のコードでも使用したい場合があります。例えば

import {LitElement, html, css} from 'lit';

このコードをブラウザで実行するには、ベリモジュール指定子（`'lit'`）をブラウザがロードできるURL（`'/node_modules/lit/lit.js'`など）に変換する必要があります。

モジュール指定子を処理できる開発サーバーは多数あります。これを行う開発サーバーがあり、ビルドプロセスに統合されている場合は、それで十分です。

開発サーバーが必要な場合は、Web Dev Serverをお勧めします。

Web Dev Server

「Web Dev Server」へのパーマリンク

Web Dev Serverは、ビルド不要の開発プロセスを可能にするオープンソースの開発サーバーです。

ブラウザで必要とされる、ベリモジュール指定子を有効なURLに書き換える処理を行います。

Web Dev Serverのインストール

npm i @web/dev-server --save-dev

`package.json`ファイルにコマンドを追加します

"scripts": {
  "start": "web-dev-server"
}

そして`web-dev-server.config.js`ファイル

export default {
  open: true,
  watch: true,
  appIndex: 'index.html',
  nodeResolve: {
    exportConditions: ['development'],
  },
};

開発サーバーの実行

npm run start

レガシーブラウザのサポート

「レガシーブラウザのサポート」へのパーマリンク

IE11などの古いブラウザの場合、Web Dev ServerはJavaScriptモジュールを変換して下位互換性のあるSystemJSモジュールローダーを使用し、Webコンポーネントポリフィルを自動的に提供できます。古いブラウザをサポートするには、`@web/dev-server-legacy`パッケージを設定する必要があります。

Web Dev Serverレガシーパッケージのインストール

npm i @web/dev-server-legacy --save-dev

`web-dev-server.config.js`の設定

import { legacyPlugin } from '@web/dev-server-legacy';

export default {
  // ...
  plugins: [
    // Make sure this plugin is always last
    legacyPlugin({
      polyfills: {
        webcomponents: true,
        // Inject lit's polyfill-support module into test files, which is required
        // for interfacing with the webcomponents polyfills
        custom: [
          {
            name: 'lit-polyfill-support',
            path: 'node_modules/lit/polyfill-support.js',
            test: "!('attachShadow' in Element.prototype)",
            module: false,
          },
        ],
      },
    }),
  ],
};

インストールと使用方法の詳細については、Web Dev Serverのドキュメントを参照してください。

TypeScript

「TypeScript」へのパーマリンク

Litは、Lit API、標準および実験的なデコレータ、テンプレートの型チェックとリンティングのためのコミュニティツールなど、TypeScriptでのコンポーネント開発を完全にサポートしています.

Litは単なるライブラリであり、コンパイラを必要とせず、非標準の言語構文を使用しないため、必要な特定のTypeScriptツールはありません。 Litは公式のTypeScriptコンパイラ`tsc`、Rollup、Vite、またはWebpackなどのTypeScriptラッパー、および`esbuild`などの代替コンパイラで動作します。

TypeScriptプロジェクトの主な要件は次のとおりです。

`"ES2021"`libのような最新のJavaScript言語レベルを有効にする。
`"DOM"`libでDOMタイプを有効にする。
TypeScriptの実験的なデコレータを使用することを選択した場合は、オプションで実験的なデコレータを有効にするとクラスフィールドの「define」セマンティクスを無効にする。

これらのオプションは、通常、プロジェクトのtsconfigで設定されます.

インストール

「インストール」へのパーマリンク

プロジェクトにTypeScriptをインストールするには

npm i -D typescript

コードをビルドするには

npx tsc --watch

インストールと使用方法の詳細については、TypeScriptサイトを参照してください。開始するには、TypeScriptのインストールとその機能の使用に関するセクションが特に役立ちます。

デコレータ

「デコレータ」へのパーマリンク

TypeScriptは、デコレータの2つのバージョン（experimentalとstandard）をサポートしています。詳細については、デコレータのドキュメントをご覧ください。

JavaScriptとTypeScriptのリンティング

「JavaScriptとTypeScriptのリンティング」へのパーマリンク

リンティングは、コード内のエラーを捕捉するのに役立ちます。Litコードのリンティングには、ESLintを使用することをお勧めします。

プロジェクトにESLintをインストールするには

npm install eslint --save-dev
npx eslint --init

実行するには

npx eslint yourfile.js

または、npmスクリプトに追加するには

{
  "scripts": {
    "lint": "eslint \"**/*.{js,ts}\"",
  }
}

インストールと使用方法の詳細については、ESLintのドキュメントをご覧ください。

また、ESLint用のeslint-plugin-litをお勧めします。これは、LitのHTMLテンプレートのリンティングを提供し、一般的なHTMLリンティングチェックとLit固有のルールが含まれています。

リンティングをIDEワークフローに統合することで、エラーを早期に発見できます。Lit用にIDEを設定するには、Lit固有のIDEプラグインをご覧ください。

ソースフォーマット

「ソースフォーマット」へのパーマリンク

コードフォーマッタを使用すると、コードの整合性と可読性を確保するのに役立ちます。好みのフォーマッタをIDEと統合することで、コードを常にクリーンで整頓された状態に保つことができます。

一般的なオプションをいくつかご紹介します。

Lit固有のIDEプラグイン

「Lit固有のIDEプラグイン」へのパーマリンク

Litでの開発に役立つIDEプラグインがいくつかあります。特に、Litテンプレートで動作する構文ハイライターを使用することをお勧めします。

lit-plugin

「lit-plugin」へのパーマリンク

lit-pluginは、Litテンプレートの構文ハイライト、型チェックなどを提供します。VS Codeで利用可能です。または、Sublime TextやAtomで動作するts-lit-plugin TypeScriptコンパイラプラグインを使用することもできます。

lit-pluginとts-lit-pluginは、以下の機能を提供します。

構文ハイライト
型チェック
コード補完
ホバーオーバーによるドキュメント表示
定義へのジャンプ
リンティング
クイックフィックス

ESLint

「ESLint」へのパーマリンク

ESLintには、多くのコードエディタ用の統合機能があります。ESLint用のeslint-plugin-litがESLint設定にインストールされている場合、IDEにはLit固有のエラーと警告が表示されます。

その他のプラグイン

「その他のプラグイン」へのパーマリンク

その他のIDEプラグイン、および追加のツールと情報については、awesome-lit-htmlリポジトリをご覧ください。

このページを編集

前へ要件次へテスト