フロントエンドのブログを書くのにStackBlitzが便利そう

最近ReactやNext.jsを使うことが多いので、フロントエンドに関するブログを書こうと思っています（宣言）。

ただ、フロントエンドってパッと動くものが無いとイメージ湧きにくいんですよね。

GitHub等使ってコード共有するのもいいんですが、git cloneして、npm installして、npm run devして…、という手順がとても面倒です。

たぶん、読者の方も同じように感じるでしょう。もっとパッと動かしたい、と。

そこで、フロントエンドをパッと動かすのに StackBlitz が便利そうだな、と思って使ってみたので紹介します。

StackBlitzとは

StackBlitzeはWebブラウザで動くオンラインのコードエディタサービスです。

Next.jsやReact、Vue.jsなどのフレームワークを使ったプロジェクトを作成し、そのままブラウザ上で動かすことができます。

• StackBlitz

こんな感じに、ブログに環境を埋め込むことができます。

DevelopersIOの場合は、iframeを使って埋め込めます。 他のブログサービスでは埋め込み方が異なるかもしれません。

<iframe 
  style="width:100%;height:520px;max-width:960px;" 
  src="【埋込URL】" >
</iframe>

環境を作ってみる

StackBlitzの公式ページでGitHubアカウントでログインすると、すぐにプロジェクトを作成できます。

• StackBlitz

New Project をクリックして、 React を選択します。

そうすると、すぐにReactの環境が作成されます。

左側はVSCodeライクなエディタ、右側はプレビューが表示されて、すぐにでもReactのコードを書き始めることができそうです。いいですね。

外部パッケージをインストールする

StackBlitzは外部のnpmパッケージをインストールできます。 サイドバーの Dependencies をクリックして開き、インストールしたいパッケージ名を入力して追加します。

今回は Material UI を入れてみましょう。

ドキュメントを参考に、以下4つのパッケージを追加しました。

• @emotion/react
• @emotion/styled
• @mui/material
• @mui/icons-material

DEPENDENCIES に追加されたパッケージが増えていることがわかります。

あとは、いつも通りコードを書いていけばOKです。

試しにボタンを追加して、クリックしたらダイアログを表示するみたいなコードを書いてみましょうか。

そうすると、こんな感じになります。

実際動かすと、こうです。ボタンをクリックしてみてください。ダイアログが開いたと思います。 コードも見えるし、動かすこともできる。いいですね。

環境をブログで共有する

ブログ等でStackBlitzの環境を共有するには、 Share ボタンをクリックします。

Embed タブを選択して、 Copy URL をクリックして埋め込みURLをコピーします。

このURLのままだと埋め込めないので、前述の通り iframe を使って埋め込みます。

<iframe 
  style="width:100%;height:520px;max-width:960px;" 
  src="https://stackblitz.com/edit/introduce-stackblitz?embed=1&file=src%2FApp.tsx">
</iframe>

他のブログでは埋め込み方が異なるかもしれません。 StackBlitzの公式ドキュメントやお使いのブログサービスのドキュメントを参考にしてください。

• 参考：Embedding projects | StackBlitz Docs

おわりに

フロントエンドをパッと動かすのにStackBlitzが便利そうだな、と思って使ってみたので紹介しました。

これでフロントエンドの記事を書いて、そのコードをパッと動かせて、読者の方にもわかりやすくなるかな、と思います。

これからフロントエンドの記事を書いていくぞ。