Sublime Textでリアルタイムプレビューはできる？できない？｜代替方法もくわしく解説

「Sublime TextでHTMLやCSSを書いているけど、保存するたびにブラウザを更新するのが面倒…」「Visual Studio CodeのLive Serverみたいに、自動でリアルタイムプレビューできないのかな？」

こんな疑問や不満を持つ方は多いです。

よくある開発の悩み

コードを少し変更するたびに手動でブラウザを更新するのが面倒
デザインの微調整で何度もリロードを繰り返すのが時間の無駄
リアルタイムで変更結果を確認できないため開発効率が悪い
複数のブラウザで同時にテストするのが大変
ファイル保存とブラウザ更新の手間でコーディングのリズムが崩れる

この記事では、以下の内容を初心者にもわかるように丁寧に解説します：

Sublime Textでリアルタイムプレビューが可能かどうかの結論
Browsersyncを使った本格的なリアルタイムプレビュー環境構築
プラグインを活用した効率的なプレビュー方法
VS Codeなど他エディタとの比較検討

よくある開発の悩み

Sublime Textでリアルタイムプレビューの現実
Browsersyncで本格的なリアルタイムプレビュー環境を構築
View In Browserプラグインで効率化
他の代替ソリューション
よくある問題と解決法
開発効率を最大化するワークフロー
1. 推奨される開発環境設定
2. プロジェクト別の使い分け
よくある質問（Q&A）
エディタ比較：移行を検討すべき？
1. Sublime Text vs VS Code
2. 移行の判断基準
まとめ

Sublime Textでリアルタイムプレビューの現実

結論：標準機能では不可能

結論からいうと、Sublime Text単体ではリアルタイムプレビューはできません。

Sublime Textは軽量でシンプルなテキストエディタとして設計されており、VS CodeのLive Serverのような自動ブラウザ更新機能は標準では搭載されていないのです。

なぜリアルタイムプレビュー機能がないのか

設計思想の違い

Sublime Text：軽量性と高速性を重視したテキストエディタ
VS Code：拡張性と統合開発環境としての機能を重視

機能の違い

機能	Sublime Text	VS Code
起動速度	非常に高速	やや重い
リアルタイムプレビュー	❌ 標準では不可	⭕ Live Server拡張で対応
プラグイン数	豊富だが限定的	非常に豊富
メモリ使用量	軽量	やや重い

実際の開発での影響

従来の開発フロー

Sublime TextでHTMLやCSSを編集
ファイルを保存（Ctrl + S）
ブラウザに切り替え
手動でリロード（F5キー）
結果を確認
1に戻る

この繰り返しが開発効率を下げる要因となっています。

Browsersyncで本格的なリアルタイムプレビュー環境を構築

Browsersyncとは

Browsersyncは、ローカル開発サーバーを立ち上げ、ファイルの変更を監視して自動的にブラウザをリロードしてくれる強力なツールです。

主な機能

ファイル変更の自動検知とブラウザリロード
複数デバイス間での同期（スマホ、タブレット含む）
CSSの変更時はリロードなしでスタイル更新
ローカルネットワーク内での共有
スクロール位置やフォーム入力の同期

導入手順

前提条件：Node.jsのインストール

Node.jsの確認

node --version
npm --version

バージョン情報が表示されればOKです。表示されない場合はNode.js公式サイトからダウンロードしてインストールしてください。

Browsersyncのインストール

グローバルインストール

npm install -g browser-sync

インストール確認

browser-sync --version

基本的な使用方法

シンプルな起動方法

プロジェクトフォルダに移動

cd /path/to/your/project

基本的な起動

browser-sync start --server --files "*.html"

より詳細な設定例

HTML、CSS、JavaScriptを監視

browser-sync start --server --files "*.html, css/*.css, js/*.js"

すべてのファイルを監視

browser-sync start --server --files "**/*"

特定のポートで起動

browser-sync start --server --port 3000 --files "*.html, css/*.css"

高度な設定

設定ファイル（bs-config.js）の作成

