主要バンドラーの仕様を徹底比較。Import Maps、Viteなど「脱バンドラー」の動きも | レバテックラボ（レバテックLAB）

2024/10/15 11 users レバテックラボ テクニカルライター レバテックLAB 山内

主要バンドラーの仕様を徹底比較。Import Maps、Viteなど「脱バンドラー」の動きも 2024年10月15日 執筆 山内 直 有限会社 WINGSプロジェクトが運営する、テクニカル執筆コミュニティ（代表 山田祥寛）に所属するテクニカルライター。出版社を経てフリーランスとして独立。ライター、エディター、デベロッパー、講師業に... 続きを読む

unjs/unbuildに入門してみた - くらげになりたい。

2024/07/28 14 users unjs 備忘録 くらげ ビルド 設定

pnpm workspace+TypeScriptなmonorepoで、 Cloud Functions for Firebaseを開発していたときに、 unjs/unbuildでビルドしてみたときの備忘録(*´ω｀*) 少ない設定でビルドができて便利(*´ω｀*) unbuildとは unjs/unbuild: 📦 A unified JavaScript build system 「A unified JavaScript build system」らしい。 Viteがフ... 続きを読む

Vite ってよく聞くけど何なんですか？ あれは

2024/06/22 113 users コマンド Vue.js 単語 初め 学習

初めに Vue.js の学習をしているとよく「Vite」という単語を目にすると思います。 一体全体あれはなんなのでしょうか？？ なんだかよく分からないコマンドを打つと、いつの間にかプロジェクトが作成されていたり、 ファイルを編集するだけでブラウザで動くようになっていたりします。 そもそも読み方も良くわかりません ... 続きを読む

WebGPUでシェーダーアートをやってみる（Vite、TypeScript）

2024/04/07 9 users WebGL TypeScript WebGPU 覚書 入門

はじめに 下記の素晴らしいGLSLを使ったシェーダーアートのチュートリアル動画の内容をWebGPUでやってみたのでその覚書です。WebGLは以前少しだけ齧ったことがありましたがWebGPUについては完全に知識ゼロなので入門のお題としてやってみた感じです。チュートリアル動画ではShadertoyを使っておりフラグメントシェーダー... 続きを読む

静的サイトジェネレーター「VitePress 1.0」正式リリース。VueとViteを採用し、高速なWebサイトを構築

2024/03/25 7 users 静的サイトジェネレーター 正式リリース 構築 Markd 基盤

静的サイトジェネレーター「VitePress 1.0」が正式リリースされた。UIフレームワークのVueと高速なバンドラであるViteを基盤に、MarkdownのコンテンツからSPAなWebサイトを構築できる。 オープンソースとして開発されている静的サイトジェネレーターの「VitePress 1.0」正式版がリリースされました。 VitePressは、Markd... 続きを読む

Honoで雑React SPA最小

2024/02/27 17 users hono クライント stream jsx laisoさん

laisoさんが書いてたのほぼなんだけど Honoは文字列でもStreamでもなんでも返せるし、tsconfig.jsonで適切に設定すればJSXなんでもいけるし、Viteのdev-serverがあるから、サーバーもクライントも同時に開発、ビルドできるので、雑React SPA環境作るのに向いてるよ。 作り方解説します。めんどい人はここにプロジェクト... 続きを読む

フルスタック Web フレームワーク HonoX を使ってみる

2024/02/11 91 users フルスタック web クライアントサイド hono honox

フルスタック Web フレームワーク HonoX を使ってみる 2024.02.10 HonoX は Hono と Vite をベースにしたフルスタック Web フレームワークです。Hono が提供するサーバーサイドやクライアントサイドの機能を使いつつ、ファイルベースルーティングや Islands Architecture などの新しい機能を使うことができます。 HonoX ... 続きを読む

VScode 上で今開いているファイルを Vite でプレビューする拡張を作ったら便利

2023/10/19 6 users vscode 拡張 ファイル

// props を持たないファイル名と同名のコンポーネント export default function Sub(props: {name: string}) { return <h1 className="flex"> <button className="bg-blue-500 hover:bg-blue-700 text-white font-bold py-2 px-4 rounded"> Click {props.name} </button> </h1> } // ここが render される export const... 続きを読む

MicroCMSとViteで作るかんたん静的サイト | DevelopersIO

2023/10/11 12 users DevelopersIO ビルドツール Sass HTML

