スターターキット

Litスターターキットは、再利用可能なLitコンポーネントのためのプロジェクトテンプレートであり、他の人が利用できるように公開できます。

ローカルでコンポーネントの作業を開始するには、以下のスタータープロジェクトのいずれかを使用できます

• Lit JavaScriptスタータープロジェクト
• Lit TypeScriptスタータープロジェクト

両方のプロジェクトでLitコンポーネントを定義しています。また、コンポーネントの開発、lint、およびテストのためのオプションのツールセットを追加しています

• 依存関係を管理するためのNode.jsとnpm。Node.js 10以上が必要です。
• ローカル開発サーバー、Web Dev Server。
• ESLintとlit-analyzerを使用したlint。
• Web Test Runnerを使用したテスト。
• web-component-analyzerとeleventyで構築された静的なドキュメントサイト。

これらのツールは、Litを操作するために必須ではありません。これらは、優れた開発者エクスペリエンスのための可能なツールセットの1つを表しています。

プロジェクトをローカルで試す最も簡単な方法は、スタータープロジェクトの1つをzipファイルとしてダウンロードすることです。

1. GitHubからzipファイルとしてスタータープロジェクトをダウンロードします

   • JavaScriptスタータープロジェクト
   • TypeScriptスタータープロジェクト

2. zipファイルを解凍します。

3. 依存関係をインストールします。

   cd <project folder>
   npm i

1. スターターのTypeScriptバージョンを使用している場合は、プロジェクトのJavaScriptバージョンをビルドします

   npm run build

   ファイルが変更されたときにファイルを監視し、再構築するには、別のシェルで次のコマンドを実行します

   npm run build:watch

   スタータープロジェクトのJavaScriptバージョンを使用している場合は、ビルドステップは必要ありません。

2. 開発サーバーを実行します

   npm run serve

3. ブラウザータブでプロジェクトのデモページを開きます。 例：

   https://127.0.0.1:8000/dev/

   サーバーが別のポート番号を使用している場合があります。 ターミナル出力のURLで正しいポート番号を確認してください。

コンポーネント定義を編集します。 編集するファイルは、使用している言語によって異なります

• JavaScript。プロジェクトルートにあるmy-element.jsファイルを編集します。
• TypeScript。 srcディレクトリにあるmy-element.tsファイルを編集します。

コードで探すいくつかのこと

• コードは、コンポーネント（MyElement）のクラスを定義し、<my-element>という名前のカスタム要素としてブラウザに登録します。

  @customElement('my-element')
  export class MyElement extends LitElement { /* ... */ }

  export class MyElement extends LitElement { /* ... */ }
  
  customElements.define('my-element', MyElement);

• コンポーネントのrenderメソッドは、コンポーネントの一部としてレンダリングされるテンプレートを定義します。 この場合、いくつかのテキスト、いくつかのデータバインディング、およびボタンが含まれています。 詳細については、テンプレートを参照してください。

  export class MyElement extends LitElement {
    // ...
    render() {
      return html`
        <h1>Hello, ${this.name}!</h1>
        <button @click=${this._onClick}>
          Click Count: ${this.count}
        </button>
        <slot></slot>
      `;
    }
  }

• コンポーネントはいくつかのプロパティを定義します。 コンポーネントは、これらのプロパティの変更に応答します（たとえば、必要に応じてテンプレートを再レンダリングするなど）。 詳細については、プロパティを参照してください。

  export class MyElement extends LitElement {
    // ...
    @property({type: String})
    name = 'World';
    //...
  }

  export class MyElement extends LitElement {
    // ...
    static properties = {
      name: {type: String}
    };
  
    constructor() {
      super();
      this.name = 'World';
    }
    // ...
  }

コンポーネント名を「my-element」からより適切な名前に変更することをお勧めします。 これは、プロジェクト全体でグローバルな検索と置換を実行できるIDEまたは他のテキストエディターを使用するのが最も簡単です。

1. TypeScriptバージョンを使用している場合は、生成されたファイルを削除します

   npm run clean

2. プロジェクト内のすべてのファイル（node_modulesフォルダーを除く）で、「my-element」を新しいコンポーネント名で検索および置換します。

3. プロジェクト内のすべてのファイル（node_modulesフォルダーを除く）で、「MyElement」を新しいクラス名で検索および置換します。

4. 新しいコンポーネント名に合わせてソースファイルとテストファイルの名前を変更します

   JavaScript

   • src/my-element.js
   • src/test/my-element_test.js

   TypeScript

   • src/my-element.ts
   • src/test/my-element_test.ts

5. TypeScriptバージョンを使用している場合は、プロジェクトを再構築します

   npm run build

6. テストして、コンポーネントがまだ動作していることを確認します

   npm run serve

コンポーネントに機能を追加する準備はできましたか？ 最初のLitコンポーネントの構築についてはコンポーネントに、テンプレートの作成の詳細についてはテンプレートをご覧ください。

テストの実行とその他のツールの使用の詳細については、スタータープロジェクトのREADMEを参照してください

• TypeScriptプロジェクトのREADME
• JavaScriptプロジェクトのREADME

コンポーネントをnpmに公開する方法については、公開を参照してください。

このページを編集