エンコード・デコードツール

Cloudflare Pages 向けの TypeScript + React + Vite アプリです。

入力文字列は URL エンコード、URL デコード、文字数チェックのすべてでサーバーへ送信されず、ブラウザ内だけで処理されます。URL エンコード/デコードの前回入力値は indexedDB に保存されます。

記事

Codex でシングルページアプリケーションを開発し、GitHub コミットから Cloudflare Pages デプロイまで進める流れをまとめています。

• Codexでシングルページアプリケーションを開発する

ローカル実行

pnpm install
pnpm dev
pnpm lint
pnpm test
pnpm build

GitHub にコミットして Cloudflare Pages にデプロイする手順

以下は PowerShell で実行します。YOUR_GITHUB_USER と YOUR_REPOSITORY_NAME は自分の GitHub ユーザー名、リポジトリ名に置き換えてください。

1. 事前確認

git --version
pnpm --version

pnpm が未インストールの場合は、Node.js をインストール後に以下を実行します。

corepack enable
corepack prepare pnpm@latest --activate

2. ビルド確認

コミット前に lint / test / build を通します。

pnpm install
pnpm lint
pnpm test
pnpm build

3. Git リポジトリを初期化

まだ Git 管理していない場合のみ実行します。

git init
git branch -M main

4. GitHub に空リポジトリを作成

GitHub の Web 画面で新しい空リポジトリを作成します。

• Repository name: YOUR_REPOSITORY_NAME
• README / .gitignore / license は追加しない
• Visibility は任意

GitHub CLI を使う場合は、以下でも作成できます。

gh repo create YOUR_GITHUB_USER/YOUR_REPOSITORY_NAME --private --source . --remote origin

Web で作成した場合は、remote を設定します。

git remote add origin https://github.com/YOUR_GITHUB_USER/YOUR_REPOSITORY_NAME.git

5. ソースコードをコミットして push

git status
git add .
git commit -m "Create encode decode tool"
git push -u origin main

node_modules と dist は .gitignore に含まれているためコミットされません。pnpm-lock.yaml は再現性のためコミットします。

6. Cloudflare Pages に接続

# Cloudflare Pages デプロイ手順
# 1. Cloudflare Dashboard > Workers & Pages > Create application > Pages を開く
# 2. GitHub を選択し、`YOUR_REPOSITORY_NAME` の Git リポジトリを接続する
# 3. Framework preset は Vite を選択する
# 4. Build command に `pnpm build` を設定する
# 5. Build output directory に `dist` を設定する
# 6. Root directory は空欄、またはリポジトリ直下を指定する
# 7. Save and Deploy を押す
# 8. デプロイ後、Pages の発行 URL で動作確認する

7. 以後の更新と再デプロイ

Cloudflare Pages は GitHub の main ブランチに push されるたびに自動デプロイします。

pnpm lint
pnpm test
pnpm build
git status
git add .
git commit -m "Update encode decode tool"
git push

push 後は Cloudflare Dashboard の Pages プロジェクトでデプロイ状況を確認します。