[Vue.js超入門]「押すなよ！？絶対に押すなよ！？」を作りながら学ぶ、未経験者向けチュートリアル🦉🐣
こんにちは！
今日は、「プログラミング完全未経験」 の方が、Vue.js を使って初めてのWebアプリを作るためのチュートリアルを公開したので紹介します。
🦉 登場人物
このチュートリアルでは、以下の2人が楽しく（時に厳しく？）案内してくれます。
🦉 先輩フクロウ
物知りで優しい先輩エンジニア。
「手品」や「料理」など、身近な例え話を使って説明するのが得意。
口癖は「〜じゃ」「ホー」。
🐣 新人ヒヨコ
プログラミング完全未経験の新人。
やる気はあるが、黒い画面（ターミナル）や英語のエラーが出るとすぐパニックになる。
読者の皆さんの「分からない...！」を代弁してくれる存在。
🐣 先輩...プログラミングって難しすぎませんか？
🐣 「先輩〜！！もうダメです...。
Webアプリを作ってみたくて勉強し始めたんですけど、『コンポーネント』 だの 『リアクティブ』 だの、専門用語がいきなり大量に出てきて...。
しかも『Hello World』って文字が出ただけで、『で、これが何なの？』ってなっちゃって...」
🦉 「ふぉっふぉっふぉ。誰もが通る道じゃな」
「最初の壁が高すぎて、面白さを知る前に挫折してしまうのはもったいないのう」
🐣 もっとこう、理屈はいいから「動いて笑えるもの」を作りたいんです！
🦉 「よい心掛けじゃ！なら、このチュートリアルをやってみるかの？」
🎭 どんなアプリを作るの？
🦉 「今回作るのは、お笑いの伝統芸能... 『熱湯風呂』じゃ！」
🐣 「えっ！？アプリで熱湯風呂ですか！？」
🦉 「そうじゃ。名付けて 『絶対に押すなよ！？（Don't Push Me）』 じゃ」
- 画面には 「絶対に押すなよ！？」 というフリの文字と、謎のボタン。
- 勇気を出してボタンを押すと...？
- 「アチーー！！」 というリアクションと共に画面が変化するんじゃ！
🐣 「あはは！くだらないですね（笑）」
「でも、ボタンを押して画面が変わるって、Webアプリっぽいです！」
🦉 「うむ。この中に Vue.js の基本がすべて詰まっておるんじゃ」
🦉 このチュートリアルの特徴
1. 専門用語を「日常の道具」に翻訳
🐣 「でも先輩... コードを見ると、やっぱり英語がいっぱいで怖いです...」
🦉 「ふぉっふぉっふぉ。心配無用じゃ！」
「このチュートリアルでは、難しい言葉はすべて 『日常の道具』 に例えて教えるからの」
-
import→ 「道具箱」から取り出す -
const→ データに「名札」をつける -
ref→ 「魔法の箱」（中身が変わると画面も変わる） -
() => {}→ 処理の「手順メモ」 -
true/false→ 電球の「スイッチON/OFF」
🐣 「『道具箱』に『名札』...！それなら私にもイメージできます！」
2. 環境構築もコピペでOK
🦉 「最初の難関 『黒い画面（ターミナル）』 も丁寧に案内しておるぞ」
🐣 「ううっ、やさしい...😭」
🚀 さあ、一緒に作ってみよう！
🦉 「どうじゃ？これなら週末だけで作れそうな気がせんか？」
🐣 「はい！『押すなよ』って言われると、逆に押したくなってきました！」
🦉 「その意気じゃ！教材はGitHubで公開しておるぞ」
🔗 チュートリアルはこちら (GitHub)
※ README.md の 「📚 学習はこちらから（Learning Branch）」 リンクからスタート！
📱 完成デモ
🦉 「さあ、Vue.jsの世界へ飛び込むのじゃ！」
🐣 「はい先輩！みなさんも一緒に 『アチーー！！』 しましょう！🐣🔥」
Discussion