JavaScriptを実行する5つの方法：ブラウザから最新環境での動かし方まで詳しく紹介

2026年5月2日

基礎知識

JavaScriptは、Webブラウザ上で動作するスクリプト言語として誕生して以来、驚異的な進化を遂げてきました。

2026年現在、JavaScriptはクライアントサイドだけでなく、サーバーサイド、デスクトップアプリ、さらにはエッジコンピューティング環境に至るまで、あらゆる場所で実行されています。

本記事では、初心者からプロフェッショナルまでが押さえておくべき、JavaScriptを実行するための5つの主要な方法について、現代の開発シーンに合わせた最適な選択肢を詳しく紹介します。

目次 [ close ]

1. Webブラウザを利用した実行方法

JavaScriptの最も基本的かつ身近な実行環境は、Google ChromeやMicrosoft Edge、SafariといったWebブラウザです。

ブラウザにはJavaScriptエンジン（V8やJavaScriptCoreなど）が組み込まれており、追加のインストールなしでコードを動かすことができます。

ブラウザのコンソール機能を使う

開発中のデバッグや、短いコードの動作確認に最適なのがブラウザの開発者ツール（DevTools）に搭載されているコンソールです。

ブラウザを開き、F12 キー（または Ctrl + Shift + I / Cmd + Option + I）を押します。
「コンソール（Console）」タブを選択します。
プロンプトにコードを入力して Enter を押すと、即座に結果が表示されます。

JavaScript

// コンソールでの実行例
const message = "Hello, JavaScript 2026!";
console.log(message.toUpperCase());

実行結果

HELLO, JAVASCRIPT 2026!

この方法は、特定のWebサイト上でスクリプトを試したい場合や、DOM（Document Object Model）の操作をテストする際に非常に便利です。

HTMLファイルから読み込む

実際のWebサイト制作では、HTMLファイル内にJavaScriptを記述して実行します。

現在では、モジュール形式での記述（ES Modules）が標準となっています。

HTML

<!DOCTYPE html>
<html lang="ja">
<head>
    <meta charset="UTF-8">
    <title>JS実行テスト</title>
</head>
<body>
    <h1 id="title">表示待ち...</h1>
    <script type="module">
        // DOMの操作
        const titleElement = document.getElementById('title');
        titleElement.textContent = "JavaScriptが実行されました";
        
        console.log("HTMLからの実行成功");
    </script>
</body>
</html>

注意点として、ローカルファイル（file://）からモジュール形式のスクリプトを読み込む場合、ブラウザのセキュリティ制限（CORS）によりエラーが発生することがあります。そのため、開発時には後述するローカルサーバーを利用するのが一般的です。

2. Node.jsによるサーバーサイドでの実行

Node.jsは、ブラウザの外でJavaScriptを動かすための環境として、2026年現在もデファクトスタンダードの地位を確立しています。

サーバーサイド開発やCLIツールの作成、フロントエンドのビルド環境など、用途は多岐にわたります。

実行ファイルの作成と実行

Node.jsがインストールされている環境では、拡張子が .js のファイルを作成し、ターミナル（コマンドプロンプト）から実行します。

JavaScript

// app.js
const os = require('os');

console.log("現在の実行環境情報:");
console.log(`プラットフォーム: ${os.platform()}`);
console.log(`アーキテクチャ: ${os.arch()}`);

実行コマンド：

Shell

node app.js

実行結果

現在の実行環境情報:
プラットフォーム: win32
アーキテクチャ: x64

REPL（対話型実行環境）

Node.jsには、ブラウザのコンソールのように対話形式でコードを実行できるREPLが備わっています。

ターミナルで node と入力するだけで起動します。

Node.js 2026年時点の推奨構成

最新のNode.jsでは、ES Modules（import/export）が標準的に利用されます。

package.json に "type": "module" を指定することで、モダンな記述方法でスクリプトを実行することが強く推奨されています。

3. 次世代ランタイム（Bun / Deno）による高速実行

Node.jsの課題（パフォーマンスや標準準拠の遅れ）を解決するために登場した次世代ランタイムも、現在の開発現場では有力な選択肢です。

Bun：圧倒的な実行速度とツールの一体化

Bunは実行速度に特化したランタイムであり、Node.jsとの互換性を保ちながら、テストランナーやパッケージマネージャーの機能を内包しています。

JavaScript

// hello-bun.js
const server = Bun.serve({
  port: 3000,
  fetch(request) {
    return new Response("Welcome to Bun 2026!");
  },
});

console.log(`Listening on localhost:${server.port}`);

実行コマンド：

Shell

bun run hello-bun.js

