Jest・Mocha・Chai：JavaScriptテストツールの棲み分け比較新着!!
JavaScript のテストツールを調べると、まず名前が挙がるのが Jest・Mocha・Chai の 3 つです。しかしこの 3 つは「どれを選ぶか」という同列の選択肢ではありません。担当するレイヤーが違います。
Framework7 + Reactで作るモバイルWebアプリ入門
モバイルWebアプリで「ネイティブアプリのような操作感」を実現しようとすると、ページ遷移アニメーション・タブバー・スワイプバック・プルトゥリフレッシュといった要素を自前で実装することになり、想像以上の工数がかかります。
Tailwind CSSの導入と設定：ユーティリティファーストの考え方
Tailwind CSS は、flex・pt-4・text-center のような小さな「ユーティリティクラス」を HTML に直接並べてスタイリングする CSS フレームワークです。本記事では、ユーティリティファーストという設計思想を整理…
@react-google-maps/apiでReactに地図とマーカーを表示する
React アプリに Google Maps を組み込み、地図上にマーカーと情報ウィンドウを表示するところまでをハンズオン形式でまとめます。素の Google Maps JavaScript API を命令的に操作する方法もありますが、Re…
Docker Compose で React 開発環境を構築する
React の開発環境を、ローカルに Node.js を直接インストールせずに Docker Compose だけで構築するハンズオンです。チームで Node のバージョンを揃えたい、新メンバーのオンボーディングを docker compo…
React でフォーム管理入門：React Hook Form で楽にバリデーションまで作る
React でフォームを作ると、useState を入力欄の数だけ並べ、onChange を書き、バリデーションを手で組み、エラー表示の状態も別途管理し……と、あっという間にコンポーネントが肥大化します。React Hook Form（以下…
Vite + React + TypeScript で開発環境を構築する
React のフロントエンド開発を始めるとき、ビルドツールに Vite を選ぶのは今や標準的な選択肢です。かつて主流だった Create React App（CRA）はメンテナンス体制が縮小し、公式でも新規プロジェクトには Vite などの…