簡単な地名作成ツールを作る JavaScriptで書き直し編
Javaでなら動くようになったので、今度はWeb上で動かせるようにJavaScriptで書き直します。
基礎的なところはほぼ同じとはいえ、テキストファイル読み込みとかボタンクリックとかは違いますし、HTMLとかCSSとかは詳しくないので難易度が高そうな雰囲気です。
HTMLとかCSSとかは後からやるとして、とりあえず処理部分だけでもJavaScriptで書き直します。
テキストファイルの読み込み
テキストファイルに列挙した漢字を利用するのでテキストファイルを読み込めるようにします。
XMLHttpRequestを使うわけですが、よくわからないので自分の力で良い感じに理解してください。
重複チェックと文字分割
Javaで書いたときには一文字ずつ読み込んだので分割する必要もなく読み込むたびに判定をしていたわけですが、今回は最初に全て読み込まれるので.splitで分割することにしました。.split(“”)で一文字分割になります。
また、重複チェックについてはJavaの時には若干面倒な問題みたいな方法でやりましたが、JavaScriptにはSetクラスなる便利なものが存在しており、重複していたらスルーしてくれるという便利機能が使えます。今考えたらJavaでもありそうですね・・・
ランダムの利用
JavaScriptのランダムは小数点で出力されるという謎仕様らしく、そこは若干面倒です。とはいえ普通に使えると思います。多分。
完成したコード
<form name=”check”> <!–テスト表示用フォーム生成–>
<textarea name=”txt”></textarea> <!–テキストエリア定義–>
</form>
<script>
let inputString; //読み取った文字列
const rawFile = new XMLHttpRequest(); //ファイル読み込み用
rawFile.open(“GET”, “hoge.txt”, false); //ファイルオープン
rawFile.onreadystatechange = function (){ //チェック
if(rawFile.readyState === 4){
if(rawFile.status === 200 || rawFile.status == 0){
inputString = rawFile.responseText; //ファイル内文字列を代入
}
}
}
rawFile.send(null);
let charList = Array.from(new Set(inputString.split(“”))); //読み込まれた文字を一文字ずつに分割しつつ被らないように代入
const numberOfGeneration = 20; //地名生成数
const numberOfLetters = 2; //地名文字数
let random = Math.floor( Math.random() * charList.length); //ランダム整数生成
let output = charList[random]; //ランダムな漢字を代入
for(let j = 1 + 1;j <= numberOfLetters;j++){ //指定文字数から一文字引いた回数
random = Math.floor( Math.random() * charList.length);
output += charList[random]; //outputに追加
}
output += “\n”; //改行
for(let i = 1 + 1;i <= numberOfGeneration;i++){ //地名生成数回
for(let j = 1;j <= numberOfLetters;j++){ //文字数回
random = Math.floor( Math.random() * charList.length);
output += charList[random];
}
output += “\n”;
}
document.check.txt.value = output; //フォームに出力
</script>
超絶読みにくいとは思いますが、参考にしたい方は参考にしてください。自信はありません。
一応主要部分はJavaScriptで動かすことができたので、次はHTML側でフォームなどを作成することになります。
ここまでくれば公開ももうすぐ・・・
-
前の記事
簡単な地名作成ツールを作る ランダムに生成するやつ作成編 2019.08.03
-
次の記事
簡単な地名作成ツールを作る HTMLとCSSを書く編 2019.08.05