2026年05月01日
カテゴリ： パソコン
■ JSXファイルをワンクリックで開けるようにした話｜MacBook初心者のAI勉強記録
noteに新しい記事を書きました。
🟦 JSXファイルをワンクリックで開く方法（MacBook版・完全初心者向け）
https://note.com/nifty_liger5353/n/n14be25e8350e
今回は、AIに作ってもらったJSXファイルを、MacBookでどうやって開くのか分からなかったところから始まった話です。
正直、少し前までReactもJSXも意味が分かっていませんでした。
きっかけは、普段仕事で使っている施工計画書やExcel関係の書類を、AIで自動化できないかと思ったことです。
ClaudeにExcelファイルを投げてみたところ、返ってきたのが見たこともないJSXファイル。
「これはどこで開くの？」
「どうやって動かすの？」
「npm run devって何？」
「localhostって何？」
完全に初心者状態でした。
でも、せっかくAIがコードを作ってくれたので、何とかして動かしてみたい。
そこで、MacBookでJSXファイルをワンクリックで開ける環境を作ってみました。
今回の記事では、
・VSCodeの入れ方
・Reactを動かすための準備
・App.jsxの編集方法
・start-react.commandの作り方
・ダブルクリックで自動起動する方法
・実際につまずいたトラブルと解決方法
あたりを、完全初心者向けにまとめています。
自分自身が何も分からない状態から始めたので、専門用語をできるだけ使わずに書きました。
Reactを本格的に勉強したいというより、
「AIが作ってくれた画面を、とりあえず自分のMacBookで開いて確認したい」
という人向けの記事です。
特に、私のように
・最近MacBookを買った
・AIで何か作ってみたい
・でもプログラミングは初心者
・JSXとかReactとか言われても分からない
・でも動いたら面白そう
という人には、かなり近い内容だと思います。
仕事で使う施工計画書や写真台帳、現場書類なども、将来的にはこういう仕組みで少しずつ自動化できるのではないかと感じています。
今はまだ勉強中ですが、MacBookとAIを使って、少しずつできることが増えてきました。
50歳前後からでも、新しいことを覚えるのは遅くないと思っています。
むしろ、現場仕事で困っていることがあるからこそ、AIやReactのような道具に意味を感じます。
今回の記事はこちらです。
🟦 JSXファイルをワンクリックで開く方法（MacBook版・完全初心者向け）
https://note.com/nifty_liger5353/n/n14be25e8350e
AIに作ってもらったものを、自分のMacBookで実際に動かせた時は、なかなか感動しました。
まだまだ初心者ですが、こういう小さな成功体験を積み重ねていきたいと思います。
★Apple MacBook Air 13インチ Z124000E6 スペースグレイ Apple M1チップ（8コアCPU/7コアGPU）/SSD 256GB/メモリ 16GB)【送料無料】
noteに新しい記事を書きました。
🟦 JSXファイルをワンクリックで開く方法（MacBook版・完全初心者向け）
https://note.com/nifty_liger5353/n/n14be25e8350e
今回は、AIに作ってもらったJSXファイルを、MacBookでどうやって開くのか分からなかったところから始まった話です。
正直、少し前までReactもJSXも意味が分かっていませんでした。
きっかけは、普段仕事で使っている施工計画書やExcel関係の書類を、AIで自動化できないかと思ったことです。
ClaudeにExcelファイルを投げてみたところ、返ってきたのが見たこともないJSXファイル。
「これはどこで開くの？」
「どうやって動かすの？」
「npm run devって何？」
「localhostって何？」
完全に初心者状態でした。
でも、せっかくAIがコードを作ってくれたので、何とかして動かしてみたい。
そこで、MacBookでJSXファイルをワンクリックで開ける環境を作ってみました。
今回の記事では、
・VSCodeの入れ方
・Reactを動かすための準備
・App.jsxの編集方法
・start-react.commandの作り方
・ダブルクリックで自動起動する方法
・実際につまずいたトラブルと解決方法
あたりを、完全初心者向けにまとめています。
自分自身が何も分からない状態から始めたので、専門用語をできるだけ使わずに書きました。
Reactを本格的に勉強したいというより、
「AIが作ってくれた画面を、とりあえず自分のMacBookで開いて確認したい」
という人向けの記事です。
特に、私のように
・最近MacBookを買った
・AIで何か作ってみたい
・でもプログラミングは初心者
・JSXとかReactとか言われても分からない
・でも動いたら面白そう
という人には、かなり近い内容だと思います。
仕事で使う施工計画書や写真台帳、現場書類なども、将来的にはこういう仕組みで少しずつ自動化できるのではないかと感じています。
今はまだ勉強中ですが、MacBookとAIを使って、少しずつできることが増えてきました。
50歳前後からでも、新しいことを覚えるのは遅くないと思っています。
むしろ、現場仕事で困っていることがあるからこそ、AIやReactのような道具に意味を感じます。
今回の記事はこちらです。
🟦 JSXファイルをワンクリックで開く方法（MacBook版・完全初心者向け）
https://note.com/nifty_liger5353/n/n14be25e8350e
AIに作ってもらったものを、自分のMacBookで実際に動かせた時は、なかなか感動しました。
まだまだ初心者ですが、こういう小さな成功体験を積み重ねていきたいと思います。
★Apple MacBook Air 13インチ Z124000E6 スペースグレイ Apple M1チップ（8コアCPU/7コアGPU）/SSD 256GB/メモリ 16GB)【送料無料】
お気に入りの記事を「いいね！」で応援しよう
[パソコン] カテゴリの最新記事
-
MacでローカルAIを作った話【完全オフライ… 2026年05月03日
【毎日開催】
15記事にいいね！で1ポイント
PR
朝練100km道志村
酔猫庵さん
満足のいく家をつく… ＨＩＲＯＣＨＡＮ ＳＵＺＵＫＩさん
ねこまた徒然草 nekomata1963さん
こんぱすコーチの全… まさやん0386さん
CHOCO WOOD みみさりさん
ゆめびより ゆめこう… ゆめこうぼう 桜餅さん
Twitterでは呟ききれ… アンビンバンコさん
鳥取・島根で田舎暮… 夢家工房さん
モールスキンとめぐ… 日曜日の羊さん
クーパーな日々 おじやんミニクーパーさん
満足のいく家をつく… ＨＩＲＯＣＨＡＮ ＳＵＺＵＫＩさん
ねこまた徒然草 nekomata1963さん
こんぱすコーチの全… まさやん0386さん
CHOCO WOOD みみさりさん
ゆめびより ゆめこう… ゆめこうぼう 桜餅さん
Twitterでは呟ききれ… アンビンバンコさん
鳥取・島根で田舎暮… 夢家工房さん
モールスキンとめぐ… 日曜日の羊さん
クーパーな日々 おじやんミニクーパーさん
コメント新着
takaak
takaakのブログへようこそ DIYのウッドデッキやガーデニングの話題。パパの育児日記です。
カテゴリ
カテゴリ未分類
(513)ウッドデッキ
(48)散歩
(9)ウッドフェンス
(10)ガーデニング
(68)建物探訪
(3)子育て
(42)食道楽
(34)仕事
(75)家
(11)アフィリエイト
(24)小物
(4)記念日
(14)風景
(8)政治
(2)車
(27)テレビ
(2)電化製品
(6)優生０ヶ月
(14)優生１ヶ月
(16)優生２ヶ月
(20)優生３ヶ月
(15)優生４ヶ月
(19)優生５ヶ月
(17)優生６ヶ月
(15)優生７ヶ月
(18)優生８ヶ月
(16)優生９ヶ月
(21)優生１０ヶ月
(13)優生１１ヶ月
(3)優生１歳０ヶ月
(4)優生１歳１ヶ月
(2)優生１歳２ヶ月
(6)優生１歳３ヶ月
(5)優生１歳４ヶ月
(3)優生１歳５ヶ月
(7)優生１歳６ヶ月
(6)優生１歳７ヶ月
(4)優生１歳8ヶ月
(4)優生１歳9ヶ月
(9)優生１歳10ヶ月
(1)優生１歳11ヶ月
(1)優生２歳０ヶ月
(1)ゲーム
(3)写真
(2)ブログランキング
(1)お出かけ
(9)健康
(11)お楽しみ
(5)ゴーヤ（にがうり）
(26)自転車
(22)仮想通貨
(4)山
(3)パソコン
(2)キーワードサーチ
▼キーワード検索
カレンダー
フリーページ
© Rakuten Group, Inc.
