2023年度版フロントエンド開発環境構築徹底解説

この記事はNuco Advent Calendar 2023の1日目の記事です。

はじめに

2023年最新のフロントエンド開発環境についての紹介記事です。
分野別に、おすすめツール群と、その特徴などを紹介していきます。
デファクトスタンダードとみなせるようなツールや、最近盛り上がりを見せているものなどをラインナップしました。
これからフロントエンド開発を始めたい人はもちろん、長くご経験のある人にもプラスになる情報がきっとあるため、ぜひ参考にしてもらえると嬉しいです。

弊社Nucoでは、他にも様々なお役立ち記事を公開しています。よかったら、Organizationのページも覗いてみてください。
また、Nucoでは一緒に働く仲間も募集しています！興味をお持ちいただける方は、こちらまで。

フロントエンド開発おすすめツール集

エディタ

エディタやIDEは好みの問題も大きいので、メジャーなものを簡単に紹介だけしておきます。

Visual Studio Code

もはや説明の必要が無いほどに普及しているエディタと言っても良いと思います。
フロントエンド向けの拡張機能も幅広く存在しているため、自分に合うカスタマイズが可能です。
使用する場合は、上記URLからインストーラをダウンロードして実行してください。

オンラインエディタ

ブラウザ上でHTML、CSS、JavaScriptのコードを編集・プレビューが可能なアプリケーションです。
実開発ではVSCodeが有れば十分、という場合が多いとは思います。

• 簡単なデモの作成
• サイトへの埋め込み
• 書いたコードの共有

など、オンラインエディタならではの機能を必要とするときに、随時使うのが良いでしょう。

CodePen

上記の機能が一通り揃っているエディタはいくつかあるのですが、最も有名なのはCodePenではないでしょうか。
ユーザー登録は必要なものの、基本無料で利用できる点もおすすめです。

ワイヤーフレーム・UIデザイン

フロントエンドエンジニアに高度なデザインが求められるケースは限られるかもしれませんが、特に開発の初期段階では、画面のワイヤーフレームを作成したり、簡単なデザインの作成まで求められることはあると思います。
画面イメージをクイックに作成して共有する手段として、どんなものがあるかを押さえておくのは重要です。

Figma

多くの人に使用されているプロトタイピングツールです。
ワイヤーフレームやデザイン案の作成や、チーム内の共有などの機能に優れているだけでなく、
開発効率面でも優れたパフォーマンスを発揮します。

Figmaには、後述のMUIやChakra UIといったUIフレームワークとの組み合わせをサポートするライブラリも用意されており、
「デザインテンプレートを作成→そのままReactのコードとして使用」
という芸当が可能です。
自分で考えながらCSSを当てていく、といったこともしなくてよく、大幅な時間短縮に繋がります。
デザインだけでなく、その後の開発効率まで考えても、Figmaは非常に優れたツールと言えます。

使用開始する場合は、上記の公式サイトからサインアップしてください。

Nodeバージョン管理ツール

プロジェクトごとに使用するNode.jsのバージョンを管理するツールです。

昨今のフロントエンド開発は、とにもかくにもNode.jsをインストールすることから始まります。
しかし、一つのバージョンのNode.jsをグローバルインストールしてしまうと、別のNodeのバージョンが求められるプロジェクトと並走できなくなってしまいます。いちいち別のバージョンを入れ直さないといけないからです。

そのため、Node.jsのバージョン自体を管理できるツールを入れておくことで、プロジェクトの要件に応じて、簡単に使用するバージョンを切り替えられるようにしておくのが現在のスタンダードと言えます。

nvm、n、nodenv、nodebrew、Volta、など、（なぜか）様々なソフトが群雄割拠しているのですが、最も使われているであろうnvmと、後発で注目されているVoltaを紹介します。

nvm

Githubスター数：71.8k(2023年11月現在)

最もスター数が多く、広く使われているであろうバージョン管理ツールです。

広く使われているということは、

• 追加開発が充実していて安定している。
• 公式以外のドキュメントも豊富に存在する。

ということでもあります。

インストール

Linux / MacOSの場合

curl や wget でインストールが可能です。

curl -o- https://raw.githubusercontent.com/nvm-sh/nvm/v0.39.5/install.sh | bash

