Zenn
🎶

分業の為のWebComponents

2022/07/19に公開
Web Components
tech

なぜWebComponents？

なぜかと言うとタイトルに書いた通り分業の為、誰とかと言うとhtmlやcss組んでくれるWebデザイナーとの分業という事になる。さらになぜ分業したいのかと言うと、自分がhtmlやcssが苦手でデザインセンスも無いので極力デザインから離れたい、尚且つhtmlをこねくり回す時はデザイナーだけで完結出来るようにしたい。
※ここで言うデザイナーはjQuery使いや、vueをjQuery的な使い方しちゃう人を想定している

何をコンポーネント化すればいい？

外部リソースに関わる部分、即ち INPUT→リソース→OUTPUT のINPUTとOUTPUT。
下のhtmlで言うと青色（ユーザー入力）がINPUT、赤色（結果出力）がOUTPUTになるイメージ。

さっそく作る

コンポーネントを作って、カスタムコンポーネントをhtmlから呼べるようにして、htmlを作って・・・やったー完成したー！

作る過程を考える

1. デザイナーと相談をする（最重要）

デザイナーが扱いやすいようにコンポーネントを作ってあげる。お互い気持ち良く仕事をする為にもデザイナーの要望は最大限叶えるる。

以下の二つがデザイナー側の要望だと仮定する。

  • 各コンポーネントをdivで括って欲しい
  • styleはデザイン側で自由に当て込みたい

2. コンポーネント（コード）を作る

タグを決めて呼び出し元のhtmlを作る

index.html
<!DOCTYPE html>
<html lang="ja">
<head>
    <meta charset="utf-8">
    <title>l-freeze | Web Components | fetch</title>
    <link rel="stylesheet" type="text/css" href="style.css">
</head>
<body>
    <div>
        <h1 class="title">Web Components</h1>
    </div>
    <div>
        <l-freeze-parts01-input styling="
            input {
                border-radius: 2.0rem;
                height: 1.3rem;
                width: 40.0em;
            }
        ">
        コンポーネント１
        </l-freeze-parts01-input>
    </div>
    <div>
        <l-freeze-parts01-output styling="
            div {
                height: 7.0em;
                width: 40.0em;
                font-size: 0.5rem
            }
        ">
            コンポーネント２
        </l-freeze-parts01-output>
    </div>
    <script type="module" src="main.js"></script>
</body>
</html>

※タグを決める とは以下のようなものを定義するという事

<l-freeze-parts01-input styling="input {
        border-radius: 2.0rem;
        height: 1.3rem;
        width: 40.0em;
}">コンポーネント１
</l-freeze-parts01-input>
<l-freeze-parts01-output styling="div {
        height: 7.0em;
        width: 40.0em;
        font-size: 0.5rem
}">コンポーネント２
</l-freeze-parts01-output>

コンポーネント内にdivタグに括られたinputを作る

components
const div = document.createElement('div');
shadowRoot.appendChild(div);
div.innerHTML = `
    <input type='text' name='apiurl' value='' placeholder='${content}'>
`;

続いてstyleタグを作る

components
const style = document.createElement('style');
shadowRoot.appendChild(style);
style.textContent = this.styling;

属性は読み取り専用という事でgetterを用意しつつ属性の変更を検知するように

components
get styling() {
    return this.getAttribute('styling')  || '';
}
static get observedAttributes() { 
    return ['styling'];
}

あとはgithubのソース通りレガシーで構わないのでjavascriptを書く。するとサンプルのようなものが完成する。

大事なこと

どういう形でコンポーネントを用意するとデザイナーが使いやすいか、デザイナーとしっかり対話する事。技術的な事を考えるのは二の次で大丈夫。ステートの持ち回りやモジュール化など、システム的なデザインも色々考えるかもしれないけれどそこは技術者だけで解決出来る事、頑張ればひとりでも出来る。
得意分野の違う協力者が動きやすいようにオモテナシ精神で臨もうね。

Discussion