※ブログでも同記事を投稿しています

どうしてもVue.jsが分からないので森の博士の研究所に押しかけてみたら、人生が激変した子タヌキの話

注

この物語は、フロントエンド技術を楽しく学ぶことを目的に、生成AIを活用して執筆されています。
技術的な情報の正確性には細心の注意を払っていますが、その内容がすべて真実であることを保証するものではありません。
あくまで学習の補助ツールとして、肩の力を抜いてお楽しみください。

登場人物紹介

フロントエンド博士: 森の奥の研究所に住む、フロントエンドのことなら何でも知っている物知り博士。ポン吉の素朴な疑問にいつも優しく（そして面白おかしく）答えてくれる。
ポン吉: 好奇心旺盛な子タヌキ。将来の夢はフロントエンドエンジニア。最近Vue.jsを学び始めたが、その奥深さに興味津々。新しい知識をゲットすると、思わず「ポン！」と飛び跳ねる特技あり。

第一話🦝「不思議な研究所での出会い」

森の奥にある古い洋館。その地下にある研究所では、今日もフロントエンド博士が何やら難しそうなコードと格闘していた。

「うーむ、この型定義をもう少し分かりやすく説明するには...」

博士が頭を掻いていると、研究所の扉がコンコンと鳴った。

博士: 「おや？こんな時間に誰じゃろう？」

扉を開けると、そこには小さな子タヌキが立っていた。手には分厚いプログラミングの本を抱えている。

ポン吉: 「あの、すみません！僕、ポン吉って言います。フロントエンドエンジニアになりたくて、Vue.jsを勉強してるんですけど...」

ポン吉の目は少し潤んでいる。

ポン吉: 「コンポーネントとか基本的なことは少し書けるようになったんですが、いつも最初に書く『createApp』って一体何をしてるんですか？本を読んでも『アプリを作る関数です』って書いてあるだけで...。森の動物たちが『あの博士なら何でも知ってるよ』って教えてくれたので、お邪魔しました。」

博士: 「ほほう！フロントエンドエンジニアになりたい子タヌキじゃな！面白い、面白い。さあさあ、中に入りなさい。」

ポン吉は目をキラキラさせながら研究所に入っていく。壁一面にはモニターが並び、そこには色とりどりのコードが表示されている。

ポン吉: 「わあああ！すごい！これが全部プログラムなんですか？」

博士: 「そうじゃよ。で、Vue.jsを学びたいと言ったな？」

ポン吉: 「はい！コンポーネントとか、データバインディングとかは少し分かるようになったんですけど、いつも最初に書く『createApp』の意味が全然分からなくて...」

博士: 「ほほう！もうコンポーネントが書けるとは、なかなかやるじゃないか。でも確かに、『createApp』については、多くの人が『おまじない』のように書いているだけで、本当の意味を理解していないんじゃよ。」

ポン吉: 「そうなんです！『import { createApp } from 'vue'』って書いて、『createApp』って呼んで...でも、この関数が一体何をしているのか、すごく気になって眠れないんです！」

博士: 「ふむふむ。それなら、まずは一番最初の一歩から教えてやろう。Vue.jsでアプリケーションを作る時の、一番大切な魔法の呪文があるのじゃ。」

博士は大きなモニターの前に立ち、キーボードを叩き始めた。

import { h, createApp } from "@vue/runtime-dom";

const App = {
  render() {
    return h("div", "こんにちは、ポン吉！");
  },
};
createApp(App).mount("#app");

博士: 「これじゃよ。このたった数行のコードが、Vue.jsアプリケーションを作る魔法なんじゃ。」

ポン吉: 「あれ...？いつものと少し違いますね。僕がいつも書いてるのはtemplateとかdataとかなんですけど、このhって何ですか？render関数も初めて見ました...」

博士: 「ほほう、よく気づいたな！確かにいつもと少し違って見えるじゃろう。でも心配しなくても大丈夫じゃよ。このh関数やrenderについても、おいおい分かるようになるからの。今日はまずcreateAppの基本を理解することが大事じゃ。」

ポン吉: 「そうですね...でも、このcreateAppって関数、一体何をしてるんですか？」

博士はニヤリと笑うと、隣のブラウザを指差した。そこには「こんにちは、ポン吉！」という文字が表示されている。

ポン吉: 「わあ！僕の名前が出てる！」

博士: 「そうじゃろう？このcreateAppという関数が、君のアプリケーションを生み出してくれたんじゃよ。」

ポン吉: 「createApp...。確かにアプリを作るって意味ですけど、でも、具体的に何をしてるんですか？僕がいつも書いてるコンポーネントと何が違うんですか？」

博士: 「その通り！よく気づいたな。英語で『create』は『作る』、『App』は『アプリケーション』のことじゃ。でも、ポン吉が言うように、『具体的に何をしているか』が大事なんじゃよ。」

