sato.masaki

2017.05.23

社内エンジニア向けにマークアップハンズオンを開催しました

お久しぶりです。アライドの大佐 (@taisa831)です。最近社内でUIデザイナーにお願いしてマークアップハンズオンをやってもらったのでその時のことを紹介したいと思います。

なぜやったか

弊社ではマークアップとエンジニアの仕事は分業していて、仕様の確認後はエンジニアは設計をし、UIデザイナーがマークアップをする。あがってきたマークアップを元にエンジニアが組込を行う。といった流れで開発することが多いです。

また、cssはsassを利用していてcssのコンフリクト時のリコンパイル以外はエンジニアはsassファイルは触りません。ですが稀にそれにより困ることがあったり、そもそもフロントエンド界隈の発展によりマークアップに興味を持つエンジニアが増えたということもあり開催にいたりました。

そしてこのハンズオンの一番の目的は、エンジニアが何から手をつけていいか分からないという状況から脱却し、あとは個人でもスキルアップをはかることができるような下地をつくるということです。

ハンズオンの流れ

最初にマークアップやCSSの必要な知識や考え方について講義してもらいました。

ハンズオン

次に超簡単なHTMLのマークアップをハンズオン形式でやりました。

これだけでもhtmlの構成の組み方やcssの知識がないとレイアウトをきれいにするのが難しいという人もいると思います。

次に少しだけ発展したHTMLをマークアップしました。

時間の関係上これは課題として個々が持ち帰り、あとでチェックをしてもらいました。それぞれメンバーのアウトプットは、見た目上はきれいに見えていてもhtmlの構成やcssがいまいちだったりといろいろだったそうです。

よいハンズオンにするには

私はペアプロやハンズオンが好きで定期的に取り入れています。またハンズオンをやる際には以下のことに気をつけています。

  • なるべく少人数でやる
  • スキルセットの近いメンバを集めてやる
  • 人数を増やしたい場合は講師側がハンズオンを必要なだけやる

以前ユニットテストのハンズオンを実施した際も、事前にアンケートを取って誰がどこまで理解しているかを事前に把握した上でハンズオンを実施したり、メンバーによってはペアプロをしてフォローしたりしました。

以前のユニットテストハンズオン風景

最後に

ハンズオンは教える側もちゃんと知識が必要なのであらためて考えることにもなるし、教えながら知識が刷り込まれていくのでいいです。今回は社内のエンジニア向けのマークアップハンズオンでしたが、社外向けに別のハンズオンの開催も考えているのでその時は是非参加してみてください。