StackBlitzでReactを動かそう（むずかしい準備なし）

たける Reactを動かすって、パソコンに何か入れたりするんですか？むずかしそう…。

りこ ううん、今回は何も入れない。StackBlitz っていう、ブラウザの中でReactが動くサービスを使うよ。開いたらすぐ書ける。

StackBlitz（スタックブリッツ）ってなに？

StackBlitzは、ブラウザの中に「小さな開発の部屋」ができる無料のサービスです。アプリを入れたり、むずかしい準備をしたりしなくても、ページを開くだけでReactを書いて動かせます。

このシリーズでは、これから何回もこの部屋を使います。

開く手順

1. ブラウザで ViteのReact用ひな型 を開く
2. React＋JavaScript のプロジェクトが開く。作成確認が出た場合は内容を確認して進む
3. 数秒まつと、画面の**左にコード・右に動いている画面（プレビュー）**が出てくる

※ボタンの場所や名前は、サービスの更新で少し変わることがあります。「React のひな型をえらぶ」イメージで探してみてください。

画面の見方

StackBlitzの画面は、ざっくり2つに分かれています。

• 左（コード） … プログラムを書くところ
• 右（プレビュー） … 書いたものが実さいに動いて表示されるところ

コードを直すと、右の画面がすぐに変わります。これがStackBlitzの気持ちいいところです。

さっそく書きかえてみよう

左の src/App.jsx を開き、中身を次のコードに置き換えます。最初から同じ文章があるとは限りません。

export default function App() {
  return <h1>Hello !!</h1>
}

この Hello !! のところを、自分の名前に書きかえてみましょう。

export default function App() {
  return <h1>こんにちは、たける！</h1>
}

コードの変更がプレビューに反映されると、右の画面が変わります。プレビューへの反映と、アカウントへの永続的な保存は別です。

たける ほんとだ、名前に変わった！自分で書いたものが、すぐ画面に出るの楽しい！

りこ それが大事。これから作るものは、ぜんぶこの部屋で動かして、結果を見ながら進めるよ。

ここがポイント

• 自分が作ったものが、その場で画面に出る
• まちがえても、書き直せばすぐ直る（こわくない！）
• 作ったものは、リンクで友だちや家族に見せることもできる（保存にはアカウント登録が必要な場合があります。おうちの人と相談してね）

これから先の回では、「StackBlitzで○○を書いてみよう」と出てきます。そのときは、この部屋にコードを書いて、右のプレビューで結果をたしかめてください。

まとめ

• StackBlitz は、ブラウザだけでReactを動かせるサービス（準備いらず）
• 画面は「左＝コード／右＝プレビュー（結果）」に分かれている
• コードを直すと、結果がすぐに変わる
• まちがえても書き直せばOK。自分の作ったものがすぐ見えるのが楽しい

次の第7回では、いよいよ自分だけの「部品（コンポーネント）」を作ります。まずは名まえカードから！

確認してみる

src/App.jsxを置き換え、プレビューを確認する。開けない場合はPCの別ブラウザや学校・家庭のネットワーク制限を確認し、後のローカル環境の回も使える。

仕様・手順の参照先