wget -qO- https://raw.githubusercontent.com/nvm-sh/nvm/v0.39.5/install.sh | bash

Windowsの場合

下記からnvm-setup.zipをダウンロード・解凍し、インストーラを実行します。

使い方

# インストールできるNodeバージョンの一覧
nvm ls-remote

# 最新版のNodeインストール
nvm install node

# 特定のバージョンのインストール（例:14.7.0）
nvm install 14.7.0

# インストール済みNodeバージョンの一覧
nvm ls

# 使用するNodeバージョンの選択(nodeはインストール済の最新Version)
nvm use node

Volta

Githubスター数：9k(2023年11月現在)

2020年末から正式版が公開されたバージョン管理ツールで、Rustで実装されています。

• Rust製ということもあり、動作が高速。
• プロジェクトごとに自動でバージョン切り替えを行うため、いちいちコマンドで切り替える必要が無い。
• Nodeだけでなく、npmなどのバージョンも明示的に固定できる。

といった利点があり、非常に注目を集めています。
後発故に、公式ドキュメントが日本語未サポートだったりするのですが、それが苦にならないようでしたら、Voltaを使ってみるのも良いでしょう。

インストール

Linux / MacOSの場合

curl https://get.volta.sh | bash

Windowsの場合

下記公式ページからインストーラをダウンロードし、実行

使い方

# 最新版Nodeのインストール
volta install node

# 特定のバージョンのNodeインストール
volta install node@14.15.5

# プロジェクトで使用するNodeバージョンの固定
volta pin node@14.15.5

パッケージマネージャー

プロジェクト内で使用するJavaScriptライブラリのインストールや、ライブラリ間の依存関係の整理をしてくれるのがパッケージマネージャーです。
基本的には、プロジェクトごとに一つ選んで使用することになります。
それぞれ差異はあるものの互換性は高く、package.json というファイルで依存ライブラリを記述していくなど、基本的な使い方は大きく変わりません。

npm

yarnの存在や、後述するpnpmの盛り上がりもありますが、まだまだnpmが最もメジャーなパッケージマネージャーとして使われていると言っても良いでしょう。

• Nodeに標準バンドルされているため、Nodeを入れた時点ですぐ使用することができる。
• マジョリティ故にドキュメント類も充実。

などが主な採用理由になると思います。

インストール

Node.jsをインストールすると、そのNodeのバージョンに紐づいたnpmも自動でインストールされます。

使い方

# 初期化してpackage.jsonを作成
npm init

# package.jsonファイルに記述してあるライブラリ群のインストール
npm install

# 特定のライブラリをプロジェクトに追加
npm install (ライブラリ名)

ライブラリをインストールすると、package.json と同階層の node_modulesディレクトリに追加されます。
実開発時には、.gitignoreファイルに記載して、ライブラリ群をコミットしないように気をつけましょう。

また、package.jsonには、 scriptsというフィールドで、省略コマンドを設定することができます。
例えば、

package.json

{
  "scripts": {
    "hoge": "echo hogehoge"
  }
}

このように設定すると、以下のように npm runコマンドで、設定したコマンドを実行することができます。

npm run hoge
# hogehoge

主に、

• サーバーの起動
• linterの実行やビルド
  などのコマンドを設定することが多いです。　各種フレームワークが、初期化時に自動で設定してくれるものもあります。

pnpm

Githubスター数：26.1k(2023年11月現在)

後発ながらも、ぐんぐんシェアを伸ばしているパッケージマネージャーです。
「performant npm」という謳い文句から命名もされており、実際に

• npm より最大2倍高速
• ディスク容量効率も良い

といった利点があります。

pnpmはnpmとの互換性も高いため、基本的にはnpmの代わりに採用しても困るケースは少ないと思います。
懸念点があるとすれば、やはり後発ゆえの情報の少なさでしょうか。最近はそこまででもないと思いますが...。
規模の大きいチーム開発などでは、npmを無難に採用しておく方が良いケースもまだまだありそうです。

インストール

Node.jsに標準バンドルされておらず、npm経由でインストールしないといけなかったのですが、昨今のNode.jsで標準搭載されているcorepack経由でも使用できるようになりました。

# corepackの使用開始
corepack enable

# 最新のpnpmの使用開始
corepack prepare pnpm@latest --activate

