Vue.js ハンズオン講師やりました！

初めましての人は初めまして、 5/25(金)にあった nakameguro.php #3 の場を借りて、
何故か Vue.jsのハンズオンの講師をやることになりました。 果物リンです。
なんでやねん。PHPミートアップちゃうんか

## Vue.js ハンズオン！ 環境構築から基本的なシンタックスをハンズオンしてみよう！ [スライドはこちら](https://gitpitch.com/fruitriin/slideshows/vueJsHandsOn#/) ### アジェンダ - アンケート - 環境構築ハンズオン - 自己紹介 - Vue.jsのいいところ - 自己紹介といいところは環境構築と平行 - コーディングハンズオン - リアルタイム更新 - 変数の表示、v-model, v-bind - bool値とv-if - 配列とv-forと配列の操作 - オブジェクトの操作 - 謝辞 また、このハンズオンのあとLTを2つやらせていただきました。 ### Vue.js ハンズオン！付録 - 初学者に送るコツ Vue.jsでプロジェクトを始めるにあたってステップアップしていく方法と、 既存のサイトでVue.jsを始められるのか？のTips集 [スライドはこちら](https://gitpitch.com/fruitriin/slideshows/ForVueBegginer#/) - 自己紹介 - ES6について（リンク） - 小さく始める - 大きくする - 省略記法 - 以外な罠 - コンポーネント設計 - モジュールの紹介 - v-router - Vuex - Nuxt.js - UIコンポーネント - ElementUi - BootstrapVue - 既存のサイトにVue.jsを導入する - LaravelでVue.js - RailsでVue.js？ - npm パッケージでよさそうなやつ ### 私がハマったVue.jsのショボいミス 誰も書かないショボいミスをあえて書く。 [スライドはこちら](https://gitpitch.com/fruitriin/slideshows/MyFailsOfTheVue#/) - 自己紹介 - Case1. ESLint - Case2. アロー関数とスコープ - Case3. 単数形と複数形の間違い - Case4. メソッドの階層間違い - Case5. 「Main」コンポーネント 注釈：Case5については「html5タグにMainタグがあるのでVueのコンポーネントとしてパースされない」が正しい理由 後ほど修正します ### 所感 LTと身内向けライブコーディングはちょっとだけ経験があったものの、 ハンズオンの講師は初めてだったのでどきどきでした。 前日のリハで削った部分と追加した部分があって、削った箇所はそれでよかったものの、 追加した部分は難しかった＆資料の作り込みが足りなかったのでそれについては申し訳ないです。 一応参加者の皆さんは今回のハンズオンを概ね一通りできたような気がするので、 ハンズオン的には成功だったんでしょうか？ ハンズオンのスライドの末尾にも書いたとおり、 「Vue.jsいいな」「やってみたいな」「やってみよう！」と思っていただければ幸いです。 当日チューターを努めてくださった弊社リーダーと先生にはとっても感謝です！ Vue.jsはいいぞ！