## プロローグ
[[Jumeaux Viewer]]の技術スタックが古いので最新化する。具体的には以下2つ。
- [[Vue]]を2から3に
- [[Monaco Editor]]を0.12.0から0.44.0に
...と思ったけど[[Monaco Editor]]も[[Vue]]も破壊的変更がそこそこあるのと、開発体験が悪いので1から作り直すことにした。
## 技術選定
[[Vue3]]を使う。
- 仕事でも使っていて知見を活かせる
- (個人的に) [[React]]よりシンプルで好き
- [[Svelte]]を使うのはなんかめんどい
## プロジェクト作成
公式より。
<div class="link-card-v2">
<div class="link-card-v2-site">
<img class="link-card-v2-site-icon" src="https://vuejs.org/logo.svg" />
<span class="link-card-v2-site-name">vuejs.org</span>
</div>
<div class="link-card-v2-title">
Vue.js
</div>
<div class="link-card-v2-content">
Vue.js - The Progressive JavaScript Framework
</div>
<img class="link-card-v2-image" src="https://vuejs.org/images/logo.png" />
<a href="https://vuejs.org/guide/quick-start.html"></a>
</div>
```console
npm create vue@latest
cd jumeaux-viewer
npm i
npm run dev
```
依存関係は以下。
```json
"dependencies": {
"vue": "^3.3.4"
},
"devDependencies": {
"@tsconfig/node18": "^18.2.2",
"@types/node": "^18.18.5",
"@vitejs/plugin-vue": "^4.4.0",
"@vue/tsconfig": "^0.4.0",
"npm-run-all2": "^6.1.1",
"typescript": "~5.2.0",
"vite": "^4.4.11",
"vue-tsc": "^1.8.19"
}
```
## [[フォーマッター]]
[[Prettier]]を入れる。
```console
npm i -D prettier
```
## [[UIフレームワーク]]
安定と実績の[[Naive UI]]を使う。
<div class="link-card-v2">
<div class="link-card-v2-site">
<img class="link-card-v2-site-icon" src="https://github.githubassets.com/favicons/favicon.svg" />
<span class="link-card-v2-site-name">GitHub</span>
</div>
<div class="link-card-v2-title">
GitHub - tusen-ai/naive-ui: A Vue 3 Component Library. Fairly Complete. Theme Customizable. Uses TypeScript. Fast.
</div>
<div class="link-card-v2-content">
A Vue 3 Component Library. Fairly Complete. Theme Customizable. Uses TypeScript. Fast. - tusen-ai/naive-ui
</div>
<img class="link-card-v2-image" src="https://opengraph.githubassets.com/952ed33a99a1b352ce16217ce26a7b412606bccedfc46d24426a74bc521a7e91/tusen-ai/naive-ui" />
<a href="https://github.com/tusen-ai/naive-ui"></a>
</div>
```console
npm i -D naive-ui vfonts @vicons/ionicons5
```
テスト。
`App.vue`
```html
<script setup lang="ts">
import { NButton, NIcon } from "naive-ui";
import { GameController } from "@vicons/ionicons5";
</script>
<template>
<main>
<n-button>hogehoge</n-button>
<n-button type="tertiary"> Tertiary </n-button>
<n-icon size="40" :component="GameController" />
</main>
</template>
```
## [[Monaco Editor]]
<div class="link-card-v2">
<div class="link-card-v2-site">
<img class="link-card-v2-site-icon" src="https://github.githubassets.com/favicons/favicon.svg" />
<span class="link-card-v2-site-name">GitHub</span>
</div>
<div class="link-card-v2-title">
GitHub - microsoft/monaco-editor: A browser based code editor
</div>
<div class="link-card-v2-content">
A browser based code editor. Contribute to microsoft/monaco-editor development by creating an account on GitHub.
</div>
<img class="link-card-v2-image" src="https://opengraph.githubassets.com/abe12a71b0f87298390e27755509943fe195b53650026dbdd89262833deb236d/microsoft/monaco-editor" />
<a href="https://github.com/microsoft/monaco-editor"></a>
</div>
```console
npm install monaco-editor
```
とりあえず何かは出た。
```html
<script setup lang="ts">
import * as monaco from "monaco-editor";
import { onMounted, ref } from "vue";
const editorEl = ref<HTMLDivElement | null>(null);
onMounted(() => {
const editor = monaco.editor.createDiffEditor(editorEl.value!);
editor.setModel({
original: monaco.editor.createModel("hoge\nhuga", "typescript"),
modified: monaco.editor.createModel("hoge\nhuhu", "typescript"),
});
});
</script>
<template>
<main>
<div ref="editorEl" style="width: calc(100vw - 300px); height: 300px"></div>
</main>
</template>
```