今回紹介するロジックを使用して作成したパスワードのスコアです２文字分割、３文字分割 については後に説明します 文字列 = 算出したスコア11111111 = 0.003772540762336680312121212 = 0.03091931216931216612341234 = 0.3333333333333333765872934 = 174829653 = 1aaaaaaaaaa = 0.0016624335562414267abcabcabc = 0.07316468253968254zxpzxpzxpzxpzxpzxp = 0.0061785130718954254abcabcabcxyzxyzxyz = 0.15788398692810457xkskefstpwzyjszp = 1hcksvibdvwgruusb = 1 同じ文字が連続した場合に低いスコアとなっており意図通りに動作していることが分かります

サンプル

与えられた文字列（パスワード）を２～３文字単位に分割し、同じ文字列が出てくる回数をカウントします何度も出てくる単語があった場合にはスコアを低くし単語が少ない回数しか出ていない場合はスコアを高くします

ロジック概要

１．与えられた文字列（パスワード）を先頭から２文字抽出して辞書に登録します　１－１　抽出した２文字が辞書に存在しないのならその単語のカウンターに１を設定し登録処理を終了します　１－２　抽出した２文字が辞書に登録済みであったらその単語のカウンターを１加算します２．検索位置を１文字進めて「１」の処理に戻ります　２－１　文字列の末尾の文字を辞書に取り込んだら処理を終了しますスコア算出部分の実装です<pre><code>function repititionScore(text, wordLength) {
&nbsp; &nbsp; var dicionary = {};
&nbsp; &nbsp; var size = text.length;
&nbsp; &nbsp; var procSize = size - (wordLength - 1);
&nbsp; &nbsp; for(var i = 0; i &lt; procSize; i += 1) {
&nbsp; &nbsp; &nbsp; &nbsp; var word = text.substring(i, i + wordLength);
&nbsp; &nbsp; &nbsp; &nbsp; if(word in dicionary) {
&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; dicionary[word] += 1;
&nbsp; &nbsp; &nbsp; &nbsp; } else {
&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; dicionary[word] = 1;
&nbsp; &nbsp; &nbsp; &nbsp; }
&nbsp; &nbsp; }
&nbsp; &nbsp; prt("text", text);
&nbsp; &nbsp; prt(dicionary);
&nbsp; &nbsp; var score = 0;
&nbsp; &nbsp;&nbsp;
&nbsp; &nbsp; for(k in dicionary) {
&nbsp; &nbsp; &nbsp; &nbsp; score += 1 / dicionary[k] ** 2;
&nbsp; &nbsp; }
&nbsp; &nbsp; score = score / (procSize);
&nbsp; &nbsp; return score;
}</code></pre> 文字列 abcabcabcxyzxyzxyz に対して処理を行うと以下のような辞書が作られます <pre><code>{
&nbsp;&nbsp;"ab": 3,
&nbsp;&nbsp;"bc": 3,
&nbsp;&nbsp;"ca": 2,
&nbsp;&nbsp;"cx": 1,
&nbsp;&nbsp;"xy": 3,
&nbsp;&nbsp;"yz": 3,
&nbsp;&nbsp;"zx": 2
}</code></pre> これらの ２乗の逆数 の 平均値 をスコアとします ＞"bc": 3,＞"ca": 2,この２つについて計算すると(1/(3*3) + 1/(2*2)) / 2 = 0.361となりスコアは 0.361 となります辞書全てを計算すると 0.11437908496732027 となります（計算省略） 文字列 11111111 に対して実施した場合は以下のような辞書が作られます<pre><code>{
&nbsp;&nbsp;"11": 7
}</code></pre>0.0204081632653061 / 7 = 0.0029154518950437となります ソースコードは最後に全て掲載していますので興味があれば御覧ください

ロジック解説

例えばですが・最低8文字とする・8文字区切り（最低文字数区切り）ですべての箇所でスコアを算出し、一番スコアの高い箇所を採用するという使い方になります 32文字パスワードだった場合に全部の文字列を一発で判定してしまえば良いのでは？と思うかもしれませんがその場合に納得いかないような結果になります例えばですが!!!!!!!!!!!!!!!!!!!!xkskefstpwzyjszp!!!!!!!!!!!!!!!!!!!!このようなパスワード文字列を指定した場合にスコアが 0.32 と低くなってしまいます真ん中のランダム文字列がかなりセキュアだとは思いますし、桁数が多く桁数予測もしづらいですですが !!! の繰り返しが低スコア判定となり強固なパスワードを指定したにも関わらず低スコアとなってしまいます

本ロジックの使い方

先の説明で<blockquote>先頭から２文字抽出して辞書に登録します</blockquote>とありました、これはパラメータで変更でき辞書を作成する際に辞書単語を「２文字」にするか「３文字」にするかでスコアが微妙に異なります４文字以上の指定も可能です実装部分は<blockquote>function repititionScore(text, wordLength)</blockquote>になります３文字のほうがスコアがやや高くなる傾向にあります「３文字は繰り返しに入らない、２文字で充分」とかいう人間の感覚的な問題に対応するためにある可変パラメータです実際にNGパターンパスワードを作成し納得いくスコアの出る方を採用すれば良いと思います

２文字分割と３文字分割について

以下のソースを html ファイルとして保存しブラウザで開けば動くと思います <pre><code>&lt;html lang="ja"&gt;
&lt;head&gt;
&nbsp; &nbsp; &lt;meta charset="utf-8"&gt;
&lt;/head&gt;
&lt;body&gt;
&nbsp; &nbsp; &lt;div id="sample_area"&gt;
&nbsp; &nbsp; &lt;/div&gt;
&nbsp; &nbsp; &lt;div id="operation_area"&gt;
&nbsp; &nbsp; &nbsp; &nbsp; &lt;button type="button" id="operation_area_reset_button"&gt;
&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; Reset
&nbsp; &nbsp; &nbsp; &nbsp; &lt;/button&gt;
&nbsp; &nbsp; &nbsp; &nbsp; &lt;button type="button" id="operation_area_submit_button"&gt;
&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; 判定する
&nbsp; &nbsp; &nbsp; &nbsp; &lt;/button&gt;
&nbsp; &nbsp; &nbsp; &nbsp; &lt;br&gt;
&nbsp; &nbsp; &lt;/div&gt;
&nbsp; &nbsp; &lt;div id="log_area"&gt;
&nbsp; &nbsp; &nbsp; &nbsp; &lt;textarea id="log_arrea_view" style="width: 200px; height: 600px; background-color: #DDDDDD;"&gt;
&nbsp; &nbsp; &nbsp; &nbsp; &lt;/textarea&gt;
&nbsp; &nbsp; &lt;/div&gt;


&nbsp; &nbsp; &lt;div id="templates" style="display: none;"&gt;
&nbsp; &nbsp; &nbsp; &nbsp; &lt;div id="template_password_view" name="o_password_text"&gt;
&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &lt;input type="text" id="set_up_id_you_want_1" name="password_value"&gt;
&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &lt;span&gt;score: &lt;/span&gt;
&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &lt;span&gt;2char= &lt;/span&gt;&lt;span name="password_score2"&gt;&lt;/span&gt;
&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &lt;span&gt;, 3char= &lt;/span&gt;&lt;span name="password_score3"&gt;&lt;/span&gt;
&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &lt;span&gt;, average= &lt;/span&gt;&lt;span name="password_score_avr"&gt;&lt;/span&gt;
&nbsp; &nbsp; &nbsp; &nbsp; &lt;/div&gt;
&nbsp; &nbsp; &lt;/div&gt;


&nbsp; &nbsp; &lt;script type="text/javascript"&gt;


function prt() {
&nbsp; &nbsp; console.log.apply(null, arguments);
}


function onReady(fn) {
&nbsp; &nbsp; setTimeout(function() {
&nbsp; &nbsp; &nbsp; &nbsp; fn();
&nbsp; &nbsp; }, 1);
}


function repititionScore(text, wordLength) {
&nbsp; &nbsp; var dicionary = {};
&nbsp; &nbsp; var size = text.length;
&nbsp; &nbsp; var procSize = size - (wordLength - 1);
&nbsp; &nbsp; for(var i = 0; i &lt; procSize; i += 1) {
&nbsp; &nbsp; &nbsp; &nbsp; var word = text.substring(i, i + wordLength);
&nbsp; &nbsp; &nbsp; &nbsp; if(word in dicionary) {
&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; dicionary[word] += 1;
&nbsp; &nbsp; &nbsp; &nbsp; } else {
&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; dicionary[word] = 1;
&nbsp; &nbsp; &nbsp; &nbsp; }
&nbsp; &nbsp; }
&nbsp; &nbsp; prt("text", text);
&nbsp; &nbsp; prt(dicionary);
&nbsp; &nbsp; var score = 0;
&nbsp; &nbsp;&nbsp;
&nbsp; &nbsp; for(k in dicionary) {
&nbsp; &nbsp; &nbsp; &nbsp; score += 1 / dicionary[k] ** 2;
&nbsp; &nbsp; }
&nbsp; &nbsp; score = score / (procSize);
&nbsp; &nbsp; return score;
}


