Electron Fiddleとは？Electronアプリをすばやく試作・実験できる公式ツール

Electron Fiddleとは？

Electron Fiddleは、Electronアプリをすばやく試作・実験できる公式ツールです。

特徴：

• 簡単にElectronアプリを作成・実行・パッケージングできる
• Electronのバージョンを選んでテストできる
• GitHub Gistに保存・共有もできる

Electronについては、こちらに記載していますので、事前にご確認ください。

インストール方法（Windowsの場合）

事前準備

Windowsが「32ビット／64ビット」を確認する

1. スタートボタンを右クリック
2. 「システム」を選択
3. 「デバイスの仕様」セクションを見る
4. 「システムの種類」にこう表示されます：

表示される内容	意味
64ビット オペレーティング システム, x64 ベース プロセッサ	→ WindowsもCPUも64ビット
32ビット オペレーティング システム, x86 ベース プロセッサ	→ WindowsもCPUも32ビット

表示の例）

① ダウンロード

公式サイトから最新インストーラーをダウンロードします：

• Electron Fiddleダウンロードページ
  https://www.electronjs.org/fiddle

ページ内にある「32ビット／64ビット」の該当する方の「Download for Windows」ボタンをクリック。

---

② インストール

ダウンロードしたインストーラー（ElectronFiddleSetup.exeなど）を実行して、
画面に沿ってインストーします。（特別な設定は不要）

使い方の流れ（基本）

① Electron Fiddleを起動

スタートメニューから「Electron Fiddle」と検索して起動します。

---

② 画面構成

エリア	説明
左ペイン	main.js、renderer.js、index.htmlなどアプリ構成ファイル
右ペイン	ファイルごとのエディタ（コード編集）
上部ツールバー	Electronバージョン選択、Runボタン、Save、Gist共有

③ サンプルを動かしてみる

Electron Fiddle起動直後には、すでに簡単なサンプルコードがロードされています。

この状態で上部ツールバーの
▶️（再生ボタン）を押すだけで、サンプルElectronアプリがすぐに実行されます！

---

④ Electronバージョンを切り替える

ツールバーの「Electron Version」ドロップダウンから、使いたいElectronバージョンを選べます。

• 最新版
• 安定版（Stable）
• ベータ版（Beta）

に簡単に切り替えて動作確認ができます。
一番最初に利用する際に、クリックすると自動的にダウンロードします。

⑤ コードを書き換えて試す

• main.js → Electronのメインプロセスコード
• renderer.js → Web側（レンダラープロセス）のコード
• index.html → Webページの見た目（HTML）

これらを書き換えて、すぐに実行＆確認できます。

公式ドキュメントリンク一覧

内容	サイト名・リンク	URL文字列
Electron Fiddle公式ページ	Electron Fiddle公式	https://www.electronjs.org/fiddle
Electron Fiddle GitHubリポジトリ	Electron Fiddle GitHub	https://github.com/electron/fiddle