nulltemp's Portfolio

デベロッパーツール

https://dev-tools.nulltemp.com/

文字数カウンター、JSON整形、JWTデコーダーなど、開発時に役立つツールをまとめたNext.js製のWebアプリです。

デベロッパーツールを開く

どんなサイトか

「デベロッパーツール」は、プログラミングやWeb開発の作業中に「ちょっと確認したい」場面で使える、小さなツールを集めたサイトです。今は文字数カウンター、JSON整形、JWTデコーダーの3つがあります。

どのツールも、入力した内容はブラウザの中だけで処理し、サーバーには送信しません。登録も不要で、開いてすぐに使えます。

文字数カウンター

テキストを入力すると、その場で文字数を数えて表示します。ブログの記事やSNSの投稿、フォームの入力欄など、文字数に上限がある文章を書くときに使えます。

絵文字も見た目どおり1文字と数える

JavaScriptの文字列の長さ（length）で数えると、「👍」は2文字、「👨‍👩‍👧」のような家族の絵文字は8文字と数えられてしまいます。これは、コンピューターの内部では、1つに見える文字が複数の部品の組み合わせで表されていることがあるためです。このツールでは、ブラウザのIntl.Segmenterを使って、人が見て1文字だと感じる単位（書記素）で数えるので、絵文字や濁点を組み合わせた文字も1文字になります。

空白や改行も1文字として数えます。サービスによっては改行や絵文字の数え方が違うことがあるので、上限ぎりぎりの場合は投稿先の仕様も確認してください。

JSON整形

1行に詰まったJSONを貼り付けて「整形」を押すと、2文字のインデントを付けて読みやすく並べ直します。APIのレスポンスやログに出力されたJSONの中身を確認するときに便利です。

入力例と整形後の結果：

入力: {"name":"nulltemp","skills":["Java","Vue"],"active":true}

整形後:
{
  "name": "nulltemp",
  "skills": [
    "Java",
    "Vue"
  ],
  "active": true
}

使うときの注意

  • JSONとして正しくない入力（末尾の余分なカンマ、コメント、シングルクォートで囲んだ文字列など）は、「無効なJSONです」と表示されます。
  • 同じキーが2回出てくる場合は、後のほうの値だけが残ります。
  • 9007199254740991（2の53乗−1）を超える大きな整数は、JavaScriptの数値の精度の都合で、下の桁が変わって表示されることがあります。IDなどの大きな数値を確認するときは注意してください。

JWTデコーダー

JWT（JSON Web Token）は、ログイン後の認証などで使われる、「ヘッダー」「ペイロード」「署名」の3つの部分を「.」でつないだ文字列です。このツールにJWTを貼り付けて「デコード」を押すと、ヘッダーとペイロードの中身を読みやすいJSONにして表示します。

  • ペイロードに有効期限（exp）があれば、日本時間の日時に変換して表示し、すでに期限が切れているかどうかも示します。
  • 署名はそのまま表示するだけで、検証はしていません。トークンが改ざんされていないかを確かめる用途には使えません。

JWTの中身は誰でも読める

JWTのヘッダーとペイロードは、Base64URLという方式で文字を置き換えているだけで、暗号化はされていません。このツールで中身が読めるのと同じように、トークンを手に入れた人は誰でも中身を読めます。パスワードなどの秘密の情報をペイロードに入れないようにしましょう。

また、本番環境で使っているトークンは、それだけでログインできてしまう場合があります。このツールはサーバーに送信しませんが、一般に、本物のトークンを信頼できないWebサイトに貼り付けるのは避けてください。

工夫した点

ツールを足しやすい作り

ツールの名前・説明・URLは1つの一覧にまとめ、サイドバーのメニュー、トップページのカード、検索エンジン向けのサイトマップを、すべてその一覧から自動で作っています。新しいツールを追加するときは、ページを作って一覧に1行足すだけで、メニューなどへの登録漏れが起きません。

処理と画面を分けてテストする

文字数を数える処理、JSONを整形する処理、JWTを読み取る処理は、画面とは別の関数にして、自動テストで確かめています。たとえばJWTデコーダーは、期限切れの判定に使う「現在時刻」を外から渡せるようにして、テストのたびに結果が変わらないようにしています。

静的なサイトとして公開

すべての処理がブラウザで完結するので、サーバーを持たない静的なサイトとして書き出して公開しています。動かすための費用がかからず、表示も速くなります。

使用技術

  • フレームワーク：Next.js（App Router、静的エクスポート）+ React
  • 言語：TypeScript
  • UI：MUI（Material UI）、ダークモードにも対応
  • テスト：Vitest
サービス一覧に戻る