こんにちは、フロントエンドチームの @syo_igarashi です。
今週のフロントエンド定例の内容を記載します。
フロントエンド定例について、以前の記事（ランサーズのフロントエンドチームが取り組んでいること）でお伝えしたのですが、毎週金曜日に開催しており、実際の業務で取り組んでいることや気になった技術情報等をシェアしあう会になっています。
以下、今週の内容です。
スライドツールreveal.js
こちらに使ってみた所感など記載しました
https://zenn.dev/igara/articles/reveal_md_and_github_pages
みなさんは他になに使ってますか？
Web ComponentsライブラリのLit知見
前回からの変更
マイクロフロントエンドと向きあってみる フロントエンド定例 2022/12/23
からだいぶ期間が空きましたが引き続き向きあっています。
年を越す前はSvelteやってみようとしてましたがSvelte、Vite、Storybookの構成が構築できずLitで作ろうとなりました。
この当時のタイミングとしてSvelteKitがではじめでありvite-plugin-svelteとの相性かうまく動作できませんでした。
こちらも参考しましたが起動できず…
ViteのジェネレータでもLitの作成とStorybookでもLitのWeb Components出力の対応ができていたのでLitを採用しました。
環境構築は
を参考にして作成しています。
現在は共通のコンポーネントをReactに定義しているのでLit側にも導入しつつ、Litで作成したものをReactでも使用できるようなものを想定して作成中です。
若干Reactのコンポーネントと二重メンテ感は否めないのですが既存のCakePHPのHTMLテンプレートとSassをいじるよりかはLitで作成したCustom Elementsでページを更新していった方が良いという雰囲気で作成しています。
CakePHPのHTMLテンプレートをやめてNextJSでやるようになったらReact一本でやるでも良いと思います。
書いた印象
ReactはJSXという構文でLitはhtml関数にテンプレートリテラル上にHTMLを表現する違いがありif文の書き方はJSXの方が癖がなくてよかったなという気がしてます。
React
const Component = (props) => {
return (
<div>
{props.hasValue ? "存在する" : "存在しない"}
</div>
)
)Lit
export class Component extends LitElement {
@property()
hasValue;
render() {
return html`
<div>
${this.hasValue ? "存在する" : "存在しない"}
</div>
`
}
}html関数書くのと変数展開で${を使用するのがなぁ…
あとはReact Hooksというような概念がないのでどうしてもprops(Litではproperty)やstateの表現などクラスのフィールド（メンバー）表現しているのが昔のReactのClass Componentを連想しました。
Litのコンポーネント利用
LitはWeb ComponentsのCustom Elementsで展開できるライブラリなのでLitプロジェクト内だけでなく素のHTMLでも利用が可能です。
LIt上と素のHTMLでCustom Elementsに対しての値の渡し方が異なり、
Lit上はJSなので
の記載にあるような
html`<div ?hidden=${!this.showAdditional}>This text may be hidden.</div>`;
html`<my-list .listItems=${this.items}></my-list>`;
といった属性の名前の前に記号を記載することによってBoolean、Objectの値をJSの変数代入を可能にしています。
素のHTMLの場合、値の表現がStringのみになるためObjectの場合は
<my-list listItems='[{"id": 1, "name": "hoge"}, {"id": 2, "name": "fuga"}]'></my-list>
みたいな適応方法になってしまいます。
とはいえCakeのHTMLテンプレートはPHPの変数とjson_encodeの関数が使えると思いますので
<my-list listItems='<?php echo json_encode($items); ?>'></my-list>
みたいなので展開することになると思います。
Reactの場合はまだ試してないですが@lit-labs/reactというライブラリを使って型的にCustom Elementsを展開させるやり方もあるのでまた別の展開方法あるのかというコストはあるかもしれません。
前回の定例内容はこちらから確認可能ですのでご興味いただければ下記のリンクから閲覧いただければと思います。