詳しい使用開始方法はこちら。
https://pnpm.io/ja/installation#corepack%E3%81%AE%E4%BD%BF%E7%94%A8

使い方

基本的にはnpmとそう変わりません。

# package.jsonファイルに記述してあるライブラリ群のインストール
pnpm install

# 特定のライブラリをプロジェクトに追加
pnpm add (ライブラリ名)

# scriptsフィールドに設定した短縮コマンド
pnpm (コマンド)

ライブラリの新規追加はinstallではなくaddで行います。
また、scriptsフィールドの短縮コマンド実行には、runのサブコマンドは不要です。

(参考) corepackとは

いわゆるパッケージマネージャーの管理ツール（package manager manager）と呼ばれるソフトの一つです。
corepackを使うと、そのプロジェクトで使うパッケージマネージャを固定することが可能です。（pnpmに固定する、など)
逆に言えば、「リポジトリを見ただけでは、npmで管理するべきなのか、yarnなのか、pnpmなのかわからない」といったことも起こりうるため、こうしたツールで固定してしまうのも良いと思います。

ツールの指定は、下記のようにpackage.jsonに packageManagerフィールドを設定することで可能になります。

package.json

{
  "packageManager": "pnpm@7.20.0"
}

上述の通り、corepackは最近のNodeには標準バンドルされているため。pnpmもcorepack経由で使用できます。
ただし2023年11月現在は、まだExperimental(実験的)な導入となっているため、ご注意ください。

仮想環境

Docker

ここまで述べてきただけでも、Node周りのツール群が非常に多く、煩雑であることがわかると思います。
かつツール同士の依存関係もあったりするため、「過去のプロジェクト用にグローバルインストールしていた〇〇が消せない」といったケースも起こるなど、特に複数人のチームになると、環境構築に手こずる人が出てくることもあります。

いっそ全てコンテナ化してしまったほうが、特にチーム内開発では楽かもしれません。
Dockerは、2023年の開発現場においては十分すぎるほど浸透したツールだと思います。
メンバー内で、使用に問題がなく、かつDockerfileなどをスムーズに用意できるようであれば、導入を検討する余地は十分にあるでしょう。

開発言語

フロントエンドの言語といえば、HTML・CSS・JavaScriptが三種の神器ですが、各種JSライブラリの成長に伴い、HTMLとCSSを直接ガッツリ書く機会は減ってきています。
また、ブラウザで動くのはあくまでもJavaScriptですが、近年の開発現場では、TypeScriptで記述するのがスタンダードになった、と言っても過言ではないでしょう。

TypeScript

動的型付言語であるJavaScriptの欠点を補った上位互換として開発された言語です。
基本的な文法体系はJavaScriptと同一であり、そのうえで型に関するルールが追加されています。
上位互換、といっても、ブラウザで動くのはあくまでもJSなので、TypeScriptのコードは最終的にJavaScriptにトランスパイルすることになります。

TypeScriptの他の特徴としては、

• 型推論機能
• ジェネリクスのサポート

などが挙げられます。また、複数の言語パラダイムに対応可能で、オブジェクト志向・関数型のどちらのプログラミングにも対応可能です。

使用開始方法

npmを使って、TSのコンパイラをインストールします。

# インストール
npm install -g typescript


# バージョン確認
tsc -v
# Version 4.5.5

(参考) Web Assembly(Wasm)について

CやRustといった言語で書かれたコードからコンパイルされるバイトコードで、ブラウザアプリでも、ネイティブアプリに近いパフォーマンスが発揮できる技術として知られています。今や、Chromeをはじめ、多くのブラウザでその利用がサポートされています。
ただ、知識としては市民権を得ているものの、開発現場で当たり前のように使われるようになっているか、と問われると、まだその域には到達していないように、筆者は感じてます。
とはいえWeb界隈の一大ムーブメントとして、今後も注目を集め続けることは必至なので、キャッチアップは怠らないようにしておきたいところです。

JSライブラリ

言語の項で述べたように、素のHTMLやCSSをガッツリ書くような機会はかなり少なくなってきています。
それに一役も二役も買ってくれているのが本項のライブラリ群と、それらを取り巻くエコシステムでしょう。