この記事では、ヘッドレスCMSを使ってHTMLコンテンツを生成する手順を紹介します。 前回の記事（MicroCMSと11tyで作るかんたん静的サイト）ではAPIデータの取得とHTMLの生成のみを行いましたが、今回はSassを使うためにビルドツールであるViteを導入して、より実制作に近い環境での検証をします。 ビルドツールであればG... 続きを読む

2023-10-10のJS: Rollup 4.0.0、Viteの今後(Rustify Vite)、pnpm v8.9.0

2023/10/10 15 users パーザ SWC acorn rollup JSer.info

JSer.info #664 - Rollup 4.0.0がリリースされました。 Release v4.0.0 · rollup/rollup Node.js 14/16のサポート終了、Acornの代わりにSWCをパーサに使うように変更されています。 SWC利用に伴うオプションの削除や非推奨なオプションの削除などが含まれています。 Viteの現在と今後についてがViteConfで発表されていま... 続きを読む

パフォーマンスの高みを目指せ！ CDNのエッジサーバーでSSR - CloudflareでViteを動かす手順 - ICS MEDIA

2023/07/06 7 users エッジサーバー CDN CloudFlare 悲願 SSR

パフォーマンスの高みを目指せ！ CDNのエッジサーバーでSSR - CloudflareでViteを動かす手順 ウェブサイトの高速化はあらゆるウェブ制作者の悲願です。1ミリ秒でも早くコンテンツを届けるために、エンジニアたちは血と汗と涙を流します。しかし、ウェブサイトの高速化は、ウェブサイトの構成要素を最適化するだけでは実... 続きを読む

フロントエンドをViteからNext.jsに書き換えた話 〜パフォーマンス編〜 - 株式会社ヘンリー エンジニアブログ

2023/06/02 17 users Swe Henry React アーキテクト set

こんにちは。4月にヘンリーに入社したSWE / アーキテクト / SETのsumirenです。 弊社ではレセコン一体型クラウド電子カルテの Henry を開発・提供しています。 今回、HenryのフロントエンドをReact + ViteからNext.jsに書き換えました。 この記事では、最初にNext.jsへの切り替えによってもたらされたユーザー体験の向上... 続きを読む

vite-plugin-ssrt使ってReactとCloudflare WorkersでSSR Streamingする

2023/04/30 6 users React フラグメント Qwik Vue ビルダー

Cloudflare Workers micro-frontend のソースを色々弄って、フラグメントをQwikからReactに書き換える過程で、小規模でCloudflare WorkersでSSR StreamingできるReactのビルダーを探していたところ、vite-plugin-ssr を見つけた。 名前の通り、viteでSSRするためのプラグイン。 Vue と React 両方に対応している。 続きを読む

Viteでの開発中のSSR対応の仕組み

2023/04/14 7 users SysAd班 前提知識 チームメンバー 開発時 開発中

この記事は新歓ブログリレー2023 37日目(4/14)の記事です。 こんにちは、19B/22Mの翠(sappi_red)です。SysAd班で活動していました。Viteのチームメンバーだったりもします。 この記事ではViteのSSR対応の開発時の仕組みがどうなっているか、どうしてそうなっているかについて紹介します。 前提知識 特筆すべき点のみを取... 続きを読む

2023年のCSSは0ランタイムにしたい - console.lealog();

2023/03/24 8 users console.lealog CSS jsx ポエム 土台

したいよね？ 事の経緯としては、 とある新規プロジェクトで、技術選定をすることに 開発の土台はViteで、フレームワークはJSXが使えるやつに決まった さてCSSはどうやって書こうかとなる あれこれ考えて、とある方法に決めた というのをまとめた、まあポエムの域を出ないメモです。 CSS ModulesやらTailwindやらCSS-in-... 続きを読む

Webブラウザ上にNode.jsを実装、Webブラウザ上のサーバサイドでNext.jsやVite、Astroなどが実行可能な「Sandpack 2.0」が登場

2023/02/19 13 users astro サーバサイド CodeSandbox 実装 抽象化

Webブラウザ上にNode.jsを実装、Webブラウザ上のサーバサイドでNext.jsやVite、Astroなどが実行可能な「Sandpack 2.0」が登場 クラウド上でマイクロVMベースのオンライン開発環境などを提供するCodeSandboxは、Webブラウザ上で抽象化したNode.jsを実装しWebブラウザ上にJavaScriptのサーバサイド環境を作り出すことで、W... 続きを読む

Webpack から Vite に段階的に移行しました | PR TIMES 開発者ブログ

2023/02/08 6 users Webpack React yoiwamoto ビルド 経緯