function repititionScore2(text) {
&nbsp; &nbsp; return repititionScore(text, 2);
}


function repititionScore3(text) {
&nbsp; &nbsp; return repititionScore(text, 3);
}


////////////////////////////////////////
// メインクラス
////////////////////////////////////////
function PasswordCheck() {
&nbsp; &nbsp; var self = this;
&nbsp; &nbsp; self.samples = [
&nbsp; &nbsp; &nbsp; &nbsp; "11111111",
&nbsp; &nbsp; &nbsp; &nbsp; "12121212",
&nbsp; &nbsp; &nbsp; &nbsp; "12341234",
&nbsp; &nbsp; &nbsp; &nbsp; "65872934",
&nbsp; &nbsp; &nbsp; &nbsp; "74829653",
&nbsp; &nbsp; &nbsp; &nbsp; "aaaaaaaaaa",
&nbsp; &nbsp; &nbsp; &nbsp; "abcabcabc",
&nbsp; &nbsp; &nbsp; &nbsp; "zxpzxpzxpzxpzxpzxp",
&nbsp; &nbsp; &nbsp; &nbsp; "abcabcabcxyzxyzxyz",
&nbsp; &nbsp; &nbsp; &nbsp; "xkskefstpwzyjszp",
&nbsp; &nbsp; &nbsp; &nbsp; "hcksvibdvwgruusb"
&nbsp; &nbsp; ];
&nbsp; &nbsp; self.initElements = function() {
&nbsp; &nbsp; &nbsp; &nbsp; var me = this;
&nbsp; &nbsp; &nbsp; &nbsp; return new Promise(function(resolve) {
&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; var area = document.getElementById("sample_area");
&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; var tpl = document.getElementById("template_password_view");
&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; var samples = me.samples;
&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; area.querySelectorAll("*").forEach(function(element) {
&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; element.remove();
&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; //prt(element);
&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; });
&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; for(var i = 0; i &lt; samples.length; i += 1) {
&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; var cln = tpl.cloneNode(true);
&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; cln.setAttribute("id", cln.getAttribute("id") + "_" + String(i));
&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; var inp = cln.querySelectorAll("input")[0];
&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; //var inp = cln.getElementsByTagName("input")[0];
&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; inp.setAttribute("id", "sample-input-" + String(i));
&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; inp.value = samples[i];
&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; area.appendChild(cln);
&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; }
&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; onReady(function() {
&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; resolve(true);
&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; });
&nbsp; &nbsp; &nbsp; &nbsp; });
&nbsp; &nbsp; }
&nbsp; &nbsp; self.setupEvents = function() {
&nbsp; &nbsp; &nbsp; &nbsp; var me = this;
&nbsp; &nbsp; &nbsp; &nbsp; document.getElementById("operation_area_reset_button").addEventListener("click", function() {
&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; me.initElements();
&nbsp; &nbsp; &nbsp; &nbsp; });
&nbsp; &nbsp; &nbsp; &nbsp; document.getElementById("operation_area_submit_button").addEventListener("click", function() {
&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; me.scoreThePassword();
&nbsp; &nbsp; &nbsp; &nbsp; });
&nbsp; &nbsp; }
&nbsp; &nbsp; self.scoreThePassword = function() {
&nbsp; &nbsp; &nbsp; &nbsp; var me = this;
&nbsp; &nbsp; &nbsp; &nbsp; var sample_area = document.getElementById("sample_area");
&nbsp; &nbsp; &nbsp; &nbsp; var items = sample_area.querySelectorAll('[name="o_password_text"]');
&nbsp; &nbsp; &nbsp; &nbsp; for(var i = 0; i &lt; items.length; i += 1) {
&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; var oinp = items[i];
&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; var inp = oinp.querySelectorAll('[name="password_value"]')[0];
&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; var score2 = repititionScore2(inp.value);
&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; var score3 = repititionScore3(inp.value);
&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; var score_avr = (score2 + score3) / 2;
&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; oinp.querySelectorAll('[name="password_score2"]')[0].innerHTML = String(score2);
&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; oinp.querySelectorAll('[name="password_score3"]')[0].innerHTML = String(score3);
&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; oinp.querySelectorAll('[name="password_score_avr"]')[0].innerHTML = String(score_avr);
&nbsp; &nbsp; &nbsp; &nbsp; }
&nbsp; &nbsp; }
&nbsp; &nbsp; self.start = function() {
&nbsp; &nbsp; &nbsp; &nbsp; var me = this;
&nbsp; &nbsp; &nbsp; &nbsp; return me.initElements()
&nbsp; &nbsp; &nbsp; &nbsp; .then(function() {
&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; me.setupEvents();
&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; return true;
&nbsp; &nbsp; &nbsp; &nbsp; });
&nbsp; &nbsp; }
}


window.addEventListener('load', function(){
&nbsp; &nbsp; var x = new PasswordCheck();
&nbsp; &nbsp; x.start();
});
&nbsp; &nbsp; &lt;/script&gt;


&lt;/body&gt;
&lt;/html&gt;


</code></pre>

ソースコード

パスワードに繰り返し文字を使用させない

マウスゼスチャに代表されるポインティングデバイスの軌道でなんらかのアクションをするというのが基本的な使い方になると思いますＺ の軌道を描いたらメニュー起動とか、VRゲームで手をトラッキングして星型を描いていたら魔法が発動するとかでしょうか？部屋にトラッキング装置を設置して部屋の証明や暖房の調整ができてもいいかもしれません

手書き認識ロジックの使い道

処理１．描き始めから描き終わりまでのXY座標（マウスの軌道）を全て記録処理２．三角形判定「処理１」で記録した座標配列を解析し三角形であるかの判定をします条件１．折返し（角）が３つ以上ある（任意に設定した最小角度以上であり、最大角度以下である事）条件２．３つの角全てが同一方向への回転である（全部右回り又は全部左回り）処理３．「処理２」の条件を全て満たしていたら三角形と断定し、３つの折返し部分を頂点とした三角形を描画する おおまかにこのような流れで三角形の判定を行っています

処理の流れ

手書き図形の認識（ゼスチャー認識）

マウスクリックで記録開始（描く間はずっと押しっぱなし）クリック時のX座標、Y座標を保存マウス移動が検出されたらX座標、Y座標を追加で保存していきますマウスボタンが離されたら記録終了とし図形判定処理を行います <pre><code>&nbsp;&nbsp;&nbsp;&nbsp;canvas.addEventListener("mousedown", function(event) {
&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;prt("mousedown");
&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;me.operationReset();
&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;me.mouseTrackingX.push(event.offsetX);
&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;me.mouseTrackingY.push(event.offsetY);
&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;me.operationMousePress = true;
&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;me.operationMouseRelease = false;
&nbsp;&nbsp;&nbsp;&nbsp;});
&nbsp;&nbsp;&nbsp;&nbsp;canvas.addEventListener("mouseup", function(event) {
&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;prt("mouseup");
&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;me.operationMousePress = false;
&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;me.operationMouseRelease = true;
&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;me.drawEnd();
&nbsp;&nbsp;&nbsp;&nbsp;});
&nbsp;&nbsp;&nbsp;&nbsp;canvas.addEventListener("mousemove", function(event) {
&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;if(me.operationMousePress === true) {
&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;me.mouseTrackingX.push(event.offsetX);
&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;me.mouseTrackingY.push(event.offsetY);
&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;
&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;var x = me.mouseTrackingX;
&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;var y = me.mouseTrackingY;
&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;var idxA = x.length - 2;
&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;var idxB = x.length - 1;
&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;var canvas = document.getElementById(me.constCanvasId);
&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;var ctx = canvas.getContext('2d');
&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;ctx.beginPath();
&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;ctx.strokeStyle = "rgb(0, 0, 0)";
&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;ctx.moveTo(x[idxA], y[idxA]);
&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;ctx.lineTo(x[idxB], y[idxB]);
&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;ctx.stroke();
&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;}
&nbsp;&nbsp;&nbsp;&nbsp;});</code></pre>

手書き軌道の記録

