2024.07.28

StackBlitzとは？初心者向け便利で簡単なツールを紹介！

プログラミング

はじめに

普段の学習の中で、あるコードをサッと試したいとき、ローカルで開発環境を作成するのは大変ではないでしょうか。また、初学者の方にとっては、コードの練習のために開発環境の構築を試みるものの、その環境構築に詰まってしまう…ということは「初心者あるある」ではないでしょうか。そんな時におすすめなのが、Web上でフロントエンド技術を利用できるStackBlitzです。StackBlitzでは開発環境の構築が不要で、Webサイトにアクセスするだけでコードを試すことができます。今回は、この便利なツールであるStackBlitzの基本的な利用方法について説明します。

この記事について

記事の目的

StackBlitzとは何かを知る
StackBlitzを使うメリットを理解する
StackBlitzを使用してコードを試せるようになる

対象の方

初学者の方
StackBlitzの使い方を知りたい方

StackBlitzとは

StackBlitzは、Webブラウザ上で直接動作するオンラインコードエディタであり、統合開発環境（IDE）です。主にJavaScript、TypeScript、React、Angular、Vue.jsなどのフロントエンドフレームワークやライブラリの開発に利用できます。フロントエンド技術以外にも、PythonやWordPressなどにも対応しています。

IDEとは

IDE（統合開発環境）とは、開発者がソフトウェアコードを効率よく開発するための便利なツールです。StackBlitzのようなサービスは、このIDE技術を活用して提供されています。IDEには、アプリケーションの構築に必要なツールがまとめられており、開発環境の構築が不要で、すぐに開発を始めることができます。StackBlitz以外の有名なIDEサービスには、CodeSandBoxやAWSのCloud9があります。これらのツールを使用すれば、どこでも簡単に開発ができるようになります。

使用料金について

気になる料金ですが、個人プランは無料で利用できます。作成できるプロジェクト数は無制限です（2024年7月現在）。プライベートプロジェクトや外部APIを使用するにはアップグレードが必要ですが、個人で学習を目的する場合は無料プランで十分かと思います。

StackBlitzの主な特徴

即時の開発環境の構築とライブプレビュー

ブラウザ上ですぐにプロジェクトを開始でき、環境構築のためのインストールや設定が不要です。構築したプロジェクトでは、コードを編集するとホットリロードにより結果がすぐにプレビューされるため、素早いフィードバックが得られます。
GitHubとの連携

プロジェクトをGitHubリポジトリと連携させることができ、Web上で簡単にコードをpushしたり、cloneすることが可能です。
クラウドベースの環境

クラウド上でコードが保存されるため、どこからでもアクセス可能で、チームとの共有をスムーズに行うことができます。
NPMサポート

NPMパッケージをインストールして、プロジェクトに組み込むことができます。

使用するメリット

簡単なスタートアップ

環境構築が不要で、初心者から上級者まで誰でも気軽にプロジェクトを開始できます。
時間とリソースの節約

設定やインストールの手間が不要で、すぐにWeb上に環境構築ができるため、構築のための時間を効率化し、ローカルのストレージ容量を節約することができます。
どこからでもアクセスできて、プロジェクトの共有が簡単

Webにアクセスできる環境があれば、どこからでも開発ができます。少し使いづらいですが、スマホからでも操作可能です。自身のプロジェクトを他の人と共有することも簡単です。例えば、チームメンバーにコードの確認をお願いする際には、プロジェクトのURLを共有するだけで、メンバーはブラウザ上ですぐに確認できます。GitHubにローカルのコードをpushして…といった作業が不要になり、コードの確認が容易になります。

※チームで共同作業など、StackBlitzをチームで使用するには有料のサブスクリプションが必要です。
プロジェクトが作成数が無制限

公開プロジェクトの作成数が無制限で使用できます（2024年7月現在）。StackBlitzに似たサービスであるCodeSandBoxでは、プロジェクト作成数に制限がありますが、StackBlitzは制限がありません。
ローカル開発環境に近い操作性

StackBlitzでは、ローカルのVSCodeと同様にコンソールでnpmを実行してパッケージをインストールします。CodeSandBoxではDependenciesでパッケージをインストールする形になりますが、StackBlitzはローカル開発環境に近い操作性を体験できます。

