enhance(frontend): IDにUUIDを使うのをやめる (#16138)

* wip

* Update flash-edit.vue

24 files changed, 77 insertions, 53 deletions

diff --git a/packages/frontend/package.json b/packages/frontend/package.json
index b2b807dbc7..a22d158756 100644
--- a/packages/frontend/package.json
+++ b/packages/frontend/package.json
@@ -72,7 +72,6 @@
 		"tsc-alias": "1.8.16",
 		"tsconfig-paths": "4.2.0",
 		"typescript": "5.8.3",
-		"uuid": "11.1.0",
 		"v-code-diff": "1.13.1",
 		"vite": "6.3.5",
 		"vue": "3.5.16",
diff --git a/packages/frontend/src/aiscript/ui.ts b/packages/frontend/src/aiscript/ui.ts
index 46e193f7c1..a27ece512e 100644
--- a/packages/frontend/src/aiscript/ui.ts
+++ b/packages/frontend/src/aiscript/ui.ts
@@ -4,7 +4,7 @@
  */
 
 import { utils, values } from '@syuilo/aiscript';
-import { v4 as uuid } from 'uuid';
+import { genId } from '@/utility/id.js';
 import { ref } from 'vue';
 import type { Ref } from 'vue';
 import * as Misskey from 'misskey-js';
@@ -543,7 +543,7 @@ export function registerAsUiLib(components: Ref<AsUiComponent>[], done: (root: R
 		call: C,
 	) {
 		if (id) utils.assertString(id);
-		const _id = id?.value ?? uuid();
+		const _id = id?.value ?? genId();
 		const component = ref({
 			...getOptions(def, call),
 			type,
diff --git a/packages/frontend/src/components/MkImgWithBlurhash.vue b/packages/frontend/src/components/MkImgWithBlurhash.vue
index e3a0a371b4..361aeff4d0 100644
--- a/packages/frontend/src/components/MkImgWithBlurhash.vue
+++ b/packages/frontend/src/components/MkImgWithBlurhash.vue
@@ -82,7 +82,7 @@ const canvasPromise = new Promise<WorkerMultiDispatch | HTMLCanvasElement>(resol
 
 <script lang="ts" setup>
 import { computed, nextTick, onMounted, onUnmounted, useTemplateRef, watch, ref } from 'vue';
-import { v4 as uuid } from 'uuid';
+import { genId } from '@/utility/id.js';
 import { render } from 'buraha';
 import { prefer } from '@/preferences.js';
 
@@ -117,7 +117,7 @@ const props = withDefaults(defineProps<{
 	onlyAvgColor: false,
 });
 
-const viewId = uuid();
+const viewId = genId();
 const canvas = useTemplateRef('canvas');
 const root = useTemplateRef('root');
 const img = useTemplateRef('img');
diff --git a/packages/frontend/src/components/MkMiniChart.vue b/packages/frontend/src/components/MkMiniChart.vue
index 98bd471438..582073b878 100644
--- a/packages/frontend/src/components/MkMiniChart.vue
+++ b/packages/frontend/src/components/MkMiniChart.vue
@@ -32,7 +32,7 @@ SPDX-License-Identifier: AGPL-3.0-only
 
 <script lang="ts" setup>
 import { watch, ref } from 'vue';
-import { v4 as uuid } from 'uuid';
+import { genId } from '@/utility/id.js';
 import tinycolor from 'tinycolor2';
 import { useInterval } from '@@/js/use-interval.js';
 
@@ -42,7 +42,7 @@ const props = defineProps<{
 
 const viewBoxX = 50;
 const viewBoxY = 50;
-const gradientId = uuid();
+const gradientId = genId();
 const polylinePoints = ref('');
 const polygonPoints = ref('');
 const headX = ref<number | null>(null);
diff --git a/packages/frontend/src/components/MkUploaderDialog.vue b/packages/frontend/src/components/MkUploaderDialog.vue
index 3f5f0776a8..a0d25d08d3 100644
--- a/packages/frontend/src/components/MkUploaderDialog.vue
+++ b/packages/frontend/src/components/MkUploaderDialog.vue
@@ -95,7 +95,7 @@ SPDX-License-Identifier: AGPL-3.0-only
 <script lang="ts" setup>
 import { computed, markRaw, onMounted, ref, useTemplateRef, watch } from 'vue';
 import * as Misskey from 'misskey-js';
-import { v4 as uuid } from 'uuid';
+import { genId } from '@/utility/id.js';
 import { readAndCompressImage } from '@misskey-dev/browser-image-resizer';
 import isAnimated from 'is-file-animated';
 import type { MenuItem } from '@/types/menu.js';
@@ -420,7 +420,7 @@ async function chooseFile(ev: MouseEvent) {
 }
 
 function initializeFile(file: File) {
-	const id = uuid();
+	const id = genId();
 	const filename = file.name ?? 'untitled';
 	const extension = filename.split('.').length > 1 ? '.' + filename.split('.').pop() : '';
 	items.value.push({
diff --git a/packages/frontend/src/components/MkWidgets.vue b/packages/frontend/src/components/MkWidgets.vue
index 44f6921a85..f606b0b001 100644
--- a/packages/frontend/src/components/MkWidgets.vue
+++ b/packages/frontend/src/components/MkWidgets.vue
@@ -51,7 +51,7 @@ export type DefaultStoredWidget = {
 
 <script lang="ts" setup>
 import { defineAsyncComponent, ref, computed } from 'vue';
-import { v4 as uuid } from 'uuid';
+import { genId } from '@/utility/id.js';
 import MkSelect from '@/components/MkSelect.vue';
 import MkButton from '@/components/MkButton.vue';
 import { widgets as widgetDefs, federationWidgets } from '@/widgets/index.js';
@@ -95,7 +95,7 @@ const addWidget = () => {
 
 	emit('addWidget', {
 		name: widgetAdderSelected.value,
-		id: uuid(),
+		id: genId(),
 		data: {},
 	});
 
diff --git a/packages/frontend/src/deck.ts b/packages/frontend/src/deck.ts
index c108a365b6..73a3cecd3b 100644
--- a/packages/frontend/src/deck.ts
+++ b/packages/frontend/src/deck.ts
@@ -5,11 +5,11 @@
 
 import { notificationTypes } from 'misskey-js';
 import { ref } from 'vue';
-import { v4 as uuid } from 'uuid';
 import { i18n } from './i18n.js';
 import type { BasicTimelineType } from '@/timelines.js';
 import type { SoundStore } from '@/preferences/def.js';
 import type { MenuItem } from '@/types/menu.js';
+import { genId } from '@/utility/id.js';
 import { deepClone } from '@/utility/clone.js';
 import { prefer } from '@/preferences.js';
 import * as os from '@/os.js';
@@ -103,7 +103,7 @@ function addProfile(name: string) {
 	if (prefer.s['deck.profiles'].find(p => p.name === name)) return;
 
 	const newProfile: DeckProfile = {
-		id: uuid(),
+		id: genId(),
 		name,
 		columns: [],
 		layout: [],
diff --git a/packages/frontend/src/pages/admin/RolesEditorFormula.vue b/packages/frontend/src/pages/admin/RolesEditorFormula.vue
index 6c47e6397f..89ecc155b2 100644
--- a/packages/frontend/src/pages/admin/RolesEditorFormula.vue
+++ b/packages/frontend/src/pages/admin/RolesEditorFormula.vue
@@ -66,7 +66,7 @@ SPDX-License-Identifier: AGPL-3.0-only
 
 <script lang="ts" setup>
 import { computed, defineAsyncComponent, ref, watch } from 'vue';
-import { v4 as uuid } from 'uuid';
+import { genId } from '@/utility/id.js';
 import MkInput from '@/components/MkInput.vue';
 import MkSelect from '@/components/MkSelect.vue';
 import MkButton from '@/components/MkButton.vue';
@@ -104,7 +104,7 @@ const type = computed({
 	set: (t) => {
 		if (t === 'and') v.value.values = [];
 		if (t === 'or') v.value.values = [];
-		if (t === 'not') v.value.value = { id: uuid(), type: 'isRemote' };
+		if (t === 'not') v.value.value = { id: genId(), type: 'isRemote' };
 		if (t === 'roleAssignedTo') v.value.roleId = '';
 		if (t === 'createdLessThan') v.value.sec = 86400;
 		if (t === 'createdMoreThan') v.value.sec = 86400;
@@ -119,7 +119,7 @@ const type = computed({
 });
 
 function addValue() {
-	v.value.values.push({ id: uuid(), type: 'isRemote' });
+	v.value.values.push({ id: genId(), type: 'isRemote' });
 }
 
 function valuesItemUpdated(item) {
diff --git a/packages/frontend/src/pages/admin/roles.edit.vue b/packages/frontend/src/pages/admin/roles.edit.vue
index 7790fe3925..1a903eedb9 100644
--- a/packages/frontend/src/pages/admin/roles.edit.vue
+++ b/packages/frontend/src/pages/admin/roles.edit.vue
@@ -21,7 +21,7 @@ SPDX-License-Identifier: AGPL-3.0-only
 <script lang="ts" setup>
 import { computed, ref } from 'vue';
 import * as Misskey from 'misskey-js';
-import { v4 as uuid } from 'uuid';
+import { genId } from '@/utility/id.js';
 import XEditor from './roles.editor.vue';
 import * as os from '@/os.js';
 import { misskeyApi } from '@/utility/misskey-api.js';
@@ -55,7 +55,7 @@ if (props.id) {
 		color: null,
 		iconUrl: null,
 		target: 'manual',
-		condFormula: { id: uuid(), type: 'isRemote' },
+		condFormula: { id: genId(), type: 'isRemote' },
 		isPublic: false,
 		isExplorable: false,
 		asBadge: false,
diff --git a/packages/frontend/src/pages/page-editor/els/page-editor.el.section.vue b/packages/frontend/src/pages/page-editor/els/page-editor.el.section.vue
index 4d1a3716e7..11f83b6ec6 100644
--- a/packages/frontend/src/pages/page-editor/els/page-editor.el.section.vue
+++ b/packages/frontend/src/pages/page-editor/els/page-editor.el.section.vue
@@ -24,7 +24,7 @@ SPDX-License-Identifier: AGPL-3.0-only
 
 import { defineAsyncComponent, inject, onMounted, watch, ref } from 'vue';
 import * as Misskey from 'misskey-js';
-import { v4 as uuid } from 'uuid';
+import { genId } from '@/utility/id.js';
 import XContainer from '../page-editor.container.vue';
 import * as os from '@/os.js';
 import { i18n } from '@/i18n.js';
@@ -73,7 +73,7 @@ async function add() {
 	});
 	if (canceled) return;
 
-	const id = uuid();
+	const id = genId();
 	children.value.push({ id, type });
 }
 
diff --git a/packages/frontend/src/pages/page-editor/page-editor.vue b/packages/frontend/src/pages/page-editor/page-editor.vue
index 49d9150852..05eb0bd9d2 100644
--- a/packages/frontend/src/pages/page-editor/page-editor.vue
+++ b/packages/frontend/src/pages/page-editor/page-editor.vue
@@ -62,7 +62,7 @@ SPDX-License-Identifier: AGPL-3.0-only
 <script lang="ts" setup>
 import { computed, provide, watch, ref } from 'vue';
 import * as Misskey from 'misskey-js';
-import { v4 as uuid } from 'uuid';
+import { genId } from '@/utility/id.js';
 import { url } from '@@/js/config.js';
 import XBlocks from './page-editor.blocks.vue';
 import MkButton from '@/components/MkButton.vue';
@@ -200,7 +200,7 @@ async function add() {
 	});
 	if (canceled) return;
 
-	const id = uuid();
+	const id = genId();
 	content.value.push({ id, type });
 }
 
@@ -240,7 +240,7 @@ async function init() {
 		content.value = page.value.content;
 		eyeCatchingImageId.value = page.value.eyeCatchingImageId;
 	} else {
-		const id = uuid();
+		const id = genId();
 		content.value = [{
 			id,
 			type: 'text',
diff --git a/packages/frontend/src/pages/settings/emoji-palette.vue b/packages/frontend/src/pages/settings/emoji-palette.vue
index 0fc60e2f70..5ff5f45a2f 100644
--- a/packages/frontend/src/pages/settings/emoji-palette.vue
+++ b/packages/frontend/src/pages/settings/emoji-palette.vue
@@ -119,7 +119,7 @@ SPDX-License-Identifier: AGPL-3.0-only
 
 <script lang="ts" setup>
 import { computed, ref, watch } from 'vue';
-import { v4 as uuid } from 'uuid';
+import { genId } from '@/utility/id.js';
 import XPalette from './emoji-palette.palette.vue';
 import MkRadios from '@/components/MkRadios.vue';
 import MkButton from '@/components/MkButton.vue';
@@ -159,7 +159,7 @@ function addPalette() {
 	prefer.commit('emojiPalettes', [
 		...prefer.s.emojiPalettes,
 		{
-			id: uuid(),
+			id: genId(),
 			name: '',
 			emojis: [],
 		},
diff --git a/packages/frontend/src/pages/settings/statusbar.vue b/packages/frontend/src/pages/settings/statusbar.vue
index 7e6a536216..2db9f7e6f9 100644
--- a/packages/frontend/src/pages/settings/statusbar.vue
+++ b/packages/frontend/src/pages/settings/statusbar.vue
@@ -17,7 +17,7 @@ SPDX-License-Identifier: AGPL-3.0-only
 <script lang="ts" setup>
 import { onMounted, ref, computed } from 'vue';
 import * as Misskey from 'misskey-js';
-import { v4 as uuid } from 'uuid';
+import { genId } from '@/utility/id.js';
 import XStatusbar from './statusbar.statusbar.vue';
 import MkFolder from '@/components/MkFolder.vue';
 import MkButton from '@/components/MkButton.vue';
@@ -38,7 +38,7 @@ onMounted(() => {
 
 async function add() {
 	prefer.commit('statusbars', [...statusbars.value, {
-		id: uuid(),
+		id: genId(),
 		type: null,
 		black: false,
 		size: 'medium',
diff --git a/packages/frontend/src/pages/theme-editor.vue b/packages/frontend/src/pages/theme-editor.vue
index a2ee04b555..d1be9e38b7 100644
--- a/packages/frontend/src/pages/theme-editor.vue
+++ b/packages/frontend/src/pages/theme-editor.vue
@@ -75,7 +75,7 @@ SPDX-License-Identifier: AGPL-3.0-only
 import { watch, ref, computed } from 'vue';
 import { toUnicode } from 'punycode.js';
 import tinycolor from 'tinycolor2';
-import { v4 as uuid } from 'uuid';
+import { genId } from '@/utility/id.js';
 import JSON5 from 'json5';
 import lightTheme from '@@/themes/_light.json5';
 import darkTheme from '@@/themes/_dark.json5';
@@ -192,7 +192,7 @@ async function saveAs() {
 	});
 	if (canceled) return;
 
-	theme.value.id = uuid();
+	theme.value.id = genId();
 	theme.value.name = name;
 	theme.value.author = `@${$i.username}@${toUnicode(host)}`;
 	if (description.value) theme.value.desc = description.value;
diff --git a/packages/frontend/src/plugin.ts b/packages/frontend/src/plugin.ts
index f557d1047a..68bc191924 100644
--- a/packages/frontend/src/plugin.ts
+++ b/packages/frontend/src/plugin.ts
@@ -6,7 +6,7 @@
 import { ref, defineAsyncComponent } from 'vue';
 import { Interpreter, Parser, utils, values } from '@syuilo/aiscript';
 import { compareVersions } from 'compare-versions';
-import { v4 as uuid } from 'uuid';
+import { genId } from '@/utility/id.js';
 import * as Misskey from 'misskey-js';
 import { aiScriptReadline, createAiScriptEnv } from '@/aiscript/api.js';
 import { store } from '@/store.js';
@@ -135,7 +135,7 @@ export async function installPlugin(code: string, meta?: AiScriptPluginMeta) {
 		throw new Error('Plugin already installed');
 	}
 
-	const installId = uuid();
+	const installId = genId();
 
 	const plugin = {
 		...realMeta,
diff --git a/packages/frontend/src/pref-migrate.ts b/packages/frontend/src/pref-migrate.ts
index 648349c6fe..3054978ae4 100644
--- a/packages/frontend/src/pref-migrate.ts
+++ b/packages/frontend/src/pref-migrate.ts
@@ -3,8 +3,8 @@
  * SPDX-License-Identifier: AGPL-3.0-only
  */
 
-import { v4 as uuid } from 'uuid';
 import type { DeckProfile } from '@/deck.js';
+import { genId } from '@/utility/id.js';
 import { ColdDeviceStorage, store } from '@/store.js';
 import { prefer } from '@/preferences.js';
 import { misskeyApi } from '@/utility/misskey-api.js';
@@ -42,7 +42,7 @@ export function migrateOldSettings() {
 					key: key,
 				});
 				profiles.push({
-					id: uuid(),
+					id: genId(),
 					name: key,
 					columns: deck.columns,
 					layout: deck.layout,
diff --git a/packages/frontend/src/preferences/def.ts b/packages/frontend/src/preferences/def.ts
index 2cbeea2883..5aadf835f2 100644
--- a/packages/frontend/src/preferences/def.ts
+++ b/packages/frontend/src/preferences/def.ts
@@ -5,13 +5,13 @@
 
 import * as Misskey from 'misskey-js';
 import { hemisphere } from '@@/js/intl-const.js';
-import { v4 as uuid } from 'uuid';
 import { definePreferences } from './manager.js';
 import type { Theme } from '@/theme.js';
 import type { SoundType } from '@/utility/sound.js';
 import type { Plugin } from '@/plugin.js';
 import type { DeviceKind } from '@/utility/device-kind.js';
 import type { DeckProfile } from '@/deck.js';
+import { genId } from '@/utility/id.js';
 import { DEFAULT_DEVICE_KIND } from '@/utility/device-kind.js';
 import { deepEqual } from '@/utility/deep-equal.js';
 
@@ -53,13 +53,13 @@ export const PREF_DEF = definePreferences({
 		accountDependent: true,
 		default: () => [{
 			name: 'calendar',
-			id: uuid(), place: 'right', data: {},
+			id: genId(), place: 'right', data: {},
 		}, {
 			name: 'notifications',
-			id: uuid(), place: 'right', data: {},
+			id: genId(), place: 'right', data: {},
 		}, {
 			name: 'trends',
-			id: uuid(), place: 'right', data: {},
+			id: genId(), place: 'right', data: {},
 		}] as {
 			name: string;
 			id: string;
@@ -79,7 +79,7 @@ export const PREF_DEF = definePreferences({
 	emojiPalettes: {
 		serverDependent: true,
 		default: () => [{
-			id: uuid(),
+			id: genId(),
 			name: '',
 			emojis: ['👍', '❤️', '😆', '🤔', '😮', '🎉', '💢', '😥', '😇', '🍮'],
 		}] as {
diff --git a/packages/frontend/src/preferences/manager.ts b/packages/frontend/src/preferences/manager.ts
index 603aac851c..dad6f8b912 100644
--- a/packages/frontend/src/preferences/manager.ts
+++ b/packages/frontend/src/preferences/manager.ts
@@ -4,11 +4,11 @@
  */
 
 import { computed, onUnmounted, ref, watch } from 'vue';
-import { v4 as uuid } from 'uuid';
 import { host, version } from '@@/js/config.js';
 import { PREF_DEF } from './def.js';
 import type { Ref, WritableComputedRef } from 'vue';
 import type { MenuItem } from '@/types/menu.js';
+import { genId } from '@/utility/id.js';
 import { $i } from '@/i.js';
 import { copyToClipboard } from '@/utility/copy-to-clipboard.js';
 import { i18n } from '@/i18n.js';
@@ -301,7 +301,7 @@ export class PreferencesManager {
 			}
 		}
 		return {
-			id: uuid(),
+			id: genId(),
 			version: version,
 			type: 'main',
 			modifiedAt: Date.now(),
diff --git a/packages/frontend/src/tab-id.ts b/packages/frontend/src/tab-id.ts
index 49b69f72d2..6525763582 100644
--- a/packages/frontend/src/tab-id.ts
+++ b/packages/frontend/src/tab-id.ts
@@ -3,9 +3,9 @@
  * SPDX-License-Identifier: AGPL-3.0-only
  */
 
-import { v4 as uuid } from 'uuid';
+import { genId } from '@/utility/id.js';
 
 // HMR有効時にバグか知らんけど複数回実行されるのでその対策
-export const TAB_ID = window.sessionStorage.getItem('TAB_ID') ?? uuid();
+export const TAB_ID = window.sessionStorage.getItem('TAB_ID') ?? genId();
 window.sessionStorage.setItem('TAB_ID', TAB_ID);
 if (_DEV_) console.log('TAB_ID', TAB_ID);
diff --git a/packages/frontend/src/ui/deck.vue b/packages/frontend/src/ui/deck.vue
index aff7cdabbf..d2b163a38f 100644
--- a/packages/frontend/src/ui/deck.vue
+++ b/packages/frontend/src/ui/deck.vue
@@ -81,7 +81,7 @@ SPDX-License-Identifier: AGPL-3.0-only
 
 <script lang="ts" setup>
 import { defineAsyncComponent, ref, useTemplateRef } from 'vue';
-import { v4 as uuid } from 'uuid';
+import { genId } from '@/utility/id.js';
 import XCommon from './_common_/common.vue';
 import XSidebar from '@/ui/_common_/navbar.vue';
 import XNavbarH from '@/ui/_common_/navbar-h.vue';
@@ -169,7 +169,7 @@ const addColumn = async (ev) => {
 
 	addColumnToStore({
 		type: column,
-		id: uuid(),
+		id: genId(),
 		name: null,
 		width: 330,
 		soundSetting: { type: null, volume: 1 },
diff --git a/packages/frontend/src/utility/get-embed-code.ts b/packages/frontend/src/utility/get-embed-code.ts
index de36314ac2..5ccd46cfe2 100644
--- a/packages/frontend/src/utility/get-embed-code.ts
+++ b/packages/frontend/src/utility/get-embed-code.ts
@@ -3,7 +3,7 @@
  * SPDX-License-Identifier: AGPL-3.0-only
  */
 import { defineAsyncComponent } from 'vue';
-import { v4 as uuid } from 'uuid';
+import { genId } from '@/utility/id.js';
 import { url } from '@@/js/config.js';
 import { defaultEmbedParams, embedRouteWithScrollbar } from '@@/js/embed-page.js';
 import type { EmbedParams, EmbeddableEntity } from '@@/js/embed-page.js';
@@ -44,7 +44,7 @@ export function normalizeEmbedParams(params: EmbedParams): Record<string, string
  * 埋め込みコードを生成（iframe IDの発番もやる）
  */
 export function getEmbedCode(path: string, params?: EmbedParams): string {
-	const iframeId = 'v1_' + uuid(); // 将来embed.jsのバージョンが上がったとき用にv1_を付けておく
+	const iframeId = 'v1_' + genId(); // 将来embed.jsのバージョンが上がったとき用にv1_を付けておく
 
 	let paramString = '';
 	if (params) {
diff --git a/packages/frontend/src/utility/id.ts b/packages/frontend/src/utility/id.ts
new file mode 100644
index 0000000000..63a7f7d74c
--- /dev/null
+++ b/packages/frontend/src/utility/id.ts
@@ -0,0 +1,25 @@
+/*
+ * SPDX-FileCopyrightText: syuilo and misskey-project
+ * SPDX-License-Identifier: AGPL-3.0-only
+ */
+
+// ランダムな文字列が生成できればなんでも良い(時系列でソートできるなら尚良)が、とりあえずaidの実装を拝借
+
+const TIME2000 = 946684800000;
+let counter = Math.floor(Math.random() * 10000);
+
+function getTime(time: number): string {
+	time = time - TIME2000;
+	if (time < 0) time = 0;
+
+	return time.toString(36).padStart(8, '0');
+}
+
+function getNoise(): string {
+	return counter.toString(36).padStart(2, '0').slice(-2);
+}
+
+export function genId(): string {
+	counter++;
+	return getTime(Date.now()) + getNoise();
+}
diff --git a/packages/frontend/src/utility/theme-editor.ts b/packages/frontend/src/utility/theme-editor.ts
index ea07e5f2ff..74175703c3 100644
--- a/packages/frontend/src/utility/theme-editor.ts
+++ b/packages/frontend/src/utility/theme-editor.ts
@@ -3,7 +3,7 @@
  * SPDX-License-Identifier: AGPL-3.0-only
  */
 
-import { v4 as uuid } from 'uuid';
+import { genId } from '@/utility/id.js';
 
 import type { Theme } from '@/theme.js';
 import { themeProps } from '@/theme.js';
@@ -66,7 +66,7 @@ export const convertToMisskeyTheme = (vm: ThemeViewModel, name: string, desc: st
 	}
 
 	return {
-		id: uuid(),
+		id: genId(),
 		name, desc, author, props, base,
 	};
 };
diff --git a/packages/frontend/src/widgets/server-metric/cpu-mem.vue b/packages/frontend/src/widgets/server-metric/cpu-mem.vue
index 614ffe59e3..1f22e14a70 100644
--- a/packages/frontend/src/widgets/server-metric/cpu-mem.vue
+++ b/packages/frontend/src/widgets/server-metric/cpu-mem.vue
@@ -77,7 +77,7 @@ SPDX-License-Identifier: AGPL-3.0-only
 <script lang="ts" setup>
 import { onMounted, onBeforeUnmount, ref } from 'vue';
 import * as Misskey from 'misskey-js';
-import { v4 as uuid } from 'uuid';
+import { genId } from '@/utility/id.js';
 
 const props = defineProps<{
 	connection: Misskey.ChannelConnection<Misskey.Channels['serverStats']>,
@@ -87,10 +87,10 @@ const props = defineProps<{
 const viewBoxX = ref<number>(50);
 const viewBoxY = ref<number>(30);
 const stats = ref<Misskey.entities.ServerStats[]>([]);
-const cpuGradientId = uuid();
-const cpuMaskId = uuid();
-const memGradientId = uuid();
-const memMaskId = uuid();
+const cpuGradientId = genId();
+const cpuMaskId = genId();
+const memGradientId = genId();
+const memMaskId = genId();
 const cpuPolylinePoints = ref<string>('');
 const memPolylinePoints = ref<string>('');
 const cpuPolygonPoints = ref<string>('');