※ブログでも同記事を投稿しています
どうしても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 の裏側には、こんな世界が広がっているんだな」ということを、頭の片隅にでも置いておいてくれると嬉しいぞい。
第一話 おわり