LiBz Tech Blog

LiBの開発者ブログ

3ヶ月間バックエンドエンジニア向けにフロントエンドを学ぶ勉強会を行った話

はじめに

こんにちは、最近カタンにハマっている阿部と申します。
社内のエンジニアの勉強会で「フロントエンド周りについて学ぶ」を担当させてもらったのでその勉強会についてのレポートになります。

ちなみにカタンの基本戦略としては、鉱石と小麦をおさえ、都市化からの最大騎士力を狙うスタイルを主としています。 たまに最大交易路や2:1港狙いに行くこともあります...

f:id:ab_y:20190627160711p:plain:w300

前提

きっかけ

以前から持ち回りで週1勉強会を行っていましたが、
何を題材とするかは各々が決めていたので、
Q毎で区切ってなにかテーマ性を持って学ぶ期間にしてみようという弊社CTOの発案でした。

「フロントエンド周りについて学ぶ」になった理由

弊社のエンジニア(社員)は10名いるのですが、
9名がバックエンドでフロントエンドは1名(私)です...

昨今、フロントエンドの領域が広くなり、
バックエンドのエンジニアもフロントの知識・技術をある程度持っておいた方がいいのではないか?
ということで4月〜6月の3ヶ月間をかけて「フロントエンド周りについて学ぶ」勉強会を開催することになりました。

エンジニアのスキル感(だいたいです)

フロントエンドに関しては皆それぞれでCSS弱い、JS弱いと人によってバラバラでしたが、
総じて言うと、

  • CSSを全く知らないわけではなく、「CSSよくわからんな〜」という方々
  • 弊社の開発環境でSassを使用しているものの、Sassの扱い方があまりわからない
  • JavaScriptはjQueryがなんとなく使える感じで細かいルールはよくわかっていない
f:id:ab_y:20190627160801p:plain:w300

ゴール

「フロントエンドのスキルセットをあげる」

  • フロントエンドに対する心理的ハードルを下げる
  • 「フロントエンドってなにしてんだろ?よくわかんね」状態から脱却
  • CSS面白いな、JS面白いなって思ってもらう
  • バックエンドはAPI、フロントはjsフレームワークの波に呑まれないようにする
  • Vueでちょっとしたアプリを作り、興味を持ち主体的に勉強する人が増える

勉強会概要

初めに決めていたのは以下の点です。

  • 週1回の1時間(全11回)
  • CSS3回、JS3回、デザイン1回、Vue4回くらいかなとざっくり枠決め
  • モブプロやってみたいよね
  • 準備を私が全部やるのではなく、各回指名した人(もしくは立候補してくれた人)にやってもらう

モブプロについて

モブプログラミングといい、ペアプロのもっと多い人数でやる版みたいな感じです。 調べるといろいろと記事出てきますが、それらを参考にしつつ以下のスタイルで行いました。

  • ドライバー(書く人)、ナビゲーター(周りでやいやい言ってる人)がいる
  • ドライバーは自分の意思ではコードをかかず、ナビゲーターから言われた通りに書く
  • ドライバーは自分のPCを使用する
  • コードはGit管理
  • ドライバー交代の際、Gitにpushして、次の人はpullして始める
  • 2チーム(5名ずつ)に分かれる
  • ドライバーを1人約10分×5で回す
  • 残り5分でチーム同士の発表
f:id:ab_y:20190627160739p:plain:w300

こんな形で決めてあとはやりながら適宜変更していきましょうみたいな形でスタートしました。

第1,2回 SassとFlexboxを学ぶ

CSSはなんとなくわかるものの「Bootstrapを使わずにレイアウトをするにはどうしたらいいのか?」的な意見があったので、 基本の説明はせずにFlexboxを使用して、サンプルのデザインを再現することにしました。

また弊社環境にSassが入っているのですが、 あまりよくわかっていないという状況だったので主要な機能を使ってもらうようにしました。

  • ネスト
  • 親セレクタの参照(&)
  • 変数
  • @extend
  • @mixin
  • パーシャル

Sassだけ動く環境をDockerで用意し、モブプロを行いました。

時間あっという間に過ぎる

ほぼ初めてに近いモブプロということやCSSについて詳しい人がいないチームがあり、 作業自体はあまり進まず完成させることは出来ず...

ただ、モブプロ自体は思いの外好評で、下記のような意見を始め、皆さん「面白かった」と言っていただきました。

  • IDEの違いによる「IDEどっちがいい戦争」
  • 知らなかったショートカットを知れた
  • みんなで学ぶ感あるし、コミュニケーションも取れる

これだけでは「モブプロ面白かった」だけになってしまうので
急遽2回目は解説に当てることにしました。

1回目の解説

1回目の解説を代表して1人に発表してもらいました。
発表する人は1週間かけ資料(Kibelaにて)を作成し、みんなの前で発表するというプロセスを踏むので、
よりCSSについての知識を身につけることができます。

f:id:ab_y:20190627160825p:plain:w300

第3,4回 CSSでモーダルを作る

1,2回目の発展版という位置付けで、
「前はJavascriptでしかできなかったけど、今はCSSでこんなことまでできるんだよ」
ということを伝えたく、CSSだけでモーダルを表示するサンプルをモブプロでやりました。
イメージはこんな感じです。

qiita.com

最初に transform,transition,animation を使用してください、とだけヒントを伝えました。

時間過ぎるのって早いね

2回目のモブプロなので慣れてきたものの、 CSS詳しい人いない問題でやはり最後までは進まず...

解説をまた前と同じ形で代表して1人に発表してもらいました。

次回に向けて

