はじめに
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では一緒に働いてくれる仲間を募集中です！
ご興味がある方は以下リンクよりご確認ください。