最近ReactやNext.jsを使うことが多いので、フロントエンドに関するブログを書こうと思っています（宣言）。
ただ、フロントエンドってパッと動くものが無いとイメージ湧きにくいんですよね。
GitHub等使ってコード共有するのもいいんですが、git cloneして、npm installして、npm run devして…、という手順がとても面倒です。
たぶん、読者の方も同じように感じるでしょう。もっとパッと動かしたい、と。
そこで、フロントエンドをパッと動かすのに StackBlitz が便利そうだな、と思って使ってみたので紹介します。
StackBlitzとは
StackBlitzeはWebブラウザで動くオンラインのコードエディタサービスです。
Next.jsやReact、Vue.jsなどのフレームワークを使ったプロジェクトを作成し、そのままブラウザ上で動かすことができます。
こんな感じに、ブログに環境を埋め込むことができます。
DevelopersIOの場合は、iframeを使って埋め込めます。 他のブログサービスでは埋め込み方が異なるかもしれません。
<iframe
style="width:100%;height:520px;max-width:960px;"
src="【埋込URL】" >
</iframe>環境を作ってみる
StackBlitzの公式ページでGitHubアカウントでログインすると、すぐにプロジェクトを作成できます。
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の公式ドキュメントやお使いのブログサービスのドキュメントを参考にしてください。
おわりに
フロントエンドをパッと動かすのにStackBlitzが便利そうだな、と思って使ってみたので紹介しました。
これでフロントエンドの記事を書いて、そのコードをパッと動かせて、読者の方にもわかりやすくなるかな、と思います。
これからフロントエンドの記事を書いていくぞ。
26