module.exports = {
    "server": {
        "baseDir": "./"
    },
    "files": [
        "*.html",
        "css/*.css",
        "js/*.js",
        "images/**/*"
    ],
    "port": 3000,
    "open": "local",
    "browser": ["chrome", "firefox"],
    "reloadDelay": 1000,
    "injectChanges": true
};

設定ファイルでの起動

browser-sync start --config bs-config.js

詳細オプション

CSS変更時のリロード無し更新

browser-sync start --server --files "*.html" --files "css/*.css" --no-inject-changes false

特定のブラウザで開く

browser-sync start --server --browser "google chrome"

外部からのアクセスを許可

browser-sync start --server --host 0.0.0.0

実用的な活用例

レスポンシブデザインのテスト

Browsersyncを起動すると、複数のURLが表示されます：

Local: http://localhost:3000
External: http://192.168.1.100:3000
UI: http://localhost:3001

Local：ローカル環境での表示
External：同じネットワーク内の他デバイスからアクセス
UI：Browsersyncの管理画面

スマートフォンやタブレットからExternalのURLにアクセスすることで、リアルタイムでレスポンシブデザインをテストできます。

チーム開発での共有

browser-sync start --server --host 0.0.0.0 --files "**/*"

この設定により、同じネットワーク内のチームメンバーがリアルタイムで開発の進捗を確認できます。

View In Browserプラグインで効率化

プラグインの導入

インストール手順

Sublime TextでCtrl + Shift + P（MacはCmd + Shift + P）
Package Control: Install Packageと入力
View In Browserを検索してインストール

基本的な使用方法

ショートカットキー

Windows/Linux：Alt + B
Mac：Ctrl + Alt + B

右クリックメニュー

エディタ上で右クリック →「View in Browser」

設定のカスタマイズ

複数ブラウザの設定

Preferences → Package Settings → View In Browser → Settings - User

{
    "browser": "chrome",
    "browsers": {
        "chrome": {
            "cmd": ["C:/Program Files/Google/Chrome/Application/chrome.exe"],
            "name": "Google Chrome"
        },
        "firefox": {
            "cmd": ["C:/Program Files/Mozilla Firefox/firefox.exe"],
            "name": "Mozilla Firefox"
        },
        "edge": {
            "cmd": ["msedge"],
            "name": "Microsoft Edge"
        }
    }
}

ショートカットキーの変更

Preferences → Key Bindings

[
    {
        "keys": ["f12"],
        "command": "view_in_browser"
    },
    {
        "keys": ["ctrl+shift+b"],
        "command": "view_in_browser",
        "args": {"browser": "firefox"}
    }
]

Browsersyncとの併用

効率的なワークフロー

Browsersyncでリアルタイム監視環境を構築
View In Browserで必要に応じて手動プレビュー
複数ブラウザでの動作確認

この組み合わせにより、最高の開発効率を実現できます。

他の代替ソリューション

Live Server（Python）

Pythonがインストールされている場合

Python 3の場合

python -m http.server 8000

Python 2の場合

python -m SimpleHTTPServer 8000

アクセス方法 ブラウザでhttp://localhost:8000にアクセス

利点と欠点

利点

Pythonがあれば即座に使用可能
設定不要
軽量

欠点

自動リロード機能なし
ファイル変更の監視なし

Gulpを使った自動化

package.jsonの設定

{
  "devDependencies": {
    "gulp": "^4.0.2",
    "gulp-connect": "^5.7.0",
    "gulp-watch": "^5.0.1"
  }
}

gulpfile.jsの例

const gulp = require('gulp');
const connect = require('gulp-connect');

gulp.task('connect', function() {
  connect.server({
    root: '.',
    livereload: true,
    port: 8000
  });
});

gulp.task('html', function() {
  return gulp.src('./*.html')
    .pipe(connect.reload());
});

gulp.task('css', function() {
  return gulp.src('./css/*.css')
    .pipe(connect.reload());
});

gulp.task('watch', function() {
  gulp.watch(['./*.html'], gulp.series('html'));
  gulp.watch(['./css/*.css'], gulp.series('css'));
});

gulp.task('default', gulp.parallel('connect', 'watch'));

実行方法

npm install
gulp

VS Code Live Serverの活用

移行を検討する場合

