VS Codeのように使えてCodePenより便利なStackBlitzの使い方

StackBlitzとは

クリックするだけでコーディングを開始できるオンライン統合開発環境。

CodePenの場合、例えばReact + TypeScriptでコーディングしたい場合は色々と設定する必要があるが、StackBlitzだとCREATE A NEW PROJECTで「React」を選択するだけで自動的に開発環境が作成可能。

StackBlitz CREATE PROJECT Frontend

CodePenのデフォルト状態のようにVanillaで開発することも可能です。

StackBlitz CREATE PROJECT Vanilla

StackBlitzの使い方

StackBlitzにアクセスして、右上のSign inからGitHubアカウントでログインする。

VS Codeのように使えてCodePenより便利なStackBlitzの使い方

ログインしたらCREATE A NEW PROJECTから開発環境を選択可能になるので、どれかを選択する。

StackBlitz CREATE PROJECT Frontend

例えばReact (TypeScript)を選択すると下図の画面に切り替わってコーディングができるようになる。

StackBlitzのエディタ画面

ブラウザに表示されているURLをほかの人に渡せばプロジェクトを共有できる。

GitHubのアイコンがある「Connect repository」ボタンを押せばGitHubリポジトリの作成およびプロジェクトファイルのプッシュを行って同期も可能になる。

プッシュ後は画面左上のCommitボタンでコミットできます。

StackBlitz Connect new GitHub repository

https://github.com/iwbjp/react-ts-vqn2ic

正規表現で検索が可能

StackBlitzはCodePenとは違い、正規表現の検索が可能。

大文字・小文字を区別して検索もできるので使いやすい。

Firebase Hostingに反映可能

StackBlitzはFirebase Hostingへ反映させることもできる。

やり方はFirebaseにログインして事前に用意したHostingにDeployボタンを押して反映させるだけ。

StackBlitz Firebase Hosting

https://my-stackblitz-33fd0.firebaseapp.com/

パッケージをインストール可能

StackBlitzはDEPENDENCIESからパッケージをインストールできる。

例えばjqueryをインストールしたい場合は「Enter package name」にjqueryと入力してEnterキーを推すだけでインストールして利用できる。

右下にConsoleがあるのでconsole.logの確認も可能です。