【IT】ソースコード用簡易個人情報マスキングツール（Svelte＋Tailwind CSS）

$ npm -v
11.3.0

$ node -v
v22.12.0

$ npm create vite@latest

> npx
> create-vite

│
◇  Project name:
│  mask-app-log-svelte1
│
◇  Select a framework:
│  Svelte
│
◇  Select a variant:
│  TypeScript
│
◇  Scaffolding project in /Users/user/info_remval/mask-app-log-svelte1...
│
└  Done. Now run:

  cd mask-app-log-svelte1
  npm install
  npm run dev

$ cd mask-app-log-svelte1

$ npm install

<script lang="ts">

</script>

<main>
  <h1 class="text-3xl font-bold underline">
    Hello world!
  </h1>


</main>

<style>
  /* 必要に応じて Tailwind CSS の代わりにここに通常の CSS を追加してもOK */
</style>

$ cd mask-app-log-svelte1

$ npm install tailwindcss @tailwindcss/vite

added 84 packages, and audited 129 packages in 3s

19 packages are looking for funding
  run `npm fund` for details

import { defineConfig } from 'vite'
import { svelte } from '@sveltejs/vite-plugin-svelte'
import tailwindcss from '@tailwindcss/vite'  // →追加

// https://vite.dev/config/
export default defineConfig({
  base: './',                      // ← 相対パスに強制
  plugins: [
    svelte(),
    tailwindcss(),                 // →追加
　],　
})

@import "tailwindcss";

// 学習用のサンプルコードです。

// src/lib/sanitizeText.ts

/**
 * 個人情報や機密情報を含む可能性のある行を自動でマスクします
 * チャットや掲示板投稿前の事前チェックに使用します
 * 実際のマスクパターンをこのファイルに追加していきます。
 */
export function sanitizeText(input: string): string {
  return input
    // ✅ メールアドレス
    .replace(/[\w.-]+@[\w.-]+\.\w+/g, '[email masked]')

    // ✅ パスワード代入っぽい行
    .replace(/(password\s*=\s*)['"].+?['"]/gi, '$1"[masked]"')

    // ✅ ファイルパス（Linux/macOS/Windows）
    .replace(/\/home\/\w+|\/Users\/\w+|C:\\Users\\\w+/gi, '/[user]')

    // ✅ GitHubユーザー名入りURL
    .replace(/https:\/\/github\.com\/[\w-]+\//gi, 'https://github.com/[user]/')

    // ✅ コメントや署名（簡易）
    .replace(/#\s*by\s+\w+/gi, '# by [user]')

    // ✅ IPアドレス（IPv4）
    .replace(/\b\d{1,3}(?:\.\d{1,3}){3}\b/g, '[ip masked]');
}

<!-- 学習用のサンプルコードです。 -->

<script lang="ts">
  import { sanitizeText } from './lib/sanitizeText';
  let input = '';
  let output = '';

  function handleSanitize() {
    output = sanitizeText(input);
  }

  function handleClear() {
    input = '';
    output = '';
  }
</script>

<main class="p-6 max-w-3xl mx-auto">
  <h1 class="text-2xl font-bold mb-4">SanityPaste</h1>

  <!-- 入力欄 -->
  <label for="inputText" class="block mb-2 font-semibold">入力</label>
  <textarea
    id="inputText"
    bind:value={input}
    rows="10"
    class="w-full border p-2 mb-4 rounded"
  ></textarea>

  <!-- 実行ボタン -->
  <button
    onclick={handleSanitize}
    class="bg-blue-600 text-white px-4 py-2 rounded"
  >
    マスク実行
  </button>

  <button 
    onclick={handleClear} 
    class="bg-gray-400 hover:bg-gray-500 text-white px-4 py-2 rounded"
  >
    クリア
  </button>

  <!-- 出力欄 -->
  <label for="outputText" class="block mt-6 mb-2 font-semibold">出力（マスク後）</label>
  <textarea
    id="outputText"
    readonly
    value={output}
    rows="10"
    class="w-full border p-2 bg-gray-100 rounded"
  ></textarea>
</main>

<style>
  /* 必要に応じて Tailwind CSS の代わりにここに通常の CSS を追加してもOK */
</style>

$ npm run build

> mask-app-log-svelte1@0.0.0 build
> vite build

vite v7.0.6 building for production...
✓ 104 modules transformed.
dist/index.html                  0.48 kB │ gzip: 0.31 kB
dist/assets/index-xxxx.css       5.67 kB │ gzip: 1.92 kB
dist/assets/index-xxxx.js       23.06 kB │ gzip: 9.68 kB

$ npm run preview

> mask-app-log-svelte1@0.0.0 preview
> vite preview

  ➜  Local:   http://localhost:4173/
  ➜  Network: use --host to expose
  ➜  press h + enter to show help

open -na "Google Chrome" --args --disable-web-security --user-data-dir="/tmp/chrome"

$ ./make-standalone.sh
🔧 スタンドアロンHTMLを生成中...
✅ favicon付きスタンドアロンHTMLを生成しました: dist/index_standalone.html