例えば記録されたXY座標データが１００個だとしてその中から２０フレームだけを処理対象とする方法を取ります手ブレの酷い箇所を雑に取り除くためです、丁寧に手ブレ検出する方法もあるのかもしれませんが良いロジックを思いつかなかったので解析粒度を粗くすることで細かなブレを無視するというロジックにしました４個スキップして５個目だけ採用するという処理で配列を作り直し、中間データのブレ（があると決めつけた区間）を無視します記録したデータをそのまま解析すると瞬間的な手ブレ箇所を三角形だと誤認識してしまいますその際にスキップする個数は動的で、大きな三角形であれば粗く解析する（スキップ数多い）、小さな三角形であれば細かく解析する（スキップ数少ない）、として解析します<pre><code>&nbsp;&nbsp;&nbsp;&nbsp;var skipRate = parseInt(me.mouseTrackingX.length / self.constSensitivity);
&nbsp;&nbsp;&nbsp;&nbsp;var x = n1d.skipSampling(me.mouseTrackingX, skipRate);
&nbsp;&nbsp;&nbsp;&nbsp;var y = n1d.skipSampling(me.mouseTrackingY, skipRate);</code></pre>

解析前処理-スキップサンプリング

閉じない三角形を描かれた場合を考慮しXY座標記録の先頭のいくつかをXY座標の末尾に追加して図形を閉じた状態にします本処理を実施することで３個の角を描かれた場合でも２個の角だけの閉じていない三角形でも３個角を必要とする同じロジックで三角形判定が行なえます<pre><code>&nbsp;&nbsp;&nbsp;&nbsp;x = x.concat(x.slice(0, me.constRingBufferSize));
&nbsp;&nbsp;&nbsp;&nbsp;y = y.concat(y.slice(0, me.constRingBufferSize));</code></pre>

解析前処理-描画軌道を閉じる

前処理でデータを整えたら三角形判定処理を実行しますプログラム中の trackingIsTriangle という関数になりますXY座標配列から３点の座標を取得処理１．「折返し」と認識できる箇所を３箇所以上検出する　　処理１－１．３点の成す角度を取得　　処理１－２．「処理１－１」の角度が任意の角度範囲であれば「折返し」として保存、そうでなければ保存しない　　　　処理１－２－１．回転方向を取得し保存処理２．以下の条件を全て満たしていたら「三角形成立」と、３点座標の構造体を返却、そうでない場合は「三角形不成立」取れただけの「折返し」座標の構造体を返却　　条件１．「処理１」の結果、３箇所以上の「折返し」が発見されている　　条件２．全ての「折返し」で回転方向が同一である <h3 id="hfb4b7ccd8d">角度の算出</h3>以下の資料を参考にした■3点の座標から角度と回転方向を求める方法を解説！プログラムで自動化！<a href="https://youta-blog.com/angle-and-rotation-direction/" target="_blank" rel="noopener noreferrer">https://youta-blog.com/angle-and-rotation-direction/</a> ■３点の座標から簡単に角度と回転方向を求める．<a href="https://www5d.biglobe.ne.jp/~noocyte/Programming/Geometry/RotationDirection.html#GetAngleOnly" target="_blank" rel="noopener noreferrer">https://www5d.biglobe.ne.jp/~noocyte/Programming/Geometry/RotationDirection.html#GetAngleOnly</a> 点A → 点B → 点C の順番で描画された場合に３点の成す角度（Bの角度）を求めます２つのベクトル →BA、→BC とし内積を取り、公式に当てはめて cosθ を求めます求めた cosθ を arccos 関数で ラジアンに変換します詳細は参考資料としたサイトを御覧ください（手抜き） <pre><code>function angleOf3Points(a, b, c) {
&nbsp;&nbsp;var vBA = [a.x - b.x, a.y - b.y];
&nbsp;&nbsp;var vBC = [c.x - b.x, c.y - b.y];
&nbsp;&nbsp;var dot = n2d.dot(vBA, vBC);
&nbsp;&nbsp;var normBA = Math.sqrt(Math.pow(vBA[0], 2) + Math.pow(vBA[1], 2));
&nbsp;&nbsp;var normBC = Math.sqrt(Math.pow(vBC[0], 2) + Math.pow(vBC[1], 2));
&nbsp;&nbsp;var cosTheta = dot / (normBA * normBC);
&nbsp;&nbsp;return Math.acos(cosTheta);
}</code></pre> <h3 id="hbed541ce77">回転方向の算出（描画方向の特定）</h3> 以下の資料を参考にした■3点の回転方向を調べる<a href="https://qiita.com/tydesign/items/d41ac74b5effd87141b8" target="_blank" rel="noopener noreferrer">https://qiita.com/tydesign/items/d41ac74b5effd87141b8</a> 点A → 点B → 点C の順番で描画された場合に描画方向を特定し、その描画順が三角形を右回りで描こうとしているのか、左回りで描こうとしているのかを特定します点A → 点B → 点C の描画を「点A を中心に 点B から 点C へと回転変形した」と考えます→AB と →AC の傾きを比較して →AC のほうが大きく傾いているのであれば左回り、そうでなければ右回りとします詳細は参考資料としたサイトを御覧ください（手抜き） <pre><code>&nbsp;&nbsp;// 折返しと認識する「最小角度」「最大角度」を設定する
&nbsp;&nbsp;// 折返しが３個以上ある場合は検査処理を実行
&nbsp;&nbsp;// 発見した折返しの最初の３個について検査処理を実行
&nbsp;&nbsp;// ３箇所全てが同じ方向への回転だった場合は三角形だとする
&nbsp;&nbsp;var dataRotate = [];
&nbsp;&nbsp;var dataRad = [];
&nbsp;&nbsp;var dataX = []
&nbsp;&nbsp;var dataY = [];
&nbsp;&nbsp;var count = 0;
&nbsp;&nbsp;for(var i = 0; i &lt; size - 2; i += 1) {
&nbsp;&nbsp;&nbsp;&nbsp;var A = {x: x[i + 0], y: y[i + 0]};
&nbsp;&nbsp;&nbsp;&nbsp;var B = {x: x[i + 1], y: y[i + 1]};
&nbsp;&nbsp;&nbsp;&nbsp;var C = {x: x[i + 2], y: y[i + 2]};
&nbsp;&nbsp;&nbsp;&nbsp;var rad = angleOf3Points(A, B, C);
&nbsp;&nbsp;&nbsp;&nbsp;if(rad &gt; minRad &amp;&amp; rad &lt; maxRad) {
&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;var rotate = rotateDirectionOf3Points(A, B, C);
&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;dataRotate.push(rotate);
&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;dataRad.push(rad);
&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;dataX.push(B.x);
&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;dataY.push(B.y);
&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;count += 1;
&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;if(count &gt;= 3) {
&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;break;
&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;}
&nbsp;&nbsp;&nbsp;&nbsp;}
&nbsp;&nbsp;}
&nbsp;&nbsp;&nbsp;
&nbsp;&nbsp;//prt("dataRotate", dataRotate);
&nbsp;&nbsp;//prt("dataRad", dataRad);
&nbsp;&nbsp;//prt("dataX", dataX);
&nbsp;&nbsp;//prt("dataY", dataY);
&nbsp;&nbsp;&nbsp;
&nbsp;&nbsp;// 折返しとみなせる物が３箇所あり、３箇所の回転方向が同一であるなら三角形の描画とする
&nbsp;&nbsp;if(count &gt;= 3 &amp;&amp; n1d.allEqual(dataRotate, dataRotate[0])) {
&nbsp;&nbsp;&nbsp;&nbsp;return {
&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;ok: true,
&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;size: dataX.length,
&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;x: dataX,
&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;y: dataY,
&nbsp;&nbsp;&nbsp;&nbsp;}
&nbsp;&nbsp;} else {
&nbsp;&nbsp;&nbsp;&nbsp;return {
&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;ok: false,
&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;size: dataX.length,
&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;x: dataX,
&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;y: dataY,
&nbsp;&nbsp;&nbsp;&nbsp;}
&nbsp;&nbsp;}</code></pre>

三角形判定処理

三角形の検出が終わったら特に特殊なロジックはありません返却された三角形のパラメータに従い三角形を描画します 処理解説は以上です

描画処理

詳細な処理の流れ

サンプリングの粒度変更ロジックはまだ改善の余地があります、現状は「描いた長さに比例して粒度調整」ですが点と点の間の距離を見て区間別に粒度調整するのが望ましいと思います、点ABCの→ABは高速に描き、→BCはゆっくり描かれていたとしますその際に→ABは細かい粒度で判定して問題なく、→BCは荒い粒度でブレを軽減させる処置が必要になりますこれは実際にある問題で三角形を描く際にそれぞれの辺を描く時の自分の手の動きを注意して観察すると分かります、素早くなめらかに描ける辺とブレやすく描くのが遅い辺があるはずです、人間の手の動きではXY軸全てに精密動作はできないはずです、人それぞれ癖があります

改善点１－サンプリングの改善

