![VS Codeのように使えてCodePenより便利なStackBlitzの使い方](https://iwb.jp/wp-content/uploads/2022/06/stackblitz-create-project-react-typescript-howto.png)
StackBlitzとは
クリックするだけでコーディングを開始できるオンライン統合開発環境。
CodePenの場合、例えばReact + TypeScriptでコーディングしたい場合は色々と設定する必要があるが、StackBlitzだとCREATE A NEW PROJECTで「React」を選択するだけで自動的に開発環境が作成可能。
![StackBlitz CREATE PROJECT Frontend](https://iwb.jp/wp-content/uploads/2022/06/stackblitz-create-project-react-typescript-howto-02.png)
CodePenのデフォルト状態のようにVanillaで開発することも可能です。
![StackBlitz CREATE PROJECT Vanilla](https://iwb.jp/wp-content/uploads/2022/06/stackblitz-create-project-react-typescript-howto-03.png)
StackBlitzの使い方
StackBlitzにアクセスして、右上のSign inからGitHubアカウントでログインする。
![VS Codeのように使えてCodePenより便利なStackBlitzの使い方](https://iwb.jp/wp-content/uploads/2022/06/stackblitz-create-project-react-typescript-howto.png)
ログインしたらCREATE A NEW PROJECTから開発環境を選択可能になるので、どれかを選択する。
![StackBlitz CREATE PROJECT Frontend](https://iwb.jp/wp-content/uploads/2022/06/stackblitz-create-project-react-typescript-howto-02.png)
例えばReact (TypeScript)を選択すると下図の画面に切り替わってコーディングができるようになる。
![StackBlitzのエディタ画面](https://iwb.jp/wp-content/uploads/2022/06/stackblitz-create-project-react-typescript-howto-editor.png)
ブラウザに表示されているURLをほかの人に渡せばプロジェクトを共有できる。
GitHubのアイコンがある「Connect repository」ボタンを押せばGitHubリポジトリの作成およびプロジェクトファイルのプッシュを行って同期も可能になる。
プッシュ後は画面左上のCommitボタンでコミットできます。
![StackBlitz Connect new GitHub repository](https://iwb.jp/wp-content/uploads/2022/06/stackblitz-create-project-react-typescript-howto-editor-github.png)
https://github.com/iwbjp/react-ts-vqn2ic
正規表現で検索が可能
StackBlitzはCodePenとは違い、正規表現の検索が可能。
大文字・小文字を区別して検索もできるので使いやすい。
![](https://iwb.jp/wp-content/uploads/2022/06/stackblitz-create-project-react-typescript-howto-editor-search.png)
Firebase Hostingに反映可能
StackBlitzはFirebase Hostingへ反映させることもできる。
やり方はFirebaseにログインして事前に用意したHostingにDeployボタンを押して反映させるだけ。
![StackBlitz Firebase Hosting](https://iwb.jp/wp-content/uploads/2022/06/stackblitz-create-project-react-typescript-howto-editor-firebase.png)
https://my-stackblitz-33fd0.firebaseapp.com/
パッケージをインストール可能
![](https://iwb.jp/wp-content/uploads/2022/06/stackblitz-create-project-react-typescript-howto-editor-dependencies.png)
StackBlitzはDEPENDENCIESからパッケージをインストールできる。
例えばjqueryをインストールしたい場合は「Enter package name」にjqueryと入力してEnterキーを推すだけでインストールして利用できる。
右下にConsoleがあるのでconsole.logの確認も可能です。