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
630
初心者に 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 / からころ
LIXIL基幹システム刷新に立ち向かう技術的アプローチについて
tsukuha
4
2.5k
TSKaigi 2024 の登壇から広がったコミュニティ活動について
tsukuha
0
290
サービス開発におけるVue3とTypeScriptの親和性について
tsukuha
12
5.1k
Other Decks in Technology
See All in Technology
AIに全任せしないコーディングとマネジメント思考
kikuchikakeru
0
310
ファインディにおける Dataform ブランチ戦略
hiracky16
0
230
「育てる」サーバーレス 〜チーム開発研修で学んだ、小さく始めて大きく拡張するAWS設計〜
yu_kod
1
210
AI時代の経営、Bet AI Vision #BetAIDay
layerx
PRO
0
300
AI エンジニアの立場からみた、AI コーディング時代の開発の品質向上の取り組みと妄想
soh9834
8
620
LLMでAI-OCR、実際どうなの? / llm_ai_ocr_layerx_bet_ai_day_lt
sbrf248
0
380
生成AIによる情報システムへのインパクト
taka_aki
1
220
風が吹けばWHOISが使えなくなる~なぜWHOIS・RDAPはサーバー証明書のメール認証に使えなくなったのか~
orangemorishita
8
1.9k
ビジネス文書に特化した基盤モデル開発 / SaaSxML_Session_2
sansan_randd
0
180
【2025 Japan AWS Jr. Champions Ignition】点から線、線から面へ〜僕たちが起こすコラボレーション・ムーブメント〜
amixedcolor
1
110
みんなのSRE 〜チーム全員でのSRE活動にするための4つの取り組み〜
kakehashi
PRO
2
110
恐怖!テストコードなき夜
tsukuboshi
2
110
Featured
See All Featured
Bootstrapping a Software Product
garrettdimon
PRO
307
110k
The Power of CSS Pseudo Elements
geoffreycrofte
77
5.9k
Agile that works and the tools we love
rasmusluckow
329
21k
Code Reviewing Like a Champion
maltzj
524
40k
CoffeeScript is Beautiful & I Never Want to Write Plain JavaScript Again
sstephenson
161
15k
Learning to Love Humans: Emotional Interface Design
aarron
273
40k
Building Adaptive Systems
keathley
43
2.7k
Testing 201, or: Great Expectations
jmmastey
43
7.6k
Reflections from 52 weeks, 52 projects
jeffersonlam
351
21k
How to Ace a Technical Interview
jacobian
278
23k
Connecting the Dots Between Site Speed, User Experience & Your Business [WebExpo 2025]
tammyeverts
8
400
The Success of Rails: Ensuring Growth for the Next 100 Years
eileencodes
45
7.5k
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 !!