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

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

459 view

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

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

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

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

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

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

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

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

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

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

関連する日報

    コピーはファクト型?ベネフィット型?

    687 view

    林崎 優吾のプロフィール画像
    林崎 優吾 ライター
    事業会社から転職して気づいた制作会社で働く3つの楽しさ

    1,489 view

    西岡 紀子のプロフィール画像
    西岡 紀子 ライター
    SNSでスクロールされないアイキャッチ画像の作り方

    775 view

    高塚 結子のプロフィール画像
    高塚 結子 デザイナー
    ウェブサイトはデザイン通りに実装してもらうことだけが正解ではない

    790 view

    山崎 勝椰のプロフィール画像
    山崎 勝椰 デザイナー
    ウェブサイトのデザインチェックで忘れがちな3つの視点

    645 view

    板垣 琴音のプロフィール画像
    板垣 琴音 デザイナー
上に戻る