【React】フロントエンドのテストコードを書いてみよう【Vitest】 | ソフトウェア開発のギークフィードこんにちは。 ギークフィードでエンジニアをやっているNkawaKです。 バックエンドのテストコードは書いたことはあっても、 フロントエンドのテストコードは経験がない方も少なくないのではないでしょうか。 本記事ではVitestというモダンなテストフレームワークを使って、 フロントエンドのテスト環境の構築やテストコードの書き方を解説していきますので、 これからフロントエンドのテストに入門する方の参考にしていただければと思います。
[Web フロントエンド] esbuild が爆速すぎて webpack / Rollup にはもう戻れない - 株式会社カブク
TypeScript + Preact + Material UI + material-table で作っている管理画面のビルドツールを Rollup から esbuild に変えたお話です。 2021/01/07 追記 esbuild に新しく CSS ローダーやプラグイン機構が実装されたので紹介記事を書きました！ esbuild の機能が足りないならプラグインを自作すればいいじゃない https://www.kabuku.co.jp/developers/create-your-own-esbuild-plugin はじめに これまでの JavaScript ビルドツールと私 以前は私も定石通り「アプリには webpack、ライブラリには Rollup」をビルドに利用していましたが、近年はアプリのビルドにも Rollup を利用することが多くなり、 webpack を利用することはな
業務システム SPA のフロントエンド技術選定（2023年版） - KAKEHASHI Tech Blog
本エントリはカケハシ Part 2 Advent Calendar 2023の13日目の記事です。 （Part 1もおもしろい記事がいっぱいあるので、ぜひご覧ください。） はじめに こんにちは。カケハシでソフトウェアエンジニアをしている平松です。 今年、新規プロダクト立ち上げの機会があり、その際に行ったフロントエンドの技術選定について紹介したいと思います。 フロントエンドの領域は選択肢が豊富で、変化のスピードも速いため、プロダクトの要件に適した技術を選ぶことはひとつの挑戦です。 実際、フロントエンド技術選定のヒント 【令和五年度版】のアドベントカレンダー記事を読んで、その難しさを改めて感じました。 今回の新規プロダクトは、ユーザがログインして利用するtoBの業務システムです。 私はカケハシでは2度目の新規プロダクト立ち上げですが、前回の経験を活かしつつ、新しいアプローチにも挑戦しています。
個人サイトのビルドツールをwebpackからViteに移行した - valid,invalid
個人サイト https://ohbarye.github.io/ のビルドツールをwebpackからViteに移行した。 まぁ、移行と大げさに言っても、元々vanilla JSとSassでちょっと動きと装飾を付けただけのペライチページなのだけど。 実質ただのリンク集 理由 State of JS 2021のビルドツール部門でViteが1位になっていたが利用したことがなく気になっていたため。手元にある最小のフロントエンドプロジェクトが個人サイトだったのでplaygroundとして試してみた。 https://2021.stateofjs.com/en-US/libraries/build-tools より Viteとは Vite公式を斜め読みした。ランキング中だと経験あるビルドツールがwebpack, Parcel, Rollupあたりで止まっていたのでそこからの差分で理解すると... es
Vite にたどり着くまで（Webpack 以降のモジュールバンドラー振り返り）
Parcel Webpack は設定の記述に学習コストがかかるが、Parcel はそれが不要。 プロジェクトの規模感が見えていて、手軽にバンドルしたいなら Parcel を選択しても良さそう。 逆に細かい制御を入れたい場合は選択しないほうが良い。 Rollup Webpack は CommonJS（require/module.exports） をベースにバンドルを行うが Rollup は ES Modules（import/export） の仕組みを活かしてバンドルを行う。 ES Modules のほうがツリーシェイキングがやりやすくバンドル効率が高いらしい。 また、多くの記事で「アプリケーションには Webpack」「ライブラリには Rollup」を選択することを勧めている。 これは以下の理由が大きいと思われる。 全てのコードを同じ場所に置いて、一括で評価を行います。そのため、コードが
ViteでTypeScript×Reactの開発環境を構築してみた【後編】｜SHIFT Group 技術ブログ
はじめにこんにちは、SHIFTのITソリューション部に所属しているHoribeです。 前編では、Viteを用いてTypeScript×Reactのプロジェクトを作成し、設定ファイルの中身を解説しました。今回はその続きとして、開発をサポートしてくれるESLintとPrettierの導入と設定を進めていこうと思います。 ESLint編ESLintとはESLintとは、JavaScriptとTypeScriptで使用できるリンターのことです。コードを静的に解析して、構文エラーやバグが発生しやすい書き方を指摘してくれます。JavaScript/TypeScriptのリンターは複数ありますが、2023年現在ではESLintがデファクトスタンダードになっています。 参考: ESLint 公式サイト ESLintの導入と設定インストールは下記のコマンドです。 npm i -D eslintインストールす
React 製アプリケーションのビルドシステムを webpack から Vite に移行して爆速な開発体験を手に入れよう | Recruit Tech Blog
React 製アプリケーションのビルドシステムを webpack から Vite に移行して爆速な開発体験を手に入れよう wakamsha Vite （ヴィート）とは Vue.js の作者である Evan You 氏が中心となって開発されているビルドツールです。 Vite - Next Generation Frontend Tooling ES Modules 形式のままブラウザからインポートする Dev サーバを搭載し、ソースコードをバンドルすることなく高速で動作させるのが特徴です。もちろん npm パッケージもブラウザから読み込み可能な ES Modules 形式に変換します。プロダクションビルド時は Rollup を使ってバンドルします。 Vue.js だけでなく React、Preact、Svelte のビルドもサポートしており、GitHub トレンドの上位にも頻繁に登場している
pnpmでvite, react, typescriptのprojectを作成する - Qiita
pnpmでvite, react, typescriptのprojectを作成する Motivation pnpmのベンチマークが気になったことと、主要なpackageでpnpmを利用していることがあり存在が気になっていた。 nx, lerna以外の monorepoの構成をpnpmで一度試してみたくなったことがこの記事のモチベーションです。 table of contents 作成しようとしているプロジェクト構成 pnpmのworkspace用のconfigファイルを作成する vite, react, typescriptのprojectを作成する 起動してみる 1. 作成しようとしているプロジェクト構成 Motivationにもあるとおり、pnpmのmulti-package構成を利用したプロジェクト構成にしようとしています。 $ tree . -L 2 ├── README.md ├
TypeScriptとVitestでユニットテストしてみた！ | DevelopersIO
こんにちは稲葉です。最近ソフトウェアテストの学習をしていた事もあり、ソフトウェア開発において、品質保証とバグの早期発見は非常に重要だと感じました。そのためには、効果的なユニットテストが欠かせません。 なので、今回はTypeScriptとVitestを使用した、ユニットテストの実施方法を解説します。 Vitestとは Viteネイティブの超高速ユニットテストフレームワーク。 参考資料：Vitest公式ドキュメント また、Jest互換でTypeScriptやJSXに対するサポートもあります。 ちなみにVite(ヴィート)は、モダンなWebプロジェクトのために、より速く無駄のない開発体験を提供することを目的としたビルドツールです。 詳細につきましては、公式ドキュメントを参照ください。 Vite公式ドキュメント 実行環境の準備 はじめにTypeScriptとViteをインストールします。 yarn
フロントエンドをViteからNext.jsに書き換えた話 〜パフォーマンス編〜 - 株式会社ヘンリー エンジニアブログ
こんにちは。4月にヘンリーに入社したSWE / アーキテクト / SETのsumirenです。 弊社ではレセコン一体型クラウド電子カルテの Henry を開発・提供しています。 今回、HenryのフロントエンドをReact + ViteからNext.jsに書き換えました。 この記事では、最初にNext.jsへの切り替えによってもたらされたユーザー体験の向上について説明します。次に、このユーザー体験の向上がどうして生じたのか、その背後にある技術的な要素をエンジニア向けに詳細に解説します。最後に、フロントエンドアーキテクチャに対する我々の長期的なビジョンについて述べます。 対象読者 Next.js導入によるユーザー体験向上 デモ 定量的なパフォーマンス比較 ユーザー体験がどう向上したか FCP高速化の技術的な仕組み Next.jsとViteの基本的なアーキテクチャの違い 補足：工夫しているポイ
次世代バンドルツールの競争の今 Turbopack vs Vite - GMOインターネットグループ グループ研究開発本部
こんにちは。グループ研究開発本部 次世代システム研究室のH.Oです。 生産的なアプリケーション開発において欠かせないものの一つにフロントエンドのJavaScriptバンドルツールがあります。 これまで、長年に渡ってJavaScriptのバンドルツールはwebpackがデファクトスタンダードとなり、Next.jsやNuxt.jsなどフレームワークにもデフォルトで組み込まれていました。その高機能性と安定性から現在も多くのWebサービスで利用されています。 一方で近年、webpackに続く次世代バンドルツールの開発競争が大きな注目を集めています。その中で特にwebpackに取って代わる勢いを見せているものにViteとTurbopackがあります。これらは、開発するアプリケーションの肥大化に伴って処理が遅くなってしまうwebpackの問題点を解決することが主要目的となっています。 今回はViteと
Module Bundlerの歴史を振り返って今採用すべきBundlerを考える
Module Bundler とは Module Bundler とは、多数の JavaScript コードファイルを 1 つに結合し、ブラウザーでの読み込みを可能にさせるツールです。 これから Module Bundler の歴史を振り返り、選定基準について私なりの考えを述べさせていただけたらと思います。 Browserify Browserify は 2010 年、最初に誕生した Module Bundler です。 2010 年当時、流行っていた Node.js をブラウザで使いたい requireを用いてブラウザで動かす JS をモジュール分割したい といったモチベーションの元で生まれました。 https://browserify.org/ 主な機能(Browserify) CommonJS(Node.js)で書かれたファイルをブラウザで読み込める JS に結合してくれます 課題(
Viteで爆速なフロントエンド開発環境を作る
概要 Viteというビルドツールの紹介とReact + Typescript環境からの移行手順です。 導入したプロジェクトでは開発サーバの起動からページロードまで大体40秒くらいかかっていたものが、サーバは300ms程度で起動し(2回目以降)、ページロードまで大体2~3秒ぐらいに短縮されました。 非常に開発体験が良く、導入手順もそこまで複雑ではないため、技術スタックが合えば導入を検討しても良いかもしれません。 Viteとは？ ViteはVue.js作者のEvan You 氏が開発しているノーバンドルのビルドツールです。 Native ESModulesのimportを利用し、ブラウザから直接モジュールを読み込むことで高速な開発サーバを提供します。 プロダクションビルド時はRollupでバンドルし、静的アセットを出力します。 Vue.jsだけでなく、ReactやSvelteなどもサポートされ
Vite入門 (従来のビルドツールとの違いとViteの挙動) - Qiita
概要 最近のフロントエンド開発といえば、速度速度速度。いやまさにその通り。開発環境を爆速にすることこそ正義くらいな感覚を持っています(笑) 今回は、快適なフロントエンド開発環境を手に入れるためのビルドツールViteの入門ということで、その挙動と従来のビルドツールと何が違うのかについて解説していきたいと思います。 Viteとはなんなのか Viteを一言で表すなら、従来のビルドツールに比べて、高速で動作するビルドツールと言えます。 従来の有名なビルドツールというのは、webpack、Rollup、Parcelなんかが当たります。 これらのビルドツールを使用し、開発サーバを立て開発をする。よくあるパターンだと思うのですが、こんなことを感じた方も多いのではないでしょうか。 開発サーバの起動がおせぇ！！！ 更新にいつまでかかってんだオラァ => そこでViteの出番というわけですよ。 Viteは、2
Vite は webpack に比べてなにがすごいの??
概要 Viteとwebpackを比較し、それぞれの概要・概念・内部処理の違いをざっくりと理解できます！(おそらく) なお、本記事では具体的な設定方法は書いていませんので、ご了承ください。 この記事を読むと分かること 以下の疑問を解決できます。(多分) webpackってそもそもなんだっけ？ Viteってなんぞ？ Viteとwebpackって何が違うの？ Viteが良いとは聞くけど、実際なにが良いの？ ざっくり結論 Viteがwebpackと比較して優れている点は主に以下の通りです。 高速ビルド Viteは、開発速度を重視して設計されており、開発サーバーが標準で組み込まれているため、開発時にブラウザのリロードを行わなくても、保存したら即反映されるため、開発速度が向上します。 高速HMR（Hot Module Replacement） Viteは、HMR[1]が標準搭載されており、尚且高速。
1
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
Vite + React環境をDockerで構築する
VueとReactのプロジェクトをHMR（ホットリロード）が爆速と噂の「Vite」を使って構築してみる | ビジネスとIT活用に役立つ情報（株式会社アーティス）