仮想DOMライブラリとして、ReactとVueの2強体制が数年続いていましたが、昨今ではReactが完全にデファクトスタンダード化しました。
一方で、後発のライブラリとしてSvelteもシェアを伸ばしており、合わせて紹介したいと思います。

React

シェアとしては現在圧倒的な地位を占めているのがReactです。

• 豊富で強力なエコシステム
• TypeScriptとの親和性

などがその主な理由ではないでしょうか。

Reactでは、UIをコンポーネント単位で作成します。コンポーネントは、状態やロジックを持ったUIパーツで、これらを組み合わせることで複雑なユーザーインターフェイスを構築します。
これを可能にしているのがJSXという構文拡張で、JavaScirptのコード内に、HTML（XML）のようなコードを書くことができます。JSXによって、TypeScriptのロジックで、コンポーネントの出し分けや反復試行などが簡単に実現でき、プログラマティックに画面開発を進めることが可能になります。

今や多くのプロジェクトで採用されるようなライブラリなので、フロントエンド開発を始める人は、遅かれ早かれ向き合うことになるでしょう。

プロジェクト作成

新しいReactアプリを作り始める場合は、以下のコマンドで環境構築が可能です。

npx create-next-app@latest

npxは Nodeモジュールを実行するコマンドで、近年のnpmには標準搭載されています。（xはexecuterから）
npm installして実行するのとは異なり、ローカルにモジュールをインストールせず、ただ実行するだけのコマンドになります。
そのため、開発時に一回しか使用しないモジュールなどの実行によく使われます。

Svelte

Reactの対抗馬となりうるライブラリとして注目されているSvelteも紹介しておきたいと思います。

Reactなどの仮想DOMライブラリがブラウザで行っているような処理を、できるかぎりビルド時に実行するように設計されており、ブラウザ上のパフォーマンスをより高速・効率的なものにしています。

Reactに比べるとまだまだ知名度は低いですが、今後確実に伸びてくるツールと言えるでしょう。

プロジェクト作成

npx degitコマンドを実行してプロジェクトを作成します。

npx degit sveltejs/template myapp

また、Viteを利用したインストールも可能です。

npm create vite@latest myapp -- --template svelte

(参考)ReactとSvelteの構文比較

「Reactばかり使っているけど、最近話題のSvelteに触れてみたい（またその逆も）」という方におすすめの便利なサイトです。
すでに持っている知識を応用して学べるのは、非常に効率が良いですね。

Webアプリケーションフレームワーク

ReactやSvelteを使ってWebアプリケーションを構築する際に役に立つフレームワークです。
サーバー機能を有しているため、Reactなどと違って、単体でWebアプリの開発がしやすいなど、多くの利点があります。

Next.js

Reactをベースにしたフレームワークで、2023年現在、幅広いシェアを誇っています。
ReactがSPA（シングルページアプリケーション）の構築をメインとしているのに対し、NextではSSR(サーバーサイドレンダリング)・SSG(静的サイトジェネレーター)の機能も有しており、より柔軟なアプリケーション構築が可能です。

プロジェクト作成

Reactと同じく、npxコマンドでプロジェクトをスタートします。

npx create-next-app@latest

SvelteKit

NextがReactベースのフレームワークなのに対し、SvelteをベースにしているのがSvelteKitです。
Nextと同様に、SSRやSSGをサポートしており、アプリ開発に役立つ多くの機能を有しています。

プロジェクト作成

npm createでプロジェクトを作成します。

npm create svelte@latest myapp

