🍉

フロントエンドにチャレンジしてみた

2023/07/01に公開

皆さんこんにちは、スペースマーケットエンジニアのreyです！

明日からもう7月で、夏ですね〜！（時の流れは早いですね...！）
さっそく、近所でセミが鳴き始めていました！

今回の記事は、Reactフロントエンド開発に取り組んでみたことについて記載します。

自分の職歴としてはバックエンドが1番長く、フロントエンドのレベルとしては、以前の職場でバックエンドも並行して進めながらVue.jsを少し改修した程度で、Reactにきちんと取り組んだのは今回が初めてでした。

やったこと

期間は、2023年の4月〜6月に、バックエンド開発も少し並行しつつ取り組みました。

やったこととしては、主に
・ABテスト（UI出し分け）の実装（2件）
・SEO系のロジック改修
・UI画面の改修（複数件）
・中規模のフロントエンド施策にjoin

になります。

・ Next.js（React）
useEffectやuseMemo、useStateといったHooks関数の理解が重要であると思いました。特に、Contextを使用すると、バケツリレーをせずにpropsを受け渡せるため、便利であると感じました。

・ Jest
弊社はバックエンドでもExpressやNestJSを用いた開発を行なっているので、少しは書いた事があったのですが、フロントエンド側のJestとは少し書き方が異なるため、また別の知識が必要だと感じました。

・コンポーネント指向
Reactには、「1つのコンポーネントは、理想的には1つの事だけをするべきである。」という考えがあるそうです。そのため、PRレビューをして頂いた際に、なるべく役割を分けて記載するようにとコメントを頂くことが多かったです。

・ CSS
弊社のフロントエンドの最新リポジトリはChakraUIを使用しているため、CSS初心者の自分でも少し馴染みやすかったのですが、やはりデザインを実装に落とし込む上でCSSを理解することは大事だと思いました。

・デザイナーさんとの連携
デザイナーさんから頂いたデザインを実装する過程で、疑問点が生じる事もあると思うのですが、その際に連携を取ることは非常に大事であると感じました。

・ Storybook
恥ずかしながらあまり知らなかったのですが、とても便利なものがあるんだな〜と思いました。

Web開発の両サイドを経験したことで、視野が少し広がり、
気のせいかもしれないですが、エンジニアとして少しだけLevel Upしたような感覚になりました...！

最後に、ご協力いただいたマネージャーやチームメンバーの皆様、
快く質問やレビューを引き受けてくださった先輩方に、この場を借りてお礼を申し上げたいと思います。ありがとうございました！！！

スペースマーケットでは一緒に働く仲間を募集しています！
新しい技術に興味がある方も、手を上げればチャレンジできる環境だと思います。
カジュアルに話を聞きたいだけという方でも大歓迎ですので、ちょっとでも興味があれば
こちらからご応募をお待ちしております！

スペースを簡単に貸し借りできるサービス「スペースマーケット」のエンジニアによる公式ブログです。弊社採用技術スタックはこちら -> whatweuse.dev/company/spacemarket