はじめまして、ライクルGMBの石崎です。新卒で入社して三年ほどGoでバックエンドの開発を行っていましたが、最近フロントエンドチームに異動しました。参加したときにはすでに環境が整っており、知らないツールがたくさんで学ぶことだらけです。

そこで今回は自分の勉強がてら、使っているフレームワークやツールたちをざっくりと紹介していきます。

言語/フレームワーク

TypeScript

全社的にフロントエンドの言語として推奨されています。 JavaScriptの静的型付け版です。リテラル型、型交差、タイプガードなど便利な機能がGo育ちの私には多すぎるほど備わっています。

React

SO Technologiesの他チームではVue.jsが採用されていますが、ライクルチームではTypeScriptとの親和性の高さからReactを採用しています。

Next.js

Reactのフレームワークです。特徴はページごとのレンダリング方式の切り替え、面倒なWebpackの設定が不要なゼロコンフィグ、ファイルシステムに沿ったルーティングなどがあります。ページごとの切り替えは使っておらず、一律CSRになっています。

TailwindCSS

ユーティリティークラスと呼ばれるCSSプロパティを模したクラスをHTMLに当てることで、CSSを書かずにスタイルを当てることができるのが特徴です。基本的にユーティリティークラス以外でスタイルを当てない方針にして利用しています。カラーや文字サイズなどのテーマを設定でき、テーマから生成されるユーティリティクラス（text-lgなど）を使っているので、テーマに沿ったコンポーネントの実装ができています。

インフラ構築

ここではAWSのInfrastructure as Codeを実現するツールたちを紹介します。

Amplify

静的ウェブアプリケーションのデプロイ・ホスティングしてくれるフルマネージドなサービスで、CDNを介して配信することができます。 Amplifyには認証・データストア・ホスティングなど、Webアプリケーションを作る上で必要なものが手軽に構築できる機能があります。すでに認証とデータストアは別で構築されていたので、今回はホスティングのみを利用しています。

CDK

TypeScriptやPythonなど慣れた言語でAWS環境の構築ができるのが特徴です。 S3を使用した静的ウェブサイトの環境を構築するために使っており、後述するStorybookをデプロイしています。他にもTerraformなど似たツールはありますが、先に開発を行っていたバックエンドチームで利用していたためCDKを採用しています。

バージョン管理

nodenv

nodeのバージョン管理ツールです。 nodeのバージョンを記載した .node-version というファイルをディレクトリに配置することで使用するバージョンを切り替えられます。

Yarn

nodeモジュールを管理するツールです。以前はNPMと比べて早いと言われていましたが、NPMがYarnの良いところを取り入れたため、現在はあまり変わらないそうです。 Yarnに慣れ親しんでいるメンバーが多いため採用しました。

余談ですが、Yarn v3ではパフォーマンスの向上やESBuildがサポートされるそうです。
Yarn 3.0 🚀🤖 Performances, ESBuild, Better Patches, ... - DEV Community

Renovate

ライブラリのバージョンアップを促してくれるツールです。 GitHub連携することで自動でバージョンを上げるプルリクを作ってくれます。プルリクを作る頻度や複数のライブラリを一つのプルリクにまとめるかどうかなどの設定ができます。プロジェクトで使用してるライブラリのバージョンアップに追従するために使用しています。

CI/CD

CircleCI

全社的に利用しているCIツールです。ビルド・テスト・デプロイ・StoryBookのデプロイを行っています。 GitHubのリリースタグを作成したタイミングでデプロイしています。

GitHub Actions

GitHub製のCIツールです。 .github/workflows/にymlを配置するだけで使用でき、CI上ですぐにGitHub APIが叩くことができます。またプルリクが作成された時、プルリクがマージされた時などのGitHubならではのイベントで実行できます。 GitHub上で完結するかどうかでCircleCIとの使用の切り分けを行っています。

リンター・フォーマッター

コーディング規約を定めることで保守性や品質を高めることができます。ここでは規約に沿ったコードを保つためのツールを紹介します。

ESLint

コーディング規約を定めて沿っていないコードを検知するためのツールです。 Next.jsのrecommendedルールを使いつつ、プロジェクト独自のルールとしてアトミックデザインやクリーンアーキテクチャに沿っていない依存関係を禁止する規約などを設定しています。

Prettier

コーディング規約を定めて沿っていないコードを修正するツールです。 eslint-plugin-prettierをESLintに入れることでESLintのコーディング規約に則ったコードに修正することもできます。

Gitコマンド実行時にスクリプトを実行できるツールです。 Gitにもともと備わっているGitHooksはスクリプト置き場がデフォルトだと.gitディレクトリになっているためバージョン管理ができませんが、Huskyは.huskyディレクトリにスクリプトを置くためバージョン管理が可能でチームで使用したいときに向いています。このツール自体はリンターやフォーマッターではありませんが、コミット時にリンターやフォーマッターを実行することで、常にコーディング規約に沿ったコードを保つようにしています。

テスト

充実したテストが頻繁なライブラリのバージョン更新や新参メンバーの参入の心理的ハードルを下げてくれています。

Jest

モッキング機能を備えたユニットテストツールです。

StoryBook

コンポーネントの描画をブラウザから確認できるツールです。レビュー時に作ったコンポーネントの機能を確認する時などに利用しています。このツール自体はテストツールではありませんが、後述するビジュアルリグレッションテストにも使用しています。

reg-suit + storycap

reg-suitとstorycapを使ってビジュアルリグレッションテストを行っています。 storycapを使ってStoryBookにあるコンポーネントのスナップショットを撮影し、そのスナップショットをreg-suitを使って比較して、意図しない変更が無いか確認しています。 storycapはStoryBookのアドオンでStoryBookのキャプチャを撮影するツールです。 reg-suitは比較の詳細をブラウザから確認できたり、GitHub連携することで比較のサマリをプルリクのコメントに記載してくれるのが特徴です。

Cypress

実際にブラウザからベージにアクセスしてテストを行うE2Eテストツールですツールです。特徴としてテスト中の操作を録画、エラー時にエラー画面のスクリーンショット、APIのモッキング機能があります。各ページにアクセスできるか、認証認可が機能しているかのテストに使用しています。

おわりに

フロントエンドで使用しているツールを紹介しました。コード規約やテストが充実しているため、フロント初心者の私でも安心してコードが書ける環境になっていました。

今回はざっくりと紹介するだけになりましたが、今後どれかを深ぼった記事を書ければと思います。

SO Technologies 開発者ブログ

ライクルチームフロントで使っているツールたちを紹介