Vueでクリーナーアプリ()作ってみた！

:::note warn
この記事では`()`というネットミームを多用しています。
知らない方はこちらを見ることをお勧めします。

https://kw-note.com/internet-slang/kuuhaku-kakko/

:::

## 環境
- Microsoft Windows Pro Version 22H2 (OS Build 19045.5487)
- Powershell
- bun v1.2.3
## 初期化
```powershell
PS C:\XXX> bun create vite@latest
? Project name: cleaner
Select a framework: Vue
Select a variant: TypeScript
PS C:\XXX> cd cleaner
PS C:\XXX> bun i
```
## 画面
```vue:App.vue
<template>

  <template v-if="state==State.Home" class="home">
    <h1>メモリクリーナー</h1>
    <p>デバイスのメモリをクリーンアップします</p>
    <button @click="state=State.Scan">クリーンアップ</button>
  </template>

  <div v-else-if="state==State.Scan" class="scan">
    <h1>スキャン中...</h1>
    <span class="loader">{{ loader }}</span><br>
    <span class="volume">{{ Math.round(progress) }}MB</span>
  </div>

  <div v-else-if="state==State.Clean" class="scan">
    <h1>クリーンアップ中...</h1>
    <span class="loader">{{ loader }}</span><br>
    <span class="volume">{{ Math.round(progress) }}MB / {{ Math.round(volume) }}MB</span>
  </div>

  <div v-else class="complete">
    <h1>クリーンアップが完了しました</h1>
    <p>あなたは安心してデバイスを使えます</p>
  </div>

</template>
```
変数について軽く説明します。
| 名前 | 説明 |
|:-:|:-:|
| state | 画面の状態です。const enumです。 |
| loader | ローディングのo0ooみたいなやつです。 |
| progress | スキャン()の進行度です。 |
| volume | クリーンアップ()するメモリサイズです。 |
## スタイル
```css:style.css
:root{
  text-align: center;
}

```
```vue:App.vue
<style scoped>
h1{
  padding: 15px;
}
.home h1{
  background:skyblue;
  margin: 0;
  outline: 0;
}
button{
  font-size: 20px;
  padding: 10px;
  border: none;
  border-radius: 20px;
  cursor: pointer;
  background: springgreen;
  transition: all 0.5s ease;
}
button:hover{
  background: greenyellow;
}
div{ /* 背景を完全に満たすスタイル */
  background: springgreen;
  position: fixed;
  left: 0;
  top:  0;
  width: 100%;
  height: 100%;
  margin: 0;
  display:block;
}
.complete{
  background: greenyellow;
}
.volume{
  font-size: 40px;
}
.loader{
  font-family: monospace;
  white-space:pre;
}
</style>
```
## 【本題】クリーンアップ()プログラム
```vue:App.vue
<script setup lang="ts">
import { ref, watch } from 'vue';

const enum State{
  Home,
  Scan,
  Clean,
  Complete
}
const state = ref(State.Home);
const progress = ref(0);
const volume = ref(0);
watch(state,()=>{
  if(state.value == State.Scan){
    progress.value = 0;
    volume.value = Math.random() * 100 + 100; //スキャンする量を取得()
    const interval = setInterval(()=>{
      progress.value += Math.random()*2; //スキャン()
      if(progress.value > volume.value){ //スキャンが完了したらクリーンアップ
        clearInterval(interval);
        volume.value = progress.value; //ずれ補正
        setTimeout(()=>state.value = State.Clean, 1000)
      }
    },100)
  }else if(state.value == State.Clean){
    progress.value = 0; // クリーン状況を表示するためリセット
    const interval = setInterval(()=>{
      progress.value += Math.random(); //クリーンアップ処理()
      if(progress.value > volume.value){ //クリーンアップが終わったら終了画面に
        clearInterval(interval);
        state.value = State.Complete;
      }
    },100)
  }
})
// ローディングのやつの処理
const loader = ref("oooo");
let lv = 0;
const l = [ // ローディングテキストを配列で管理
  "oooooo",
  "0ooooo",
  "o0oooo",
  "oo0ooo",
  "ooo0oo",
  "oooo0o",
  "ooooo0",
]
setInterval(()=>{
  lv++;
  loader.value = l[lv%l.length];
  lv %= l.length;
},100)
</script>
```
## スキャン処理解説
1. 進行状況をリセットする
1. スキャンするメモリ量を乱数から取得
1. 100ミリ秒(0.1秒)ごとに進行状況を0~2ずつ変える
1. 決めたスキャンするメモリ量を進行状況が超えたら1秒後にクリーンアップする
## クリーンアップ処理解説
1. 進行状況をリセットする
1. 100ミリ秒ごとに進行状況を0~1ずつ変える
1. 決めたスキャンするメモリ量を進行状況が超えたら完了する
## 元ネタ
> The source code of Windows'
> troubleshooting program has leaked
> ```c
> #include <windows.h>
> #include <stdio.h>
> 
> int main() {
>     printf("Searching for problems...\n");
>     Sleep(60000);
>     printf("We didn't find any problems\n");
> }
> ```

https://qiita.com/cirusthenter/items/4bae72a5bd17a53883f3#windows-troubleshooting-code-leaked


https://ifunny.co/picture/the-source-code-of-windows-troubleshooting-program-has-leaked-include-SMD0gHI28

## 完成品
その他メタデータの編集などありますので実際に生()で見ていただけるとありがたいです。

https://github.com/TNTSuperMan/MemoryCleaner

## あとがき
CSSは難しいです。

:::note alert
クリーンアップアプリはマルウェア等が
仕込まれることのあるのでなるべく使わないでください。
どうしても気になるなら再起動してください。
確実にすべてのメモリが解放され、
すべてのタスクが終わります。
:::