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
240
サービス開発におけるVue3とTypeScriptの親和性について
tsukuha
12
4.9k
Other Decks in Technology
See All in Technology
勝手に!深堀り!Cloud Run worker pools / Deep dive Cloud Run worker pools
iselegant
2
410
ドキュメント管理の理想と現実
kazuhe
1
200
MCPを活用した検索システムの作り方/How to implement search systems with MCP #catalks
quiver
12
6.8k
Linuxのパッケージ管理とアップデート基礎知識
go_nishimoto
0
380
Amazon CloudWatch Application Signals ではじめるバーンレートアラーム / Burn rate alarm with Amazon CloudWatch Application Signals
ymotongpoo
5
530
Road to Go Gem #rubykaigi
sue445
0
740
今日からはじめるプラットフォームエンジニアリング
jacopen
3
200
4/16/25 - SFJug - Java meets AI: Build LLM-Powered Apps with LangChain4j
edeandrea
PRO
2
120
Рекомендации с нуля: как мы в Lamoda превратили главную страницу в ключевую точку входа для персонализированного шоппинга. Данил Комаров, Data Scientist, Lamoda Tech
lamodatech
0
750
Goの組織でバックエンドTypeScriptを採用してどうだったか / How was adopting backend TypeScript in a Golang company
kaminashi
6
6.2k
「経験の点」の位置を意識したキャリア形成 / Career development with an awareness of the “point of experience” position
pauli
4
100
ワールドカフェI /チューターを改良する / World Café I and Improving the Tutors
ks91
PRO
0
120
Featured
See All Featured
Let's Do A Bunch of Simple Stuff to Make Websites Faster
chriscoyier
507
140k
What's in a price? How to price your products and services
michaelherold
245
12k
A designer walks into a library…
pauljervisheath
205
24k
BBQ
matthewcrist
88
9.6k
個人開発の失敗を避けるイケてる考え方 / tips for indie hackers
panda_program
104
19k
Designing Experiences People Love
moore
141
24k
Testing 201, or: Great Expectations
jmmastey
42
7.5k
VelocityConf: Rendering Performance Case Studies
addyosmani
328
24k
CSS Pre-Processors: Stylus, Less & Sass
bermonpainter
356
30k
Stop Working from a Prison Cell
hatefulcrawdad
268
20k
No one is an island. Learnings from fostering a developers community.
thoeni
21
3.2k
Rails Girls Zürich Keynote
gr2m
94
13k
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 !!