さらばレガシーEC!モダンなエンジニアのためのVendure(ベンジャー)活用術:カスタマイズの限界を突破せよ
……あ、失礼しました。現場に急行した助っ人エンジニアです! どうやら「ECサイトの要件が複雑すぎて、既存のシステムじゃもう限界、コードはスパゲッティ、納期は昨日」っていう絶望的な状況だと聞きまして。
そんな地獄のような現場を鎮火させるための「秘密兵器」、Vendure(ベンジャー)を持ってきました。 こいつはただのECパッケージじゃありません。エンジニアによる、エンジニアのための、最強に柔軟な「コマース・フレームワーク」です。
さっそく、この炎上案件をどう救うのか、技術者の視点で解説しますね!
普通のECプラットフォームって、「管理画面はこう」「データベースはこう」って決まりきっていて、ちょっと特殊なカスタマイズをしようとすると、本体のソースコードをいじり回して泥沼化しますよね。
Vendureはここが違います
TypeScript & NestJS 構成
モダンなサーバーサイド技術の王道です。型安全なので、「どこを直せばどこが壊れるか」に怯える必要がありません。
GraphQL API 第一主義
フロントエンド(Next.jsでもVueでもスマホアプリでも)と完全に切り離されています(Headless)。
「プラグイン」で何でも拡張
コアのコードを汚さずに、独自のビジネスロジックや外部連携を「プラグイン」として差し込めます。
「とりあえず動くものを見せてくれ!」という上司の声が聞こえますね。秒速で環境を作ります。
ターミナルを開いて、以下のコマンドを叩いてください
npx @vendure/create my-shop
これを実行すると、対話形式で「データベースは何にする?(PostgreSQLがおすすめ)」「プログラミング言語は?」と聞かれます。設定が終われば、もうAPIサーバーと管理画面の土台が完成です。
「急に『お急ぎ便』の特殊な計算ロジックを追加しろと言われた!」という炎上あるあるを、VendureのPluginで解決してみましょう。
import { PluginCommonModule, VendurePlugin, PromotionCondition, LanguageCode } from '@vendure/core';
/**
* 炎上案件特有の「特急対応フラグ」を注文に追加するようなイメージ
*/
@VendurePlugin({
imports: [PluginCommonModule],
providers: [],
// ここに独自の設定やAPI拡張を書いていきます
})
export class FireExtinguisherPlugin {
// 既存のシステムを壊さずに、新しい機能だけを「外付け」できるんです!
}
このように、VendurePlugin デコレータを使って機能をカプセル化できるので、「修正したせいで他の機能が死んだ」という二次災害を防げます。
データベースのマイグレーションが楽
TypeORMを採用しているので、スキーマ変更の管理がスマートです。
管理画面(Admin UI)も拡張可能
Angularベースの管理画面に、自分たち専用のボタンやグラフを簡単に追加できます。
ドキュメントがめちゃくちゃ綺麗
「使い方がわからなくてソースコードを1時間読み漁る」という無駄な時間が減ります。
「既存のシステムが重すぎて動かない」「カスタマイズが限界でこれ以上コードが書けない」……。 そんな時は、一度立ち止まって Vendure を基盤に据えることを検討してみてください。
最初は導入に少し学習コストがかかりますが、一度慣れてしまえば、「変更に強く、テストが書きやすく、スケールする」理想のECサイトが構築できます。
「よし、まずはローカル環境でプロトタイプを作ってみましょうか。私が横で見てますから、一緒にコードを書き換えましょう!」