ドキュメントもないナレッジもないチームに捧ぐVue.js社内勉強会を開催した件

【概要】

開発・運用に携わるエンジニアがドキュメントやテストコードも残さず退職した結果、ドキュメントのないサービスの開発・運用にアサインされた経験がある方も多いのではないでしょうか。私の所属するチームの場合はドキュメントもナレッジもないVue.jsの案件が回ってきました。
チームの概要は以下の通りです。

• メンバー８人（うちマネージャー１人）
• 全員サーバーサイドエンジニア
• 普段使う言語はPHP
• 設計が分からないのか、Vue.jsが分からないのか、JSが分からないのかすら分からないレベル
• 某RPGで言うとスライムに苦戦するレベル（チーム公式表現）
• フロントエンドチームは別であり、Vue.jsのナレッジがあるエンジニアもいるが他の案件で忙しいため丸投げできない

この記事ではそんなチームのためにVue.jsの勉強会を行うまでの経緯と勉強会の内容を記載します。

【勉強会にこぎつけた経緯】

チームメンバーの1人が奮闘しGitLab CIによるCI/CD環境を整えるまでに持って行ってくれたため開発・運用が出来る体制はできました。そのため何個か小さい案件のデプロイは行いましたが、そもそもVue.jsのナレッジがないためレビューも機能せず、バグに対する危機察知能力もなりない、その代わりに結合テストで担保するという現状でした。
この現状はさすがにまずいとマネージャーに訴えた結果、理解をいただくことができ業務時間中に週２時間のVue.js勉強会を行う権利を獲得しました。
持ち回りで勉強会を行うことも考えたのですが勉強会が形骸化してしまう可能性が高まると判断して勉強会の裁量は自分に集約させました。
前述の通りスライムにすら苦戦するレベルであるため、せめてバブルスライムくらいには圧勝できるくらいのレベルに持っていくことを目的としました。

【勉強会を始めるまで】

私もVue.jsのナレッジがなかったため、まずは自身のナレッジを高めることから始めました。とりあえず入門書として Vue.js入門 基礎から実践アプリケーション開発まで を土日で読破しました。書籍を選んだ理由は単純で会社にあったからです。

次に勉強会の内容を考えました。大きく分けると講義形式とハンズオンがあると考えましたが、すでに開発案件は回ってきておりすぐにチームのナレッジをためる必要があったためハンズオンを選択しました。
ハンズオンの題材を考えていたところ、初回はProgateを使えば良いんじゃないかと考えProgateを見てみましたがVue.jsは扱っていないようでした。代わりになるサービスを探したところ CODEPREP に行き当たりました。

【CODEPREPとは】

CODEPREPとはProgateのようにプログラミング言語を修学できるWebサービスで、コードの一部が虫食いになっているため主に予約語を埋めていくことにより修学ができるサービスです。
ドキュメントとエディタ、実行画面が一体化しているため気軽に修学ができます。私が考えるCODEPREPのメリット・デメリットは以下の通りです。

- メリット

• 開発環境を整えることなく修学ができる
• ドキュメントを読めば問題がすぐに理解できるため初心者にはオススメ
• 無料ででき、また選択できる言語・フレームワークも豊富

- デメリット

• 広く扱っている代わりに浅いため深く理解はできない
• 穴埋めのため何となくでも正答できてしまう

【勉強会当日】

想定していた勉強会当日の流れは以下の通りです。

• CODEPREPの「はじめてのVue.js」を修学する(1時間)
• Todoリストのコードを写経する(15分)
• 自分が課題を用意したTodoリストの改修を行う(45分)

- CODEPREPの「はじめてのVue.js」を修学する(1時間)

前述の通りCODEPREPの修学を行いました。ただしデメリットにも記載した通り、CODEPREPだけでは浅いため深く理解することが出来ないため都度Vue.jsの公式ドキュメントを読むようにしました。
1時間を想定していたのですが、実際には１時間２０分程度かかってしまいました。

- Todoリストのコードを写経する(15分)

「はじめてのVue.js」では最終的にTodoリストを作るのですが、穴埋めで作っていくため出来上がったコードを写経するつもりでした。
しかし、CODEPREPの修学で時間をオーバーしてしまっていたため写経は各自の任意としてコードを共有しました。

- 自分が課題を用意したTodoリストの改修を行う(45分)

CODEPREPおよび写経だけでは自身で考えるといった過程が少ないため課題を３問用意して解かせてみました。用意した課題は以下の３つです。

• Todoリストの件数を表示する
• 「〇〇を追加しました」、「〇〇を削除しました」といったTodoリストの操作履歴を表示する
• 新しく追加したTodoにはNEW！！と表示する

解かせてみた結果として１問目は全員解答出来ましたが、２問目以降は時間が足りませんでした。また私のミスとして２問目より３問目の方が簡単であったため、順番を入れ替えればもう少し解けていたと反省しました。

【勉強会の所感と今後】

初回の勉強会の内容としてCODEPREPを採用し、またデメリットである浅い理解を補うために公式ドキュメントを読むようにしたのは以下の点で良かったと思います。

• 題材を用意してくれているため自分の負荷が少ない
• 勉強会がスムーズに進む

今後はVue.jsのふりかえりと時間が足りず解けなかった課題の再挑戦を行ったのちに本格的にTodoリストを作っていこうかと考えています。

もし自分と同じような境遇にいる方は参考にしていただけると幸いです。