VS Codeの利点

Live Server拡張による簡単なリアルタイムプレビュー
豊富な拡張機能
GitHubとの統合
無料で高機能

移行時の考慮点

Sublime Textより起動が重い
メモリ使用量が多い
設定の移行が必要

Live Serverの使用方法

VS CodeでHTMLファイルを開く
Live Server拡張をインストール
ファイル上で右クリック →「Open with Live Server」
自動的にブラウザが開き、リアルタイムプレビューが開始

よくある問題と解決法

Browsersyncが起動しない場合

Node.jsの確認

バージョンチェック

node --version
npm --version

再インストール

npm uninstall -g browser-sync
npm install -g browser-sync

ポートの競合

エラーメッセージ例

Error: listen EADDRINUSE :::3000

解決方法

browser-sync start --server --port 3001 --files "*.html"

ファイルが監視されない場合

パスの確認

相対パスの使用

browser-sync start --server --files "./css/*.css"

絶対パスの指定

browser-sync start --server --files "/full/path/to/files/*.css"

深い階層のファイル監視

browser-sync start --server --files "**/*.{html,css,js}"

パフォーマンスの問題

大量ファイルの監視

特定ファイルのみ監視

browser-sync start --server --files "src/**/*.{html,css,js}" --ignore "node_modules/**/*"

監視間隔の調整

// bs-config.js
module.exports = {
    "files": ["src/**/*.{html,css,js}"],
    "watchOptions": {
        "debounceDelay": 2000  // 2秒の遅延
    }
};

開発効率を最大化するワークフロー

推奨される開発環境設定

レベル1：初心者向け

Sublime Text + View In Browser
手動プレビューで基本的な開発

レベル2：中級者向け

Sublime Text + Browsersync
リアルタイムプレビューで効率的な開発

レベル3：上級者向け

Sublime Text + Browsersync + Gulp/Webpack
完全自動化された開発環境

プロジェクト別の使い分け

小規模サイト

View In Browserで十分
設定の手間が少ない

中規模サイト

Browsersyncを活用
レスポンシブデザインのテストが容易

大規模プロジェクト

Gulp/Webpackとの組み合わせ
完全自動化による効率化

よくある質問（Q&A）

Q. Sublime TextにLive Serverプラグインはないの？

A. 残念ながら、VS CodeのLive Serverと同等の機能を持つプラグインは存在しません。

理由

Sublime Textのプラグインアーキテクチャの制限
軽量性を保つための設計思想
コミュニティの開発方向性

代替案

Browsersyncとの組み合わせ
外部ツールの活用
VS Codeへの移行検討

Q. Browsersyncの設定が複雑で分からない

A. 最初は基本的なコマンドから始めましょう：

最小構成

browser-sync start --server

段階的な設定追加

# ステップ1
browser-sync start --server --files "*.html"

# ステップ2
browser-sync start --server --files "*.html, css/*.css"

# ステップ3
browser-sync start --server --files "**/*"

Q. 複数のプロジェクトで同時に使用できる？

A. 異なるポートを指定することで同時使用可能です：

プロジェクト1

browser-sync start --server --port 3000 --files "*.html"

プロジェクト2

browser-sync start --server --port 3001 --files "*.html"

Q. CSSの変更でページ全体がリロードされる

A. CSS注入機能を有効にしてください：

browser-sync start --server --files "*.html" --files "css/*.css" --no-inject-changes false

または設定ファイルで：

module.exports = {
    "injectChanges": true,
    "files": [
        {
            "match": ["css/*.css"],
            "fn": function (event, file) {
                // CSS変更時は注入のみ
                this.reload("*.css");
            }
        }
    ]
};

Q. スマートフォンでテストしたいが表示されない

A. ファイアウォールの設定を確認してください：

Windows

Windows Defenderファイアウォール設定
ポート3000番の通信を許可

Mac

システム環境設定 → セキュリティとプライバシー
ファイアウォール設定でNode.jsを許可

ネットワーク確認

ipconfig  # Windows
ifconfig  # Mac/Linux

IPアドレスを確認し、スマートフォンからhttp://[IPアドレス]:3000でアクセス

