🦠

Preact cdnjs 使い方

2021/05/27に公開

JavaScript

Preact

tech

使い方

Preact公式にあるPreact初心者向けガイドで紹介されていた内容がhttps://unpkg.com/preact?moduleをESMとしてインポートする方法だったため、cdnjsを使うような初心者にとって全く参考にならない気がしたため備忘録も兼ねて書くことにしました。
また上記方法だとバージョンを固定していないので本番環境で動かし続けたら破壊的変更で壊れてしまうのでバージョンも固定したいと思います。
今回10.5.13を使用しました。

<script src="https://cdnjs.cloudflare.com/ajax/libs/preact/10.5.13/preact.min.js"></script>
<script>
var app = preact.h('h1', null, 'Hello, World!');
preact.render(app, document.body);
</script>

このように書けば問題なく動きます。
つまりh()をpreact.h()、render()をpreact.render()にするだけです。
ちなみに上記コードはES3で書いているのでIE11でも問題なく動くそうです。

もちろんcdnjsのほかにjsDelivrやunpkgを使うこともできます。

IE11でJSXは使えないので、preact.h()を駆使して描写するよう頑張ってください。

<script src="https://cdnjs.cloudflare.com/ajax/libs/preact/10.5.13/preact.min.js"></script>
<script>
var li = [];
var data = ['foo', 'bar', 'baz'];
for (var i in data) li[i] = preact.h('li', null, data[i]);
var app = preact.h('ul', null, li);
preact.render(app, document.body);
</script>

ちなみにこのような書き方はHyperScriptと呼ばれるライブラリに強い影響を受けているそうです。

古いPreactの解説記事にて確認しました。

IE非対応であればESMとしてインポートをしたりJSXを使わなくてもHTMと呼ばれるライブラリを使用することでJSXを再現することができます。

https://github.com/developit/htm

<script src="https://cdnjs.cloudflare.com/ajax/libs/preact/10.5.13/preact.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/htm/3.0.4/htm.min.js"></script>
<script>
const html = htm.bind(preact.h);
const App = props => html`<h1>Hello, ${props.name}!</h1>`;
preact.render(html`<${App} name="World" />`, document.body);
</script>

ES6で書いておりESMを使用していないためIEではない古いブラウザでも問題なく動きます。

最新のブラウザだけ対応すればよい場合はESMを使用したほうが便利なのでそうしたほうがいいです。私もそうしてます。

<script type="module">
import { h, render } from 'https://cdnjs.cloudflare.com/ajax/libs/preact/10.5.13/preact.module.js';
const app = h('h1', null, 'Hello, World!');
render(app, document.body);
</script>

Preactはcdnjs上でmodule版を公開しているためこのように書けばunpkgと同様に動かすことができます。
cdnjsやunpkgのほかにjsDelivr、ESMで使用できるCDNであるSkypack、ESM.sh、JSPM.devも使用できます。

私はSkypackを使うことが多いですが好きなものを使えばよいと思います。
Preactは様々なケースに対応できる便利なライブラリなので困った時にお試しください。

使い方

Discussion