📑

【まとめ】web標準技術のみを使用したwebApp開発用テンプレート作成

に公開
初心者
個人開発
勉強
作業ログ
web開発
idea

🌅 こんなことがあったから

🤔HTML・CSS・JavaScript勉強したしなんか作ってみるか
🤕勉強したHTML・CSS・JavaScriptでそのまま書くとコードが肥大化して修正や確認が大変
🧐再利用とか保守っていう考え方があるのか。これweb標準技術だけでできないの？（ChatGPTへ）
🤖Web Components

🎯 こうしよう

web標準技術の学習。またこれを通して再利用、保守の概念に触れる

なんでweb標準技術

🫣これ作りたいって思ってじゃあ環境構築するかってやってる間にモチベーションなくなってるよね
（🥹やってからわかったけど、初心者には学習コストあったよ）

⚙️ とりあえずこれつかってみるか

言語

HTML・CSS・JavaScript

構成技術

  • webコンポーネント(カスタム要素、シャドウDOM、HTMLテンプレート)
  • ESモジュール
    👉複数ページや別プロジェクトで再利用可能になったり、カプセル化することで競合とか考えることが減る

🌐 つくったもの

web標準技術のみを使用したwebApp開発用テンプレート
GitHub リポジトリはこちら

🧰どんなもん？

  • ハッシュベースのURLを使用したSPA風ルーティング
  • モジュール化コンポーネント：ヘッダー、コンテンツ、フッター
  • スタイルカプセル化のためのシャドウDOM

🚀 もっとこうしたいな

  • config.js を管理画面のように扱い、変更に強いテンプレートにする
  • 中・大規模プロジェクトに対応できる拡張性の仕組みを検討

🔜 次にやること

  • このテンプレートを実際に使ってサンプルプロジェクトを作成
  • 使いづらい点や改善点を修正

📖 参考

https://open-wc.org/codelabs/basics/web-components#0

Discussion