Bunの特徴は、TypeScriptを標準でサポートしている点にあります。

コンパイル設定なしで .ts ファイルを直接実行できるため、開発のスピード感が大幅に向上します。

Deno：セキュリティと標準化の重視

Denoは、Node.jsの生みの親によって開発された「より安全なランタイム」です。

デフォルトでセキュア（ファイルアクセスやネットワーク通信に明示的な許可が必要）
標準でTypeScript、JSXをサポート
URLから直接モジュールをインポートする仕組み

セキュリティを重視するプロジェクトや、依存関係の管理をシンプルに保ちたいエンタープライズ用途で選ばれることが多い環境です。

4. オンライン・サンドボックス環境での実行

開発環境をローカルに構築することなく、ブラウザ上でコードを記述し実行できるサービスも非常に進化しています。

これらは「サンドボックス」と呼ばれ、技術共有やプロトタイプ作成に欠かせません。

代表的なオンライン実行環境

サービス名	主な特徴	向いている用途
StackBlitz	ブラウザ内でNode.jsが動く（WebContainers）	本格的なWebアプリの開発・共有
CodeSandbox	豊富なテンプレートと共同編集機能	チームでのプロトタイプ作成
Playground (Official)	TypeScriptや各フレームワークの公式	仕様確認、バグ報告用

これらのツールを使えば、ライブラリの依存関係を含めた環境構築を一瞬で完了させ、共有用のURLを発行するだけで誰にでも動作するコードを届けることができます。

5. エッジコンピューティングおよびサーバーレス環境

2026年のモダンな開発において無視できないのが、ユーザーの物理的な近く（エッジ）でJavaScriptを実行する環境です。

Cloudflare Workers や Vercel Edge Functions

従来のサーバーサイド実行とは異なり、リクエストが発生した瞬間に世界各地のデータセンターでスクリプトが起動します。

JavaScript

// Cloudflare Workers の例
export default {
  async fetch(request, env, ctx) {
    const url = new URL(request.url);
    return new Response(`You requested: ${url.pathname}`);
  },
};

この実行方法の最大の特徴は、起動の速さ（Cold Startの回避）と、インフラ管理が不要な点にあります。

フロントエンドフレームワーク（Next.jsやRemixなど）のバックエンド処理として、意識することなく利用しているケースも増えています。

JavaScript実行環境の選び方

これほど多くの実行方法がある中で、どれを選択すべきかは目的によって異なります。

学習・デバッグ: ブラウザのコンソールや、公式のPlaygroundが最適です。
Webサイト制作: HTMLからの読み込みに加え、Viteなどのビルドツールを用いたローカル開発環境が必要です。
API・バックエンド開発: Node.js（安定性重視）やBun（速度・効率重視）を選択します。
小規模ツール・スクリプト: DenoやBunならTypeScriptがそのまま動くため便利です。
大規模・高速配信: エッジコンピューティング環境を検討しましょう。

実行時に発生しやすいトラブルと対策

JavaScriptを実行する際に、意図通りに動かないケースがいくつかあります。

代表的な問題とその解決策を確認しておきましょう。

非同期処理の未完了

JavaScriptは非同期処理を多用します。

Promise や async/await の理解が不十分だと、実行順序がバラバラになることがあります。

JavaScript

// 誤った例
const data = fetch('https://api.example.com/data');
console.log(data); // Promise { <pending> } と表示されてしまう

非同期処理の結果を待つには、必ず await を使用するか、.then() チェーンを記述する必要があります。

環境特有のAPIリファレンスエラー

ブラウザで動くコードがNode.jsで動かない、あるいはその逆のパターンも頻発します。

ブラウザ: window, document, localStorage が使用可能。
Node.js: process, fs, path が使用可能。

2026年現在は globalThis を使うことで、実行環境を問わずグローバルオブジェクトにアクセスできるようになっていますが、DOM操作などの物理的な制限は依然として存在します。

まとめ

JavaScriptの実行方法は、単なる「ブラウザで動かす」という枠を超え、用途に応じて最適なランタイムやプラットフォームを選択する時代へと進化しました。

手軽に試すならブラウザコンソール。
本格的な開発ならNode.jsやBun。
セットアップ不要で共有するならStackBlitzなどのオンライン環境。
低レイテンシを求めるならエッジコンピューティング。

それぞれの特徴を理解し、プロジェクトの要件に合わせて使い分けることが、現代のエンジニアには求められています。

まずは、手元のブラウザやターミナルで小さなコードを動かすところから始めてみてください。

JavaScriptが持つ柔軟な実行環境は、あなたの開発体験をより豊かにしてくれるはずです。