Web componentsって・・・つまり、どういうことだってばよ。
私の理解力は低い。
改めて自分で復習がてらまとめてみます。
Web componentsって？
コード管理を便利にする法則。
HTMLを書く際に<div>とかのタグに本来ない<kougeki>とかのタグを追加できる。パッと見、HTMLがわかりやすくなる。（ネーミングセンスによるけど）便利。
しかもそのタグの中身をカスタマイズできるので、何回も使用するボタンの構成をタグ化しておけば何度も繰り返し同じボタンを配置できる。便利。
3大要素
カスタム要素（Custom Elements）
カスタム要素は、HTML要素のカスタムバージョンを作成するための仕様です。通常のHTML要素（例：<div>、<button>）と同じように、独自のHTMLタグを作成できます。これにより、独自のコンポーネントを定義できます。カスタム要素は、JavaScriptのクラスを使用して定義され、ライフサイクルメソッド（connectedCallback、disconnectedCallbackなど）を介してカスタムコンポーネントの振る舞いを設定できます。
シャドウDOM（Shadow DOM）
シャドウDOMは、カスタム要素の内部にカプセル化されたDOMツリーを作成する技術です。これにより、外部からのスタイルやスクリプトの干渉を防ぎ、コンポーネントの内部を隠すことができます。これは、コンポーネントのスタイリングやスクリプトのカプセル化に非常に役立ちます。
これでタグ内のコードを干渉できなくさせている。
HTMLテンプレート（HTML Templates）
HTMLテンプレートは、コンポーネントのマークアップ（HTMLコード）を定義するためのメカニズムです。テンプレート内にHTML要素を記述し、それを後でコンポーネントのカスタム要素内でインスタンス化できます。これにより、コンポーネントの再利用性とメンテナンス性が向上し、効果的なコンポーネントの作成が容易になります。
試しにボタンを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
つまり...どういうことだってばよ？
色々調べてみましたが、要するに見やすく修正しやすくするためのもの。そこで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 ディレクトリーに作成。
とりま環境はできた。
いいなと思ったら応援しよう！