今回のロジックは書き順に完全に依存しています、そもそもがゼスチャーの延長なので大きな問題ではないのですが。ただし図形を認識させるという点で考えた場合に書き順を無視して輪郭や線の検出に特化したほうが効率が良い、精度が高い場合も考えられます目的によっては根本的なロジック変更を考えたほうが良さそうです

改善点２－書き順に依存しない図形認識の採用

三角形は１つの角度と２辺が決まれば三角形を決定することが可能です、長方形は直角部分と２辺が決まれば四角形全体を決定可能です、このように理論的に可能な条件と人間に「三角形を描いてください」と指示した場合には大きな差があります、エンジニア寄りの人間は「１つの角度と２辺が決まれば三角形を決定できるのだからそれだけ描けば認識するんでしょ？」と思う可能性が高いです人種や用途によって個人の認識差がありロジックが大幅に異なる事もありますので、自動認識ソフトを作成する時は誰向けになにを目的とした物を作るのかを考える必要があります、具体的には試験する際にエンジニアだけで終わらせずに非エンジニアにも触らせたりすればそれで良い話だとは思います

図形認識の考え方

改善点など

<pre><code>&lt;html lang="ja"&gt;
&lt;head&gt;
&nbsp;&nbsp;&lt;meta charset="utf-8"&gt;
&lt;/head&gt;
&lt;body&gt;
&nbsp;&nbsp;&lt;div id="draw_area"&gt;
&nbsp;&nbsp;&nbsp;&nbsp;&lt;canvas id="draw_area_canvas" width="800" height="600" style="background-color: #bbbbbb;"&gt;&lt;/canvas&gt;
&nbsp;&nbsp;&lt;/div&gt;
&nbsp;&nbsp;&lt;div id="config_area"&gt;
&nbsp;&nbsp;&nbsp;&nbsp;&lt;input type="text" id="config_area_ring_buffer_size"&gt; データの最初と最後を繋げる配列の数&lt;br&gt;
&nbsp;&nbsp;&nbsp;&nbsp;&lt;input type="text" id="config_area_minimum_radian"&gt; 最小角度係数（π／n） の n に使用されます&lt;br&gt;
&nbsp;&nbsp;&nbsp;&nbsp;&lt;input type="text" id="config_area_maximum_radian"&gt; 最大角度係数（π／n） の n に使用されます&lt;br&gt;
&nbsp;&nbsp;&nbsp;&nbsp;&lt;input type="text" id="config_area_sensitivity"&gt; 座標サンプリング係数、大きいと荒く、小さいと細かく座標を検査するようになります&lt;br&gt;
&nbsp;&nbsp;&nbsp;&nbsp;&lt;button type="button" id="config_area_reset_button"&gt;
&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;Reset
&nbsp;&nbsp;&nbsp;&nbsp;&lt;/button&gt;
&nbsp;&nbsp;&nbsp;&nbsp;&lt;br&gt;
&nbsp;&nbsp;&lt;/div&gt;
&nbsp;&nbsp;&lt;div id="log_area"&gt;
&nbsp;&nbsp;&nbsp;&nbsp;&lt;textarea id="log_arrea_view" style="width: 200px; height: 600px; background-color: #DDDDDD;"&gt;
&nbsp;&nbsp;&nbsp;&nbsp;&lt;/textarea&gt;
&nbsp;&nbsp;&lt;/div&gt;

&nbsp;&nbsp;&lt;script type="text/javascript"&gt;

function prt() {
&nbsp;&nbsp;console.log.apply(null, arguments);
}

function Number1D() {
&nbsp;&nbsp;var self = this;
&nbsp;&nbsp;self.allEqual = function(x, n) {
&nbsp;&nbsp;&nbsp;&nbsp;for(var i = 0; i &lt; x.length; i += 1) {
&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;if(x[i] != n) {
&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;return false;
&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;}
&nbsp;&nbsp;&nbsp;&nbsp;}
&nbsp;&nbsp;&nbsp;&nbsp;return true;
&nbsp;&nbsp;}
&nbsp;&nbsp;self.skipSampling = function(x, n) {
&nbsp;&nbsp;&nbsp;&nbsp;var y = [];
&nbsp;&nbsp;&nbsp;&nbsp;for(var i = 0; i &lt; x.length; i += 1) {
&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;if(i % n == 0) {
&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;y.push(x[i]);
&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;}
&nbsp;&nbsp;&nbsp;&nbsp;}
&nbsp;&nbsp;&nbsp;&nbsp;return y;
&nbsp;&nbsp;}
}
var n1d = new Number1D();

function Number2D() {
&nbsp;&nbsp;var self = this;
&nbsp;&nbsp;self.dot = function(a, b) {
&nbsp;&nbsp;&nbsp;&nbsp;var dot = 0;
&nbsp;&nbsp;&nbsp;&nbsp;for(var i = 0; i &lt; 2; i += 1) {
&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;dot += a[i] * b[i];
&nbsp;&nbsp;&nbsp;&nbsp;}
&nbsp;&nbsp;&nbsp;&nbsp;return dot;
&nbsp;&nbsp;}
}
var n2d = new Number2D();

////////////////////////////////////////
// 点A→B→Cの順番に描画した場合にその描画が右回りか左回りかの判定
// 右回り = 0
// 左回り = 1
////////////////////////////////////////
function rotateDirectionOf3Points(a, b, c) {
&nbsp;&nbsp;var dy1 = b.y - a.y;
&nbsp;&nbsp;var dx1 = b.x - a.x;
&nbsp;&nbsp;var dy2 = c.y - a.y;
&nbsp;&nbsp;var dx2 = c.x - a.x;
&nbsp;&nbsp;//var leftN = dy1 / dx1;
&nbsp;&nbsp;//var rightN = dy2 / dx2;
&nbsp;&nbsp;var leftN = dx2 * dy1;
&nbsp;&nbsp;var rightN = dx1 * dy2;
&nbsp;&nbsp;if(leftN &lt; rightN) {
&nbsp;&nbsp;&nbsp;&nbsp;return 0;
&nbsp;&nbsp;} else {
&nbsp;&nbsp;&nbsp;&nbsp;return 1;
&nbsp;&nbsp;}
}

function angleOf3Points(a, b, c) {
&nbsp;&nbsp;var vBA = [a.x - b.x, a.y - b.y];
&nbsp;&nbsp;var vBC = [c.x - b.x, c.y - b.y];
&nbsp;&nbsp;var dot = n2d.dot(vBA, vBC);
&nbsp;&nbsp;var normBA = Math.sqrt(Math.pow(vBA[0], 2) + Math.pow(vBA[1], 2));
&nbsp;&nbsp;var normBC = Math.sqrt(Math.pow(vBC[0], 2) + Math.pow(vBC[1], 2));
&nbsp;&nbsp;var cosTheta = dot / (normBA * normBC);
&nbsp;&nbsp;return Math.acos(cosTheta);
}

function trackingIsTriangle(size, minRad, maxRad, x, y) {
&nbsp;&nbsp;// 折返しと認識する「最小角度」「最大角度」を設定する
&nbsp;&nbsp;// 折返しが３個以上ある場合は検査処理を実行
&nbsp;&nbsp;// 発見した折返しの最初の３個について検査処理を実行
&nbsp;&nbsp;// ３箇所全てが同じ方向への回転だった場合は三角形だとする
&nbsp;&nbsp;var dataRotate = [];
&nbsp;&nbsp;var dataRad = [];
&nbsp;&nbsp;var dataX = []
&nbsp;&nbsp;var dataY = [];
&nbsp;&nbsp;var count = 0;
&nbsp;&nbsp;for(var i = 0; i &lt; size - 2; i += 1) {
&nbsp;&nbsp;&nbsp;&nbsp;var A = {x: x[i + 0], y: y[i + 0]};
&nbsp;&nbsp;&nbsp;&nbsp;var B = {x: x[i + 1], y: y[i + 1]};
&nbsp;&nbsp;&nbsp;&nbsp;var C = {x: x[i + 2], y: y[i + 2]};
&nbsp;&nbsp;&nbsp;&nbsp;var rad = angleOf3Points(A, B, C);
&nbsp;&nbsp;&nbsp;&nbsp;if(rad &gt; minRad &amp;&amp; rad &lt; maxRad) {
&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;var rotate = rotateDirectionOf3Points(A, B, C);
&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;dataRotate.push(rotate);
&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;dataRad.push(rad);
&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;dataX.push(B.x);
&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;dataY.push(B.y);
&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;count += 1;
&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;if(count &gt;= 3) {
&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;break;
&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;}
&nbsp;&nbsp;&nbsp;&nbsp;}
&nbsp;&nbsp;}
&nbsp;&nbsp;&nbsp;
&nbsp;&nbsp;//prt("dataRotate", dataRotate);
&nbsp;&nbsp;//prt("dataRad", dataRad);
&nbsp;&nbsp;//prt("dataX", dataX);
&nbsp;&nbsp;//prt("dataY", dataY);
&nbsp;&nbsp;&nbsp;
&nbsp;&nbsp;// 折返しとみなせる物が３箇所あり、３箇所の回転方向が同一であるなら三角形の描画とする
&nbsp;&nbsp;if(count &gt;= 3 &amp;&amp; n1d.allEqual(dataRotate, dataRotate[0])) {
&nbsp;&nbsp;&nbsp;&nbsp;return {
&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;ok: true,
&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;size: dataX.length,
&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;x: dataX,
&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;y: dataY,
&nbsp;&nbsp;&nbsp;&nbsp;}
&nbsp;&nbsp;} else {
&nbsp;&nbsp;&nbsp;&nbsp;return {
&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;ok: false,
&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;size: dataX.length,
&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;x: dataX,
&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;y: dataY,
&nbsp;&nbsp;&nbsp;&nbsp;}
&nbsp;&nbsp;}
}

