1年目にレイアウト実装でつまずいた私が、その経験から学んだこと

はじめに

こんにちは、GxPのearlyです。

エンジニア3年目も終わりに近づいてきた今日この頃、ふと、1年目の頃に実装できず、巻き取っていただいたとあるレイアウトのことを思い出しました。

それは、私が今の案件に配属されてから1か月ほど経った頃の話です。
任されたのは、レスポンシブ対応を含むcardコンポーネントの実装でした。

対象読者

本記事は、以下のような方に向けた記事です。

• これからエンジニアになる未経験新卒の方 / フロントエンドに挑戦中の若手エンジニアの方
• 失敗から学びを得たいと考えている方
• できなかったときに自分を責めてしまいがちの方

当時の失敗を振り返りながら、若手エンジニアの方に伝えたい学びをまとめました。

当時の状況の整理

組みたかったレイアウトのイメージ

イメージとしては、ECサイトの商品詳細ページのようなレイアウトでした。

• PC画面（横並び）
  • 左に画像カルーセル
  • 右に商品名・ブランド名・説明文・SALEラベル・ボタンなどを縦並び
• SP画面（縦並び）
  • すべてを縦に積む1カラム構成

今振り返れば、特別複雑なUIではなかった気もするのですが、
当時の自分にとっては、十分に難易度の高いタスクでした。

当時の自分の状況

当時は、チーム内で自分だけが技術的に未熟で、案件の業務知識も浅い状態でした。

同じ未経験の立場の人はおらず、他の方はペア作業の必要がないため、ペアプロ文化はありませんでした。週一回対面で集まる以外はリモートでしたが、常にZoomをつないでいる点では、比較的質問しやすい環境でもあったと思います。

5名程度の少人数チーム内に新人を複数人配置できるわけではないので、
多少孤独でも、経験を積むチャンスだと前向きに捉えようとしていました。

当時の実装方法とその結果

前節で説明した状況を踏まえた上で当時の実装を振り返ると、
焦りもありつつ、目の前のレイアウトを見た目通りに並べることに必死でした。
手を動かしては、うまくいかずに何度かやり直していた記録も残っていました。

また、当時はFlexboxをなんとなく知っている程度で、レスポンシブ対応についての知識が十分ではありませんでした。そのため、どの要素をどう並べればよいか見当がつかず、技術力不足も一因だったと思います。さらに、当時はChatGPTなどのAIツールもまだあまり頼りにならず、MDNや記事を調べながら手探りで実装していました。

当然結局うまくいかず、フロントに強い先輩が巻き取ってくれました。
少し安心した反面、悔しさと、チームに貢献できなかった申し訳なさが強く残ったことをよく覚えています。

当時こうすればうまくいったかもしれないこと

今振り返ると、当時の自分は 「設計」よりも「手を動かすこと」 に優先順位を置いてしまっていました。もし最初から次のように進めていれば、詰まる箇所があっても都度相談しながら実装できたかもしれません。

• ページ全体のコンポーネント構成をMiroなどで図として整理する
  • 呼び出すべきコンポーネントを把握する
  • コンポーネント化されていない要素について把握し、コンポーネント化の必要性を確認する
• PC画面/SP画面それぞれのスタイルを文章としてメモする
  • ブレークポイントごとの縦横の並び方や余白、幅などを整理
• 仮のHTML要素でレイアウトを組んでみる
  • コンポーネントを呼ぶ前に枠だけ置き、見た目と構造を確認する
• 本実装に取り組む
  • 仮で確認した構造をベースに、必要なコンポーネントを組み込み、スタイルを当てる

つまり、「見た目を作ること」より先に「設計を整えること」に注力すると良かったのではないかと思います。

当時は、時間が限られているという焦燥感から、「考えるだけ考えて形にならなかったらどうしよう」という不安もあったように思います。

しかし、こうして作り方を整理した図や文章自体も立派なアウトプットになり得ること、
そして実装の際の補助としても活用できることに、今までの経験の中で気がつきました。
（もちろん、資料を整えること自体が目的ではないことは年頭に置きつつです。）

若手エンジニアの方へ伝えたいこと

以上の経験を踏まえ、過去の自分に伝えたいことベースでまとめてみました。

• 巻き取りが発生しても、申し訳ないと思ってへこまないこと
  • 自分を責めても状況は変わらないためです。
• 申し訳ないと思ってもどうにもならないので、感謝の気持ちを持つこと
• 巻き取っていただいた後は、PRなどをしっかり確認して自分の知識としてインプットすること
  • 振り返りを通じて自分の知識に変えることで、将来チームで活かせる力になるはずです。
• ペアプロの相談も検討してみても良いということ
  • 当時の自分の場合だと、質問や相談はできていたものの、実際に画面を並べて一緒に作業してもらう（いわゆるペアプロ）はしていなかったと思います。
    スケジュールなど、他の制約を考えて諦めてしまう前に、言ってみるだけなら損はないと考えてみても良いかもしれません。
• コソ練は大事
  • 未経験で知識が浅い状態だと、あれもこれも学びたくなってしまいがちです。ですが、まずは 「今触れている技術」と「近いうちに触れそうな技術」 に絞って学ぶと身になりやすかったです。
  • また、基礎固めとして基本情報技術者試験を受けるのも、一つの選択肢として良かったと感じています。
  • 今すぐ表に出る成果でなくても、あのときやっておいてよかったと思える瞬間がきっと訪れます。

さいごに

1年目の頃、レスポンシブ対応を含むcardコンポーネントの実装でうまくいかず、
先輩に巻き取ってもらった経験は、貴重な学びになりました。

振り返ると、当時の自分は「設計より手を動かすこと」を優先してしまっていました。
また、技術力やCSSへの理解、ツールの活用が十分ではなかったことも、実装を難しくしていた要因だったと思います。

3年目になった今は、設計の重要性や技術的知識の積み重ねを意識できるようになり、
同じ課題に再挑戦するならよりスムーズに進められそうだと感じています。

最後に、自分も今後新しいことに挑戦する際には、これまでの学びをしっかり活かして取り組んでいけたらと思います。いずれ別記事で、レイアウトに再挑戦した様子も紹介できたらと思っています。

もしこの記事がどなたかの参考になれば幸いです。

※以前このような記事も書いています。よろしければぜひ読んでみてください。

• 「コミュニケーション上手な人を観察して気づいた5つのこと」
• 「『とりあえずやってみる！』から始まるチームビルディング――私の開発チームの実践録」