【React + Vite】開発時のターミナル表示を消す方法
2025.8.15
この記事は約1分で読めます
この記事の筆者：三好アキ
🟢 専門用語なしでプログラミングを教えるメソッドに定評があり、1200人以上のビギナーを、最新のフロントエンド開発入門に成功させる。
🟢『はじめてつくるReactアプリ with TypeScript』、『動かして学ぶ！Next.js/React開発入門（翔泳社／*韓国でも出版）』著者。
▼ Amazon著者ページはこちら
amazon.co.jp/stores/author/B099Z51QF2
コードを一行追加するだけです
React + Vite開発時、コード変更の保存をするたびにターミナルに表示が出ます。
コードの変更箇所や時刻等の表示です。
これらは重要な情報ですが、もし表示させたくない場合は次のコードをvite.config.jsに追加しましょう。
logLevel: "silent"vite.config.jsファイル全体としては次のようになります。
// vite.config.js
import { defineConfig } from 'vite'
import react from '@vitejs/plugin-react'
// https://vite.dev/config/
export default defineConfig({
plugins: [react()],
logLevel: "silent", // 追加
})なぜ消す必要があるのか？
ターミナルの表示をわざわざオフにする場面があるのかと思う人がいると思います。
実は私は、教材の動画撮影をしているときにこのコードを使っています。
動画撮影が複数日にまたがったり、休憩を取ったりしたとき、撮影した動画上でターミナルの時刻が大きく飛んでしまうからです。
マイナーな使い道ですが、ターミナルの表示は他にも様々なカスタマイズ可能なので、興味のある人は調べてみましょう。
▼【無料フロントエンド・ガイド】は下記ページで受け取れます。
🟩 フロントエンド開発者入門ガイド【無料配布中】
最初にこれが知りたかった！
フロントエンド初心者が必ず押さえておきたい ― 『挫折しない勉強法』とその具体的ステップ、無料配布中。
（*名前不要・メールアドレスだけで受け取り可能です）
関連記事
