Slide 1

Slide 1 text

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

Slide 2

Slide 2 text

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

Slide 3

Slide 3 text

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

Slide 4

Slide 4 text

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

Slide 5

Slide 5 text

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

Slide 6

Slide 6 text

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

Slide 7

Slide 7 text

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

Slide 8

Slide 8 text

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

Slide 9

Slide 9 text

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

Slide 10

Slide 10 text

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

Slide 11

Slide 11 text

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

Slide 12

Slide 12 text

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

Slide 13

Slide 13 text

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

Slide 14

Slide 14 text

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

Slide 15

Slide 15 text

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

Slide 16

Slide 16 text

Vue Fes Japan 2024 for Everyone !!