「プログラミングは難しそう…」と思っていませんか？
実は、いつも使っているWebツールは、初心者でも HTMLとJavaScriptだけで作れるんです。
この記事では、誰でも簡単に試せる 全角⇔半角・ひらがな⇔カタカナ変換ツール の作り方を紹介します。
プログラミング未経験でも大丈夫です。コードの意味がわからなくても、まずは動くものを手に入れて、「自分で作れた！」という喜びを体験することから始めましょう。この記事を最後まで読めば、ツールの仕組みが分かり、さらに改造する力も身につきます。
プログラミングは“ゼロから完璧に理解する”必要はありません。まずは作って動かすことが第一歩です
ほーく
全角⇔半角・ひらがな⇔カタカナ変換ツールとは？
このツールは、入力したテキストを 全角⇔半角・ひらがな⇔カタカナ に瞬時に変換でき、さらにコピー機能でそのまま利用可能。
インストール不要で、PC・スマホのブラウザから誰でもすぐに使えます。
全角と半角の違い
- 全角：「ＡＢＣ１２３」のように文字が1マス分の幅を占める
- 半角：「ABC123」のように半分の幅で表記される
両方が混ざると見た目が崩れたり、システムでエラーが出たりすることがあります。
ひらがなとカタカナの変換
- ひらがな：「あいうえお」
- カタカナ：「アイウエオ」
外来語や固有名詞での使い分けに便利ですが、手作業での変換は面倒です。
【実際の全角⇔半角・ひらがな⇔カタカナ変換ツールの動作を試してみたい方はこちらからどうぞ】▼
ツールを動かしてみよう！【完成コード付き】
プログラミングを学ぶときは、まず完成品を手に入れてみましょう。レシピを見ながら料理を作るように、コードも最初はそのままコピー＆ペーストでOKです。
手順
- 以下のコードをコピー
- お使いのテキストエディタに貼り付け
- index.html という名前で保存
- ブラウザで開けば完成！
たったこれだけで、リアルタイムに文字を変換できる便利ツールが動きます。
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72 73 74 75 76 77 78 79 80 81 82 83 84 85 86 87 88 89 90 91 92 93 94 95 96 97 98 99 100 101 102 103 104 105 106 107 108 109 110 111 112 113 114 115 116 117 118 119 120 121 122 123 124 125 126 127 128 129 130 131 132 133 134 135 136 137 138 139 140 141 142 143 144 145 146 147 148 149 150 151 152 153 154 155 156 157 158 159 160 161 162 163 164 165 166 167 168 169 170 171 172 173 174 175 176 177 178 179 180 181 182 183 184 185 186 187 188 189 190 191 192 193 194 195 196 197 198 199 200 201 202 203 204 205 206 207 208 209 210 211 212 213 214 215 216 217 218 219 220 221 222 223 224 225 226 227 228 229 230 231 232 233 234 235 236 237 238 239 240 241 242 243 244 245 246 247 248 249 250 251 252 253 254 255 256 257 258 259 260 261 262 263 264 265 266 267 268 269 270 271 272 273 274 275 276 277 278 279 280 281 282 283 284 285 286 287 288 289 290 291 292 293 294 295 296 297 298 299 300 301 302 303 304 305 306 307 308 309 310 311 312 313 314 315 316 317 318 |
<!DOCTYPE html> <html lang="ja"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>全角⇔半角リアルタイム変換ツール</title> <style> :root { --main-bg-color: #f4f4f9; --container-bg-color: #ffffff; --text-color: #333333; --button-color: #4a90e2; --button-hover-color: #357bd2; --border-color: #dddddd; --box-shadow-color: rgba(0, 0, 0, 0.1); } @media (prefers-color-scheme: dark) { :root { --main-bg-color: #1e1e2f; --container-bg-color: #2a2a3e; --text-color: #e0e0e0; --button-color: #5d5d81; --button-hover-color: #7b7b9e; --border-color: #444455; --box-shadow-color: rgba(0, 0, 0, 0.2); } } body { font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif; background-color: var(--main-bg-color); color: var(--text-color); margin: 0; padding: 20px; display: flex; justify-content: center; align-items: flex-start; min-height: 100vh; box-sizing: border-box; } .container { width: 100%; max-width: 800px; background-color: var(--container-bg-color); padding: 30px; border-radius: 12px; box-shadow: 0 4px 12px var(--box-shadow-color); text-align: center; } h1 { color: var(--text-color); margin-bottom: 25px; font-size: 1.8rem; } .input-area { margin-bottom: 20px; } textarea { width: 100%; height: 150px; padding: 15px; font-size: 1rem; border: 1px solid var(--border-color); border-radius: 8px; resize: vertical; box-sizing: border-box; background-color: var(--container-bg-color); color: var(--text-color); transition: border-color 0.3s; } textarea:focus { border-color: var(--button-color); outline: none; } .counter { margin-top: 10px; font-size: 0.9rem; color: #777; text-align: left; } .output-section { display: flex; flex-direction: column; gap: 20px; margin-top: 20px; } .output-box { background-color: #f0f0f5; padding: 15px; border-radius: 8px; border: 1px solid var(--border-color); text-align: left; position: relative; } .output-box-dark { background-color: #333345; } .output-box h2 { margin-top: 0; font-size: 1.2rem; color: var(--text-color); } .output-text { width: 100%; min-height: 100px; padding: 10px; font-size: 1rem; border: none; background: none; color: var(--text-color); resize: none; box-sizing: border-box; cursor: text; } .copy-btn { position: absolute; top: 15px; right: 15px; padding: 8px 15px; font-size: 0.9rem; font-weight: bold; border: none; border-radius: 6px; cursor: pointer; transition: background-color 0.3s, transform 0.1s; color: white; background-color: #28a745; } .copy-btn:hover { background-color: #218838; } .copy-btn:active { transform: scale(0.98); } @media (max-width: 600px) { .container { padding: 20px; } } </style> </head> <body> <div class="container"> <h1>全角⇔半角リアルタイム変換ツール</h1> <div class="input-area"> <textarea id="inputText" placeholder="ここにテキストを入力してください..."></textarea> <div class="counter">文字数: <span id="charCount">0</span></div> </div> <div class="output-section"> <div class="output-box" id="toHalfWidthBox"> <h2>全角→半角</h2> <textarea class="output-text" id="toHalfWidthText" readonly></textarea> <button class="copy-btn" onclick="copyText('toHalfWidthText')">コピー</button> </div> <div class="output-box" id="toFullWidthBox"> <h2>半角→全角</h2> <textarea class="output-text" id="toFullWidthText" readonly></textarea> <button class="copy-btn" onclick="copyText('toFullWidthText')">コピー</button> </div> <div class="output-box" id="toKatakanaBox"> <h2>ひらがな→カタカナ</h2> <textarea class="output-text" id="toKatakanaText" readonly></textarea> <button class="copy-btn" onclick="copyText('toKatakanaText')">コピー</button> </div> <div class="output-box" id="toHiraganaBox"> <h2>カタカナ→ひらがな</h2> <textarea class="output-text" id="toHiraganaText" readonly></textarea> <button class="copy-btn" onclick="copyText('toHiraganaText')">コピー</button> </div> </div> </div> <script> const inputText = document.getElementById('inputText'); const toHalfWidthText = document.getElementById('toHalfWidthText'); const toFullWidthText = document.getElementById('toFullWidthText'); const toKatakanaText = document.getElementById('toKatakanaText'); const toHiraganaText = document.getElementById('toHiraganaText'); const charCount = document.getElementById('charCount'); // 文字数カウントとリアルタイム変換 inputText.addEventListener('input', () => { const value = inputText.value; charCount.textContent = value.length; // 各変換関数を呼び出して結果をセット toHalfWidthText.value = toHalfWidth(value); toFullWidthText.value = toFullWidth(value); toKatakanaText.value = toKatakana(value); toHiraganaText.value = toHiragana(value); }); // 共通のコピー機能 function copyText(elementId) { const copyTextarea = document.getElementById(elementId); if (copyTextarea.value) { navigator.clipboard.writeText(copyTextarea.value).then(() => { const copyBtn = copyTextarea.nextElementSibling; const originalText = copyBtn.textContent; const originalColor = copyBtn.style.backgroundColor; copyBtn.textContent = 'コピー完了！'; copyBtn.style.backgroundColor = '#218838'; setTimeout(() => { copyBtn.textContent = originalText; copyBtn.style.backgroundColor = originalColor; }, 1500); }).catch(err => { console.error('コピーに失敗しました:', err); alert('コピーに失敗しました。'); }); } } // 全角→半角 function toHalfWidth(str) { let result = str; // 記号、英数字、スペース、長音符の変換 result = result.replace(/[！-～]/g, s => String.fromCharCode(s.charCodeAt(0) - 0xFEE0)); result = result.replace(/ /g, ' '); result = result.replace(/ー/g, '-'); // カタカナを辞書方式で変換 const kanaMap = { 'ア': 'ｱ', 'イ': 'ｲ', 'ウ': 'ｳ', 'エ': 'ｴ', 'オ': 'ｵ', 'カ': 'ｶ', 'キ': 'ｷ', 'ク': 'ｸ', 'ケ': 'ｹ', 'コ': 'ｺ', 'サ': 'ｻ', 'シ': 'ｼ', 'ス': 'ｽ', 'セ': 'ｾ', 'ソ': 'ｿ', 'タ': 'ﾀ', 'チ': 'ﾁ', 'ツ': 'ﾂ', 'テ': 'ﾃ', 'ト': 'ﾄ', 'ナ': 'ﾅ', 'ニ': 'ﾆ', 'ヌ': 'ﾇ', 'ネ': 'ﾈ', 'ノ': 'ﾉ', 'ハ': 'ﾊ', 'ヒ': 'ﾋ', 'フ': 'ﾌ', 'ヘ': 'ﾍ', 'ホ': 'ﾎ', 'マ': 'ﾏ', 'ミ': 'ﾐ', 'ム': 'ﾑ', 'メ': 'ﾒ', 'モ': 'ﾓ', 'ヤ': 'ﾔ', 'ユ': 'ﾕ', 'ヨ': 'ﾖ', 'ラ': 'ﾗ', 'リ': 'ﾘ', 'ル': 'ﾙ', 'レ': 'ﾚ', 'ロ': 'ﾛ', 'ワ': 'ﾜ', 'ヲ': 'ｦ', 'ン': 'ﾝ', 'ァ': 'ｧ', 'ィ': 'ｨ', 'ゥ': 'ｩ', 'ェ': 'ｪ', 'ォ': 'ｫ', 'ャ': 'ｬ', 'ュ': 'ｭ', 'ョ': 'ｮ', 'ッ': 'ｯ', '、': '､', '。': '｡', '「': '｢', '」': '｣', '・': '･', 'ヴ': 'ｳﾞ', 'ガ': 'ｶﾞ', 'ギ': 'ｷﾞ', 'グ': 'ｸﾞ', 'ゲ': 'ｹﾞ', 'ゴ': 'ｺﾞ', 'ザ': 'ｻﾞ', 'ジ': 'ｼﾞ', 'ズ': 'ｽﾞ', 'ゼ': 'ｾﾞ', 'ゾ': 'ｿﾞ', 'ダ': 'ﾀﾞ', 'ヂ': 'ﾁﾞ', 'ヅ': 'ﾂﾞ', 'デ': 'ﾃﾞ', 'ド': 'ﾄﾞ', 'バ': 'ﾊﾞ', 'ビ': 'ﾋﾞ', 'ブ': 'ﾌﾞ', 'ベ': 'ﾍﾞ', 'ボ': 'ﾎﾞ', 'パ': 'ﾊﾟ', 'ピ': 'ﾋﾟ', 'プ': 'ﾌﾟ', 'ペ': 'ﾍﾟ', 'ポ': 'ﾎﾟ' }; const convertKana = (s) => kanaMap[s] || s; result = [...result].map(convertKana).join(''); return result; } // 半角→全角 function toFullWidth(str) { let result = str; result = result.replace(/[A-Za-z0-9]/g, s => String.fromCharCode(s.charCodeAt(0) + 0xFEE0)); result = result.replace(/[!-~]/g, s => String.fromCharCode(s.charCodeAt(0) + 0xFEE0)); result = result.replace(/ /g, ' '); result = result.replace(/[ｧ-ﾝﾞﾟ]/g, s => { const map = { 'ｱ': 'ア', 'ｲ': 'イ', 'ｳ': 'ウ', 'ｴ': 'エ', 'ｵ': 'オ', 'ｶ': 'カ', 'ｷ': 'キ', 'ｸ': 'ク', 'ｹ': 'ケ', 'ｺ': 'コ', 'ｻ': 'サ', 'ｼ': 'シ', 'ｽ': 'ス', 'ｾ': 'セ', 'ｿ': 'ソ', 'ﾀ': 'タ', 'ﾁ': 'チ', 'ﾂ': 'ツ', 'ﾃ': 'テ', 'ﾄ': 'ト', 'ﾅ': 'ナ', 'ﾆ': 'ニ', 'ﾇ': 'ヌ', 'ﾈ': 'ネ', 'ﾉ': 'ノ', 'ﾊ': 'ハ', 'ﾋ': 'ヒ', 'ﾌ': 'フ', 'ﾍ': 'ヘ', 'ﾎ': 'ホ', 'ﾏ': 'マ', 'ﾐ': 'ミ', 'ﾑ': 'ム', 'ﾒ': 'メ', 'ﾓ': 'モ', 'ﾔ': 'ヤ', 'ﾕ': 'ユ', 'ﾖ': 'ヨ', 'ﾗ': 'ラ', 'ﾘ': 'リ', 'ﾙ': 'ル', 'ﾚ': 'レ', 'ﾛ': 'ロ', 'ﾜ': 'ワ', 'ｦ': 'ヲ', 'ﾝ': 'ン', 'ﾞ': '゛', 'ﾟ': '゜', 'ｧ': 'ァ', 'ｨ': 'ィ', 'ｩ': 'ゥ', 'ｪ': 'ェ', 'ｫ': 'ォ', 'ｬ': 'ャ', 'ｭ': 'ュ', 'ｮ': 'ョ', 'ｯ': 'ッ', 'ｰ': 'ー', '､': '、', '｡': '。', '｢': '「', '｣': '」', '･': '・' }; return map[s] || s; }); result = result.replace(/([ァ-ヶ])(゛|゜)/g, (match, p1, p2) => { const map = { 'カ゛': 'ガ', 'キ゛': 'ギ', 'ク゛': 'グ', 'ケ゛': 'ゲ', 'コ゛': 'ゴ', 'サ゛': 'ザ', 'シ゛': 'ジ', 'ス゛': 'ズ', 'セ゛': 'ゼ', 'ソ゛': 'ゾ', 'タ゛': 'ダ', 'チ゛': 'ヂ', 'ツ゛': 'ヅ', 'テ゛': 'デ', 'ト゛': 'ド', 'ハ゛': 'バ', 'ヒ゛': 'ビ', 'フ゛': 'ブ', 'ヘ゛': 'ベ', 'ホ゛': 'ボ', 'ハ゜': 'パ', 'ヒ゜': 'ピ', 'フ゜': 'プ', 'ヘ゜': 'ペ', 'ホ゜': 'ポ' }; return map[p1 + p2] || match; }); return result; } // ひらがな→カタカナ function toKatakana(str) { return str.replace(/[\u3041-\u3096]/g, s => String.fromCharCode(s.charCodeAt(0) + 0x60)); } // カタカナ→ひらがな function toHiragana(str) { return str.replace(/[\u30a1-\u30f6]/g, s => String.fromCharCode(s.charCodeAt(0) - 0x60)); } </script> </body> </html> |
なぜ動くのか？コードの仕組みを徹底解説
「なぜコピペしただけで動くの？」という疑問を解決するために、コードを3つの役割に分けて解説します。
HTML：ページの骨組み
- 入力欄
<textarea id="inputText"> - 出力欄
<div class="output-box">
→ 部品を配置するのが役割。
CSS：見た目を整える
body { ... }ページ全体の色や文字の設定.copy-btn { ... }コピー用ボタンのデザイン@mediaでスマホ表示に対応（レスポンシブデザイン）
JavaScript：ツールに命を吹き込む
addEventListener('input')で入力のたびに処理を実行- 文字列を全角/半角・ひらがな/カタカナへ自動変換
navigator.clipboard.writeText()でコピー機能を実装
リアルタイム変換の仕組み
今回のツールの特長は「ボタンを押さなくても入力するだけで変換される」ことです。その秘密はJavaScriptにあります。
|
1 2 3 4 5 6 7 |
inputText.addEventListener('input', () => { const value = inputText.value; toHalfWidthText.value = toHalfWidth(value); toFullWidthText.value = toFullWidth(value); toKatakanaText.value = toKatakana(value); toHiraganaText.value = toHiragana(value); }); |
このコードは「入力欄に文字が入力されるたびに処理を実行せよ」という命令です。
そのため、文字を打った瞬間に4種類の変換結果が同時に表示されます。
inputイベントを使うと、文字が入力されるたびに処理を実行できるんです
ほーく
文字列変換のロジックを理解しよう
全角⇔半角の変換
replace(/[！-～]/g, ...)のように、正規表現を使って全角の文字パターンをまとめて探し、一括で半角に変換しています。
カタカナ変換
全角・半角のカタカナは文字コードが連続していないため、const kanaMap = { 'ア': 'ｱ', ... };のように、一つ一つの対応を辞書（マップ）として用意し、入力された文字と照らし合わせて変換しています。
コピー機能
ブラウザに備わった navigator.clipboard.writeText() を使い、ワンクリックで結果をコピーできます。
仕組みを知ると、自分で変換ルールを追加できるようになりますよ
ほーく
もっと便利に改造してみよう【応用編】
基本機能を理解したら、少し改造してみると学習効果が高まります。
変換オプションの追加
現在のツールは、入力するだけで全機能が動くシンプルな仕様です。しかし、「ひらがなだけを変換したい」など、特定の変換だけを行いたい場合もありますよね。
これを解決するために、HTMLにチェックボックスやボタンを追加し、JavaScriptでif文を使って「もしこのチェックボックスにチェックが入っていたら、ひらがな変換処理を実行する」といった条件分岐を実装してみましょう。これにより、よりカスタマイズ性の高いツールになります。
リアルタイム変換のON/OFF機能
大量の文章を入力するとき、リアルタイム変換が重たく感じるかもしれません。そんなときは、変換を一時的に停止するボタンを追加してみましょう。
inputイベントをremoveEventListener()で一時的に無効化し、ボタンが再度押されたときにaddEventListener()で有効化することで、ユーザーは快適にツールを利用できます。
これらのアイデアを実際に試してみることで、あなたのプログラミングスキルはさらに向上します。
初心者におすすめ！学習を続けたい人へのおすすめリソース
ここまでツールを作ってみて「もっとHTMLやJavaScriptを学んでみたい！」と思った方も多いはずです。
そんな方に向けて、基礎をしっかり学べるリソースを紹介します。
おすすめの書籍
『確かな力が身につくJavaScript超入門』（SBクリエイティブ）
- JavaScriptを基礎から丁寧に学べる入門書。
- 実践的なサンプルも豊富で、今回のツールのような小さなアプリを自分で作れるようになります。
- 初学者にぴったりの1冊です。
『スラスラわかるHTML＆CSSのきほん』（SBクリエイティブ）
- Web制作初心者に最適な入門書。HTMLとCSSの仕組みをやさしく解説。
- これからWebページを作ってみたい方にぴったり。
- レイアウトの基本やスタイルの調整方法など、実践的に学べます。
オンライン講座編
Udemy｜世界最大級のオンライン学習プラットフォーム
世界中で利用されるオンライン学習サイト。
HTML、CSS、JavaScriptの入門から応用まで、高評価の講座が数百種類揃っています。
初心者でも動画を見ながら手を動かせるので、挫折しにくいのが魅力です。
まとめ｜小さな一歩からWeb開発を始めよう
今回紹介した 全角⇔半角・ひらがな⇔カタカナ変換ツール は、コピペするだけで誰でも作れるシンプルなWebアプリです。
- HTML・CSS・JavaScriptの基本構造を実際に体験できる
- リアルタイム変換やコピー機能の仕組みが理解できる
- 条件分岐やイベントリスナーを学ぶことで応用の幅が広がる
このように、たった一つの小さなツールでも、Web開発に必要な多くの要素を学ぶことができます。さらに、少し改造を加えるだけで、自分専用の便利ツールに育てることも可能です。
「自分で作ったものが実際に動く」という体験は、何よりも大きな学習効果を生みます。最初は真似から始めても構いません。繰り返し手を動かすうちに、「こうしたい」というアイデアが自然に生まれてきます。その時こそ、本当の意味で自分の力でプログラミングができる瞬間です。
関連記事
【実際の全角⇔半角・ひらがな⇔カタカナ変換ツールの動作を試してみたい方はこちらからどうぞ】▼
【作り方記事】大文字小文字変換ツールの作り方｜HTMLとJavaScriptで簡単Web開発 ▼
【作り方記事】テキスト置換ツールの作り方を初心者向けに解説｜HTMLとJavaScriptで業務効率UPツールを自作！ ▼
