📘

StackBlitzを触ってみる

2023/12/15に公開

stackblitz

tech

はじめに

以前Nuxtの環境構築について調べていたときに、StackBlitzを使って環境を構築しているものを見かけたため、気になり触ってみることにしました。

StackBlitzとは？

StackBlitzはWeb上で環境を立ち上げて、ファイルの編集やビルドが行えるサービスです。
Nuxt3やNext.jsなど色々なプロジェクトが用意されていて、ダッシュボードからプロジェクトを選択するだけで手軽に開発環境を作成できます。

今回は無料の個人プランで利用しています。
↓料金プラン
https://stackblitz.com/pricing

環境作ってみる

https://stackblitz.com/

まずはStackBlitzの公式ページに入り、Githubアカウントでサインインします。

サインインするとダッシュボードに移動します。

「New Project」を押して「Nuxt ３」を選択します。
プロジェクト作成

およそ３秒ほどで以下のように環境が作成できます。
初期作成時

UIがVSCodeとほとんど同じなので、普段からVSCodeを利用していたので使いやすかったです。

ちなみに右側の実行画面が小さい場合は、赤枠の部分のURLをブラウザに貼って開くこともできます。
別タブ表示

まだBeta機能みたいですが、GitHubリポジトリからプロジェクトを立ち上げることもできます。
githubリポジトリから開く

Vuetifyを入れてみる

ここからは試しにUIフレームワークである「Vuetify」を入れて動作確認してみます。

まずは下記コマンドでVuetifyと必要なパッケージをインストールします。

npm install --save-dev vuetify

npm install --save-dev vite-plugin-vuetify

npm install --save-dev @mdi/font

↓実行後
install後

Vuetifyの公式ページにNuxt3での利用手順が載っているので、そちらを参考に下記のファイルを作成します。

plugins/vuetify.ts

import { createVuetify } from 'vuetify';
import * as components from 'vuetify/components';
import * as directives from 'vuetify/directives';

export default defineNuxtPlugin((nuxtApp) => {
  const vuetify = createVuetify({
    components,
    directives,
  });

  nuxtApp.vueApp.use(vuetify);
});

nuxt.config.ts

// https://nuxt.com/docs/api/configuration/nuxt-config
// https://vuetifyjs.com/en/getting-started/installation/#using-nuxt-3
import vuetify, { transformAssetUrls } from 'vite-plugin-vuetify';
export default defineNuxtConfig({
  build: {
    transpile: ['vuetify'],
  },
  modules: [
    (_options, nuxt) => {
      nuxt.hooks.hook('vite:extendConfig', (config) => {
        // @ts-expect-error
        config.plugins.push(vuetify({ autoImport: true }));
      });
    },
  ],
  vite: {
    vue: {
      template: {
        transformAssetUrls,
      },
    },
  },
});

これでVuetifyのコンポーネントが呼び出せるようになっているはずなので、試しにVuetifyのv-cardを呼び出してみます。

app.vue

<template>
  <div>
    <v-app>
      <v-card class="mx-auto" max-width="344" hover>
        <v-card-item>
          <v-card-title> Nuxt3 + Vuetify サンプル</v-card-title>
          <v-card-subtitle> サンプル </v-card-subtitle>
        </v-card-item>
        <v-card-text> サンプル </v-card-text>
      </v-card>
    </v-app>
  </div>
</template>

右側の実行結果を見るとしっかりv-cardの呼び出しに成功しています。
これにて無事にVuetifyを入れることができました🎉

作成した環境を共有してみる

プロジェクトのURLを教えることで他の人と共有することができます。
※共有されたプロジェクトでファイルを編集しても元ファイルは変更されないです。
他人から共有されたプロジェクトに変更を加えて保存するにはForkをする必要があります。

↓下記URLをアクセスするとプロジェクトを開けます。

↓下記のエディタでファイルを編集して動きを確認することもできます。

感想

良かったところ
・手軽に環境を立ち上げることができるため、軽く触ってみたいときとかに便利
・記事に埋め込んでその場で動作確認できるのが便利

もう少しなところ
拡張機能が使えないのでがっつり実装するとしたら不便

はじめに

StackBlitzとは？

環境作ってみる

Vuetifyを入れてみる

作成した環境を共有してみる

感想

Discussion