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

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

フロントエンドのブログを書くのにStackBlitzが便利そうなので紹介します。ブログに埋め込んでパッと動かせます。
Clock Icon2024.02.14

最近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が便利そうだな、と思って使ってみたので紹介しました。

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

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

Share this article

facebook logohatena logotwitter logo

© Classmethod, Inc. All rights reserved.