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
660
初心者に 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
7
3.2k
TSKaigi 2024 の登壇から広がったコミュニティ活動について
tsukuha
1
310
サービス開発におけるVue3とTypeScriptの親和性について
tsukuha
12
5.3k
Other Decks in Technology
See All in Technology
CNCFの視点で捉えるPlatform Engineering - 最新動向と展望 / Platform Engineering from the CNCF Perspective
hhiroshell
0
140
可観測性は開発環境から、開発環境にもオブザーバビリティ導入のススメ
layerx
PRO
0
310
OTEPsで知るOpenTelemetryの未来 / Observability Conference Tokyo 2025
arthur1
0
250
混合雲環境整合異質工作流程工具運行關鍵業務 Job 的經驗分享
yaosiang
0
190
serverless team topology
_kensh
3
230
From Natural Language to K8s Operations: The MCP Architecture and Practice of kubectl-ai
appleboy
0
220
生成AI時代のPythonセキュリティとガバナンス
abenben
0
140
会社を支える Pythonという言語戦略 ~なぜPythonを主要言語にしているのか?~
curekoshimizu
3
670
JSConf JPのwebsiteをGatsbyからNext.jsに移行した話 - Next.jsの多言語静的サイトと課題
leko
2
190
HonoとJSXを使って管理画面をサクッと型安全に作ろう
diggymo
0
180
あなたの知らない Linuxカーネル脆弱性の世界
recruitengineers
PRO
3
160
個人でデジタル庁の デザインシステムをVue.jsで 作っている話
nishiharatsubasa
3
5.1k
Featured
See All Featured
Practical Tips for Bootstrapping Information Extraction Pipelines
honnibal
PRO
23
1.5k
The Power of CSS Pseudo Elements
geoffreycrofte
80
6k
Building Flexible Design Systems
yeseniaperezcruz
329
39k
実際に使うSQLの書き方 徹底解説 / pgcon21j-tutorial
soudai
PRO
190
55k
Improving Core Web Vitals using Speculation Rules API
sergeychernyshev
21
1.2k
Balancing Empowerment & Direction
lara
5
700
CoffeeScript is Beautiful & I Never Want to Write Plain JavaScript Again
sstephenson
162
15k
Build The Right Thing And Hit Your Dates
maggiecrowley
38
2.9k
Optimizing for Happiness
mojombo
379
70k
Understanding Cognitive Biases in Performance Measurement
bluesmoon
31
2.7k
How to train your dragon (web standard)
notwaldorf
97
6.3k
Java REST API Framework Comparison - PWX 2021
mraible
34
8.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 !!