アカウントの作成方法

StackBlitzはGitHubアカウント連携でアカウントを作成します。GitHubアカウントを準備した上で以下の手順を行います。

StackBlitzのサイトにアクセス

StackBlitzのサイトにアクセスし、「Create your first project」または「Get started」をクリックします。
GitHub連携の選択

次の画面に遷移し、「Continue with GitHub」をクリックします。
GitHubにログイン

GitHubにログインしていない場合は、以下のページが開くのでログインします。
GitHubと連携

GitHubにログイン後は以下の画面に遷移するので、「Authorize StackBlitz」をクリックし、GitHubと連携します。
無料プランの選択

無料枠でアカウントを作成する場合は、「Personal projects as a hobby」を選び、「Go to StackBlitz」をクリックします。
ダッシュボードに遷移

アカウントが作成されると、ダッシュボードに遷移します。この一連の流れでアカウントを作成することができます。

StackBlitzの使い方

では実際にどのように使用するか、Reactアプリケーションを例に使い方を説明します。このハンズオンではTailwindCSSを使用し、簡単なカウントアップアプリを作成します。ハンズオンを通して、ローカルで開発する場面との違いがあるのか、見ていきましょう。

このハンズオンでは下記のカウントアップアプリを作成します。

プロジェクトの作成

新しいプロジェクトの作成

StackBlitzのダッシュボードの「New project」をクリックします。
プロジェクトの選択

モーダルが開き、プロジェクトの一覧が表示されます。Frontendタブを選択し、Reactをクリックします。
プロジェクトの作成

通信状況にもよりますが、わずかな時間でプロジェクトが作成されます。ローカルでプロジェクトを作成する時よりも、素早くReactが起動するのを実感できます。
画面の各部分の説明

画面の各部分は以下の通りです。UIはVSCodeとほぼ同じで、使用感や機能面で共通点がいくつかあります。普段からVSCodeを使っている方はすぐに使用を開始できるかと思います。

コードの編集

App.jsxの編集

App.jsxを開き、以下のようにコードを編集します。

// App.jsx

import React, { useState } from 'react';
import './App.css';

function App() {
  const [count, setCount] = useState(0);

  return (
    <div className="flex justify-center items-center">
      <div className="bg-white p-10 rounded shadow-lg text-center">
        <h1 className="text-2xl font-bold mb-4">Counter App</h1>
        <p className="text-4xl mb-4">{count}</p>
        <button
          onClick={() => setCount(count + 1)}
          className="bg-blue-500 text-white px-6 py-2 rounded hover:bg-blue-600 transition duration-300"
        >
          Increment
        </button>
      </div>
    </div>
  );
}

export default App;

TailwindCSSの追加

次に、TailwindCSSのSDKを追加します。<script src="https://cdn.tailwindcss.com"></script>を<head>タグの中に記述します。

<!-- index.html -->

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Vite + React</title>
    <script src="https://cdn.tailwindcss.com"></script>
  </head>
  <body>
    <div id="root"></div>
    <script type="module" src="/src/main.jsx"></script>
  </body>
</html>

以下のようにカウンターアプリが表示できているかと思います。コード編集の結果が右側の画面にすぐに反映されるため、学習の効率が向上し、便利に使用することができます。

その他の機能

開発者ツールでの確認

プレビューウィンドウの以下のアイコンをクリックすると、新しいタブでプレビューを開くことができます。新しいプレビュー画面で開発者ツールを開けば、consoleなどを確認できます。

ローカルで開発しているのと同じように、consoleなどを確認しながらWeb上で作業することができます。

GitHubとの連携

GitHubとStackBlitzを連携すると、StackBlitz上でGitの操作をすることができます。コードを編集し、リモートリポジトリへgit pushや、StackBlitzのプロジェクトへGit cloneなどの一連の操作がWeb上で完結します。

リポジトリの作成

以下の「Create a repository」ボタンをクリックすると、作成中のプロジェクトのGitHubリポジトリを作成できます。
GitHub Appの設定