UIコンポーネントライブラリ(CSSフレームワーク）

ReactなどのJSライブラリを取り巻く優れたエコシステムの一つがコンポーネントライブラリです。
ボタンや入力フォームといった多くのアプリケーションで使用するUIが、その機能も有するコンポーネントとして提供されています。
これらを活用することで、一からパーツを作る手間が大いに省略でき、アプリケーションの本当に必要な部分に集中することができます。
ここに挙げているMUI以外にも、TailwindCSS、ChakraUIなどが有名です。

MUI

Googleのマテリアルデザイン原則に基づいて作られたReact UIフレームワークです。
「MUI」はv5以降の名称で、v4以前は「Materal UI」という名称でした。
名称が変わっただけでなく、多くの破壊的変更が有ったため、実際に使用する場合は注意が必要です。

自然にマテリアルデザインを取り入れられることや、コンポーネントの種類が豊富で、MUIだけで多くのUI開発を簡潔できることが強みで、多くの現場で使用されています。

インストール

npm install @mui/material @emotion/react @emotion/styled

使い方

例えばButtonコンポーネントはこのように記述します。

<Button variant="contained">MUI</Button>

これだけで、↓のようなきれいなボタンを作ることができます。

状態管理

状態管理は、フロントエンド開発者が頭を悩ませるテーマの一つです。グローバルステートなんて持たなければ持たないほうが良いのですが、完全に回避するのも困難なため、状態管理のライブラリ選定は非常に重要なファクターになります。

ここでは、Reactの状態管理ライブラリを2つ紹介します。

Zustand

Githubスター数：37.3k(2023年11月現在)

ZustandはシンプルなFlux原理を用いた状態管理ライブラリで、軽量かつ最小限のAPIを提供しています。
Reactの状態管理ライブラリとしては、同じくFluxアーキテクチャベースのReduxなどが使われていましたが、多くの開発シーンでZustandへの乗り換えが進んでいるようです。

インストール

プロジェクト内でnpm installします。

npm install zustand

Recoil

Githubスター数：19.2k(2023年11月現在)

RecoilはFluxの思想とは異なり、ツリーベースの状態管理アーキテクチャを採用しているライブラリです。Reduxなどではストアは単一ですが、Recoilは複数のストアを持ち、ストア内が肥大しづらいことなどが特徴です。

インストール

プロジェクト内でnpm installします。

npm install recoil

ビルドツール

ビルド求められる主な機能としては、

• TypeScript → JavaScriptのトランスパイル
• モジュールバンドル
• ファイル最適化

などです。

古くからwebpackなどのツールが使われてきましたが、近年はViteが注目されています。

Vite

TypeScriptはもちろん、ReactやSvelteなどのライブラリもサポートしているビルドツールです。
トランスパイルにはesbuildを使用しており、従来のwebpackなどに比べて遥かに高速なビルドが可能です。

高性能なホットリロード機能も有しているため、いちいちビルドすることなく、高速かつ快適な開発が可能になっています。

インストール

たとえばReactテンプレートを使用したViteプロジェクトを作成する場合、下記を実行します

npm create vite@latest myapp --template react-ts

react-tsの部分は、使用するテンプレートによって変更してください。

使い方

# 開発サーバー起動
vite

# 本番用ビルド
vite build

# ローカルプレビュー
vite preview

package.jsonで各種コマンドをscriptsフィールドに定義して使用するのが一般的です。上記のインストール方法だと、デフォルトで記載されるはずです。

package.json

{
  "scripts": {
    "dev": "vite", 
    "build": "vite build", 
    "preview": "vite preview"
  }
}

Linter

Linterは、コードの静的解析を行い、問題点が無いかをチェックしてくれるツールです。
コードの保守性・安全性を保つためにマストなので、必ず使用することをおすすめします。

ESLint

長く使い続けられているESLintですが、基本的にはこれを使っておけば間違いは無いでしょう。
ちなみにTypeScriptのLinterとして、かつてはTSLintというライブラリも開発されていましたが、現在は開発がストップし、ESLintのTS用プラグイン、という形に落ち着いています。

インストール

npmでインストール可能です。本番環境には必要ないので、--save-devオプション推奨です。

npm install --save-dev eslint

使い方

対象ディレクトリやファイルを設定して下記を実行するとlintが走ります。

npx eslint (ディレクトリ or ファイル)

Formatter

Linterがコードの問題点を解析してくれるのに対して、コードのスタイルをチェックし、自動修正してくれるのがFormatterです。
例えば改行の位置など、個人差が生じるような部分については、Formatterでカッチリと定めてしまうほうが、誰にとっても読みやすいコードになります。

Prettier

ESLintにもFormatter機能はありますが、より手軽かつ広い範囲をカバーできるツールとして、Prettierも長く使われているツールです。

インストール

こちらもnpmでインストール可能です。

npm install --save-dev --save-exact prettier

使い方

カレントディレクトリ以下にフォーマット適用するならば下記を実行します。

npx prettier . --write

Linter & Formatter

LinterとFormatterの機能を兼ね備えたツールも存在しており、近年もホットなツールが開発されています。

Biome

「フロントエンド開発のためのたった一つのツールチェーン」というコンセプトで開発されているツールです。
もともとFacebookが開発していた「Rome」というツールからフォークされたライブラリで、Rustで開発されており、非常に高速でスケーラブルであることが特徴です。

2023年に登場したばかりのツールで、今後どんどん注目されていくことでしょう。

インストール

npm install --save-dev --save-exact @biomejs/biome

使い方

# 設定ファイル（biome.json）の作成
npx @biomejs/biome init

# Linterの実行
npx @biomejs/biome lint <files>

# Formatterの実行
npx @biomejs/biome format <files> --write

単体テスト

単体テスト(ユニットテスト)は、プログラムの最小構成単位(例えば関数)が正しく動作することを確認するために行うテストです。
機能の実装にばかり追われてテストを書かないままにしていると、いつの間にかプログラム全体の動作の担保が難しく、かつ修正も困難な状況に追い込まれていきます。

Jest

おそらく最も有名なJavaScriptテストフレームワークです。
Reactなどでプロジェクトを作成すると標準搭載されているなど、非常に市民権を得ていると言えるツールで、プラグイン等も豊富です。

インストール

npm install --save-dev jest

使い方

テストファイルは ***.test.tsという名称で作成します。

package.jsonに以下を登録しておきましょう。

package.json

{
  "scripts": {
    "test": "jest"
  }
}

準備ができたら、以下のコマンドで、対象ファイル内のテストを実行します。

npm run test

Vitest

Viteで構築するプロジェクトのために作成されたテストフレームワークで、実行速度の高さ・Jestの互換性などが売りです。
2023年11月現在はベータ版で、Jestに比べてまだまだエコシステム等は少ないですが、Viteを使うプロジェクトでは検討に値するライブラリです。Viteの普及に伴い、今後シェアを伸ばしていく可能性も高いかもしれません。

インストール

npm install -D vitest

※ -Dは --save-devと同じです。

使い方

Jestとテストファイルの作り方は同一です。

package.json

{
  "scripts": {
    "test": "vitest"
  }
}

上記のようにpackage.jsonに記載したら、下記でテストが走ります。

npm run test

UIテスト

バックエンドとの接続やビジネスロジックを実装していると、UIコンポーネントのテストがどんどんやりづらくなっていきます。
ページ全体の実装からUIを切り離して挙動をテストできるツールを導入することで、UI開発効率が上がるだけでなく、デザイナーの方とのコミュニケーションも進めやすくなります。

StoryBook

StoryBookは、UIテストに広く使われているUIカタログツールです。
コンポーネントをブラウザで手軽にチェックできるうえ、複数のコンポーネントのバリエーションをストーリーとして保存することが可能です。
Reactなどの主要ライブラリにも対応しており、導入がし易いのも特徴です。。

インストール

npx storybook init

使い方

デフォルトではlocalhostの6006番ポートにサーバーが立ち上がるため、ブラウザからアクセスしましょう。

npm run storybook

Chromatic

Storybookの対抗馬、ではなく、Storybook用のクラウドツールになります。
作成されたStorybookをチーム内で共有することで、テストやレビューの効率を爆発的に向上させることができます。

導入

クラウドツールなので、ユーザー登録等が必要になります。
詳細は、公式ドキュメントをご覧ください。

E2Eテスト

各ロジックやUIのテストだけではなく、当然アプリケーション全体の挙動をテストしておくことも重要です。
とはいえこのE2E（End to End）テストは、多岐にわたるシナリオの全てについてテストを実施することになるため、困難かつ時間がかかることが難点。この負担を解消するツールは、積極的に利用すべきでしょう。

Playwright

Microsoftによって開発されている、E2Eテスト自動化のためのツールです。
Chromium、 WebKit、 Firefoxをサポートしており、幅広いブラウザでのアプリの挙動を確認できます。

インストール

下記のコマンドでプロジェクトにPlaywrightを導入できます。

npm init playwright@latest

インストールが完了すると、下記のようなディレクトリ・ファイルが作成されます。

playwright.config.ts
tests/
  example.spec.ts

Playwrightのテストは、testsディレクトリ内のファイルに対して実行されます。

使い方

下記を実行することで、Chromium、 WebKit、 Firefoxの3ブラウザでテストを実行します。（この設定は、playwright.config.tsで変更可能です。）

npx playwright test

テストの詳しい書き方は公式ドキュメントを御覧ください。

コミット前自動テスト

ここまでLinterやらテストやらを数多く紹介してきましたが、結局これらは各メンバーがちゃんと使わなければ意味がありません。
ぐちゃぐちゃのコードやテストの通らない関数が平然とマージされることが無いように、コミット前にこれらのチェックを自動で実施し、合格しなければコミットさせないような仕組みを作ることで、常にコードを安全かつきれいに保つことができます。

Husky

git commit前に必ず実行するルールを設定・強制できるライブラリです。
ソースコード内に設定ファイルを置くことができるので、なるべく初期に設定し、プロジェクト全体の保守性を高めておくことがおすすめです。

インストール

公式ドキュメント推奨のインストール方法は下記の通りで、

npx husky-init && npm install

これにより以下が実行されます。

• package.jsonにprepareスクリプトを追加する
• 編集可能なpre-commitフックのサンプルを作成する (デフォルトでは、コミット時に npm test が実行されます)
• Gitフックのパスを設定する

使い方

git commit時に、pre-commitフックとして登録されたコマンド群が実行されます。
いずれかのコマンドが失敗すると、コミット自体行われません。

ホスティング

アプリケーションのホスティングサービスには多くの種類があり、料金的にも決定的な優劣はつけにくいため、基本的には使い慣れたものや好みで選べば良いとは思いますが、特に近年シェアを伸ばしているサービスを一つ紹介します

Vercel

高速なデプロイや、シンプルな管理コンソールなどで話題になっているサービスです。
利用し易いだけでなく、無料枠の存在も手を出しやすいポイントですね。
GitHubリポジトリとの連携も可能で、容易にデプロイ環境が構築できます。

使用開始

公式サイトから利用登録を進めてください。

ログ監視

インフラ・バックエンドと違い、フロントエンドのログ監視は何かとおろそかにされがちですが、UXの向上や、エラー内容の共有のしやすさなどから、フロントのログ監視ツールを導入するケースも増えてきています。

Sentry

Sentry自体はフロントエンド専用というわけではなく、汎用的なエラーモニタリングプラットフォームです。
ReactやNextなどのライブラリ・フレームワークにも対応しており、使用しやすいSDKが特徴です。

使用開始

利用登録は公式サイトから。

SDKのインストールは、例えばReactならば、下記コマンドを実施します。

npm install --save @sentry/react

アクセス解析

ちょっとフロントエンド開発の範囲から逸脱するかもしれませんが、サービスの集客やユーザー行動を解析できる環境を作っておくことは非常に重要であるため、簡単に触れておきます。

Google Analytics

言わずとしれたGoogleのアクセス解析プラットフォームです。
任意の期間のユーザー数やページビュー数、どこからユーザー流入してきたかなど、サービスを成長させるためのヒントが無数に得られるツールで、特にECサイトなどでは導入必須と言える代物です。

Webコンソール上で簡単な集計やレポート作成ができるだけでなく、Google BigQueryと連携してデータ加工や集計バッチの実施、ダッシュボードを含むBIツールとの連携など、その活用方法は多岐にわたります。

設定方法

アカウント作成は公式サイトから。

gtag.jsというライブラリを使用することになりますが、使用しているフレームワーク、コンポーネント設計等によって導入の具体的な方法が変わってくるため、適宜調査の上導入するようにしてください。

おわりに

本記事では、最新のフロントエンド開発で用いられるツールについて、用途ごとに解説してきました。
フロントエンドは、トレンドの動きが特に早い界隈です。
常に最新の動向にアンテナを向けるのも重要ですが、一つ一つのツールの用途を正確に理解しておくことが、最新ツールの理解にも繋がります。
この記事で紹介した内容が、一つでも多く、皆さんのお役に立てば嬉しいです。

「他にもこんなツールが便利だよ。」
「これってもう古いんじゃない？」
といったご意見がございましたら、ぜひコメントいただけると嬉しいです。

弊社Nucoでは、他にも様々なお役立ち記事を公開しています。よかったら、Organizationのページも覗いてみてください。
また、Nucoでは一緒に働く仲間も募集しています！興味をお持ちいただける方は、こちらまで。