////////////////////////////////////////
// 手書き図形補正機能クラス
////////////////////////////////////////
function HandWriteFigureCorrection() {
&nbsp;&nbsp;var self = this;
&nbsp;&nbsp;&nbsp;
&nbsp;&nbsp;////////////////////////////////////////
&nbsp;&nbsp;// 定数
&nbsp;&nbsp;////////////////////////////////////////
&nbsp;&nbsp;self.constCanvasId = "draw_area_canvas";
&nbsp;&nbsp;self.constViewLogId = "log_arrea_view";
&nbsp;&nbsp;self.constConfigRingBufferSizeId = "config_area_ring_buffer_size";
&nbsp;&nbsp;self.constConfigMinimumRadianCoeffId = "config_area_minimum_radian";
&nbsp;&nbsp;self.constConfigMaximumRadianCoeffId = "config_area_maximum_radian";
&nbsp;&nbsp;self.constConfigSensitivityId = "config_area_sensitivity";
&nbsp;&nbsp;self.constConfigResetButtonId = "config_area_reset_button";
&nbsp;&nbsp;self.constRingBufferSize = 5;
&nbsp;&nbsp;self.constMinimumRadianCoeff = 9.0;
&nbsp;&nbsp;self.constMaximumRadianCoeff = 1.5;
&nbsp;&nbsp;self.constSensitivity = 22;
&nbsp;&nbsp;self.configRingBufferSize = self.constRingBufferSize;
&nbsp;&nbsp;self.configMinimumRadianCoeff = self.constMinimumRadianCoeff;
&nbsp;&nbsp;self.configMaximumRadianCoeff = self.constMaximumRadianCoeff;
&nbsp;&nbsp;self.configSensitivity = self.constSensitivity;
&nbsp;&nbsp;&nbsp;
&nbsp;&nbsp;////////////////////////////////////////
&nbsp;&nbsp;// フラグ
&nbsp;&nbsp;////////////////////////////////////////
&nbsp;&nbsp;self.operationMousePress = false;
&nbsp;&nbsp;self.operationMouseRelease = false;
&nbsp;&nbsp;&nbsp;
&nbsp;&nbsp;////////////////////////////////////////
&nbsp;&nbsp;// その他変数
&nbsp;&nbsp;////////////////////////////////////////
&nbsp;&nbsp;self.mouseTrackingX = [];
&nbsp;&nbsp;self.mouseTrackingY = [];
&nbsp;&nbsp;&nbsp;
&nbsp;&nbsp;////////////////////////////////////////
&nbsp;&nbsp;// イベント設定
&nbsp;&nbsp;////////////////////////////////////////
&nbsp;&nbsp;self.setupEvents = function() {
&nbsp;&nbsp;&nbsp;&nbsp;var me = this;
&nbsp;&nbsp;&nbsp;&nbsp;var canvas = document.getElementById(me.constCanvasId);
&nbsp;&nbsp;&nbsp;&nbsp;canvas.addEventListener("mousedown", function(event) {
&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;prt("mousedown");
&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;me.operationReset();
&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;me.mouseTrackingX.push(event.offsetX);
&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;me.mouseTrackingY.push(event.offsetY);
&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;me.operationMousePress = true;
&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;me.operationMouseRelease = false;
&nbsp;&nbsp;&nbsp;&nbsp;});
&nbsp;&nbsp;&nbsp;&nbsp;canvas.addEventListener("mouseup", function(event) {
&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;prt("mouseup");
&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;me.operationMousePress = false;
&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;me.operationMouseRelease = true;
&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;me.drawEnd();
&nbsp;&nbsp;&nbsp;&nbsp;});
&nbsp;&nbsp;&nbsp;&nbsp;canvas.addEventListener("mousemove", function(event) {
&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;if(me.operationMousePress === true) {
&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;me.mouseTrackingX.push(event.offsetX);
&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;me.mouseTrackingY.push(event.offsetY);
&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;
&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;var x = me.mouseTrackingX;
&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;var y = me.mouseTrackingY;
&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;var idxA = x.length - 2;
&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;var idxB = x.length - 1;
&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;var canvas = document.getElementById(me.constCanvasId);
&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;var ctx = canvas.getContext('2d');
&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;ctx.beginPath();
&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;ctx.strokeStyle = "rgb(0, 0, 0)";
&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;ctx.moveTo(x[idxA], y[idxA]);
&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;ctx.lineTo(x[idxB], y[idxB]);
&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;ctx.stroke();
&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;}
&nbsp;&nbsp;&nbsp;&nbsp;});
&nbsp;&nbsp;&nbsp;&nbsp;document.getElementById(me.constConfigResetButtonId).addEventListener("click", function(event) {
&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;me.initConfigInputs();
&nbsp;&nbsp;&nbsp;&nbsp;});
&nbsp;&nbsp;}
&nbsp;&nbsp;&nbsp;
&nbsp;&nbsp;self.operationReset = function() {
&nbsp;&nbsp;&nbsp;&nbsp;var me = this;
&nbsp;&nbsp;&nbsp;&nbsp;var canvas = document.getElementById(me.constCanvasId);
&nbsp;&nbsp;&nbsp;&nbsp;var ctx = canvas.getContext('2d');
&nbsp;&nbsp;&nbsp;&nbsp;ctx.fillStyle = "rgb(187, 187, 187)";
&nbsp;&nbsp;&nbsp;&nbsp;ctx.fillRect(0, 0, canvas.width, canvas.height);
&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;
&nbsp;&nbsp;&nbsp;&nbsp;me.operationMousePress = false;
&nbsp;&nbsp;&nbsp;&nbsp;me.operationMouseRelease = false;
&nbsp;&nbsp;&nbsp;&nbsp;me.mouseTrackingX = [];
&nbsp;&nbsp;&nbsp;&nbsp;me.mouseTrackingY = [];
&nbsp;&nbsp;}
&nbsp;&nbsp;&nbsp;
&nbsp;&nbsp;self.updateConfigItem = function(id, configName, configType) {
&nbsp;&nbsp;&nbsp;&nbsp;var me = this;
&nbsp;&nbsp;&nbsp;&nbsp;var elm = document.getElementById(id);
&nbsp;&nbsp;&nbsp;&nbsp;if(configType == "int") {
&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;me[configName] = parseInt(elm.value);
&nbsp;&nbsp;&nbsp;&nbsp;} else if(configType == "float") {
&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;me[configName] = parseFloat(elm.value);
&nbsp;&nbsp;&nbsp;&nbsp;}
&nbsp;&nbsp;}
&nbsp;&nbsp;self.updateConfig = function() {
&nbsp;&nbsp;&nbsp;&nbsp;var me = this;
&nbsp;&nbsp;&nbsp;&nbsp;var canvas = document.getElementById(me.constConfigRingBufferSizeId);
&nbsp;&nbsp;&nbsp;&nbsp;me.updateConfigItem(me.constConfigRingBufferSizeId, "configRingBufferSize", "int");
&nbsp;&nbsp;&nbsp;&nbsp;me.updateConfigItem(me.constConfigMinimumRadianCoeffId, "configMinimumRadianCoeff", "float");
&nbsp;&nbsp;&nbsp;&nbsp;me.updateConfigItem(me.constConfigMaximumRadianCoeffId, "configMaximumRadianCoeff", "float");
&nbsp;&nbsp;&nbsp;&nbsp;me.updateConfigItem(me.constConfigSensitivityId, "configSensitivity", "int");
&nbsp;&nbsp;}
&nbsp;&nbsp;self.initConfigInputs = function() {
&nbsp;&nbsp;&nbsp;&nbsp;var me = this;
&nbsp;&nbsp;&nbsp;&nbsp;document.getElementById(me.constConfigRingBufferSizeId).value = String(me.constRingBufferSize);
&nbsp;&nbsp;&nbsp;&nbsp;document.getElementById(me.constConfigMinimumRadianCoeffId).value = String(me.constMinimumRadianCoeff);
&nbsp;&nbsp;&nbsp;&nbsp;document.getElementById(me.constConfigMaximumRadianCoeffId).value = String(me.constMaximumRadianCoeff);
&nbsp;&nbsp;&nbsp;&nbsp;document.getElementById(me.constConfigSensitivityId).value = String(me.constSensitivity);
&nbsp;&nbsp;}
&nbsp;&nbsp;&nbsp;
&nbsp;&nbsp;self.test1 = function() {
&nbsp;&nbsp;&nbsp;&nbsp;var me = this;
&nbsp;&nbsp;&nbsp;&nbsp;var x = me.mouseTrackingX;
&nbsp;&nbsp;&nbsp;&nbsp;var y = me.mouseTrackingY;
&nbsp;&nbsp;&nbsp;&nbsp;var size = x.length;
&nbsp;&nbsp;&nbsp;&nbsp;var idxA = 0;
&nbsp;&nbsp;&nbsp;&nbsp;var idxB = parseInt(size / 2);
&nbsp;&nbsp;&nbsp;&nbsp;var idxC = size - 1;
&nbsp;&nbsp;&nbsp;&nbsp;var canvas = document.getElementById(me.constCanvasId);
&nbsp;&nbsp;&nbsp;&nbsp;var ctx = canvas.getContext('2d');
&nbsp;&nbsp;&nbsp;&nbsp;ctx.beginPath();
&nbsp;&nbsp;&nbsp;&nbsp;ctx.strokeStyle = "rgb(255, 0, 0)";
&nbsp;&nbsp;&nbsp;&nbsp;ctx.moveTo(x[idxA], y[idxA]);
&nbsp;&nbsp;&nbsp;&nbsp;ctx.lineTo(x[idxB], y[idxB]);
&nbsp;&nbsp;&nbsp;&nbsp;ctx.lineTo(x[idxC], y[idxC]);
&nbsp;&nbsp;&nbsp;&nbsp;ctx.stroke();
&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;
&nbsp;&nbsp;&nbsp;&nbsp;var plotX = [x[idxA], x[idxB], x[idxC]];
&nbsp;&nbsp;&nbsp;&nbsp;var plotY = [y[idxA], y[idxB], y[idxC]];
&nbsp;&nbsp;&nbsp;&nbsp;ctx.font = "16px serif";
&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;
&nbsp;&nbsp;&nbsp;&nbsp;ctx.fillStyle = "rgb(0, 0, 0)";
&nbsp;&nbsp;&nbsp;&nbsp;ctx.fillText("A(" + String(plotX[0]) + ", " + String(plotY[0]) + ")", plotX[0], plotY[0]);
&nbsp;&nbsp;&nbsp;&nbsp;ctx.fillText("B(" + String(plotX[1]) + ", " + String(plotY[1]) + ")", plotX[1], plotY[1]);
&nbsp;&nbsp;&nbsp;&nbsp;ctx.fillText("C(" + String(plotX[2]) + ", " + String(plotY[2]) + ")", plotX[2], plotY[2]);
&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;
&nbsp;&nbsp;&nbsp;&nbsp;var rotate = rotateDirectionOf3Points({x: plotX[0], y: plotY[0]}, {x: plotX[1], y: plotY[1]}, {x: plotX[2], y: plotY[2]});
&nbsp;&nbsp;&nbsp;&nbsp;var rad = angleOf3Points({x: plotX[0], y: plotY[0]}, {x: plotX[1], y: plotY[1]}, {x: plotX[2], y: plotY[2]});
&nbsp;&nbsp;&nbsp;&nbsp;var degree = rad * (180 / Math.PI);
&nbsp;&nbsp;&nbsp;&nbsp;var lines = ["rad: " + String(rad), "degree: " + String(degree), "rotate: " + String(rotate)];
&nbsp;&nbsp;&nbsp;&nbsp;for(var i = 0; i &lt; plotX.length; i += 1) {
&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;var txt = "X=" + String(plotX[i]) + ", Y=" + String(plotY[i]);
&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;lines.push(txt);
&nbsp;&nbsp;&nbsp;&nbsp;}
&nbsp;&nbsp;&nbsp;&nbsp;var logView = document.getElementById(me.constViewLogId);
&nbsp;&nbsp;&nbsp;&nbsp;var logText = lines.join("\n");
&nbsp;&nbsp;&nbsp;&nbsp;logView.value = lines.join("\n");
&nbsp;&nbsp;}
&nbsp;&nbsp;&nbsp;
&nbsp;&nbsp;////////////////////////////////////////
&nbsp;&nbsp;// 描画終了処理
&nbsp;&nbsp;////////////////////////////////////////
&nbsp;&nbsp;self.drawEnd = function() {
&nbsp;&nbsp;&nbsp;&nbsp;var me = this;
&nbsp;&nbsp;&nbsp;&nbsp;me.updateConfig();
&nbsp;&nbsp;&nbsp;&nbsp;prt("configRingBufferSize", me.configRingBufferSize);
&nbsp;&nbsp;&nbsp;&nbsp;prt("configMinimumRadianCoeff", me.configMinimumRadianCoeff);
&nbsp;&nbsp;&nbsp;&nbsp;prt("configMaximumRadianCoeff", me.configMaximumRadianCoeff);
&nbsp;&nbsp;&nbsp;&nbsp;prt("configSensitivity", me.configSensitivity);
&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;
&nbsp;&nbsp;&nbsp;&nbsp;prt(me.mouseTrackingX);
&nbsp;&nbsp;&nbsp;&nbsp;prt(me.mouseTrackingY);
&nbsp;&nbsp;&nbsp;&nbsp;var skipRate = parseInt(me.mouseTrackingX.length / self.constSensitivity);
&nbsp;&nbsp;&nbsp;&nbsp;prt("skipRate", skipRate);
&nbsp;&nbsp;&nbsp;&nbsp;var x = n1d.skipSampling(me.mouseTrackingX, skipRate);
&nbsp;&nbsp;&nbsp;&nbsp;var y = n1d.skipSampling(me.mouseTrackingY, skipRate);
&nbsp;&nbsp;&nbsp;&nbsp;x = x.concat(x.slice(0, me.constRingBufferSize));
&nbsp;&nbsp;&nbsp;&nbsp;y = y.concat(y.slice(0, me.constRingBufferSize));
&nbsp;&nbsp;&nbsp;&nbsp;var res = trackingIsTriangle(
&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;x.length,
&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;Math.PI / me.constMinimumRadianCoeff,
&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;Math.PI / me.constMaximumRadianCoeff,
&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;x,
&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;y);
&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;
&nbsp;&nbsp;&nbsp;&nbsp;if(0) {
&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;me.test1();
&nbsp;&nbsp;&nbsp;&nbsp;} else {
&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;var logView = document.getElementById(me.constViewLogId);
&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;var lines = ["三角形: " + String(res.ok ? "true": "false")];
&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;for(var i = 0; i &lt; res.size; i += 1) {
&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;lines.push("座標 " + String(i + 1) + ": " + String(res.x[i]) + ", " + String(res.y[i]));
&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;}
&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;var logText = lines.join("\n");
&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;logView.value = lines.join("\n");
&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;
&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;if(res.ok === true) {
&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;var canvas = document.getElementById(me.constCanvasId);
&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;var ctx = canvas.getContext('2d');
&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;ctx.beginPath();
&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;ctx.strokeStyle = "rgb(255, 0, 255)";
&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;ctx.moveTo(res.x[0], res.y[0]);
&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;ctx.lineTo(res.x[1], res.y[1]);
&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;ctx.lineTo(res.x[2], res.y[2]);
&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;ctx.lineTo(res.x[0], res.y[0]);
&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;ctx.stroke();
&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;}
&nbsp;&nbsp;&nbsp;&nbsp;}
&nbsp;&nbsp;}
&nbsp;&nbsp;&nbsp;
&nbsp;&nbsp;self.start = function() {
&nbsp;&nbsp;&nbsp;&nbsp;var me = this;
&nbsp;&nbsp;&nbsp;&nbsp;me.initConfigInputs();
&nbsp;&nbsp;&nbsp;&nbsp;me.setupEvents();
&nbsp;&nbsp;}
}

