どうしてもVue.jsが分からないので森の博士の研究所に押しかけてみたら、人生が激変した子タヌキの話
※ブログでも同記事を投稿しています
注
この物語は、フロントエンド技術を楽しく学ぶことを目的に、生成AIを活用して執筆されています。
技術的な情報の正確性には細心の注意を払っていますが、その内容がすべて真実であることを保証するものではありません。
あくまで学習の補助ツールとして、肩の力を抜いてお楽しみください。
登場人物紹介
- フロントエンド博士: 森の奥の研究所に住む、フロントエンドのことなら何でも知っている物知り博士。ポン吉の素朴な疑問にいつも優しく（そして面白おかしく）答えてくれる。
- ポン吉: 好奇心旺盛な子タヌキ。将来の夢はフロントエンドエンジニア。最近Vue.jsを学び始めたが、その奥深さに興味津々。新しい知識をゲットすると、思わず「ポン！」と飛び跳ねる特技あり。
第2話🦝「初めてのcreateApp体験とh関数の謎」
翌日、ポン吉は約束通り、フロントエンド博士の研究所にやってきた。
ポン吉: 「博士、おはようございます！今日もよろしくお願いします！ポン！」
元気いっぱいのポン吉を見て、博士はにっこりと笑う。
博士: 「うむ、おはよう、ポン吉。昨日のおさらいはしてきたかな？」
ポン吉: 「はい！createAppは、コンポーネントという『材料』を、アプリケーションという『器』にまとめる、とっても大事な関数なんですよね！」
博士: 「その通りじゃ！よく覚えておったな。では早速、今日はポン吉自身の手でcreateAppを使ってみようかの。」
博士はポン吉をモニターの前の席に座らせた。
博士: 「さあ、ここに昨日わしが見せたコードがある。これを君の手で書いてみるのじゃ。」
import { h, createApp } from "@vue/runtime-dom";
const App = {
render() {
return h("div", "こんにちは、ポン吉！");
},
};
createApp(App).mount("#app");
ポン吉は緊張しながらも、一生懸命キーボードを叩き始めた。最初はおぼつかない手つきだったが、博士に教えられながら、なんとかコードを書き終えた。
ポン吉: 「できました！博士！」
博士: 「うむ、よくやった。では、実行してみるのじゃ。」
ポン吉がエンターキーを押すと、ブラウザに「こんにちは、ポン吉！」という文字が表示された。
ポン吉: 「わーい！僕が書いたコードで動いた！ポン！ポン！」
ポン吉は嬉しくて、ピョンピョンと飛び跳ねた。
博士: 「はっはっは。プログラミングの醍醐味じゃな。自分の書いたコードが動く瞬間は、何物にも代えがたい喜びがある。」
一通り喜んだ後、ポン吉はふと疑問に思った。
ポン吉: 「博士、昨日も少し思ったんですけど、このhって関数は何なんですか？僕がいつも使っているtemplateで書くのと、どう違うんですか？」
博士は待ってましたとばかりに頷いた。
博士: 「良い質問じゃ、ポン吉！それこそが、Vue.jsの内部を理解するための重要な鍵なんじゃよ。」
博士: 「君が普段使っているtemplateは、実はVue.jsが内部でこのh関数を使ったコードに変換してくれておるんじゃ。」
ポン吉: 「ええっ！？そうなんですか！？」
博士: 「そうじゃよ。templateは人間にとって分かりやすい書き方じゃが、Vue.jsが本当に理解できるのは、このh関数で作られた『仮想ノード(VNode)』と呼ばれるものなんじゃ。」
ポン吉: 「かそうのーど...？」
博士はまた黒板に絵を描き始めた。
<template>
<div>こんにちは</div>
</template>
↓ Vue.jsが変換
h('div', 'こんにちは')
博士: 「templateで書かれたコードは、最終的にh関数を使った形に変換されて、Vue.jsに渡される。いわば、h関数はVue.jsの『共通言語』のようなものじゃな。」
ポン吉: 「なるほどー！じゃあ、templateを使わずに、最初からh関数で書くこともできるんですね！」
博士: 「その通りじゃ！そして、Vue.jsの内部の仕組み、つまり『魔法』の正体を理解するには、このh関数から学ぶのが一番の近道なんじゃよ。」
ポン吉: 「h関数...。なんだか難しそうですけど、面白そうでもあります！」
博士: 「ふむ。その好奇心があれば大丈夫じゃ。次回は、このh関数と、それが作り出す『仮想ノード』の不思議な世界を、もっと詳しく探検してみようじゃないか。」
ポン吉: 「はい！楽しみです！ポン！」
ポン吉は、h関数という新しい魔法の呪文にワクワクしながら、研究所を後にした。
🌟 今日のまとめ
-
createAppを自分で書いて、アプリケーションが作れることを体験した。 - 普段使っている
templateは、内部でh関数 に変換されている。 -
h関数 は、Vue.jsの内部を理解するための重要な鍵。
次回予告 「h関数とVNodeの不思議な世界」
ポン吉がh関数の使い方を学び、Vue.jsの魔法の素材「VNode（仮想ノード）」の謎に迫ります！
次回作以降はブログにて投稿しています。ぜひそちらからご覧ください。
👨🏫 博士からの補足
物語を分かりやすくするため、博士は「templateがh関数に変換される」と説明しておるが、厳密には少し違うのじゃ。
Vueのコンパイラは、templateをまず解析し（ASTという木の構造に変換し）、そこから最適化されたレンダリング用のコードを生成する。h関数は、我々開発者が手動でレンダリング処理を書きたい時に使う便利なAPIであり、コンパイラが最終的に生成するコードは、さらに効率化されたものなんじゃよ。
この物語では、その概念を代表して、ポン吉にも分かりやすい「h関数」という言葉で説明しておるんじゃ。
ちなみに、この “h” は “hyperscript” の頭文字で、「仮想DOMツリーをJavaScriptで記述する記法」の一種なんじゃ。Reactでも同じ考え方が使われておるぞ。
第二話 おわり