Vue 3.0を活用したルバンH5のモダン化：性能の飛躍的向上とアーキテクチャの再設計

テクニカルデットの特定：Vue 2.xアーキテクチャの限界分析

現在、ルバンH5 v2.xはVue 2.6.10に基づいており、技術スタックのモダン化が求められています。特に以下の問題点が確認されています。

Options APIの保守性の課題

プロジェクト内の多くのコンポーネントでOptions APIが使用されており、これによりコードロジックが分散し、保守が困難になっています。

// 現行のVue 2.xコンポーネント例
export default {
  data: () => ({
    vLines: [],
    hLines: [],
    contextmenuPos: []
  }),
  computed: {
    ...mapState('editor', ['editingElement', 'work'])
  },
  methods: {
    ...mapActions('editor', [
      'setEditingElement',
      'setElementPosition',
      'setElementShape'
    ]),
    drawVLine(newLeft) {
      this.vLines = [{ left: newLeft }]
    }
  }
}

このようなアプローチでは、複雑なエディター環境において同じ機能のコードを他のコンポーネント間で再利用するのが難しく、保守コストが増加します。

グローバルAPIの互換性問題

Vue 2.xのグローバルAPIはVue 3.0では非推奨または変更されています。

// Vue 2.xでのグローバルAPIの使用例
Vue.component('component-name', Component)
Vue.use(Plugin)
Vue.prototype.$lubanUtils = {}

応答型システムのパフォーマンスボトルネック

Object.definePropertyを使用したVue 2.xの応答型システムは、配列の変更検出や入れ子になったオブジェクトに対する応答にパフォーマンス上の制約があります。

アップデート戦略：段階的な移行とアーキテクチャの最適化

Composition APIを使ったリファクタリング

Vue 3.0のComposition APIを採用することで、コードの整理と再利用性を向上させます。

// Vue 3.0のComposition APIを使ったリファクタリング例
import { ref, reactive, computed } from 'vue'
import { useStore } from 'vuex'

export default {
  setup() {
    const store = useStore()
    const vLines = ref([])
    const hLines = ref([])

    // 編集状態の管理
    const editingElement = computed(() => store.state.editor.editingElement)
    
    // メソッド定義
    const addVLine = (newLeft) => {
      vLines.value.push({ left: newLeft })
    }

    return {
      vLines,
      hLines,
      editingElement,
      addVLine
    }
  }
}

段階的な移行計画

以下のような段階的な移行プランを提案します。

実装ロードマップ：ステップバイステップの技術アップデート

第一フェーズ：互換性基盤の構築

まず、Vue 3.0の互換環境を作成し、既存機能が正常に動作することを保証します。

// package.jsonの更新例
{
  "dependencies": {
    "vue": "^3.2.0",
    "@vue/compat": "^3.2.0",
    "vue-router": "^4.0.0",
    "vuex": "^4.0.0"
  },
  "devDependencies": {
    "@vue/cli-service": "^5.0.0",
    "@vue/compiler-sfc": "^3.2.0"
  }
}

次に、vue.config.jsでVue 3.0の互換モードを有効にします。

// vue.config.jsの互換設定
const { defineConfig } = require('@vue/cli-service')
const webpack = require('webpack')

module.exports = defineConfig({
  configureWebpack: {
    resolve: {
      alias: {
        vue: '@vue/compat'
      }
    },
    plugins: [
      new webpack.DefinePlugin({
        __VUE_OPTIONS_API__: true,
        __VUE_PROD_DEVTOOLS__: false
      })
    ]
  }
})

第二フェーズ：コアエディターコンポーネントの再設計

主要なエディター部分をVue 3.0に対応させるためのリファクタリングを行います。

// 再設計されたエディターコンポーネント例
import { defineComponent, ref, watchEffect } from 'vue'
import { useStore } from 'vuex'

export default defineComponent({
  name: 'CanvasEditor',
  props: {
    elements: { type: Array, default: () => [] }
  },
  setup(props) {
    const store = useStore()
    const canvasScale = ref(1.0)
    
    // 要素クリック時の処理
    const handleElementClick = (element) => {
      store.dispatch('editor/selectElement', element)
    }

    // 描画中の監視
    watchEffect(() => {
      console.log('要素の更新:', props.elements.length)
    })

    return {
      canvasScale,
      handleElementClick
    }
  }
})

第三フェーズ：プラグインシステムのモダン化

プラグインシステムもVue 3.0に対応させる必要があります。

// Vue 3.0プラグイン登録例
import { createApp } from 'vue'

const registerPlugin = (app, plugin) => {
  if (plugin.install) {
    plugin.install(app)
  } else if (plugin.component) {
    app.component(plugin.name, plugin.component)
  }
}

export const loadPlugins = async (app) => {
  const plugins = await import.meta.glob('./plugins/*.js')
  
  for (const path in plugins) {
    const module = await plugins[path]()
    registerPlugin(app, module.default)
  }
}

パフォーマンス改善の検証

Vue 3.0のProxyベースの応答型システムは、Vue 2.xのdefineProperty方式よりも優れています。

最適プラクティスと注意事項

TypeScriptとの統合

TypeScriptを導入することで、コードの信頼性と品質を向上させることができます。

// TypeScript対応の例
interface ElementData {
  id: string
  type: string
  style: {
    width: number
    height: number
    position: { x: number; y: number }
  }
}

export default defineComponent({
  name: 'ElementRenderer',
  props: {
    element: {
      type: Object as PropType<ElementData>,
      required: true
    }
  },
  setup(props) {
    const elementStyle = computed(() => props.element.style)

    return { elementStyle }
  }
})