CDNでjQueryを利用して、HTMLでちょっとした処理をするのは、とても便利です。
ですが、今さらjQueryって……というのもあるので、ReactやVueでも、ちょろっとできないかな？ と思い、トライしてみました。
サンプルなので、簡単なJSONレコードをループで表示しているだけですが、jQuery、React、Vueで、それぞれ同じ挙動ができました。
jQuery
まずは、ベースとなるjQuery版です。
<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>JQuery</title>
</head>
<body>
<!-- JSファイル読み込み -->
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.6.0/jquery.min.js"></script>
<!-- スクリプト -->
<script>
// JSONレコード作成
const recs = [
{id: 1, value: "Test1"},
{id: 2, value: "Test2"},
{id: 3, value: "Test3"},
{id: 4, value: "Test4"},
{id: 5, value: "Test5"},
];
// 変数の宣言
let reactMessage = "";
let reactRecs = [];
// マウント時
$(function(){
// 変数の初期化
initReactVariables();
// 変数の表示
dispReactVariables();
})
// 変数の初期値を設定
const initReactVariables = () => {
// メッセージ設定
reactMessage = "Test CDN JQuery";
// JSONレコード設定
reactRecs = recs;
}
// DOM作成と表示
const dispReactVariables = () => {
// メッセージ作成
const divMessage = $("<div></div>");
divMessage.text(reactMessage);
// JSONレコード作成
const divRecs = $("<div></div>");
// レコード数分ループ
reactRecs.forEach(it => {
// DOM作成
const pRow = $("<p style='margin: 0'></p>");
const spanId = $(`<span>ID: ${it.id}</span>`);
const spanValue = $(`<span style='margin-left: 10px;'>Value: ${it.value}</span>`);
pRow.append(spanId, spanValue);
divRecs.append(pRow);
})
// Appに追加
const divApp = $("#app");
divApp.append(divMessage);
divApp.append(divRecs);
}
</script>
<!-- HTML -->
<div id="app"></div>
</body>
</html>
これ実行すると、下記が表示されます。
React
次はReact版です。
<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>React</title>
</head>
<body>
<!-- JSファイル読み込み -->
<script crossorigin src="https://unpkg.com/react@18/umd/react.production.min.js"></script>
<script crossorigin src="https://unpkg.com/react-dom@18/umd/react-dom.production.min.js"></script>
<script src="https://unpkg.com/@babel/standalone/babel.min.js"></script>
<!-- スクリプト -->
<script type="text/babel">
// JSONレコード作成
const recs = [
{id: 1, value: "Test1"},
{id: 2, value: "Test2"},
{id: 3, value: "Test3"},
{id: 4, value: "Test4"},
{id: 5, value: "Test5"},
];
// モジュール取得
const { useEffect, useState } = React;
// Reactインスタンス作成
const App = () => {
// リアクティブ変数の宣言
const [ reactMessage, setreactMessage ] = useState("");
const [ reactRecs, setreactRecs ] = useState([]);
// ライフサイクルフック（マウント）
useEffect(() => {
// リアクティブ変数の初期化
initReactVariables();
}, [])
// リアクティブ変数の初期値を設定
const initReactVariables = () => {
// メッセージ設定
setreactMessage("Test CDN React");
// JSONレコード設定
setreactRecs([...recs]);
}
// 戻り値の設定（JSX）
return(
<>
<div>{reactMessage}</div>
<div>
{ reactRecs.map(it => {
return(
<p style={{ margin: 0 }}>
<span>ID: { it.id }</span>
<span style={{ marginLeft: '10px' }}>Value: { it.value }</span>
</p>
)
}) }
</div>
</>
);
}
// Appに追加
const app = document.querySelector("#app");
ReactDOM.render(<App />, app);
</script>
<!-- HTML -->
<div id="app"></div>
</body>
</html>
これを実行すると、下記が表示されます。jQuery版と同じですねｗ
Vue
最後はVue版です。こちらは、Vue3のCompositionAPIです。
<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Vue</title>
</head>
<body>
<!-- JSファイル読み込み -->
<script src="https://unpkg.com/vue@3/dist/vue.global.prod.js"></script>
<!-- スクリプト -->
<script type="module">
// JSONレコード作成
const recs = [
{id: 1, value: "Test1"},
{id: 2, value: "Test2"},
{id: 3, value: "Test3"},
{id: 4, value: "Test4"},
{id: 5, value: "Test5"},
];
// モジュール取得
const { createApp, ref, reactive, onMounted } = Vue;
// Vueインスタンス作成
const App = createApp({
setup() {
// リアクティブ変数の宣言
const reactMessage = ref("");
const reactRecs = reactive([]);
// ライフサイクルフック（マウント時）
onMounted(() => {
// リアクティブ変数の初期化
initReactVariables();
})
// リアクティブ変数の初期値を設定
const initReactVariables = () => {
// メッセージ設定
reactMessage.value = "Test CDN Vue3 with Composition API";
// JSONレコード設定
reactRecs.push(...recs);
}
// 戻り値の設定
return {
reactMessage,
reactRecs,
};
},
});
// Appに追加
App.mount("#app");
</script>
<!-- HTML -->
<div id="app">
<div>{{ reactMessage }}</div>
<div>
<p style="margin: 0" v-for="it in reactRecs" :key="it.id">
<span>ID: {{ it.id }}</span>
<span style="margin-left: 10px;">Value: {{ it.value }}</span>
</p>
</div>
</div>
</body>
</html>
これを実行すると、下記が表示されます。見た目は変わらないですねｗ
この程度ですと、どれを使ってもコード量は、それほど変わりません。
であれば、jQueryでも全然良いのかもしれませんｗ
ただし、jQueryだと、動的なDOM作成がちょっと面倒な部分があり……
Reactは、useStateとJSXが、微妙に気持ち悪いんだよな……
そして、Vueは、refとreactiveが、少し分かりずらいし……
と、それぞれの愚痴をこぼしつつ、まあ、できたから良いかな？ という感じです。
たぶん、慣れなんだと思います……
というわけで、一応githubにも公開しておきましたので、興味があれば覗いてみてください。