window.addEventListener('load', function(){
&nbsp;&nbsp;var x = new HandWriteFigureCorrection();
&nbsp;&nbsp;x.start();
});
&nbsp;&nbsp;&lt;/script&gt;

&lt;/body&gt;
&lt;/html&gt;</code></pre>

HTML+JavaScript（適当なWEBサーバに設置して試験してください）

こんな感じでホバーで型定義が確認できるところがいいですね。<img src="https://images.microcms-assets.io/assets/b30d7661c2694503832399a83cea2137/ce10752003984656b09e5d543258de21/%E3%82%B9%E3%82%AF%E3%83%AA%E3%83%BC%E3%83%B3%E3%82%B7%E3%83%A7%E3%83%83%E3%83%88%202024-01-04%2018.57.49.png" alt="">

type

次にinterface<img src="https://images.microcms-assets.io/assets/b30d7661c2694503832399a83cea2137/d4ed6b36ffdb4b4f9992d7f904359734/%E3%82%B9%E3%82%AF%E3%83%AA%E3%83%BC%E3%83%B3%E3%82%B7%E3%83%A7%E3%83%83%E3%83%88%202024-01-04%2018.57.28.png" alt="">こっちはホバーしても確認はできません。 ただし、interfaceは継承することができます。 継承(extends)<img src="https://images.microcms-assets.io/assets/b30d7661c2694503832399a83cea2137/cbea8ed2132d44c19529fbb68922f0f5/%E3%82%B9%E3%82%AF%E3%83%AA%E3%83%BC%E3%83%B3%E3%82%B7%E3%83%A7%E3%83%83%E3%83%88%202024-01-04%2019.03.03.png" alt="">typeでは型の継承はできないです。<img src="https://images.microcms-assets.io/assets/b30d7661c2694503832399a83cea2137/22aed711d8b24e0193836c2f071adf6d/%E3%82%B9%E3%82%AF%E3%83%AA%E3%83%BC%E3%83%B3%E3%82%B7%E3%83%A7%E3%83%83%E3%83%88%202024-01-04%2019.14.53.png" alt="">

