初心者に Vue.js を 教えるには からころ / karacoro Vue Fes Japan 2024 After

自己紹介 TSKaigi 2024 のセッションで登壇したり... Vue Fes Japan 2024 のパネルディスカッション 「Vue.js コミュニティにようこそ」に ファシリテータとして登壇しました！！ #ちびとーーく という不定期開催のトークラジオを X（Twitter） の スペースでubugeeei さんと Nozomu Ikuta さんと開いていたり... Vue.js Member UnJS Member

今日もち帰って欲しいこと ❖ 初心者にチュートリアルをしてもらうだけで満足しない ❖ 学習ビジョンを提示することの重要性と方法 ❖ 初心者が自走するために何が必要か ※ 個人の経験に基づくもで、あくまで一例です

初心者の頃を思い出せます か？

初心者の頃の記憶はなかなか思い出せない Vue.js って JavaScript の関係って？ DOM と 仮想DOM ??? ライフサイクルって？ レンダリングって なにをしているの？ チュートリアルすこしみたけど...

初心者の頃の記憶はなかなか思い出せない Vue.js って JavaScript の関係って？ DOM と 仮想DOM ??? ライフサイクルって？ レンダリングって なにをしているの？ チュートリアルすこしみたけど... 書いてあることは わかりました！ Vue.js しか勝たん！！

思い出せないので ヒアリングする

一緒に現時点を明確にしていく Vue.js って JavaScript の関係って？ DOM と 仮想DOM ??? ライフサイクルって？ レンダリングって なにをしているの？

1. 何がわからないか、わからないを解消する ❖ 何がわからないか、わからない状態とは ● 点と点が離れすぎていて関係性が見出せない ○ インプット量が足りない ○ 適切なインプットができてない .etc ● どの点と、どの点に線を引くのかを想像できない ○ 具体例を想像できない ○ 理由やモチベーションを想像できない .etc

2. 何がわからないか、わからないを解消する ❖ インプットの質や量の問題について ● 参考リンクなどを教える ● 学習に対してなにを学んだかを説明してもらう ○ 必要に応じて訂正や、参考文献などを教える （最初に戻る） フィードバックループを作っていく

3. 何がわからないか、わからないを解消する ❖ 具体例やモチベーションが想像できない問題について ● これをすると何が嬉しいかを説明してもらう ● わからない場合は... ○ 具体例を通して何が嬉しいかを教える ○ 実際に手を動かして実感してもらう ■ いい例と悪い例を比較してもらう .etc パターン化して自分で考える力をつける

学習のモチベーションを 維持するのは難しい！

1. モチベーション維持のために ❖ 小さなゴールを設定する ● Vue.js で Composition API を使って TODOアプリを作る ● APIからフェッチしたデータを Vue.js のテンプレートに反映する ● Composition API や Store（Pinia） を使って状態を管理する 小さなタスクを用意して ゴールを見通しやすくする

2. モチベーション維持のために ❖ 同じような立場の人との交流を促す ● v-tokyo への参加やハンズオンへの参加を促す

3. モチベーション維持のために ❖ もっと先の楽しみを伝える ● Vue Fes Japan に参加して、技術の楽しさを伝える .etc

Vue Fes Japan 2024 for Everyone !!