👻
【マッピング】半角カナ返還をリアルタイムで行う入力欄の作成【死闘】
死闘
onChangeイベント使うと単純なマッピングだと濁点半濁点などで失敗する
ひらがな、英字どっちで入力してもローマ字入力をすべて半角カナに変換するマッピングをすべて書くやり方で実装
実装(途中)
"use client";
import React, { useState } from "react";
import { TextField } from "@mui/material";
import { HighQualityOutlined } from "@mui/icons-material";
const RomajiToHankanaConverter = () => {
const [input, setInput] = useState("");
const [output, setOutput] = useState("");
const romajiToHankana = (str) => {
let romajiMap = {
// 1. 1文字での入力
a: "ｱ",
i: "ｲ",
u: "ｳ",
e: "ｴ",
o: "ｵ",
ka: "ｶ",
ki: "ｷ",
ku: "ｸ",
ke: "ｹ",
ko: "ｺ",
sa: "ｻ",
shi: "ｼ",
su: "ｽ",
se: "ｾ",
so: "ｿ",
ta: "ﾀ",
chi: "ﾁ",
tsu: "ﾂ",
te: "ﾃ",
to: "ﾄ",
na: "ﾅ",
ni: "ﾆ",
nu: "ﾇ",
ne: "ﾈ",
no: "ﾉ",
ha: "ﾊ",
hi: "ﾋ",
fu: "ﾌ",
he: "ﾍ",
ho: "ﾎ",
ma: "ﾏ",
mi: "ﾐ",
mu: "ﾑ",
me: "ﾒ",
mo: "ﾓ",
ya: "ﾔ",
yu: "ﾕ",
yo: "ﾖ",
ra: "ﾗ",
ri: "ﾘ",
ru: "ﾙ",
re: "ﾚ",
ro: "ﾛ",
wa: "ﾜ",
wo: "ｦ",
nn: "ﾝ",
//2. 特殊な英字入力空の変換
//ga done
ga: "ｶﾞ",
kka: "ｯｶ",
gga: "ｯｶﾞ",
kya: "ｷｬ",
gya: "ｷﾞｬ",
kkya: "ｯｷｬ",
ggya: "ｯｷﾞｬ",
gi: "ｷﾞ",
kki: "ｯｷ",
ggi: "ｯｷﾞ",
gu: "ｸﾞ",
kku: "ｯｸ",
ggu: "ｯｸﾞ",
kkyu: "ｯｷｭ",
ggyu: "ｯｷﾞｭ",
ge: "ｹﾞ",
kke: "ｯｹ",
gge: "ｯｹﾞ",
go: "ｺﾞ",
kko: "ｯｺ",
ggo: "ｯｺﾞ",
kyo: "ｷｮ",
gyo: "ｷﾞｮ",
kkyo: "ｯｷｮ",
ggyo: "ｯｷﾞｮ",
// za : doing(testする)
za: "ｻﾞ",
zi: "ｼﾞ",
zu: "ｽﾞ",
ze: "ｾﾞ",
zo: "ｿﾞ",
ssa: "ｯｻ",
ssi: "ｯｼ",
ssu: "ｯｽ",
sse: "ｯｾ",
sso: "ｯｿ",
zza: "ｯｻﾞ",
zzi: "ｯｼﾞ",
zzu: "ｯｽﾞ",
zze: "ｯｾﾞ",
zzo: "ｯｿﾞ",
sha: "ｼｬ",
shi: "ｼ",
shu: "ｼｭ",
she: "ｼｪ",
sho: "ｼｮ",
sya: "ｼｬ",
syi: "ｼｨ",
syu: "ｼｭ",
sye: "ｼｪ",
syo: "ｼｮ",
ssha: "ｯｼｬ",
sshi: "ｯｼ",
sshu: "ｯｼｭ",
sshe: "ｯｼｪ",
ssho: "ｯｼｮ",
ssya: "ｯｼｬ",
ssyi: "ｯｼｨ",
ssyu: "ｯｼｭ",
ssye: "ｯｼｪ",
ssyo: "ｯｼｮ",
ja: "ｼﾞｬ",
ji: "ｼﾞ",
ju: "ｼﾞｭ",
je: "ｼﾞｪ",
jo: "ｼﾞｮ",
jja: "ｯｼﾞｬ",
jji: "ｯｼﾞ",
jju: "ｯｼﾞｭ",
jje: "ｯｼﾞｪ",
jjo: "ｯｼﾞｮ",
// da: doing
da: "ﾀﾞ",
di: "ﾁﾞ",
du: "ﾂﾞ",
de: "ﾃﾞ",
do: "ﾄﾞ",
tta: "ｯﾀ",
tti: "ｯﾁ",
ttu: "ｯﾂ",
tte: "ｯﾃ",
tto: "ｯﾄ",
dda: "ｯﾀﾞ",
ddi: "ｯﾁﾞ",
ddu: "ｯﾂﾞ",
dde: "ｯﾃﾞ",
ddo: "ｯﾄﾞ",
tya: "ﾁｬ",
tyi: "ﾁｨ",
tyu: "ﾁｭ",
tye: "ﾁｪ",
tyo: "ﾁｮ",
tha: "ﾃｬ",
thi: "ﾃｨ",
thu: "ﾃｭ",
the: "ﾃｪ",
tho: "ﾃｮ",
cha: "ﾁｬ",
chi: "ﾁ",
chu: "ﾁｭ",
che: "ﾁｪ",
cho: "ﾁｮ",
cya: "ﾁｬ",
cyi: "ﾁｨ",
cyu: "ﾁｭ",
cye: "ﾁｪ",
cyo: "ﾁｮ",
dya: "ﾁﾞｬ",
dyi: "ﾁﾞｲ",
dyu: "ﾁﾞｭ",
dye: "ﾁﾞｪ",
dyo: "ﾁﾞｮ",
dha: "ﾃﾞｬ",
dhi: "ﾃﾞｨ",
dhu: "ﾃﾞｭ",
dhe: "ﾃﾞｪ",
dho: "ﾃﾞｮ",
ddya: "ｯﾁﾞｬ",
ddyi: "ｯﾁﾞｲ",
ddyu: "ｯﾁﾞｭ",
ddye: "ｯﾁﾞｪ",
ddyo: "ｯﾁﾞｮ",
// na
nya: "ﾆｬ",
nyu: "ﾆｭ",
nyo: "ﾆｮ",
//ha
hya: "ﾋｬ",
hyi: "ﾋｨ",
hyu: "ﾋｭ",
hye: "ﾋｪ",
hyo: "ﾋｮ",
hha: "ｯﾊ",
hhi: "ｯﾋ",
hhu: "ｯﾌ",
hhe: "ｯﾍ",
hho: "ｯﾎ",
hhya: "ｯﾋｬ",
hhyi: "ｯﾋｨ",
hhyu: "ｯﾋｭ",
hhye: "ｯﾋｪ",
hhyo: "ｯﾋｮ",
// pa
pa: "ﾊﾟ",
pi: "ﾋﾟ",
pu: "ﾌﾟ",
pe: "ﾍﾟ",
po: "ﾎﾟ",
pya: "ﾋﾟｬ",
pyi: "ﾋﾟｨ",
pyu: "ﾋﾟｭ",
pye: "ﾋﾟｪ",
pyo: "ﾋﾟｮ",
ppa: "ｯﾊﾟ",
ppi: "ｯﾋﾟ",
ppu: "ｯﾌﾟ",
ppe: "ｯﾍﾟ",
ppo: "ｯﾎﾟ",
ppya: "ｯﾋﾟｬ",
ppyi: "ｯﾋﾟｨ",
ppyu: "ｯﾋﾟｭ",
ppye: "ｯﾋﾟｪ",
ppyo: "ｯﾋﾟｮ",
//ba
ba: "ﾊﾞ",
bi: "ﾋﾞ",
bu: "ﾌﾞ",
be: "ﾍﾞ",
bo: "ﾎﾞ",
bba: "ｯﾊﾞ",
bbi: "ｯﾋﾞ",
bbu: "ｯﾌﾞ",
bbe: "ｯﾍﾞ",
bbo: "ｯﾎﾞ",
bbya: "ｯﾋﾞｬ",
bbyi: "ｯﾋﾞｨ",
bbyu: "ｯﾋﾞｭ",
bbye: "ｯﾋﾞｪ",
bbyo: "ｯﾋﾞｮ",
bya: "ﾋﾞｬ",
byi: "ﾋﾞｨ",
byu: "ﾋﾞｭ",
bye: "ﾋﾞｪ",
byo: "ﾋﾞｮ",
//ma
mma: "ｯﾏ",
mmi: "ｯﾐ",
mmu: "ｯﾑ",
mme: "ｯﾒ",
mmo: "ｯﾓ",
mmya: "ｯﾐｬ",
mmyi: "ｯﾐｨ",
mmyu: "ｯﾐｭ",
mmye: "ｯﾐｪ",
mmyo: "ｯﾐｮ",
//ra done
rra: "ｯﾗ",
rri: "ｯﾘ",
rru: "ｯﾙ",
rre: "ｯﾚ",
rro: "ｯﾛ",
rya: "ﾘｬ",
ryi: "ﾘｨ",
ryu: "ﾘｭ",
rye: "ﾘｪ",
ryo: "ﾘｮ",
// qa
qya: "ｸｬ",
qyu: "ｸｭ",
qye: "ｸｪ",
qyo: "ｸｮ",
//la
la: "ｧ",
li: "ｨ",
lu: "ｩ",
le: "ｪ",
lo: "ｫ",
lla: "ｯｧ",
lli: "ｯｨ",
llu: "ｯｩ",
lle: "ｯｪ",
llo: "ｯｫ",
llya: "ｯｬ",
llyi: "ｯｨ",
llyu: "ｯｭ",
llye: "ｯｪ",
llyo: "ｯｮ",
// TODO: 上記英字入力はたぶん完成したので、以下のひらがな入力の足りない分を補完する
あ: "ｱ",
い: "ｲ",
う: "ｳ",
え: "ｴ",
お: "ｵ",
か: "ｶ",
き: "ｷ",
く: "ｸ",
け: "ｹ",
こ: "ｺ",
さ: "ｻ",
し: "ｼ",
す: "ｽ",
せ: "ｾ",
そ: "ｿ",
た: "ﾀ",
ち: "ﾁ",
つ: "ﾂ",
て: "ﾃ",
と: "ﾄ",
な: "ﾅ",
に: "ﾆ",
ぬ: "ﾇ",
ね: "ﾈ",
の: "ﾉ",
は: "ﾊ",
ひ: "ﾋ",
ふ: "ﾌ",
へ: "ﾍ",
ほ: "ﾎ",
ま: "ﾏ",
み: "ﾐ",
む: "ﾑ",
め: "ﾒ",
も: "ﾓ",
や: "ﾔ",
ゆ: "ﾕ",
よ: "ﾖ",
ら: "ﾗ",
り: "ﾘ",
る: "ﾙ",
れ: "ﾚ",
ろ: "ﾛ",
わ: "ﾜ",
を: "ｦ",
ん: "ﾝ",
が: "ｶﾞ",
っか: "ｯｶ",
っが: "ｯｶﾞ",
きゃ: "ｷｬ",
ぎゃ: "ｷﾞｬ",
っきゃ: "ｯｷｬ",
っぎゃ: "ｯｷﾞｬ",
ぎ: "ｷﾞ",
っき: "ｯｷ",
っぎ: "ｯｷﾞ",
ぐ: "ｸﾞ",
っく: "ｯｸ",
っぐ: "ｯｸﾞ",
っきゅ: "ｯｷｭ",
っぎゅ: "ｯｷﾞｭ",
げ: "ｹﾞ",
っけ: "ｯｹ",
っげ: "ｯｹﾞ",
ご: "ｺﾞ",
っこ: "ｯｺ",
っご: "ｯｺﾞ",
きょ: "ｷｮ",
ぎょ: "ｷﾞｮ",
っきょ: "ｯｷｮ",
っぎょ: "ｯｷﾞｮ",
// za : doing(testする)
ざ: "ｻﾞ",
じ: "ｼﾞ",
ず: "ｽﾞ",
ぜ: "ｾﾞ",
ぞ: "ｿﾞ",
っさ: "ｯｻ",
っし: "ｯｼ",
っす: "ｯｽ",
っせ: "ｯｾ",
っそ: "ｯｿ",
っざ: "ｯｻﾞ",
っじ: "ｯｼﾞ",
っず: "ｯｽﾞ",
っぜ: "ｯｾﾞ",
っぞ: "ｯｿﾞ",
しゃ: "ｼｬ",
し: "ｼ",
しゅ: "ｼｭ",
しぇ: "ｼｪ",
しょ: "ｼｮ",
しゃ: "ｼｬ",
しぃ: "ｼｨ",
しゅ: "ｼｭ",
しぇ: "ｼｪ",
しょ: "ｼｮ",
っしゃ: "ｯｼｬ",
っし: "ｯｼ",
っしゅ: "ｯｼｭ",
っしぇ: "ｯｼｪ",
っしょ: "ｯｼｮ",
っしゃ: "ｯｼｬ",
っしぃ: "ｯｼｨ",
っしゅ: "ｯｼｭ",
っしぇ: "ｯｼｪ",
っしょ: "ｯｼｮ",
じゃ: "ｼﾞｬ",
じ: "ｼﾞ",
じゅ: "ｼﾞｭ",
じぇ: "ｼﾞｪ",
じょ: "ｼﾞｮ",
っじゃ: "ｯｼﾞｬ",
っじ: "ｯｼﾞ",
っじゅ: "ｯｼﾞｭ",
っじぇ: "ｯｼﾞｪ",
っじょ: "ｯｼﾞｮ",
// na
な: "ﾅ",
に: "ﾆ",
ぬ: "ﾇ",
ね: "ﾈ",
の: "ﾉ",
にゃ: "ﾆｬ",
にゅ: "ﾆｭ",
にょ: "ﾆｮ",
// ha
ひゃ: "ﾋｬ",
ひゅ: "ﾋｭ",
ひょ: "ﾋｮ",
// ba
ば: "ﾊﾞ",
び: "ﾋﾞ",
ぶ: "ﾌﾞ",
べ: "ﾍﾞ",
ぼ: "ﾎﾞ",
びゃ: "ﾋﾞｬ",
びゅ: "ﾋﾞｭ",
びょ: "ﾋﾞｮ",
// pa
ぱ: "ﾊﾟ",
ぴ: "ﾋﾟ",
ぷ: "ﾌﾟ",
ぺ: "ﾍﾟ",
ぽ: "ﾎﾟ",
ぴゃ: "ﾋﾟｬ",
ぴゅ: "ﾋﾟｭ",
ぴょ: "ﾋﾟｮ",
// ma
みゃ: "ﾐｬ",
みゅ: "ﾐｭ",
みょ: "ﾐｮ",
//ra
りゃ: "ﾘｬ",
りゅ: "ﾘｭ",
りょ: "ﾘｮ",
//doine: q
くゃ: "ｸｬ",
くぃ: "ｸｨ",
くゅ: "ｸｭ",
くぇ: "ｸｪ",
くょ: "ｸｮ",
//la
ぁ: "ｧ",
ぃ: "ｨ",
ぅ: "ｩ",
ぇ: "ｪ",
ぉ: "ｫ",
ー: "-",
"＊": "*",
// TODO: ひらがなとローマ字入力の時両方のマッピングを書く
// 他のローマ字とカタカナのマッピングを追加...
};
var reg = new RegExp("(" + Object.keys(romajiMap).join("|") + ")", "g");
return str.replace(reg, function (match) {
return romajiMap[match];
});
};
const handleInputChange = (event) => {
var inputVal = event.target.value;
var hankana = romajiToHankana(inputVal);
setInput(inputVal);
setOutput(hankana);
};
return (
<div>
<TextField
type="text"
value={output}
onChange={handleInputChange}
sx={{ imeMode: "inactive" }}
/>
<p>{output}</p>
</div>
);
};
export default RomajiToHankanaConverter;
続きの書き方
英字のマッピング完成させてから、
ひらがなのマッピング部分を完成させる
英字のマッピング部分を完成させたらすべてコピペし、左側の英字をひらがなに書きなおす方法が一番早い
英語のマッピングは完成したと思いきや、いの小文字が入る系が怪しいので確認thi, dhi, dyiとか
まとめ
onBlueを使えば早いが、リアルタイムで入力したいので死闘になってしまった
Discussion