Allied ArchitectsAllied ArchitectsEngineer Blog

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

2017/05/23 Markup

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

なぜやったか

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

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

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

ハンズオンの流れ

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

ハンズオン

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

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

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

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

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

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

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

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

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

最後に

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

sato.masaki
  • sato.masaki
  • developer
  • よく使うであろうことをできるだけ分かりやすく発信していきます。 Gitの情報を無駄にキャッチアップしてます。

RELATION ENTRY

Git の中身を見てみよう!vol.2 – Git オブジェクト (Advent Calendar 21日目)

Git の中身を見てみよう!vol.2 ...

2014/12/21 Git

こんにちは。アドベントカレンダー21日目を担当する佐藤(ま)です。 アライドでは「大佐」と呼ばれております。 前回に引き続き、git-scm.com の Book をみながら Git (.git) の中身をみていってみようと思います。今回は、前回も少し触れましたが、Git オブジェクトについてです...

続きを読む

Gitの中身を見てみよう!vol.1 – 配管(Plumbing)と磁器(Porcelain)(Advent Calendar 9日目)

Gitの中身を見てみよう!vol.1 &...

2014/12/9 Git

こんにちは。アドベントカレンダー9日目を担当する佐藤(ま)です。 アライドでは「大佐」と呼ばれております。 今回から git-scm.com をみながら Git (.git) の中身をみていってみようと思います。(まぁ他にもいろいろ記事はありますが書きたかったので気にせず垂れ流していこうと思います...

続きを読む

sato.masakiの記事一覧へ

ページTOPへ