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

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

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

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

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

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

開く手順

1. ブラウザで stackblitz.com を開く
2. 新しいプロジェクトのテンプレート（ひな型）の中から 「React」 をえらぶ（言語は JavaScript）
3. 数秒まつと、画面の**左にコード・右に動いている画面（プレビュー）**が出てくる

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

画面の見方

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

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

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

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

左のコードの中に、こんな部分があります。

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

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

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

保存すると（多くの場合は自動で保存されます）、右の画面がすぐに変わります。

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

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

ここがポイント

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

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

まとめ

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

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