フロントエンド開発者に効く無料ツール

フロントエンドの案件がフレームワークのせいで失敗することはめったにありません。失敗するのは、ビルドが遅く、テストを誰も走らせず、バンドルが誰にも見られないまま膨らみ、気づけば表示に4秒かかっているからです。

この8つはすべて無料で、互いに噛み合い、新しい案件で私が最初に入れるものです。

ビルドツール

Vite

起動が一瞬の開発サーバーと速い本番ビルド。現代のフロントエンドではほぼ既定の選択肢です。

vite.dev

フレームワーク

Astro

既定でJavaScriptをまったく送らないため、これで遅いコンテンツサイトを作るほうが難しいくらいです。

astro.build

スタイル

Tailwind CSS

ユーティリティクラスにより、案件が古びてもCSSが際限なく増えていくのを防げます。

tailwindcss.com

Lintと整形

Biome

Lintとフォーマッタがひとつのバイナリに収まります。設定ファイルの山を高速なツール一本に置き換えられます。

biomejs.dev

ユニットテスト

Vitest

ミリ秒で終わるテストなので、push前に実際に走らせてもらえます。

vitest.dev

E2Eテスト

Playwright

実ブラウザでのテストがユニットテストでは見えない不具合を捕まえ、トレースを再生できます。

playwright.dev

コンポーネント工房

Storybook

コンポーネントを隔離して作り、レビューできます。UIを触る人が二人以上になった時点で必須です。

storybook.js.org

バンドルサイズ

Bundlephobia

依存が何キロバイト増やすのかを、入れる前に確認できます。入れた後ではなく。

bundlephobia.com

まずビルドツールとLintを決めてください。日々の手触りはこの2つで決まります。

選ぶだけでなく、作る必要がありますか?

Webアプリ、API、インフラ、インターフェース。バルセロナ拠点のフリーランス、世界中のクライアントと。

問い合わせる


Comments

Leave a Reply

Your email address will not be published. Required fields are marked *