はじめに

VanJSではvan.tagsでタグの関数を変数として宣言できますが、実はhead内で使用するhead, link, meta, style, titleなどのタグも宣言することができます。これらのタグを利用すれば動的にhead情報を追加・変更できるので、その方法をご紹介します。

デモ

リポジトリ

コード

van-1.1.3.nomodule.min.jsファイルは公式サイトからダウンロードしてください。

├── index.html
└── main.js
└── style.css
└── style2.css
└── van-1.1.3.nomodule.min.js

index.htmlに以下コードをします。あえてhead情報は何も入れていません。

index.html

<!doctype html>
<head></head>
<html lang="en">
  <body>
    <div id="app"></div>
    <script type="text/javascript" src="van-1.1.3.nomodule.min.js"></script>
    <script type="text/javascript" src="main.js"></script>
  </body>
</html>

cssPathでcssファイルのパスを変更することで、読み込むcssファイルが変更されます。

main.js

const cssPath = van.state('style.css')

const Head = () => {
  const { meta, title, link } = van.tags

  // head直下に追加するため、配列で返す（React.Fragmentみたいな）
  return [
    meta({ charset: 'UTF-8' }),
    meta({
      name: 'viewport',
      content: 'width=device-width, initial-scale=1.0',
    }),
    title('vanjs-head'),
    // cssのパスを変数にして、動的に変更できるようにしている
    link({ rel: 'stylesheet', href: cssPath })
  ]
}

// headタグに追加
van.add(document.head, Head())

const App = () => {
  const { div, button } = van.tags

  return div(
    button(
      { type: 'button', onclick: () => (cssPath.val = 'style.css') },
      'style.css',
    ),
    button(
      { type: 'button', onclick: () => (cssPath.val = 'style2.css') },
      'style2.css',
    ),
  )
}

// bodyタグに追加
van.add(document.body, App())

style.css

body {
  background-color: #faa;
}

style2.css

body {
  background-color: #afa;
}

まとめ

VanJSでhead情報を動的に追加・変更する方法をご紹介しました。実際にhead情報を動的に変更する場面は少ないかもしれませんが、例えばダークモード・ライトモードの切り替えで読み込むcssファイルを変えるなどであれば使い所はあると思います。

最後に

GoQSystemでは一緒に働いてくれる仲間を募集中です！

ご興味がある方は以下リンクよりご確認ください。