interface

<img src="https://images.microcms-assets.io/assets/b30d7661c2694503832399a83cea2137/3e7f34b67601449482dc74dfb4a60c4a/%E3%82%B9%E3%82%AF%E3%83%AA%E3%83%BC%E3%83%B3%E3%82%B7%E3%83%A7%E3%83%83%E3%83%88%202024-01-04%2019.09.53.png" alt="">labelを取り除いた型定義になりました。こちらはinterface→typeでの定義が可能です。

Omit

<pre><code>interface Hoge {
 className?: string;
 label: string;
 onClick?: () =&gt; void;
};

// 複数指定するときは|を使用
type Huga = Pick&lt;Hoge, "label" | "className"&gt;;</code></pre>結果<img src="https://images.microcms-assets.io/assets/b30d7661c2694503832399a83cea2137/b13533ee1e344288bb51581f4d0fc708/%E3%82%B9%E3%82%AF%E3%83%AA%E3%83%BC%E3%83%B3%E3%82%B7%E3%83%A7%E3%83%83%E3%83%88%202024-01-04%2019.24.34.png" alt="">

Pick

<img src="https://images.microcms-assets.io/assets/b30d7661c2694503832399a83cea2137/d51c0105ab9f4642a17f14b8d0bade29/%E3%82%B9%E3%82%AF%E3%83%AA%E3%83%BC%E3%83%B3%E3%82%B7%E3%83%A7%E3%83%83%E3%83%88%202024-01-04%2019.20.34.png" alt="">stringかnumberか判断してくれます。

型宣言の条件分岐

?がついている型は宣言が任意ですが、指定がない場合の初期値を設定することができます。<pre><code>interface Hoge {
 className?: string;
};</code></pre>宣言<pre><code>Page.defaultProps = {
 className: null,
};</code></pre>

defaultProps

おまけ

typeScriptが使われる現場がかなり多いと思いますので不要な型宣言を増やさないように実装していきたいですね。

まとめ

typeScriptのtypeとinterfaceの違い

暗号化<img src="https://images.microcms-assets.io/assets/b30d7661c2694503832399a83cea2137/38a3e35a0c8d4d679607204542419512/%E3%82%B9%E3%82%AF%E3%83%AA%E3%83%BC%E3%83%B3%E3%82%B7%E3%83%A7%E3%83%83%E3%83%88%202024-01-04%2016.15.54.png" alt="">結果<img src="https://images.microcms-assets.io/assets/b30d7661c2694503832399a83cea2137/3fdc245d6ba84317961702a32887d948/%E3%82%B9%E3%82%AF%E3%83%AA%E3%83%BC%E3%83%B3%E3%82%B7%E3%83%A7%E3%83%83%E3%83%88%202024-01-04%2016.17.37.png" alt="">Wklv lv d whvw phvvdjh iru wkh Fdhvdu flskhu.これが暗号ですね。 これをリフレクターというもので復号化してみます。 リフレクター<img src="https://images.microcms-assets.io/assets/b30d7661c2694503832399a83cea2137/d4ce4402851047248d03eb70dc3584c7/%E3%82%B9%E3%82%AF%E3%83%AA%E3%83%BC%E3%83%B3%E3%82%B7%E3%83%A7%E3%83%83%E3%83%88%202024-01-04%2016.21.28.png" alt="">結果<img src="https://images.microcms-assets.io/assets/b30d7661c2694503832399a83cea2137/60d90a5a726748a2abdf38d560dc6327/%E3%82%B9%E3%82%AF%E3%83%AA%E3%83%BC%E3%83%B3%E3%82%B7%E3%83%A7%E3%83%83%E3%83%88%202024-01-04%2016.22.06.png" alt=""> ただ反転してるだけなんですけどね

実装

