LoginSignup
4
0

Delete article

Deleted articles cannot be recovered.

Draft of this article would be also deleted.

Are you sure you want to delete this article?

@pomufgd(pomufgd)

Shopify CLI環境で心地よい開発体験を求めて

Last updated at Posted at 2022-11-01

Shopify CLIとは

Shopify CLIは、テーマ開発を効率化するコマンドラインツールです。ローカル環境でのホットリロード、テーマのプッシュ・プルなど、モダンなフロントエンド開発に慣れた方には馴染みやすい開発体験を提供します。

主な機能

  • 開発テーマ（Development Theme） によるセーフなプレビュー
  • CSSとセクションのホットリロード（ファイル変更時に自動反映）
  • コマンドラインからのテーマ初期化・プッシュ・公開
  • 複数テーマの環境管理

新規テーマの作成

Shopify CLIではshopify theme initコマンドで、Skeletonテーマをベースに新規テーマを作成できます。

shopify theme init
cd my-new-theme

Vite + Tailwind CSS v4でモダンな開発環境

Shopifyテーマ開発でもViteを使うことで、TypeScriptのバンドルやCSSの最適化が簡単にできます。Tailwind CSS v4はViteプラグインが用意されており、設定も大幅にシンプルになりました。

インストール

npm install -D vite tailwindcss @tailwindcss/vite typescript

Vite設定

vite.config.js
import { defineConfig } from "vite";
import tailwindcss from "@tailwindcss/vite";

export default defineConfig({
  plugins: [tailwindcss()],
  build: {
    emptyOutDir: false,
    outDir: "assets",
    watch: {
      include: ["src/**"],
    },
    rollupOptions: {
      input: {
        main: "src/ts/main.ts",
      },
      output: {
        assetFileNames: "[name][extname]",
        chunkFileNames: "[name].js",
        entryFileNames: "[name].js",
      },
    },
  },
});

ポイント

  • emptyOutDir: false でassetsフォルダの既存ファイルを保持
  • outDir: "assets" でShopifyのassetsフォルダに直接出力
  • エントリーポイントをsrc/ts/main.tsに配置

CSS設定（v4の新機能）

v4では@import "tailwindcss";でインポートし、@themeブロックで設定をカスタマイズします。

src/css/app.css
@import "tailwindcss";

/* プレフィックス設定（Dawn等の既存テーマと併用する場合に推奨） */
@import "tailwindcss" prefix(tw-);

@theme {
  /* カスタムブレークポイント（Shopifyテーマに合わせる） */
  --breakpoint-sm: 640px;
  --breakpoint-md: 750px;
  --breakpoint-lg: 990px;
  --breakpoint-xl: 1280px;

  /* カスタムフォント */
  --font-notosans: "Noto Sans JP", sans-serif;

  /* カスタムカラー（oklch形式推奨） */
  --color-brand-500: oklch(0.6 0.15 250);
}

v3からの移行
既存のv3プロジェクトは自動アップグレードツールが利用できます。

npx @tailwindcss/upgrade

Shopifyテーマでの設定

Liquidファイルをスキャン対象に含める必要があります。v4ではCSSの@sourceディレクティブで指定します。

src/css/app.css
@import "tailwindcss" prefix(tw-);

/* Liquidファイルをスキャン対象に追加 */
@source "../../**/*.liquid";

@theme {
  --breakpoint-sm: 640px;
  --breakpoint-md: 750px;
  --breakpoint-lg: 990px;
  --breakpoint-xl: 1280px;
}

package.json スクリプト設定

開発・ビルドコマンドをpackage.jsonにまとめておくと便利です。

package.json
{
  "name": "my-shopify-theme",
  "type": "module",
  "scripts": {
    "dev": "run-p dev:shopify dev:vite",
    "dev:shopify": "shopify theme dev --store your-store",
    "dev:vite": "vite build --watch",
    "build": "vite build && npm run push",
    "push": "shopify theme push",
    "pull": "shopify theme pull",
    "check": "shopify theme check",
    "format": "biome check --write ./src"
  },
  "devDependencies": {
    "@biomejs/biome": "^1.9.0",
    "@tailwindcss/vite": "^4.0.0",
    "npm-run-all": "^4.1.5",
    "tailwindcss": "^4.0.0",
    "typescript": "^5.7.0",
    "vite": "^6.0.0"
  }
}

TypeScript設定

tsconfig.json
{
  "compilerOptions": {
    "target": "ES2022",
    "module": "ESNext",
    "moduleResolution": "bundler",
    "strict": true,
    "skipLibCheck": true,
    "esModuleInterop": true,
    "outDir": "assets"
  },
  "include": ["src/**/*.ts"]
}

Biomeについて
ESLint + Prettierの代わりにBiomeを使用しています。Rustで書かれた高速なLinter/Formatterで、設定もシンプルです。

.shopifyignore

shopify theme pull時にローカルの設定ファイルが消えないよう、.shopifyignoreを作成します。

.shopifyignore
# Git
.gitignore
.git

# Node.js
package.json
package-lock.json
bun.lockb
node_modules

# 設定ファイル
vite.config.js
tsconfig.json
biome.json
.vscode

# ソースファイル
/src

# ドキュメント
README.md
CLAUDE.md

ディレクトリ構成

my-shopify-theme/
├── assets/              # Shopifyアセット（Viteの出力先）
├── config/
├── layout/
├── locales/
├── sections/
├── snippets/
├── templates/
│   └── customers/
├── src/                 # ソースファイル
│   ├── css/
│   │   └── app.css      # Tailwind CSS エントリーポイント
│   └── ts/
│       └── main.ts      # TypeScript エントリーポイント
├── .shopifyignore
├── biome.json
├── package.json
├── tsconfig.json
└── vite.config.js

開発ワークフロー

1. 開発サーバー起動

npm run dev

これで以下が同時に起動します：

  • Shopify開発サーバー（shopify theme dev）
  • Viteのウォッチモード（TypeScript + Tailwind CSS）

開発テーマのURLが発行され、Google Chromeでホットリロードしながら開発できます。

2. テーマチェック

Shopify公式のLinterでベストプラクティスをチェック：

npm run check

3. 本番デプロイ

npm run build

Viteでビルド・最適化してからテーマをプッシュします。

まとめ

項目 従来 現在（v4 + Vite）
バンドラー なし / Webpack Vite
Tailwind設定 tailwind.config.js CSSの@themeブロック
Tailwindプラグイン tailwindcss（PostCSS） @tailwindcss/vite
コンテンツ指定 content: [] @sourceディレクティブ
Linter/Formatter ESLint + Prettier Biome
Shopify CLIコマンド shopify theme serve shopify theme dev

Vite + Tailwind v4の組み合わせにより、TypeScriptのバンドルからCSSの最適化まで一貫した開発体験が得られます。Shopify CLIのホットリロードと合わせて、快適なテーマ開発環境を構築できます。

参考リンク

Shopify

Tailwind CSS v4

ビルドツール

  • Vite - 次世代フロントエンドビルドツール
  • Biome - 高速なLinter/Formatter（Rust製）
  • npm-run-all - npm scriptsの並列・直列実行
4
0
0

Register as a new user and use Qiita more conveniently

  1. You get articles that match your needs
  2. You can efficiently read back useful information
  3. You can use dark theme
What you can do with signing up
Sign upLogin
4
0

Delete article

Deleted articles cannot be recovered.

Draft of this article would be also deleted.

Are you sure you want to delete this article?