Zenn
😺

おてつたびのフロントエンド 〜コーディング規約編〜

2022/06/01に公開
JavaScript
React
TypeScript
frontend
コーディング規約
tech

はじめに

初めまして！
株式会社おてつたびでフルスタックエンジニアをしているぶりぼんと申します。主にフロントエンド領域を開拓しており、ReactやTypeScriptが最も得意です。

今回はおてつたびのフロントエンドで定義している、コーディング規約に関してお話しします。
2021年の4月より開発メンバーが増えたこともあって、フロントエンドのコーディングスタイルがバラバラになってしまっているという課題がありました。
さらに、保守性やパフォーマンスにも影響を与えていました。
上記課題に、おてつたびの開発チームがどう向き合っているかを、コーディング規約の定義という観点でお話します。

技術スタック

最初の記事で技術スタックのお話をさせてもらいましたが、改めて、おてつたびフロントエンドの技術スタックを紹介します。

言語とライブラリ

  • JavaScript
  • TypeScript
  • React 17系
  • jQuery
  • HTML

CSSとデザインライブラリ

  • SCSS
  • styled-components
  • mui 4系
  • bootstrap

Linter

  • ESLint
  • Prettier

バックエンドはRailsを使っており、サービスの立ち上げ当初はRailsでHTMLをレンダリングするモノシリックな開発を行なっていました。しかし、ビジネス要件に照らしわせると、HTML + CSS + jQueryだけでは実現できない要件が出てきました。
上記要件を達成するために、Reactを導入したという背景があります。

まずは、react-railsというgemを使って、HTMLのレンダリングの中でReactコンポーネントを使って実装し、徐々にSPAのような形態に移行していきました。
別の記事で、現在進行形で開発が進んでいる、SPA移行プロジェクトのお話をさせていただきます。

コーディング規約

コーディング規約の作成前と作成に至った課題

コーディング規約の作成前は、フロントエンドとReactに精通するエンジニアがいない状況で開発していました。
そのため、以下の課題が発生していました。

  • コンポーネントが責務で分離されていないので、ビジネスロジックとレイアウトが複数コンポーネントで混在していた
  • 開発者ごとに実装方針やレベルがバラバラで、各コンポーネントの見通しが悪くなっていた
  • ディレクトリ設計がなされていないので、目的のコンポーネントを探したり、コンポーネントを追加したりする際に、かなり時間がかかってしまっていた
  • 上記の課題に相まって、機能の変更やパフォーマンス改善が困難な状況になっていた

どの現場でも発生している課題だと思います。
上記課題に立ち向かうために、以下のコーディング規約を作成しました。

コンポーネントのルール

  • Containerパターンを用いて、ビジネスロジックとレイアウトの責務を分離
  • Presentational componentは、componentsディレクトリ内に配置する
  • Presentational Componentのコンポーネント（ファイル）数が10以上になった場合、Atomic Designの構成をとる
    • ディレクトリを、atoms, molecules, organisms, templateに分け、コンポーネントをそれぞれの責務のディレクトリに配置する
  • Functional Componentで実装する

State管理におけるルール

  • Presentational componentは基本的にStateless Functional Componentで実装し、Container componentでのみStateの管理を行う
  • 管理するStateが3つ以上の場合、useStateではなくuseReducerを用いる

弊社で定義したコーディング規約のすべてを挙げた訳ではありませんが、主に遵守すべき規約は以上の通りです。
フロントエンドに精通している方には、当たり前のように意識している内容であると思います。それでも、フロントエンドという領域は設計が難しいと思いますので、フロントエンドの設計に悩んでいる方の一助になれば幸いです。

コーディング規約の作成とその後

コーディング規約を作成したからといって、過去に作成したすべてのコンポーネントがすぐに改善されるということはありません。
既存のコンポーネントは徐々に変更しつつ、新しく追加するコンポーネントに関してはコーディング規約を遵守するという状態です。
それでも少しずつですが、可読性が高くなり、コードの変更がしやすくなっていますし、規約があるからこそコーディングに悩まなくなったという声も上がりました。
コーディング規約を設定したことで、間違いなく良い方向に進んでいます。

終わりに

株式会社おてつたびでは、一緒に働く仲間を募集しています！
本記事では、今まで行ってきたWeb開発における話をしましたが、iOSアプリの開発を行っており、初期リリースを控えております。
第一号となるiOSエンジニアを募集しておりますので、まずは興味がある方は気軽にお話をしましょう！
iOSエンジニア以外にも、Webフロントエンドエンジニア、Webバックエンドエンジニアも募集しております。

引き続き地域とのご縁を紡げるサービスであり続けるために、多くの方に興味を持ってもらいたいです。
本記事をご覧になって少しでも興味が湧いた方がいれば嬉しいです！

採用ページ
Wantedly 採用ページ
Wantedly iOSエンジニア募集
ぶりぼんのMeety

Discussion