最初のツールは、入力と出力が一画面で見えるものに
SNS告知文や商品紹介文の長さを確認するために、ブラウザだけで動く文字数チェッカーを作ります。入力欄に文章を入れると、空白を含む文字数、空白を除いた文字数、行数を表示します。
サンプルは外部サービスやAI APIへ送信せず、ブラウザの中で計算します。入力内容を自動保存する機能もありません。再読み込みで入力は消えます。ブラウザ拡張機能など、ツール外部の動作までは制御しません。
1．作りたい機能を、小さな仕様にする
AIへ依頼するときは、作る機能だけでなく、何を数えるかを書きます。「文字数」はUnicodeの扱いで結果が変わるため、このサンプルではコードポイント数と定義します。SNSの投稿可能文字数を判定するツールではありません。
HTMLファイル一つで動く、日本語の文章チェックツールを作ってください。 入力：複数行の文章。 出力：Unicodeコードポイント数、空白を除くコードポイント数、行数。 空入力の行数は0。入力するたびに表示を更新する。 外部ライブラリ・外部通信・アクセス解析・自動保存を使わない。 スマートフォンでも入力しやすいラベル付きの入力欄を設ける。 絵文字の見た目の数やSNS固有の計算と異なる場合があると表示する。
ファイル名はtext-check.htmlです。AIのコードをテキストエディタへ貼り付け、拡張子が.html.txtになっていないことを確認します。保存したHTMLをブラウザで開くと使えます。
2．最小の動作部分を読む
const text = document.getElementById('text');
const result = document.getElementById('result');
text.addEventListener('input', () => {
const value = text.value;
const total = Array.from(value).length;
const compact = Array.from(value.replace(/\s/g, '')).length;
const lines = value ? value.split(/\r\n|\r|\n/).length : 0;
result.textContent = total + '文字／空白除外 ' + compact + '文字／' + lines + '行';
});JavaScriptの文字列イテレーターは、文字列をUnicodeコードポイント単位で扱います。一つに見える絵文字が複数のコードポイントでできている場合は、一文字と数えられないことがあります。
出力にはtextContentを使い、入力された文字をHTMLとして解釈させません。ダウンロード版には画面のHTMLとスタイル、外部通信を制限する設定も含めています。
3．完成の条件を手で確かめる
| 入力例 | 期待する表示 |
|---|---|
| 空欄 | 0文字・0行 |
| あいう | 3文字・1行 |
| A B | 3文字・空白除外2文字 |
| A、改行、B | 3文字・2行（LF改行の場合） |
サンプルの数え方は制作環境のJavaScriptで確認しています。独自ルールを足すなら、先に期待結果を書いてからAIへ頼みます。「140文字を超えたら色を変える」など、使い道に合わせて一機能ずつ追加すると見直しやすくなります。
このような小さなツールは自分の作業を補助する練習になります。配布や販売を考える場合は、対応環境、入力内容の扱い、問い合わせ先も説明できる形に整えましょう。
参照した公式資料
製品の仕様や利用条件は変更される場合があります。操作や導入の前に、公式ページも確認してください。記事内の作業例・指示文・サンプルは本サイトが作成しています。