AI エディター Cursor を試してみる
AI エディター Cursor を試してみる AI エディター Cursor は GitHub Copilot と同様にコードの補完やチャットによるコードの生成をサポートしてくれます。Cursor は VS Code をフォークして作られており、既存の VS Code の拡張機能やキーバインドをそのまま利用することも特徴の 1 つです。 生成 AI の台頭はプログラミングの世界に大きな変革をもたらしました。我々開発者は AI の助けを借りながらまるでペアプログラミングをしているかのようにコードを書くことができます。私自身も普段から GitHub Copilot を使ってコードを書いています。コードを書いている最中に AI がコードを補完してくれる体験は、素早いフィードバックを得られるため非常に効率的です。 コードを選択してテストコードやドキュメントを生成したり、コードのリファクタリングを行
NestJSでJestからVitestに移行してみた | SIOS Tech. Lab
はじめに 皆さんこんにちは！エンジニアの細川です。 今月はサイオステクノロジーのアドベントカレンダー、テーマは「サイオス社員が今年一年で新たに学んだ技術」です！ 今月2回目の執筆ですが、今回はJavaScriptなどの開発に使える高速なテスト用パッケージVitestを紹介します！ Vitestとは 既にかなり話題になっているのでご存知の方も多いかもしれませんが、VitestはJavaScriptやTypeScriptの開発で利用可能なTest用のパッケージです。 もっとも有名なものはJestかと思いますが、VitestはJestとほとんど同じ機能を提供しており、移行もしやすいためVitestに移行している方も多いそうです。 Vitestのメリット 非常に高速 VitestはJestに比べて非常に高速に動作します。依存関係を事前に解決しておくなどの処理で早くなるそうです。解決しなければならな
Slidev
# はじめに# 概要Slidev (slide + dev, /slʌɪdɪv/) はWebベースのスライド作成およびプレゼンテーションツールです。開発者がMarkdownでコンテンツを書くことに集中しつつ、HTMLとVueコンポーネントを用いて、プレゼンテーションにインタラクティブなデモを埋め込んだピクセルパーフェクトなレイアウトとデザインを提供できるようにも設計されています。 機能豊富なマークダウンファイルを使用して、ライブコーディング、PDFエクスポート、プレゼンテーションのレコーディングのような、多くのビルトインインテグレーションとともに、瞬時に再読み込みが可能な美しいスライドを生成します。webで動くので、Slidevを使ってどんなことでもできます - 可能性は無限大です。 プロジェクトの論理的根拠については なぜSlidev？ のセクションで詳しく説明しています。 # 機能📝
Slidev
Getting Started Slidev (slide + dev, /slaɪdɪv/) is a web-based slides maker and presenter. It's designed for developers to focus on writing content in Markdown while also having the power of HTML and Vue components to deliver pixel-perfect layouts and designs with embedded interactive demos in your presentations. It uses a feature-rich markdown file to generate beautiful slides with an instant re
Viteで作成したプロジェクトをCloudflare Pagesにデプロイしてみた | DevelopersIO
こんちには。 データ事業本部 インテグレーション部 機械学習チームの中村( @nokomoro3 )です。 本記事ではViteで作成したプロジェクトをCloudflare Pagesにデプロイしたいと思います。 Cloudflare Pagesとは Cloudflare Pagesは、Cloudflareが提供する静的ウェブサイトをホスティングするためのサービスです。 Cloudflareの世界中に分散したCDNを利用した高速なコンテンツ配信や、Cloudflare Workersとの統合による動的な機能を追加することもできます。 使用環境 Windows 10のホスト側で作業しています。 Viteプロジェクトの準備 pnpm準備 pnpmをインストールしておきます。以下を参考にインストールされてください。 インストール | pnpm Viteプロジェクトの作成 cloudflare-sa
[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
この他にも多くの機能を有しており、すでに次世代のビルドツールとして充分に現実的な候補と言えるでしょう。 そしてなにより TypeScript トランスパイルの圧倒的な速さは魅力的です。Vite は esbuild を使って TypeScript をビルドするため非常に快適な開発体験が得られます。ただし型チェックは行えないため、 tsc --noEmit コマンドを並列実行するなりして担保します。 Vite の config ファイル自体を .ts として書けるのも大きいです。これにより config ファイル作成時も型チェックや入力補完等の恩恵を充分に受けられ、更に ES Modules にも対応してるので import 句の使用も可能です。 新規参入したシステムの弱点としてエコシステムの未発達が挙げられますが、Vite は Rollup 用プラグインと互換性を持つことでこの弱点を克服して
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構成を利用したプロジェクト構成にしようとしています。
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などもサポートされ
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
【React】フロントエンドのテストコードを書いてみよう【Vitest】 | ソフトウェア開発のギークフィード
Vite + React環境をDockerで構築する
VueとReactのプロジェクトをHMR（ホットリロード）が爆速と噂の「Vite」を使って構築してみる | ビジネスとIT活用に役立つ情報（株式会社アーティス）