CSS回を一旦終え、
次回のJavascriptにてモブプロで作るいいサンプルが思いつかず、(サンプルを作る時間もなかった...mm)
どうしようかと途方に暮れてたところ、エンジニアの方から

  • Javascriptはルールがよくわからん
  • Ruby(Rails)と違うので混乱する
  • カオスだ

という意見があったので、Javascriptの解説をすることにしました。

第5回 ここが変だよJavascript

先ほどの流れからこの回はJavascriptの解説となりました。
解説のルールは今までと同じで代表して1人に発表してもらいました。

内容としては、以下の通りです。

  • var,let,const違い
  • Javascriptのデータ型
  • == と===の違い
  • 配列の扱い方
  • this の扱い方
  • 関数の定義
  • DOM操作

こちらをちょっとしたサンプルを元に解説してもらいました。
特に、thisの扱い方、関数、配列について質問があがることが多かったです。

f:id:ab_y:20190627160857p:plain:w300

第6回 もうVueやってしまおう

Javascriptの説明をして次回こそはJavascriptを使ってなにか作ってもらおうと思ったのですが、
「もうVueやっちゃっていんじゃない?」と脳内から聞こえてきたので、Vueを触る回にしました。

「Vueはこんな感じなんだよ」と取っ付きやすいものを以前作っていたので
これを参考にモブプロで実装してもらいました。

https://codepen.io/abe-clue/pen/JNqZwv

この回では上記のコードを公開していたので、
ナビゲーターの人間はコードを見て、「コードの意味」を理解しながらドライバーに伝えていく形になりました。

CSSの時と比べると進みは早かったのですが完成までには至りませんでした。
どっちがいいかは目的により変わってくるかと思いますが、
コードを公開していた方が、進みが早く、作成した感を得られるので良いかもしれません。
(幸いコードだけコピーしちゃえという人はいなかったので...)

第7回 Vueの環境を作る

前回でVueを体験したので、この回は「自分のPCにVueの環境を作る」ことにしました。

第1回でDockerを使用したとありましたが、
弊社では全員がDockerを導入しているわけではなく、
Dockerの設定も自分ではしたことがない人もいたので、
Dockerの扱い方も一緒に行いました。

過去にエンジニアブログでVue UIの記事をアップしていたので、
Vue UIのハンズオンをしてもらいました。 tech.libinc.co.jp

この回によってエンジニア全員のPCにVueを触れる環境が出来上がりました。
(これでみんないろいろ試してVue触ってくれないかな〜と期待...)

チームでアプリを作ることに

とはいえ、「実際にVue使ってなにか作った方がいいよね?」ということで、
チームを3チーム(1チーム3人)に分け(私は入らず)、
チーム毎でアプリを制作してもらうことにしました。

当初からデザインについても知りたいという声があったのと、
アプリを0から制作するならデザインも必要ということで、デザイン講義を設けることにしました。

第8,9回 デザイン講義

f:id:ab_y:20190627161115p:plain:w400

第8回

デザインに興味があったエンジニアと弊社のデザイナーにお願いをしデザイン講義をする回となりました。

エンジニアには、デザインの4つの基本原則を。 (勉強会後にブログとして公開していました!)
tech.libinc.co.jp

デザイナーには、実例を交えながらUIについて講義をしてもらい、
UIの手直ししてみよう! という宿題も出たので次回最初の時間をフィードバックに当てることにしました。
※この宿題のUIはTrelloのようなデザインTODO管理を崩して出題され自分でデザインしてみようというもの

第9回

前回でた宿題をみんなで見てデザイナーからのフィードバックをもらい、
チーム開発へ...のはずでしたが、
各々へのフィードバックが盛り上がり、それだけで1時間近く経過してしまいました...

この回は宿題へのフィードバックの回ということになりました。。。

ちなみにほとんどの人は宿題をしっかりやってくれていましたが、 既存のアプリのスクショをドヤ顔で提出する人もいました...

第10回,第11回 チームで開発

この回はチーム毎でもくもく開発してもらう時間になります。

ちなみに制作してもらうアプリのお題として、
「渋谷のランチできるお店を検索できるアプリ」をテーマに、

  • 自分たちでデザイン
  • 自分たちでCSS
  • VueでCRUD機能
  • Vue Routing
  • Vuex

を最低限やってもらうという形にしました。

しかし、第10回のチームの進捗発表にて、
2チームが全く「渋谷のランチできるお店を検索できるアプリ」と関係ないものを作っていましたw

第11回はこれからですが、 ちょっと時間が足りないという声があるので、当初の3ヶ月ではなく、 少し延長しても良いのかなと考えております。

やってみた感想

  • モブプロの良さを実感
  • ただ、題材の難しさはある
    • 1時間でほぼ終わるようなサンプル決め
    • その準備をしないといけない
    • 本当にこのサンプルでいいのかなという葛藤
  • 解説回も良かった
    • 1人に限定されてしまいますが、実際手を動かし、資料にまとめるためのインプットをして、みんなの前でアウトプットをするというのは良いプロセスだと感じた
    • それぞれのテーマで「普段勉強したかったけどできていなかった」というエンジニアがいたので快くやってくれた
    • なので担当した人はしっかり身についたのではないかと思っている(勘違いでないことを祈る...)
  • 本当に身になったかな?
    • ここは気になるところ
    • これをきっかけに自主的にいろいろ手を出してくれることを祈るばかり...

一応、全体的に管理をしていましたが、 当初の通り、資料作り・解説は万遍なく他の方々に担当していただきました。 しかし、心配性+小心者の特性があるので毎回毎回これでいいかなという不安と闘っていましたw

f:id:ab_y:20190627161250p:plain:w300

今後、延長か違うテーマでまた3ヶ月やるかはまだ未定ではありますが、 これらの経験踏まえてより良い勉強会の場にしていければと思っています!