Web componentsって・・・つまり、どういうことだってばよ。

ゆえみる

私の理解力は低い。
改めて自分で復習がてらまとめてみます。

Web componentsって？

コード管理を便利にする法則。
HTMLを書く際に<div>とかのタグに本来ない<kougeki>とかのタグを追加できる。パッと見、HTMLがわかりやすくなる。（ネーミングセンスによるけど）便利。
しかもそのタグの中身をカスタマイズできるので、何回も使用するボタンの構成をタグ化しておけば何度も繰り返し同じボタンを配置できる。便利。

3大要素

カスタム要素（Custom Elements）

カスタム要素は、HTML要素のカスタムバージョンを作成するための仕様です。通常のHTML要素（例：<div>、<button>）と同じように、独自のHTMLタグを作成できます。これにより、独自のコンポーネントを定義できます。カスタム要素は、JavaScriptのクラスを使用して定義され、ライフサイクルメソッド（connectedCallback、disconnectedCallbackなど）を介してカスタムコンポーネントの振る舞いを設定できます。

ChatGPT

シャドウDOM（Shadow DOM）

シャドウDOMは、カスタム要素の内部にカプセル化されたDOMツリーを作成する技術です。これにより、外部からのスタイルやスクリプトの干渉を防ぎ、コンポーネントの内部を隠すことができます。これは、コンポーネントのスタイリングやスクリプトのカプセル化に非常に役立ちます。

ChatGPT

これでタグ内のコードを干渉できなくさせている。

HTMLテンプレート（HTML Templates）

HTMLテンプレートは、コンポーネントのマークアップ（HTMLコード）を定義するためのメカニズムです。テンプレート内にHTML要素を記述し、それを後でコンポーネントのカスタム要素内でインスタンス化できます。これにより、コンポーネントの再利用性とメンテナンス性が向上し、効果的なコンポーネントの作成が容易になります。

ChatGPT

試しにボタンをchatGPTにWeb components化お願いしてみた

HTMLファイル (button-component.html)

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <link rel="stylesheet" type="text/css" href="button-component.css">
</head>
<body>
  <custom-button></custom-button>
</body>
<script type="module" src="button-component.js"></script>
</html>

<custom-button>がカスタム要素です。

JavaScriptファイル (button-component.js)

class CustomButton extends HTMLElement {
  constructor() {
    super();

    // シャドウDOMを作成
    const shadow = this.attachShadow({ mode: 'open' });

    // ボタン要素を作成
    const button = document.createElement('button');
    button.textContent = 'Click Me';

    // シャドウDOMにボタンを追加
    shadow.appendChild(button);

    // ボタンがクリックされたときの処理
    button.addEventListener('click', () => {
      alert('ボタンがクリックされました！');
    });
  }
}

customElements.define('custom-button', CustomButton);

テンプレートリテラル記法

実装する時にお世話になったのはこちらの記事

es6-string-html

es6-string-html

つまり...どういうことだってばよ？

色々調べてみましたが、要するに見やすく修正しやすくするためのもの。そこでVue.jsを使用してコンポーネント化することができるらしく、こっちの方向に落ち着きそうです。

用意するもの

  • Xcode

  • Node.js

  • Vue.js

node.jsをDL

node.jsはJavaScriptを自分のPC上で動かすための環境です。
だいたい併用するPythonやRubyがパソコン上で動かして使うので、開発がしやすいメリットがあります。そして、Vue.jsはJavaScriptを使用しているので、パソコンで動かすには必須な分けです。
そもそもJavaScriptはChromeやFirefoxといったブラウザ上で動作するプログラミング言語です。そのためブラウザ上という制限された環境でしか動けなかったJavaScriptを、PythonやRubyのようにパソコン上で動かせるようにしてもらう必要があります。
ちなみに、npmはNode.jsのパッケージ管理ツールです。

node.jsをインストール

xcodeを開き、ターミナルで

node -v

でEnterを押して、バージョンが出てきたら準備完了。


PC内に使用するファイルを作る

ターミナルに以下を打ち込む

cd フォルダ構造（finderからD&D）

npmをインストール

ターミナルに

npm create vue@latest

を打ち込んでyと返答。
ディレクトリ名を入れる。
質問に答えるとディレクトリは完成。

npm install

npm run dev


使用時

ファイルが完成したら、
※control + cすると中止

ターミナルに

npm run build

を打つとアプリのプロダクション向けビルドがプロジェクトの ./dist ディレクトリーに作成。

とりま環境はできた。

この記事が参加している募集

#最近の学び

181,413件

サポートいただければ自分にハッパをかけれます。ありがとうございます。ただ、お返しできることがほぼないです。ご了承ください。