はじめに
どうもオクトテックブログ編集長の藤井です！（なぜか流れで編集長を拝命した。やりたい人いたら代わってほしい）
先日、ANDPADのVue.js技術顧問をしていただいている喜多さん(@kitak)さんに開発部向けにVue.jsのハンズオン勉強会をしていただきました！
そのレポートになります！
経緯
基本的にANDPADにおける新規サービスのフロント側はVue/Nuxtで作っています。そして既存のANDPAD施工管理の一部もすでにVue.jsを採用しており、今後全面的にAngularからVueへの移行をしていこうとしています。
そういう状況ですので、フロントエンドやバックエンドなど関係なく社内のエンジニアにはVue.jsがなんなのかということを認識しておいて欲しいと考えました。
もちろんみなさん知っている方は多いのですが、実際に触ったことがある人は少ないはず！そんなことから、喜多さんに相談してハンズオンにしてみようとなったのです！
前準備
一応事前に開発部のみんなにはアンケートをslackで流して、回答してもらいました。
- jQueryを使ったことがある
- Angular.jsを使ったことがある
- フロントエンド全般に苦手意識がある（少なくとも得意とは言えない）
- Vueについて知りたいこと・気になっていることがあったら自由に記述してください
- etc....
そして回答を見ると色々と傾向が見えました。
問１の回答集計グラフ↑↑
jQueryを使ったことがあるのが、だいたい85%近く。そしてフロントエンド全般に苦手意識があると答えたのが約70%、などなどANDPAD開発部の傾向が見えました。
自由記述では、「Reactなどとのフレームワークの違い」「大規模向けと小規模向けと言われる違い」などなどが上がってきました。
これを元に、どのような内容にするか相談した結果、今回の勉強会では、ターゲットとして「JavaScript/jQueryを書いた経験がある人が、Vueの基本文法や概念を理解して、業務でVueを使う足がかりにしてもらう」と設定しました。
当日の様子
時間になったらみなさん集まってきました。
今回嬉しかったのは、エンジニアだけでなくデザイナーの方々も参加してくださったことです。 VueはtemplateにHTML構文で書けますのでデザイナーの方々にこそどんどん携わって欲しいと思っています。
みんな真剣。どっかの学校みたいw
内容
主に３つのセッションに分けて開催しました。
概要説明
まず、「なぜVueを使うのか（jQueryからVueへ）」というタイトルで説明から入りました。喜多さんが見やすい資料を用意してくださっていたのでとても助かります。
この部分では、概念の比較から入り、そのあとjQueryとVueのコードを比較しながら、実際にどう書き方や設計が違うのかという説明をして頂きました。
ハンズオン
そしてその次は、ハンズオンです。話を聞いただけでは人はわかったつもりで終わりますので、実際に手を動かしてVueに触れてもらう時間を作りました。
喜多さんが準備してくださったリポジトリからプロジェクトをcloneして、実際に触りながら進めました。このパートでは、Vue.jsのおさえて置きたいコア機能として、以下の３つをメインに手を動かしながら説明してくださいました。（初めてVueに触る人もいるため文言はわかりやすくして頂いてます）
- リアクティブデータ（データバインディング
- Vueインスタンスが持つ状態・データ
- 状態が変更されると自動で画面が更新される
- ディレクティブ
- v-で始まる特別なHTML属性
- DOM要素を拡張して、属性やスタイルの操作、
条件分岐、繰り返し処理などを実現する
- コンポーネント
- ビューを部品として、整理・再利用するための仕組み
基本的な書き方である、v-ifやv-forなども入れつつ、コンポーネントの切り出しやpropsでの子へのデータ渡しもやりました。
そして最後に事前のアンケートで上がっていた質問に対する回答ののち、質疑応答の時間を持ちました。
最後に
今回は時間が限られていたので、結構進むスピードが早くなってしまいました。ハンズオンは初学者もいれば熟練者もいるので進めていくスピード調整が難しいです。フィードバックももらったので、次は少し改善を考慮してみたいと思います。
このように今回フロントエンド エンジニアに対してだけではなく、普段はバックエンドやアプリ、インフラを触っている人たちにもVue.jsに触れてもらう機会を作りました。
昨今盛り上がりを見せているVue.jsに興味はあったが、実際には触ったことないという人たちにとっては良い機会になったと思います。
もちろん、まだまだVue.jsの一部しか紹介しておらず、本当の魅力などはもっとありますので、第２弾を検討中です！次はVuexに関することや、Nuxt.js、そして実際にANDPADのソースコードを使った開発に触れながら勉強会ができればいいなと考えております。
