Web制作でよく使うツールを集めた、「便利ボタン.com」を公開しました。

こんにちは。フリーでWeb制作をメインで行っている小林です。

Web制作においてよく使うツールを集めたページを作りました。
https://benri-button.com/
究極にシンプルにした方が使いやすい＋個人的に好きなので、ただボタンを羅列しただけの状態になっています。

• 検索しないとボタンが見つからない
• 目的のボタンに到達するまで複数回のクリックを要求される

などが煩わしいと思うタイプなので、そうならないようにしたいと思っています。

Web制作をメインでされている方はぜひ使ってみてください。改善点やこんなボタンも追加して欲しいなどあればぜひコメントください。

また、技術的にはお試しでWeb Componentsを使っています。今はネイティブのWeb Componentsですが、Litなどのライブラリを使用した方が実践的かなと思いました。
将来的に機能を追加する際におそらくステート管理の必要が出てきそうだからです。

コードで見てみると、

• JavaScriptでコンポーネントを定義
• 定義したコンポーネントを登録
• HTMLからタグとして呼び出す
  という形になっています。

benriButton.js

export class BenriButton extends HTMLElement {
  constructor() {
    super()
    this.attachShadow({ mode: "open" })

    const a = document.createElement("a")

    a.href = this.hasAttribute("href") ? this.getAttribute("href") : "#"
    a.target = this.hasAttribute("target") ? this.getAttribute("target") : ""
    a.title = this.hasAttribute("title") ? this.getAttribute("title") : ""
    a.innerText = this.hasAttribute("content")
      ? this.getAttribute("content")
      : ""
    a.classList.add("BenriButton")

    const style = document.createElement("style")
    style.textContent = `
    .BenriButton {
      border: 1px solid #ddd;
      border-radius: 5px;
      height: 60px;
      text-decoration: none;
      display: grid;
      place-content: center;
      font-weight: bold;
      color: #333;
      transition: all .3s;
    }

    .BenriButton:hover {
      border: 1px solid #71C2EE;
      background-color: rgba(113, 194, 238, 0.5)
    }
    `
    
    this.shadowRoot.append(style, a)
  }
}

index.js

import { BenriButton } from "./../components/benriButton/index.js"

customElements.define("benri-button", BenriButton)

index.html

<benri-button
  href="https://github.com/github"
  target="_blank"
  content="GitHub"
></benri-button>

JavaScript単体ではHTMLテンプレートが利用できず毎回createElementなどを呼び出さないといけなかったり（多分）、スタイルも直に文字列として埋め込むのが基本の書き方らしいなどの点がやや取り回しが悪いのも気になっています。

またWeb Components標準では基本的にステート管理の概念がないようなので、前述のようにLitなどを使うのが現実的でしょう。

ちなみに今後、お気に入り機能は追加したいなと思っています。逆にそれ以外はそれほど必要な機能はないかなと思っています。こちらもアイデアなどありましたらコメントください。