ネットが普及してる今のご時世ではセキュリティ対策はエンジニアにとっても大事なものとなってますね。 イミテーションゲームという映画ではこれより遥かに複雑なエニグマという暗号が使われてたり(初めてコンピュータで暗号を復号化されたのもエニグマだったような.... 興味のある方は暗号の歴史から追うのも面白いかと思います！

JavaScriptでシーザー暗号を実装してみる

そもそもReactHookFormって何？と思う方もいるかもしれませんので簡単に説明するとフォームに対してバリデーションをかけてくれるReact専用ライブラリです。 公式でも拡張機能に優れていると自負していますが、バリデーションで言うとresolverオプションに<a href="https://github.com/colinhacks/zod" target="_blank" rel="noopener noreferrer">Zod</a>、<a href="https://github.com/jquense/yup" target="_blank" rel="noopener noreferrer">Yup</a> などの別のバリデーションライブラリを設定することができ、<a href="https://mui.com/" target="_blank" rel="noopener noreferrer">mui</a>などのコンポーネントライブラリと組み合わせることもできます。 muiと組み合わせるとこんな感じです。(muiはデフォルトでアニメーションがついてるのでかっこいいです！赤文字がReact Hook Formのバリデーション部分となります。<img src="https://images.microcms-assets.io/assets/b30d7661c2694503832399a83cea2137/4a3409894257435fac2cff5647bb09ad/screencapture-localhost-3000-Login-2024-01-04-12_42_59.png" alt=""> 公式のデモからも実際にフォームを入力して確かめることができます。<a href="https://react-hook-form.com/" target="_blank" rel="noopener noreferrer">React Hook Form</a>

ReactHookFormとは？

【React】ReactHookFormのinputを分割して送信時に結合する。

フォーム分割の利点はユーザの入力工数を減らせることにあります。<h3 id="ha133a18a47">数字入力の桁数が多い場合</h3>分割なし1232343454565676<ul><li>何桁?</li><li>どこを間違えたか分かりづらい</li></ul> 入力が分割されている場合1232 3434 5456 5676 <h3 id="hdd7e77fb12">日付などの間に/が必要な場合</h3>分割なしYY/MM<ul><li>/までユーザに入力させている。</li></ul> 入力が分割されている場合YY MM

input分割の利点

では本題に移っていきます。 まず完成をお見せします。<pre><code>"use client";

import React, { useState } from "react";
import { useForm, SubmitHandler, Controller } from "react-hook-form";

type FormData = {
 birthday: string;
};

export default function page() {
 const [isValue, setIsValue] = useState("");
 const {
 control,
 handleSubmit,
 formState: { errors },
 } = useForm&lt;FormData&gt;();


 const onSubmit: SubmitHandler&lt;FormData&gt; = (data) =&gt; {
 setIsValue(data.birthday);
 };


 return (
 &lt;div className="flex justify-center items-center w-screen h-screen flex-col"&gt;
 {isValue &amp;&amp; (
 &lt;p className="mb-8 text-lg"&gt;
 あなたの生年月日は&lt;span className="text-blue-600"&gt;{isValue}&lt;/span&gt;
 です。
 &lt;/p&gt;
 )}
 &lt;form onSubmit={handleSubmit(onSubmit)} className="flex w-50 h-50 p-12 bg-gray-400 gap-8 flex-col"&gt;
 &lt;div&gt;
 &lt;label&gt;生年月日&lt;/label&gt;
 &lt;Controller
 name="birthday"
 control={control}
 rules={{ required: true }}
 render={({ field }) =&gt; (
 &lt;div className="flex !w-2/4 items-center"&gt;
 &lt;input
 className="h-6"
 type="text"
 name="Year"
 placeholder="年"
 onChange={(e) =&gt; {
 const yearValue = e.target.value;
 const monthValue = field.value?.split("/")[1];
 const dayValue = field.value?.split("/")[2];
 const newBirthdayValue = `${yearValue}/${monthValue}/${dayValue}`;
 field.onChange(newBirthdayValue);
 }}
 maxLength={4}
 /&gt;
 &lt;p className="mx-2"&gt;/&lt;/p&gt;
 &lt;input
 className="h-6"
 type="text"
 name="Mouth"
 placeholder="月"
 onChange={(e) =&gt; {
 const yearValue = field.value?.split("/")[0];
 const monthValue = e.target.value;
 const dayValue = field.value?.split("/")[2];
 const newBirthdayValue = `${yearValue}/${monthValue}/${dayValue}`;
 field.onChange(newBirthdayValue);
 }}
 maxLength={2}
 /&gt;
 &lt;p className="mx-2"&gt;/&lt;/p&gt;
 &lt;input
 className="h-6"
 type="text"
 name="Day"
 placeholder="日"
 onChange={(e) =&gt; {
 const yearValue = field.value?.split("/")[0];
 const monthValue = field.value?.split("/")[1];
 const dayValue = e.target.value;
 const newBirthdayValue = `${yearValue}/${monthValue}/${dayValue}`;
 field.onChange(newBirthdayValue);
 }}
 maxLength={2}
 /&gt;
 &lt;/div&gt;
 )}
 /&gt;
 {errors.birthday &amp;&amp; &lt;p className="text-red-600"&gt;{errors.birthday.message}&lt;/p&gt;}
 &lt;/div&gt;
 &lt;button className="h-10" type="submit"&gt;
 送信
 &lt;/button&gt;
 &lt;/form&gt;
 &lt;/div&gt;
 );
}</code></pre> 大事な部分はonChangeです。<pre><code> onChange={(e) =&gt; {
 const yearValue = e.target.value;
 const monthValue = field.value?.split("/")[1];
 const dayValue = field.value?.split("/")[2];
 const newBirthdayValue = `${yearValue}/${monthValue}/${dayValue}`;
 field.onChange(newBirthdayValue);
 }}</code></pre> この部分で結合してfieldに返してます。<pre><code>const newBirthdayValue = `${yearValue}/${monthValue}/${dayValue}`;
field.onChange(newBirthdayValue);</code></pre> 送信してみると<img src="https://images.microcms-assets.io/assets/b30d7661c2694503832399a83cea2137/5f906f724bbd4488a3e1c92b55f23e64/%E3%82%B9%E3%82%AF%E3%83%AA%E3%83%BC%E3%83%B3%E3%82%B7%E3%83%A7%E3%83%83%E3%83%88%202024-01-04%2014.18.54.png" alt=""><img src="https://images.microcms-assets.io/assets/b30d7661c2694503832399a83cea2137/b11058d9b71347719097fc2b2974e3a3/%E3%82%B9%E3%82%AF%E3%83%AA%E3%83%BC%E3%83%B3%E3%82%B7%E3%83%A7%E3%83%83%E3%83%88%202024-01-04%2014.19.01.png" alt="">/区切りになってますね。

ReactHookFormのcontrollerを複数用意して個別にバリデーションをかけたり、結合された値にバリデーションをかけたりできるので用途に応じて柔軟に利用できるところがいいですね。 それでは、次回の記事でお会いしましょう！

【React】React Hook Formでフォーム分割して送信時にデータ結合する

<ul><li>個人情報をサーバーに保存したくない人</li><li>少しでも画像データの削減をしたい人</li></ul>

この記事はこんな人向け

FinderでExif情報がある画像を見ると、こんな感じ。 <img src="https://images.microcms-assets.io/assets/b30d7661c2694503832399a83cea2137/eeeef582d0274ea5b4f00f440d8e9a63/%E3%82%B9%E3%82%AF%E3%83%AA%E3%83%BC%E3%83%B3%E3%82%B7%E3%83%A7%E3%83%83%E3%83%88%202023-03-21%2022.34.30.png" alt=""> <img src="https://images.microcms-assets.io/assets/b30d7661c2694503832399a83cea2137/03171583a01c467a88f41cdc41e274bd/%E3%82%B9%E3%82%AF%E3%83%AA%E3%83%BC%E3%83%B3%E3%82%B7%E3%83%A7%E3%83%83%E3%83%88%202023-03-21%2022.34.37.png" alt="">GPSはFinderから消せるけど、他の情報は消せない。。。 画像のように、Exif情報は、画像の向きや撮影したカメラ情報、撮影場所のデータが格納されている。どの画像ファイルにもあるものではなく、JPEG（JFIF/.jpgファイル）あるいはTIFF（.tifファイル）などのファイル形式と共に用いられることが多い。 jsでExif情報の操作をする記事は少ないので苦労しました。みんなどうしているんだろう。。。pythonなどでは、PILを使って画像自体を新規作成したら消せるみたいなこともある様子。 Exif情報には、画像の向きなどの情報も含んでいるので、むやみに消すのは良くない。

Exif情報について詳しく

今回は、<a href="https://github.com/TakeshiOkamoto/EXIF.js" target="_blank" rel="noopener noreferrer">こちら</a>のライブラリを使わせていただきました。中身を見るとわかるのですが、バイナリデータをそのままいじっています。JPEGファイルの構造などは、<a href="https://hp.vector.co.jp/authors/VA032610/JPEGFormat/StructureOfJPEG.htm" target="_blank" rel="noopener noreferrer">こちら</a>を参照ください。 まずは、<a href="https://github.com/TakeshiOkamoto/EXIF.js/blob/master/EXIF.js" target="_blank" rel="noopener noreferrer">EXIF.js</a>を丸々コピーして、assetsフォルダなどの適当なところをに保存します。次に、先程保存したjsファイルをhtml側から呼び出せるように読み込ませます。<pre><code>&lt;script src="assets/EXIF.js"&gt;&lt;/script&gt;</code></pre> あとは、下記のコードをhtml内で動かせばjpegファイルがダウンロードされます。<pre><code>// inputフォームなどから画像データを取得。このあたりはよしなにしてください。
var buffer = event.target.result;

// uint8arrayに変換する。
var uint8Array = new Uint8Array(buffer);

// EXIF object定義。
ExifMaster = new TExifMaster(uint8Array);

// EXIF削除し、画像をダウンロード。
ExifMaster.SaveToFile("test.jpeg", false)</code></pre>

ライブラリを使う

僕は、Exif情報を消したあと、s3にアップロードしたかったので、先程のEXIF.jsに関数を付け足しました。 <pre><code>// -----------------------------------------------------------
// all : true 全てのExifを削除 false 画像方向のみを残す
// -----------------------------------------------------------
SaveToUint8Array: function (all) {
	// uint8arrayオブジェクトが返却される。
	return this.SaveToStream(all, true);
}</code></pre> 呼び出し側は、下記のようにしてみました。<pre><code>var buffer = event.target.result;

var uint8Array = new Uint8Array(buffer);

// EXIF object定義
ExifMaster = new TExifMaster(uint8Array);

// EXIF削除。uint8arrayオブジェクトで取得
const convertedUint8Array = ExifMaster.SaveToUint8Array(false)

// Fileオブジェクトに戻すなどしても良い。
upload_file = new File([convertedUint8Array.buffer], upload_file.name, {type: "image/jpeg"})</code></pre> Exif情報の確認は、TExifMasterを初期化後、Analystプロパティに保存されます。console.logなどで、ご自身が欲しい情報を見つけてみてください。 <pre><code>ExifMaster = new TExifMaster(new Uint8Array(reader.result));

// プロパティ確認用
onsole.log(ExifMaster.Analyst);</code></pre>

BuildersIO produced by YOKU

#Javascript の記事一覧

パスワードに繰り返し文字を使用させない

手書き図形の認識（ゼスチャー認識）

typeScriptのtypeとinterfaceの違い

JavaScriptでシーザー暗号を実装してみる

【React】React Hook Formでフォーム分割して送信時にデータ結合する

【javascript】画像に含まれるexif情報を削除する

単体テストのベストプラクティス

Auth0環境を構築して自作のAPIと連携してみた

OpenAIとDeeplのAPIを使ってChatGPTのCLIツール作ってみた