Upgrade to Pro
— share decks privately, control downloads, hide ads and more …
Speaker Deck
Features
Speaker Deck
PRO
Sign in
Sign up for free
Search
Search
初心者に Vue.js を 教えるには
Search
karacoro / からころ
October 30, 2024
Technology
5
580
初心者に Vue.js を 教えるには
Vue Fes Japan 2024 After Night で 発表した内容です。
https://studist.connpass.com/event/327702/
karacoro / からころ
October 30, 2024
Tweet
Share
More Decks by karacoro / からころ
See All by karacoro / からころ
TSKaigi 2024 の登壇から広がったコミュニティ活動について
tsukuha
0
230
サービス開発におけるVue3とTypeScriptの親和性について
tsukuha
12
4.8k
Other Decks in Technology
See All in Technology
SSH公開鍵認証による接続 / Connecting with SSH Public Key Authentication
kaityo256
PRO
2
220
お問い合わせ対応の改善取り組みとその進め方
masartz
1
370
Engineering Managementのグローバルトレンド #emoasis / Engineering Management Global Trend
kyonmm
PRO
6
990
問題解決に役立つ数理工学
recruitengineers
PRO
7
2.3k
DevOps文化を育むQA 〜カルチャーバブルを生み出す戦略〜 / 20250317 Atsushi Funahashi
shift_evolve
1
110
Road to SRE NEXT@仙台 IVRyの組織の形とSLO運用の現状
abnoumaru
0
400
20250326_管理ツールの権限管理で改善したこと
sasata299
1
390
Enterprise AI in 2025?
pamelafox
0
110
Go製のマイグレーションツールの git-schemalex の紹介と運用方法
shinnosuke_kishida
1
410
AWS CDK コントリビュート はじめの一歩
yendoooo
1
120
グループポリシー再確認
murachiakira
0
170
SpannerとAurora DSQLの同時実行制御の違いに想いを馳せる
masakikato5
0
570
Featured
See All Featured
Writing Fast Ruby
sferik
628
61k
Fashionably flexible responsive web design (full day workshop)
malarkey
407
66k
Building a Modern Day E-commerce SEO Strategy
aleyda
39
7.2k
Speed Design
sergeychernyshev
28
870
Fontdeck: Realign not Redesign
paulrobertlloyd
83
5.5k
Distributed Sagas: A Protocol for Coordinating Microservices
caitiem20
331
21k
I Don’t Have Time: Getting Over the Fear to Launch Your Podcast
jcasabona
32
2.2k
CSS Pre-Processors: Stylus, Less & Sass
bermonpainter
356
30k
CoffeeScript is Beautiful & I Never Want to Write Plain JavaScript Again
sstephenson
160
15k
Easily Structure & Communicate Ideas using Wireframe
afnizarnur
194
16k
Become a Pro
speakerdeck
PRO
27
5.2k
Raft: Consensus for Rubyists
vanstee
137
6.9k
Transcript
初心者に 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 !!