🥞

登壇を通して新卒1年目を振り返ってみた

2024/04/24に公開

フロントエンド開発

イベント登壇

tech

株式会社ココナラのプロダクト開発部フロントエンド開発グループでエンジニアをしているのんちゃんと申します！

今回は 3/19（火）に開催された Sansan 株式会社主催『23 新卒エンジニア 1 年間の振り返り LT 会』に登壇しましたので、その時の様子や登壇内容について紹介します。また、この登壇のテーマが「振り返り」ということもあり、私自身にとって新卒 1 年目を振り返る良いきっかけにもなりましたので、その際に感じた「1 番大切にしなければならない考え方」についても後半でご紹介できればと思います。

LT 会の概要

LT 会は Sansan 株式会社のオフィスで行われました。

この LT 会では Sansan 株式会社、弊社の他 2 社を含む計 4 社合同で開催され、それぞれの会社から 23 年新卒エンジニアが 2 人ずつ登壇をしました。
発表後には懇親会もあり、全体を通して非常に和気藹々とした雰囲気でした！

登壇内容

私は「学びを得たレビュー 3 選！」というテーマで登壇をしました。この内容に決めた理由は、1 年間を振り返り、自身に影響を与えた経験を探る中で、PR の中に多くの学びがあったことに気づいたためです。そして、その中から特に学びになった 3 つのレビューをピックアップし、社外の方々にも共有することで、より多くの人に学びの機会を提供したいと考えました。

＊次からのセクションで紹介するコードには修正を加えています。

1. スプレッド構文を使うと良さそうですね！

まず、私はCATEGORY_SERVICEで定義したプロパティをcategoryCardServicesに格納するために以下のようなコードで実装をしていました。

const CATEGORY_SERVICE = {
  title: 'サービスA',
  image: require('~/assets/images/service.png'),
  alt: 'サービスAの画像',
  description: 'サービスAの説明',
  link: 'service/a'
}

const categoryCardServices = [
  {
    id: 1,
    title: 'カテゴリA',
    service: {
      title: CATEGORY_SERVICE.title,
      image: CATEGORY_SERVICE.image,
      alt: CATEGORY_SERVICE.alt,
      description: CATEGORY_SERVICE.description,
      link: CATEGORY_SERVICE.link
    }
  }
]

しかし、この書き方だとオブジェクト内の id を 20 個追加する際に非常に冗長的なコードになっていました。
ここで「スプレッド構文を使うと良さそうですね！」というレビューをもらいます。スプレッド構文を使うと下記のように 1 行で格納することができ、非常にシンプルになりました。

const categoryCardServices = [
  {
    id: 1,
    title: 'サービスA',
    service: {
      ...CATEGORY_SERVICE
    }
  }
]

私はこの PR から「実装者だけが理解できるコード」ではなく「チーム開発として可読性のあるコード」を常に意識しなければならないことを学びました。

2. Lodash の debounce を使うと良さそうです

ここでやりたかったことは、スクロール時にはバナーを非表示にし、スクロールが停止した後に 200ms 経過した時点でバナーを表示するような仕組みの実装です。具体的には、setTimeout を使用して 200ms 経過後にバナーを表示し、新しいスクロールイベントが発生する前に以前の処理が未実行であれば、その処理を clearTimeout でキャンセルするという実装を以下のようにしました。

<template>
  <div v-scroll="handleScroll">
    <div v-if="isShown">
     // スクロールのコンテンツ
   </div>
  </div>
</template>

const isShown = ref(true)

const handleScroll = () => {
  const scrollY = window.scrollY
  isShown.value = false
  clearTimeout(this.scrollTimeout)
  this.scrollTimeout = setTimeout(() => {
    const shownThresholdBottom =
      document.documentElement.scrollHeight - window.innerHeight
    isShown.value = scrollY < shownThresholdBottom
  }, 200)
}

ここで「lodash の debounce を使うと良さそうです」というレビューをもらいます。
修正後のコードが以下になります。

const handleScroll = () => {
  isShown.value = false
  showBottomFixedBar()
}

const showBottomFixedBar = debounce(() => {
  const scrollY = window.scrollY
  const shownThresholdBottom =
    document.documentElement.scrollHeight - window.innerHeight
  isShown.value = scrollY < shownThresholdBottom
}, 200)

以前のsetTimeoutだとイベントの度に毎度関数が呼び出されていました。しかし、debounceを使用すると、一連のイベントが発生してから一定の時間が経過した後に一度だけ関数を実行するため、結果的にパフォーマンスの向上に繋がります。
私はこの PR から、ユーザーが快適にサイトを使えるよう利便性も考慮し、パフォーマンスの観点も今後視野に入れていかなければならないことを学びました。

3. 個人的にはブロックスコープの階層は減らしたい…！

PC にだけ条件を加えるという実装でレビュー前は以下のようにネストを深くして実装をしていました。

if (this.isPC) {
  try {
    // tryの処理
  } catch (e) {
    // catchの処理
  }
}

ここで「個人的にはブロックスコープの階層は減らしたい…！」というレビューをもらい、以下のように修正しました。

if (!this.isPC) return
try {
  // tryの処理
} catch (e) {
  // catchの処理
}

ここで早期リターンを使用するメリットは、ネストを軽減することで可読性を向上させることにあります。

「スプレッド構文を使うと良さそうですね！」でも出てきましたが、「可読性」というワードはプログラムを書く上で頻繁に登場します。ここで「なぜ可読性は重要なのか」について考えてみました。
その理由の 1 つに「コードの可読性が生産性を左右する」があると思いました。プログラムを書く目的で忘れてはいけないのは「プログラムは人が読む」という点です。可読性の低いコードでは実装後の以下のプロセスで生産性を低下させてしまいます。

レビューをする
テストをする
バグの原因を見つける
バグを改修する

上記すべてのプロセスでは「読む」というアクションが発生します。可読性の低いコードは、これらのプロセス内での生産性を下げてしまうことに繋がるため、プロダクト開発の全体的な生産性を上げるためにも「可読性」というキーワードは非常に重要になってくると感じました。

LT 会を振り返りつつ新卒 1 年目を振り返る

今回の LT 会を通して 1 年間のレビューをほぼ全て振り返り、たった 3 つの PR からだけでも「可読性」や「パフォーマンス」などさまざまな観点から学びを得ることができました。
そして、この記事の冒頭で「1 番大切にしなければならない考え方」について頭出しをしましたが、結論それは「誰のためにを意識する」です。

なぜ「パフォーマンスの向上」が必要なのか？
それは、ココナラユーザーにより快適にサイトを使ってもらうためと考えます。

なぜ「可読性の向上」が必要なのか？
それは、ココナラを一緒に開発しているエンジニアの「読む」負担を軽減させるためと考えます。

開発以外の場面でもこの考え方は同じだと感じます。
先輩とコミュニケーションを取る際に「先輩がより理解しやすく、そして回答しやすい伝え方とは何か」。プロジェクトの仕様の共有を受けた際に「〜した方がユーザーにとってより使いやすいサイトになるのではないか」。

新卒 1 年目を通じ、「誰のために」行動するかを意識することがいかに日常の業務にポジティブな影響をもたらすかを体感しました。社会人 2 年目以降もこの重要な気づきを忘れず、多数の業務を全力で成し遂げていきたいと強く心に感じました。

まとめ

最後まで読んでいただきありがとうございました。

フロントエンド開発グループ以外も部署ごとに環境の改善などに取り組んでいますので、ご興味のある方はぜひカジュアル面談にお越しください。

募集求人については下記のリンクからご確認ください。