はじめてのLit
Litとは？
Simple.
Fast.
Web Components.
Litとは、Google製のWeb Componentベースのフロントエンドフレームワーク。シンプル（Web Component標準の上にあるから）で、軽く（約5KB）、そして……Web Component。
現在のLitはver.2.0で、実用に耐えるものになりつつある。しかしLitにはルータがないので、そこは別のライブラリの力を借りた。Lit純正ルータの正式リリース、首を長くして待ってます。
環境構築
今回は下記の構成で、Windowsのローカルに環境を作る。
TypeScript
生のJavaScriptで書き切る自信もないし、LitはTypeScriptを推奨している。
esbuild
速くて軽いバンドラー。
Hilla Router(vaadin-router)
Litの公式Discordにお邪魔したらオススメされていたルータ。もとはJavaのWebアプリプラットフォームVaadinがvaadin-routerとして提供していたが、プロジェクト名が変わったようだ。
レッツビルド
Node.jsをインストール
これがなくては何も始まらないのでインストールする。
node -v
v16.17.0
yarnをインストール
yarn派なのでyarnする。
npm install yarn
yarn --version
1.22.10
新規プロジェクト作成
適当なディレクトリを作り、プロジェクトを用意する。
まずはyarnで新規プロジェクトを作る。
とりあえずプロジェクト名と作者名以外はデフォルトで連打。
yarn init
question name (testdir): new-project # プロジェクト名
question version (1.0.0): # バージョン
question description: # プロジェクト説明
question entry point (index.js): # エントリーポイント
question git repository: # gitリポジトリ
question author: hitoshiro # 作者名
question license (MIT): # ライセンス
question private: # npm publish時に公開NPMレジストリへのパッケージの公開を拒否するかどうか
success Saved package.json
各種パッケージをインストールしていく。
yarn add --dev typescript
yarn add --dev esbuild
yarn add --dev lit
yarn add --dev @vaadin/router # Hilla Router
esbuildの設定
ここからは、公式のドキュメントを読みながら、バンドラーであるesbuildの設定をしていく。
ディレクトリ構成
📂new-project //root
├ 📂src
│ ├ 📁assets //画像など置き場
│ ├ 📂pages
│ │ ├ top-page.ts
│ │ └ profile-page.ts
│ └ index.ts
├ 📂static
│ └ index.html
├ 📁dist //出力先
├ build.js //esbuild設定
├ package.json
├ tsconfig.json
└ yarn.lock
package.jsonの設定
yarn run buildでesbuildが働くように定義する。
{
// ...略...
"scripts": {
"build": "node build.js"
}
// ...略...
}
バンドラーの設定ファイル作成
ビルド実行用に、ディレクトリ直下にbuild.jsを作成する。
import esbuild from 'esbuild';
import fs from 'fs/promises';
//静的ファイルをコピー
fs.copyFile('./static/index.html', './dist/index.html');
fs.cpSync('./src/assets', './dist/assets');
//tsファイルをバンドル
esbuild.buildSync({
target: "es2022", // ES2022に変換
platform: "browser", // ブラウザ向け
entryPoints: [ "src/index.ts" ], // src/index.tsをエントリーポイントに
outfile: "./dist/script/script.js", // 出力先
bundle: true,
minify: true,
})
TypeScriptの設定ファイル編集
TypeScriptもかんたんに設定する。
{
"compilerOptions": {
"baseUrl": "src", //ベースディレクトリ
"experimentalDecorators": true, //デコレータを使う
}
}
実装
実際に中身を書いていく。
まずは📂static/index.htmlから。
<!DOCTYPE html>
<head>
<base href="/">
<meta charset="utf-8">
<meta name="viewport" content="width=device-width,initial-scale=1">
</head>
<body>
<div id="outlet"></div>
<script type="module" src="./script/script.js"></script>
</body>
📂src/index.tsも。
import { Router } from '@vaadin/router'; //ルータ
//各ページをインポート
import 'pages/top-page';
import 'pages/profile-page';
const routes = [
{
path: '/',
component: 'top-page'
},
{
path: '/profile',
component: 'profile-page'
},
{
path: '.*',
component: 'top-page'
}
];
const outlet = document.getElementById('outlet');
const router = new Router(outlet);
router.setRoutes(routes);
実際にページも作る。今回は📂stc/top-pageだけかんたんに作る。
import { LitElement, html } from 'lit';
import { customElement, property } from 'lit/decorators.js';
@customElement('top-page')
class TopPage extends LitElement{
render() {
return html`
<h1>hello lit!</h1>
`
}
}
ビルド
yarn run build
warning ..\..\..\package.json: No license field
$ node build.js
Done in 0.72s.
チェック
サーバを建ててチェックする。
今回はPythonの簡易サーバを使う。
※Pythonインストール済み前提
📁distにアクセスし、下記のコマンドを実行する。
new-project/dist> python -m http.server 8000
Serving HTTP on :: port 8000 (http://[::]:8000/) ...
http://localhost:8000 にアクセスする。
やった～！
おまけ SPA対応ローカルサーバ導入
上記のやり方には、実は重大な欠点がある。
ルート以外のパスへ、URLをブラウザに直打ちすると、404 Not Foundになる。
詳しい理屈はほかの方に任せるとして、今回はnpmで人気のlite-serverを導入する。
といってもすぐ終わる。
まずはインストール。
yarn add lite-server --dev
次にpackage.jsonを編集し、yarn run devでdistディレクトリをルートとしてサーバが立ち上がるよう編集する。
～前略～
"scripts": {
"build": "node build.js",
"dev": "lite-server --baseDir=dist"
},
～後略～
あとは実行するだけ。
yarn run dev
タブが自動で開く。
これで、URL直打ちしても遷移するようになった。
Discussion