ペアプロで実装を助けてもらった話

西村 志穂のプロフィール画像
エンジニア 西村 志穂

514 view

ある案件で、下層ページの展開を進めていた時のことである。 少し複雑なレイアウトがあり、CSSでどのように再現するのが良いか判断が難しく、先輩エンジニアの方に質問したところ、ペアプログラミングで完成させることとなった。

ペアプログラミングは、1台のパソコンで2人のエンジニアが共同で開発を行う手法であり、1人がコードを記述していくドライバー、1人が記述の指示や誤りを指摘するナビゲーターとなって作業を進める。今回は、先輩(酒井さん)の指示で私が手を動かしてコードを書いていった。結果的に、大変勉強になった。

複雑なレイアウトというのは、初心者がよく陥るところであると思われる、

  • 背景、テキスト、画像がブロークングリッドレイアウトのようなデザインになっており、擬似要素を複数使う必要がある
  • その擬似要素をpositionを指定して適切に配置する必要がある
  • %の計算、指定が必要になる

というイメージのものだった。

CSSの複雑な部分は、先輩が書いてくれたり、ものによっては検索してサンプルコードを貰ってきたりもできるかもしれないが、それではなかなか身につかない場合もあると思う。(よくわかんないけどここはこうなんだな みたいになってしまう可能性があるのではないかと思う)しかしこの方法だと、リアルタイムで構築していくからか、複雑な構成でもわかりやすい。疑問点はその場で質問もできるし、適宜紙に書いて説明してもらえたり、逆に自分の考えを説明することもできる。

また、ベテランエンジニアの方が、どのような順序で記述していくのかなども見ることができるため、社内のエンジニアチーム自体のコーディングの流れも掴むことができる。他にも、ついでによく使われるショートカットキーを教えてもらえたりと、新人は色々と恩恵を受けることができた。

エンジニア同士で時間を合わせて取り組まなければならないなどのデメリットもあるかもしれないが、そういったスケジュールの問題などクリアできるのであれば、有意義な取り組みになると思う。

先輩エンジニアの方に色々教えていただくとなると、時間をとってしまって申し訳ないという気持ちももちろんあると思うし実際に私もあるのだが、申し訳ないばっかり思っていてもなかなか解決しないこともあると思うので、サポートしてくださる方々に感謝の気持ちを持ちつつ取り組んでいければと思う。

また、全国のエンジニアの先輩方も、長い目で見れば仕事が効率化されるところだと思うので、参考のひとつとしていただければ幸いです。

関連する日報

    フリー素材のアイコン・イラストを流用する時のコツ

    2,585 view

    岡本 早樹のプロフィール画像
    岡本 早樹 デザイナー
    経験やスキルがなくても、デザインのフィードバックはできる

    2,223 view

    原浦 智佳のプロフィール画像
    原浦 智佳 デザイナー
    「壁打ち相談」をうまく使って、情報設計を効率よく進めよう!

    1,539 view

    高島 藍子のプロフィール画像
    高島 藍子 デザイナー
    ベイジディレクターのリアル

    2,623 view

    本山 太志のプロフィール画像
    本山 太志 コンサルタント
    BtoBサイトにおける「ファーストビュー攻略法」

    2,930 view

    池田 彩華のプロフィール画像
    池田 彩華 デザイナー
上に戻る