はじめに
Litを使い始める方法は、プレイグラウンドやインタラクティブチュートリアルから、既存のプロジェクトへのインストールまで、多岐にわたります。
Lit プレイグラウンド
「Lit プレイグラウンド」へのパーマリンクインタラクティブなプレイグラウンドとサンプルですぐに始めましょう。「Hello World」から始めて、カスタマイズしたり、他のサンプルに進んだりできます。
インタラクティブチュートリアル
「インタラクティブチュートリアル」へのパーマリンクステップバイステップチュートリアルで、数分でLitコンポーネントを構築する方法を学びましょう。
Lit スターターキット
「Lit スターターキット」へのパーマリンクスタンドアロンの再利用可能なコンポーネントを作成するための、TypeScriptとJavaScriptのコンポーネントスターターキットを提供しています。「スターターキット」をご覧ください。
npmからローカルにインストール
「npmからローカルにインストール」へのパーマリンクLitは、npm経由でlitパッケージとして利用できます。
npm i lit次に、JavaScriptまたはTypeScriptファイルにインポートします
import {LitElement, html} from 'lit';import {customElement, property} from 'lit/decorators.js';import {LitElement, html} from 'lit';バンドルの使用
「バンドルの使用」へのパーマリンクLitは、事前構築された単一ファイルのバンドルとしても利用できます。これらは、開発ワークフローの柔軟性を高めるために提供されています。たとえば、npmやビルドツールを使用するのではなく、単一ファイルをダウンロードしたい場合に便利です。バンドルは依存関係のない標準のJavaScriptモジュールであり、どの最新ブラウザーでも、次のように<script type="module">内からバンドルをインポートして実行できます。
import {LitElement, html} from 'https://cdn.jsdelivr.net/gh/lit/dist@3/core/lit-core.min.js';クライアントサイドの依存関係にnpmを使用している場合は、これらのバンドルではなく、litパッケージを使用する必要があります。 バンドルは、Litのほとんどまたはすべてを意図的に単一のファイルに結合しているため、ページがダウンロードするコードが不必要に多くなる可能性があります。
バンドルを閲覧するには、https://cdn.jsdelivr.net/gh/lit/dist/にアクセスし、ドロップダウンメニューを使用して特定のバージョンのページに移動します。そのページには、そのバージョンで利用可能な各タイプのバンドルのディレクトリがあります。バンドルには2つのタイプがあります。
- core
- https://cdn.jsdelivr.net/gh/lit/dist@3/core/lit-core.min.js
coreは、litパッケージのメインモジュールと同じアイテムをエクスポートします。 - all
- https://cdn.jsdelivr.net/gh/lit/dist@3/all/lit-all.min.js
allは、coreのすべてに加えて、litの他のほとんどのモジュールをエクスポートします。lit/static-html.jsからのhtmlとsvgのエクスポートは、衝突を避けるために、それぞれstaticHtmlとstaticSvgにエイリアスされていることに注意してください。
既存のプロジェクトにLitを追加
「既存のプロジェクトにLitを追加」へのパーマリンク既存のプロジェクトやアプリケーションにLitを追加する方法については、「既存のプロジェクトにLitを追加」を参照してください。
Open WC プロジェクトジェネレーター
「Open WC プロジェクトジェネレーター」へのパーマリンクOpen WCプロジェクトには、Litを使用してアプリケーションプロジェクトを足場にするプロジェクトジェネレーターがあります。