博士: 「君がいつも書いているコンポーネントは、いわば『部品』じゃな。でも、createAppは、その部品を組み合わせて、一つの完全な『アプリケーション』という器を作る特別な関数なんじゃよ。」

ポン吉は目をパチクリさせている。

ポン吉: 「器...？コンポーネントとアプリケーションって違うんですか？」

博士: 「おお！いい質問じゃな！コンポーネントは料理の『材料』のようなもの。でも、createAppは『お皿』や『器』を用意する関数なんじゃよ。材料がいくら良くても、お皿がないと料理として完成しないじゃろう？」

博士は黒板に絵を描き始めた。

コンポーネント（材料）を入れる
      ↓
[ createApp関数 ]
      ↓
アプリケーション（完成した器）

博士: 「コンポーネントという材料を、アプリケーションという器に盛り付けて、初めて一つの完成した料理（Webアプリ）になるんじゃよ。」

ポン吉: 「なるほど！じゃあ、僕がいつも書いてるdataとかtemplateは材料で、createAppがそれを一つのアプリという器にまとめてくれるんですね！」

博士: 「そうじゃそうじゃ！そして、その器ができあがったら、mount('#app')で実際にブラウザの画面に表示するんじゃな。」

ポン吉は何かを理解したような顔をして、ピョンピョンと跳ね始めた。

ポン吉: 「ポン！わかりました！僕がいつも何気なく書いてたcreateAppは、コンポーネントをアプリケーションという器にまとめる、とても大事な関数だったんですね！」

博士: 「その調子じゃ！でも、実はこのcreateApp、もっと奥深い秘密があるんじゃよ。」

ポン吉: 「秘密？どんな秘密ですか？」

博士: 「例えば、君が間違ったコンポーネントを渡そうとすると、『それは違うよ』って教えてくれるんじゃ。これをTypeScriptの『型』という仕組みで実現しているんじゃよ。」

ポン吉: 「型...？」

博士: 「うむ。まあ、今日は初日じゃから、そこまで詳しくやらなくても大丈夫じゃ。でも、『型』というのは、データに『これは文字だよ』『これは数字だよ』という札を付けるような仕組みなんじゃよ。」

ポン吉は一生懸命にメモを取っている。

博士: 「今度、実際に君のパソコンでVueアプリを作ってみるかの？」

ポン吉: 「やってみたいです！でも、僕にもできますか？」

博士: 「もちろんじゃ！最初は誰でも初心者じゃった。大切なのは好奇心と、一歩ずつ学んでいく気持ちじゃよ。」

ポン吉は嬉しそうに尻尾をフリフリしている。

ポン吉: 「博士、ありがとうございます！明日も来てもいいですか？」

博士: 「もちろんじゃとも！次回は実際に君の手でcreateAppを書いてもらおうかの。そして、このcreateAppがどんな魔法を使っているのか、もう少し詳しく見てみようじゃないか。」

ポン吉: 「はい！楽しみです！ポン！」

ポン吉は嬉しそうに研究所を後にした。明日からの勉強が楽しみで仕方ない。フロントエンド博士も、新しい弟子ができて嬉しそうだった。

🌟 今日のまとめ

createApp は Vue.js アプリケーションを作る魔法の関数
料理のレシピのように、材料（設定）を渡すとアプリができあがる
TypeScript の型 は、データに札を付けて間違いを防ぐ仕組み
プログラミングは一歩ずつ学んでいけば、誰でもできるようになる！

次回予告　「初めてのcreateApp体験」

ポン吉が実際にコードを書いて、createApp関数の不思議な力を体験します！

👨‍🏫 博士からの補足

ポン吉はまだ気づいておらんが、今回のコードでは import { h, createApp } from "@vue/runtime-dom"; という、少し見慣れない書き方をしておるんじゃ。

普通、多くのドキュメントでは import { createApp } from 'vue' と書かれていることが多いじゃろう。では、なぜわしはあえて @vue/runtime-dom からインポートしたのか？

実は、ポン吉が普段 vue というパッケージ名で使っているものは、いくつかの小さなパッケージが合わさってできたものなんじゃ。その中でも、@vue/runtime-dom は、ブラウザ環境でVueアプリケーションを動かすための、核となる機能（レンダラーやDOM操作APIなど）を提供しておる。

つまり、import { createApp } from 'vue' と書いた時、Vueは内部でこの @vue/runtime-dom から createApp を取り出して、我々に提供してくれておるんじゃな。

今回は、Vueの内部構造を少しでも感じてもらうために、あえて一番コアな部分から直接インポートしてみたんじゃよ。この @vue/runtime-dom ついては、またいつか番外編で詳しく解説してやろう。今は「普段使っている vue の裏側には、こんな世界が広がっているんだな」ということを、頭の片隅にでも置いておいてくれると嬉しいぞい。

第一話おわり