初めてStackBlitz上でGitHubのリポジトリを作成する場合は、GitHub Appに関する以下の画面が表示されるので、「Configure App」をクリックします。
GitHub Appの適用先

「for these repositories:」の全てのリポジトリまたは、選択したリポジトリにインストールするかを選択し、「Install&Authorize」をクリックします。
リポジトリの作成

この一連の手順は、StackBlitz上でGit操作ができるようにするためのものです。

Git Appsのインストールが完了すると以下の画面に遷移しますので、任意のリポジトリ名を入力し、「Create a repository」をクリックします。

新しいタブでプロジェクトが再度起動します。GitHubと連携することで、ブランチやプロジェクト内に.gitignoreファイルなどが作成され、UIもよりVSCodeに近づき、ローカルで作業するのとほぼ同様な印象です。

この状態で、ローカルで作業するのと同じように、git addなどのGit操作が可能です。このようにWeb上でさまざまな作業ができることは非常に便利です。

まとめ

ここまで、StackBlitzのアカウント作成から基本的な使用方法を説明してきました。簡単に振り返りましょう。

StackBlitzとは

StackBlitzは、Webブラウザ上で直接動作するオンラインコードエディタであり、統合開発環境（IDE）です。Reactなどのフロントエンドフレームワークやライブラリの開発に利用できます。個人プランは無料で利用でき、作成できるプロジェクト数は無制限です（2024年7月現在）。個人で学習を目的とする場合は無料プランで十分かと思います。

使用するメリット

環境構築のための設定やインストールの手間が不要で、すぐにWeb上で環境構築ができます。これにより、構築のための時間を効率化し、ローカルのストレージ容量を節約できます。

Webにアクセスできる環境があれば、どこからでも開発ができます。プロジェクトのURLを共有するだけで、他の人と簡単にプロジェクトを共有できます。

参考資料

以下のリンクは、この記事で説明した手順や概念に関連する参考資料です。より詳しく学びたい方は、ぜひご参照ください。

StackBlitz 公式

https://stackblitz.com/
StackBlitz Docs

https://developer.stackblitz.com/

【番外編】USBも知らなかった私が独学でプログラミングを勉強してGAFAに入社するまでの話

IT未経験者必見 USBも知らなかった私が独学でプログラミングを勉強してGAFAに入社するまでの話

プログラミング塾に半年通えば、一人前になれると思っているあなた。それ、勘違いですよ。「なぜ間違いなの？」「正しい勉強法とは何なの？」ITを学び始める全ての人に知って欲しい。そう思って書きました。是非読んでみてください。

「フリーランスエンジニア」

近年やっと世間に浸透した言葉だ。ひと昔まえ、終身雇用は当たり前で、大企業に就職することは一種のステータスだった。しかし、そんな時代も終わり「優秀な人材は転職する」ことが当たり前の時代となる。フリーランスエンジニアに高価値が付く現在、ネットを見ると「未経験でも年収400万以上」などと書いてある。これに釣られて、多くの人がフリーランスになろうとITの世界に入ってきている。私もその中の1人だ。数年前、USBも知らない状態からITの世界に没入し、そこから約2年間、毎日勉学を行なった。他人の何十倍も努力した。そして、企業研修やIT塾で数多くの受講生の指導経験も得た。そこで私は、伸びるエンジニアとそうでないエンジニアをたくさん見てきた。そして、稼げるエンジニア、稼げないエンジニアを見てきた。

「成功する人とそうでない人の違いは何か？」

私が出した答えは、「量産型エンジニアか否か」である。今のエンジニア市場には、量産型エンジニアが溢れている！！ここでの量産型エンジニアの定義は以下の通りである。

比較的簡単に学習可能なWebフレームワーク（WordPress, Rails）やPython等の知識はあるが、ITの基本概念を理解していないため、単調な作業しかこなすことができないエンジニアのこと。

多くの人がフリーランスエンジニアを目指す時代に中途半端な知識や技術力でこの世界に飛び込むと返って過酷な労働条件で働くことになる。そこで、エンジニアを目指すあなたがどう学習していくべきかを私の経験を交えて書こうと思った。続きはこちらから、、、、