こんにちは。PR TIMES フロントエンドエンジニアの岩元 (@yoiwamoto) です。 PR TIMES ではいくつかのページが React で実装されており、Webpack でビルドを行っていました。 今回は、一部のページを除いてこの Webpack を Vite へ置き換えたので、その経緯や結果を共有します。 まとめ ビルド時間が長いことが課題で移... 続きを読む

Vite/VueでChrome拡張機能を作ってみる | 4. 環境構築/開発編 - くらげになりたい。

2023/01/14 32 users Vue くらげ aut Chrome拡張機能 備忘録

前回の続き。Vite/CRXJS/Vueで作るときの備忘録(*´ω｀*) www.memory-lovers.blog 使ったサンプルはこちらで公開中(*´ω｀*) github.com 環境構築 プロジェクトの作成 # viteでプロジェクトを作成 $ pnpm create vite chrome-extension-sample --template vue-ts $ cd chrome-extension-sample # .npmrcを設定 $ echo "aut... 続きを読む

Release v4.0.0-alpha.0 · vitejs/vite

2022/11/07 9 users vitejs

👍 3 outbackStack, kimmy214, and juaopedrosilva reacted with thumbs up emoji 😄 1 outbackStack reacted with laugh emoji 🎉 14 jacekkarczmarczyk, hausaigon, SigureMo, outbackStack, maruf-sarker, sujianqingfeng, Anonymous1231-dev, ewilan-riviere, misaon, kartik7120, and 4 more reacted with hooray e... 続きを読む

レガシーなMPAアプリケーションをwebpackからviteに移行する話

2022/10/16 16 users Webpack

株式会社iCAREでは、Vue2.6(※2.7に移行中)+Composition APIで開発を行っており、vue2系では比較的モダンな構成です。一方、Ruby on RailsのView毎にVueインスタンスを生成するMPAであり、アプリケーション全体の構成としては、レガシーな構造になっています。 エントリーポイントが多いことによる弊害で、サービス拡大に... 続きを読む

React + Goで簡素な掲示板アプリを作ってみた | フューチャー技術ブログ

2022/08/27 15 users React TypeScript フロントエンド 新人 勉強中

はじめにこんにちは。金融グループ所属、新人の藤戸四恩です。 本記事は夏の自由研究ブログ連載2022 5日目の記事です。 今回は勉強中のReact、TypeScript、Goを使って掲示板アプリを作りました。 夏の自由研究ということで、以前から気になっていたviteを使って開発しました。 いままでフロントエンドの開発環境を作成す... 続きを読む

vite/CHANGELOG.md at v3.0.0 · vitejs/vite

2022/07/13 8 users vitejs

This commit does not belong to any branch on this repository, and may belong to a fork outside of the repository. 3.0.0 (2022-07-13) fix: prevent production node_env in serve (#9066) (7662998), closes #9066 fix: reload on restart with middleware mode (fixes #9038) (#9040) (e372693), closes #9038 ... 続きを読む

Vue 向けの Vite 製の UI コンポーネントカタログツール Histoire

2022/06/06 6 users StorYBook Vitest Vue story 単語

Histoire はフランス語で「Story」という意味の単語であり、Storybook のように UI コンポーネントのカタログを作成するツールです。 Histoire は以下のような特徴を謳っています。 Vite にネイティブ対応 Histoire は Vite 向けのツールであるので、vite.config.ts の設定を再利用できます。このあたりの特徴は Vitest ... 続きを読む

CRAからViteへ移行して190倍高速なdev server起動を得る - inSmartBank

2022/04/25 13 users inSmartBank Cra ビルドツール 手順 背景

ある日突然、あなたに190倍（当社比）高速なdev serverができたらどうしますか...？ この投稿ではWebアプリケーションのビルドツールをCreate React AppからViteへと移行した背景・手順・結果について説明します。 Vite等のビルドツールやフロントエンドアプリケーションの開発体験に興味・関心がある方、中でもCreate R... 続きを読む

Playwright & Vite ではじめる脱レガシー向け軽量 Visual Regression Test - Cybozu Inside Out | サイボウズエンジニアのブログ

2022/03/18 18 users playwright サイボウズエンジニア ブログ

こんにちは！フロントエンドエキスパートチームの @mugi_uno です。 みなさんは Visual Regression Test は普段活用していますか？ 昨今では事例もよく耳にするようになった印象です。一度使って手放せなくなった方もいるのではないでしょうか。 今回の記事では、通常のプロダクト新規開発とは異なる “脱レガシー” の文... 続きを読む