Vue.jsを教えるまでの道のり

Vueは教えやすいと思うけど、それでも手数がどうしても多くなる

前提

C系の言語やLLは書けるけどフロントエンド分からん人対象

いずれSPAの仕事をするという見込み

非SPAの場合は別の教え方になる

１ヶ月位教える余裕がある

まっさらな状態から教える場合は以下の前説から入る必要がある

まずWebの常識を教える

TCPとは

HTTPとは

ホームページが表示されるまでに起きることの説明

HTMLとは

CSSとは

Webサーバ基礎

Request / Responseとは

動的Webページとは

JS基礎

構文

変数

関数

このあたりでlive-serverなどのHTTPサーバを導入してもらう

（つまりnpmなどのインストールを済ませる）

HTML5 API

DOMとは

DOM操作の方法

querySelectorを教えるべきかgetElementByIdとかでやるべきか一瞬迷う（結局querySelectorにする）

Formにどんなものがあるか

余裕があれば、valueとか取るところもやる

できればcheckboxを使わない例題にしておくこと（きつい）

この辺でChrome DevToolsの使い方を教える

console.logとか

domいじったりCSSいじったり

とにかく何かにつけMDNを開いて説明すること（お手軽記事のランクが高いGoogleが役に立たなくなってくる）

-----ここまで来てようやくVueの説明に入れる

もろもろ

Bootstrapの読み込み方

CSSクラスの指定方法

CDNとは？

ここまでにHTMLの「属性」「要素」の用語を明確にしておく必要がある

HTMLのインライン要素、ブロック要素、CSSのボックスモデルなども説明しておかないと、練習アプリが作れないので教えておかねばならない（レイアウトが作れない）

Gitの使い方

VSCodeの使い方

Vue.jsの説明

どの情報源を見るべきか

Vueは公式が基本、Qiitaを先に見ないよう念押し

CDN経由でVueを読み込む

Vueのよく使うAPIやディレクティブの説明

v-model

v-for

v-if

v-bind(class, style)

ここでJSONの知識が必要

CSSの優先順位（インラインで書くかヘッダに書くか）や詳細度の説明が必要

v-on(click)

dataに関して、よくわからない場合はgetter, setterが生える様子などを見せると良い

Reactivityの説明も必要っちゃ必要

例えば式がいつ再評価されるのかわからないという声があった。依存関係の追跡まで説明しないと理解が曖昧なままになるかも。

教えてて、リアクティブはVueの根幹の思想なんだなーと思えてくる。のでできれば教えておきたい

-----

ここから先はなかなか手を付けられないこと（やってなかったり、聞かれたら教える）

Node.jsとは

ブラウザと何が違うのか

npmとは

runkitで説明すると良いと思う

モジュールバンドラーとは

Vueをnpmで読み込む方法

Vueのsingle file componentについて

カスタム要素についての説明

propsについての説明

Webpackの使い方

vue-cliでここはショートカットしても良い気がする

ES Moduleとは

TypeScriptの使い方

型定義ファイルについて

ライブラリの探し方

ハマった場合の苦しみ方が大きいので、あまり初心者におすすめしない

Promise / async / awaitとは（難関）

Ajaxとは

ここでサーバサイドAPIを何かの言語で書く必要がある…

だるいときはfirebaseを教えるでも良い気がする

axios使うならPromiseの理解が必要

場合によってはfetch polyfillの説明も必要

テストとは

うーんmochaとか？

データベースとか

うわー、めっちゃいっぱいあるな…

ここからvue-routerとかvuexの説明する…？

（React教える場合は、ここからBabelとかReduxの説明とか行くのだろうけど、そこまで出来る会社はすごいなぁ…そこまでの根気は自分にはない）

思うこと

手加減しててもこのくらい教える必要があるWebはやっぱり鬼畜だな

今やフロントエンドの変化が激しいとは全く思わない（枯れてる）、でも基礎分野が広くて散らかっている

ブラウザごとの差異とかも事細かに教えるのは無理

モバイル系もやるなら最低限の知識がさらに広くなる

次の新入社員ぐらいの世代の学生、まじでWebを使ってないので、さらに苦戦しそう

「Webアプリ」という語彙がそもそもない

Webも見てないので、「例えばGoogleは～」みたいな例え話が通用しない

ここまでの知識を一気通貫で教えるまとめかなにかが欲しい

VueのCDNはかなりWeb開発入門としての敷居を低く出来る、もっとCDN版推したほうがいい

ここまでの知識を持ってない新人にいきなりWebpack構成から入らせると、魔法で何か動いてるみたいな感じにならないだろうか…

フロントエンドは、薄いライブラリの組み合わせで随時構成更新してやっていくぜ、みたいな考えが主流だけど、それだと入門者はキツイし、独学者はもっとキツイ

選択肢がありすぎるのはやはり学習の障壁になる

そもそも初心者には取捨選択は難しい（ので、片っ端から学習しているはめになっている人をよく見る）

「迷わなさ」はVueを強く推す理由の一つ（周辺ツールの選択肢が多くないし、ほとんどVue organizationの管理下にある）

選択肢が多いとコミュニティの努力が分散し、廃墟リポジトリが多くなる

プロダクションで使ってる人は、うまくいく組み合わせをガンガン推していくべき

初心者が歩む道のりは、多くの人間が通って踏み固めた、安心出来る道であるべき