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
640
初心者に 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
6
2.9k
TSKaigi 2024 の登壇から広がったコミュニティ活動について
tsukuha
0
300
サービス開発におけるVue3とTypeScriptの親和性について
tsukuha
12
5.2k
Other Decks in Technology
See All in Technology
Jaws-ug名古屋_LT資料_20250829
azoo2024
3
120
AIとTDDによるNext.js「隙間ツール」開発の実践
makotot
6
720
Webアクセシビリティ入門
recruitengineers
PRO
2
490
退屈なことはDevinにやらせよう〜〜Devin APIを使ったVisual Regression Testの自動追加〜
kawamataryo
3
750
AIエージェントの開発に必須な「コンテキスト・エンジニアリング」とは何か──プロンプト・エンジニアリングとの違いを手がかりに考える
masayamoriofficial
0
420
生成AI利用プログラミング:誰でもプログラムが書けると 世の中どうなる?/opencampus202508
okana2ki
0
190
見てわかるテスト駆動開発
recruitengineers
PRO
6
840
どこで動かすか、誰が動かすか 〜 kintoneのインフラ基盤刷新と運用体制のシフト 〜
ueokande
0
190
小さなチーム 大きな仕事 - 個人開発でAIをフル活用する
himaratsu
0
130
Claude Code x Androidアプリ 開発
kgmyshin
1
600
JuniorからSeniorまで: DevOpsエンジニアの成長ロードマップ
yuriemori
1
250
イオン店舗一覧ページのパフォーマンスチューニング事例 / Performance tuning example for AEON store list page
aeonpeople
2
310
Featured
See All Featured
XXLCSS - How to scale CSS and keep your sanity
sugarenia
248
1.3M
Templates, Plugins, & Blocks: Oh My! Creating the theme that thinks of everything
marktimemedia
31
2.5k
Building Adaptive Systems
keathley
43
2.7k
ピンチをチャンスに:未来をつくるプロダクトロードマップ #pmconf2020
aki_iinuma
126
53k
Design and Strategy: How to Deal with People Who Don’t "Get" Design
morganepeng
131
19k
Fantastic passwords and where to find them - at NoRuKo
philnash
51
3.4k
Become a Pro
speakerdeck
PRO
29
5.5k
Typedesign – Prime Four
hannesfritz
42
2.8k
Statistics for Hackers
jakevdp
799
220k
Learning to Love Humans: Emotional Interface Design
aarron
273
40k
A Tale of Four Properties
chriscoyier
160
23k
YesSQL, Process and Tooling at Scale
rocio
173
14k
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 !!