【50代現場のおっさん】JSXファイルをワンクリックで開く方法（MacBook 版・Windows版　React/Vite完全初心者向け）

JSXファイルの開き方

上のリンク記事を読めばJSXファイルはとりあえず簡単に開きます。

reactを使ってJSXファイルを開きたい人、理解を深めたい人は本文をどうぞ！

※この記事は、Copilot に JSX や React の基礎を質問しながら、実際に試行錯誤したログを整理してまとめています。

完全初心者が「どこで詰まるのか」を意識して書きました。
JSXファイルをブラウザで開く・実行する最短手順です。

🟧 はじめに：きっかけは「計画書の自動化」だった

React を勉強しようと思ったわけではありません。 きっかけは、計画書を自動化したかっただけでした。

計画書を 「これ、AIに渡したら自動化できるんじゃないか？」 と思って、何も知らずに Claude に サンプルのExcel ファイルを投げたんです。

すると返ってきたのは、 見たこともない JSX ファイル。

React も JSX も知らない状態で、 突然「これは JSX というもので…」と説明されても意味不明。

でも、せっかく AI が作ってくれたコードだから **“とりあえず動かしてみたい”**と思った。

そこから始まったのが、 **「JSX をどうやって開くのか分からない問題」**でした。

• どこで開くの？

• どうやって動かすの？

• npm run dev？

• localhost？

• ポート番号が毎回違う？

• VSCode が開かない？

調べても情報がバラバラで、 **「結局どうすれば JSX を確実に開けるのか」**が分からない。

そこで僕は、 “JSXファイルをワンクリックで開ける環境（JSXビューアー）” を自作することにしました。

🟧 JSX を開くための準備（MacBook 専用・初心者向け）

JSX を開くには、まず 「JSX を動かすための箱」 を作ります。 難しい名前（React とか Vite）は一旦忘れて大丈夫です。

この記事では、 “箱を作る → JSX を表示する → ワンクリックで開く” この順番で進めます。

🟧 VSCode（コードを書くアプリ）をインストールする

JSX を編集するには、 VSCode（Visual Studio Code）という無料アプリが必要です。

まだ入れていない人は、先にこれを入れてください。

🟩 ① VSCode の公式サイトを開く

ブラウザで「VSCode」と検索して公式サイトを開く。

🟩 ② 「Download for Mac」をクリック

Mac 用の VSCode がダウンロードされる。

🟩 ③ ダウンロードした zip を開く

中に「Visual Studio Code.app」が入っている。

🟩 ④ それを「アプリケーション」フォルダに移動

ドラッグ＆ドロップで OK。

🟩 ⑤ VSCode を起動

Launchpad から「Visual Studio Code」をクリック。

🟧 JSX を動かすための“箱”を作る（専門用語なし）

ここからは、 ターミナルにコピペしてリターンキーを押すだけで進めます。

🟩 ① OneDrive の中に「react」というフォルダを作る

Finder → OneDrive → 新規フォルダ → 名前を react にする。

※僕はOneDriveの中に作りましたが任意の場所で問題ないと思います。

🟩 ② ターミナルを開く

⌘ + Space →「terminal」と入力 → Enter。

黒い画面が開く。

🟩 ③ 黒画面の「%」の続きにコピペしてリターンキー

※OneDriveを①で指定した任意のフォルダに変更してください。

cd ~/OneDrive/react

🟩 ④ “箱を作るコマンド”をコピペしてリターンキー

npm create vite@latest vite-project --template react

続けて：

cd vite-project

さらに：

npm install

これで JSX を動かすための箱（vite-project）が完成。

🟧 JSXビューアーで表示される JSX（App.jsx）

ここからは VSCode を使います。

🟩 VSCode の左側にある「vite-project」を開く

左側の一覧に「vite-project」が表示されている。

🟩 「src」をクリック → 「App.jsx」をクリック

右側に App.jsx の中身が表示される。

🟩 App.jsx の中身を全部消して、下のコードをコピペする

export default function App() {
  return (
    <div style={{ padding: '24px', fontFamily: 'sans-serif' }}>
      <h1>JSXファイルをワンクリックで開く方法（JSXビューアー）</h1>
      <p>この画面は JSX ビューアーで表示しています。</p>
    </div>
  );
}

⌘ + S で保存。

🟧 JSX をワンクリックで開くスクリプト（start-react.command）の作り方）

ここは初心者が一番つまずく部分なので、 一つずつ丁寧に説明します。

🟩 ① テキストエディットを開く

Launchpad →「テキストエディット」。

🟩 ② 画面上部の「フォーマット」→「プレーンテキスト」をクリック

これをしないと RTF 形式になって動きません。

🟩 ③ 下のコードをそのままコピペする

#!/bin/bash

# React プロジェクトへ移動
cd ~/OneDrive/react/vite-project

# VSCode を開く
open -a "Visual Studio Code" .

# Vite のログを一時ファイルに保存しながら起動
npm run dev > vite.log 2>&1 &

# ポート番号がログに出るまで待つ（Vite が起動するまで待つ）
sleep 3

# ログからポート番号を抽出
PORT=$(grep -o "http://localhost:[0-9]*" vite.log | head -n 1 | sed 's/.*://')

# ブラウザを自動で開く
open "http://localhost:$PORT"

🟩 ④ 「ファイル」→「保存」

保存場所は デスクトップ。

🟩 ⑤ ファイル名を start-react.command にする

※ .command がとても重要。

🟩 ⑥ 権限を付ける

ターミナルで：

chmod +x ~/Desktop/start-react.command

これで ダブルクリックで実行できるファイルになる。
デスクトップに保存したstart-react.commandファイルをクリックすると自動的に表示されます。
サンプルとしてここでは下記の表示が出れば成功

🟧 実際に起きたトラブルと解決方法

僕が実際に経験したトラブルです。

● VSCode が開かない

→ open -a "Visual Studio Code" . を使うと確実に開く。

● Safari が「サーバーに接続できません」

→ 原因：Vite がまだ起動していない → Safari が先に開くと接続できない → sleep 3 を入れて Vite が起動するまで待つ と解決

● ポート番号が毎回違う

→ ログからポート番号を自動取得する方式にしたので安定。

● RTF で保存して動かない

→ テキストエディットを「プレーンテキスト」に変更して解決。

● main.jsx を触って画面が真っ白

→ main.jsx は触らない。App.jsx だけ編集する。

🟧 完成：ワンクリック JSX ビューアーの動作

start-react.command をダブルクリックすると：

• ターミナル自動起動

• react/vite-project に自動移動

• VSCode 自動起動

• npm run dev 自動実行

• ポート番号自動検出

• Safari 自動起動

• JSX が表示される

もう人間の操作はゼロ。

🟧 まとめ

• JSX をワンクリックで開ける環境は初心者の強い味方

• 毎回の起動手順で悩む時間がゼロになる

• 学習や開発に集中できる

• AI が生成した JSX をすぐ確認できる

• note の下書きビューアーとしても使える

「React が難しい」と感じていた原因の多くは、 “起動手順の複雑さ” でした。

それをワンクリックにすることができました。

※ここまではMacBook版の解説でした。Windows版の解説は有料部分にあります。

この記事の正確性を再確認しclaudeで作成したPDF（JSXファイルをワンクリックで開く方法）とJSX完全セットアップガイドを有料版として公開します。
PDFは14ページあります。
参考に最初の2ページを掲載します。
（Mac版とWindows版両方あります）

【有料部分内容】
* Mac版PDF14ページ
* Windows版PDF14ページ
* JSX完全セットアップHTML版
・よくあるエラー対策集
・コピペ用コマンド集