エディタ比較：移行を検討すべき？

Sublime Text vs VS Code

開発速度での比較

項目	Sublime Text + Browsersync	VS Code + Live Server
初期設定の複雑さ	やや複雑	簡単
起動速度	非常に高速	やや重い
メモリ使用量	軽量	重い
リアルタイムプレビュー	外部ツール必要	拡張機能で対応
学習コスト	中程度	低い

機能面での比較

Sublime Textの優位点

圧倒的な軽量性と高速性
洗練されたユーザーインターフェース
高度なテキスト編集機能
安定性

VS Codeの優位点

豊富な拡張機能
統合開発環境としての機能
GitHubとの連携
無料でフル機能

移行の判断基準

Sublime Textを続けるべき場合

エディタの軽量性を重視
テキスト編集のスピードが最優先
外部ツールの設定に抵抗がない
現在のワークフローに満足

VS Codeに移行すべき場合

リアルタイムプレビューが必須
統合開発環境的な機能が欲しい
設定の簡単さを重視
チーム開発での標準化が必要

まとめ

Sublime Textでのリアルタイムプレビューについて、重要なポイントをまとめます：

基本的な結論

Sublime Text単体ではリアルタイムプレビューは不可能
外部ツールとの組み合わせで実現可能
用途に応じて最適な方法を選択することが重要

推奨される解決方法

最も効果的な組み合わせ

Sublime Text + Browsersync
View In Browserプラグインで補完
プロジェクトに応じた設定の最適化

レベル別の推奨方法

初心者：View In Browserから始める
中級者：Browsersyncを導入して本格活用
上級者：Gulp/Webpackと組み合わせて完全自動化

開発効率向上のコツ

段階的な導入：簡単な方法から始めて徐々に高度化
プロジェクト別の使い分け：規模に応じた適切な選択
チーム内での標準化：効率的な共同開発の実現

よくある開発の悩み

Sublime Textでリアルタイムプレビューの現実

結論：標準機能では不可能

なぜリアルタイムプレビュー機能がないのか

設計思想の違い

機能の違い

実際の開発での影響

Browsersyncで本格的なリアルタイムプレビュー環境を構築

Browsersyncとは

主な機能

導入手順

前提条件：Node.jsのインストール

Browsersyncのインストール

基本的な使用方法

シンプルな起動方法

より詳細な設定例

高度な設定

設定ファイル（bs-config.js）の作成

詳細オプション

実用的な活用例

レスポンシブデザインのテスト

チーム開発での共有

View In Browserプラグインで効率化

プラグインの導入

インストール手順

基本的な使用方法

設定のカスタマイズ

複数ブラウザの設定

ショートカットキーの変更

Browsersyncとの併用

効率的なワークフロー

他の代替ソリューション

Live Server（Python）

Pythonがインストールされている場合

利点と欠点

Gulpを使った自動化

package.jsonの設定

gulpfile.jsの例

実行方法

VS Code Live Serverの活用

移行を検討する場合

Live Serverの使用方法

よくある問題と解決法

Browsersyncが起動しない場合

Node.jsの確認

ポートの競合

ファイルが監視されない場合

パスの確認

深い階層のファイル監視

パフォーマンスの問題

大量ファイルの監視

開発効率を最大化するワークフロー

推奨される開発環境設定

レベル1：初心者向け

レベル2：中級者向け

レベル3：上級者向け

プロジェクト別の使い分け

小規模サイト

中規模サイト

大規模プロジェクト

よくある質問（Q&A）

Q. Sublime TextにLive Serverプラグインはないの？

Q. Browsersyncの設定が複雑で分からない

Q. 複数のプロジェクトで同時に使用できる？

Q. CSSの変更でページ全体がリロードされる

Q. スマートフォンでテストしたいが表示されない

エディタ比較：移行を検討すべき？

Sublime Text vs VS Code

開発速度での比較

機能面での比較

移行の判断基準

Sublime Textを続けるべき場合

VS Codeに移行すべき場合

まとめ

基本的な結論

推奨される解決方法

最も効果的な組み合わせ

レベル別の推奨方法

開発効率向上のコツ

Youtube