第2話「初めてのcreateApp体験とh関数の謎」 • frontendBaby

どうしても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でも同じ考え方が使われておるぞ。

第二話おわり