初心者に Vue.js を 教えるには

Vue Fes Japan 2024 After Night で 発表した内容です。
https://studist.connpass.com/event/327702/

Transcript

1. 初心者に Vue.js を 教えるには からころ / karacoro Vue Fes Japan 2024 After
2. 自己紹介 TSKaigi 2024 のセッションで登壇したり... Vue Fes Japan 2024 のパネルディスカッション 「Vue.js コミュニティにようこそ」に ファシリテータとして登壇しました！！ #ちびとーーく という不定期開催のトークラジオを X（Twitter） の スペースでubugeeei さんと Nozomu Ikuta さんと開いていたり... Vue.js Member UnJS Member
3. 今日もち帰って欲しいこと ❖ 初心者にチュートリアルをしてもらうだけで満足しない ❖ 学習ビジョンを提示することの重要性と方法 ❖ 初心者が自走するために何が必要か ※ 個人の経験に基づくもで、あくまで一例です
4. 初心者の頃を思い出せます か？
5. 初心者の頃の記憶はなかなか思い出せない Vue.js って JavaScript の関係って？ DOM と 仮想DOM ??? ライフサイクルって？ レンダリングって なにをしているの？ チュートリアルすこしみたけど...
6. 初心者の頃の記憶はなかなか思い出せない Vue.js って JavaScript の関係って？ DOM と 仮想DOM ??? ライフサイクルって？ レンダリングって なにをしているの？ チュートリアルすこしみたけど... 書いてあることは わかりました！ Vue.js しか勝たん！！
7. 思い出せないので ヒアリングする
8. 一緒に現時点を明確にしていく Vue.js って JavaScript の関係って？ DOM と 仮想DOM ??? ライフサイクルって？ レンダリングって なにをしているの？
9. 1. 何がわからないか、わからないを解消する ❖ 何がわからないか、わからない状態とは • 点と点が離れすぎていて関係性が見出せない ◦ インプット量が足りない ◦ 適切なインプットができてない .etc • どの点と、どの点に線を引くのかを想像できない ◦ 具体例を想像できない ◦ 理由やモチベーションを想像できない .etc
10. 2. 何がわからないか、わからないを解消する ❖ インプットの質や量の問題について • 参考リンクなどを教える • 学習に対してなにを学んだかを説明してもらう ◦ 必要に応じて訂正や、参考文献などを教える （最初に戻る） フィードバックループを作っていく
11. 3. 何がわからないか、わからないを解消する ❖ 具体例やモチベーションが想像できない問題について • これをすると何が嬉しいかを説明してもらう • わからない場合は... ◦ 具体例を通して何が嬉しいかを教える ◦ 実際に手を動かして実感してもらう ▪ いい例と悪い例を比較してもらう .etc パターン化して自分で考える力をつける
12. 学習のモチベーションを 維持するのは難しい！
13. 1. モチベーション維持のために ❖ 小さなゴールを設定する • Vue.js で Composition API を使って TODOアプリを作る • APIからフェッチしたデータを Vue.js のテンプレートに反映する • Composition API や Store（Pinia） を使って状態を管理する 小さなタスクを用意して ゴールを見通しやすくする
14. 2. モチベーション維持のために ❖ 同じような立場の人との交流を促す • v-tokyo への参加やハンズオンへの参加を促す
15. 3. モチベーション維持のために ❖ もっと先の楽しみを伝える • Vue Fes Japan に参加して、技術の楽しさを伝える .etc
16. Vue Fes Japan 2024 for Everyone !!