jQueryでの任意関数などを使ったコードの短縮（ドライアップ）の正しい方法を教えて下さい

Question

jQueryを使ってWebアプリを作成しています。

かんたんな単位換算なのですが、換算する単位ごとに、if構文を作っているのですが、変数やelseの処理など、同じコードを書く部分があります。

同じコードを書く部分については、任意関数などを作って、ドライアップしたいと思うのですが、自分で作ってみてもうまくいきませんでした。

以下HTMLとjQueryのコードです。

<div class="row">  <!-- 一段目 -->
        <div class="col-auto">　　<!-- インチ -->
            <div class="card" style="max-width:20rem;">
                <div class="card-title h2 text-center">Inch</div>
                <img class="card-img-top" src="picforucv/inch.png" alt="image of centimeter">
                <div class="card-body" style="text-align: center;">
                    　<form class="form-inline">
                        <input style="width: 120px;" type="number" class="form-control mb-2 mr-sm-2" id="inch" name="inch" value=""　>
                        <h3>　Inch</h3>
                    　</form>   
                    <button type="button" class="btn-info" id="btnfin">Convert</button>
                </div> <!-- card-body終わり -->
            </div>　<!-- card終わり -->
        </div>　<!-- col-4終わり -->

        <div class="col-auto">　　<!-- センチ -->
            <div class="card" style="max-width:20rem;">
                <div class="card-title h2 text-center">Centi meter</div>
                <img class="card-img-top" src="picforucv/centimeter.jpg" alt="image of centimeter">
                <div class="card-body" style="text-align: center;">
                    　<form class="form-inline">
                        <input style="width: 120px;" type="number" class="form-control mb-2 mr-sm-2" id="cm" name="cm" value=""　>
                        <h3>　cm</h3>
                    　</form>   
                    <button type="button" class="btn-info" id="btnfin">Convert</button>
                </div> <!-- card-body終わり -->
            </div>　<!-- card終わり -->
        </div>　<!-- col-4終わり -->

        <div class="col-auto">　　<!-- メートル -->
            <div class="card" style="max-width:20rem;">
                <div class="card-title h2 text-center">Metre</div>
                <img class="card-img-top" src="picforucv/meter.png" alt="origin of mtere">
                <div class="card-body" style="text-align: center;">
                    　<form class="form-inline">
                        <input style="width: 120px;" type="number" class="form-control mb-2 mr-sm-2" id="m" name="m" value=""　>
                        <h3>　m</h3>
                    　</form>   
                    <button type="button" class="btn-info" id="btnfin">Convert</button>
                </div> <!-- card-body終わり -->
            </div>　<!-- card終わり -->
        </div>　<!-- col-4終わり -->
        
        
    </div> <!-- 一段目row終わり-->

 // （1）インチへの単位変換
  $('#btnfin').click(function() {

//inputタグへの各単位の割当

　　const inch = $('#inch').val();
    const cm = $('#cm').val();
    const m = $('#m').val();
    

//インチから他の単位系への計算式
const convertedTocm = inch * 2.5399;　/* センチへ */
const convertedTom = inch * 2.5399 / 100;　/* メートルへ */


//インチに入力があったら他の単位系に計算後の数値を出力する
if (inch !== '' && cm === ''　&& m === "" && feet === "" && sun === "" && shyaku === "") {
      $('#cm').val(Math.round(convertedTocm * 10) / 10);
      $('#m').val(Math.round(convertedTom * 1000) / 1000);
     
 
    }else {
      $('#inch').val('');
      $('#cm').val('');
      $('#m').val('');
      
    }
  });

jQueryのコードで以下の部分を、他の単位系からの換算のときにも全く同じコードを書くことになるので
任意関数などを作ってドライアップしたいと思っています。

//inputタグへの各単位の割当
　　const inch = $('#inch').val();
    const cm = $('#cm').val();
    const m = $('#m').val();

else {
      $('#inch').val('');
      $('#cm').val('');
      $('#m').val('');

以下は試したことです。

function unitAllocation(){
　　const inch = $('#inch').val();
    const cm = $('#cm').val();
    const m = $('#m').val();
｝

  // （1）インチへの単位変換
  $('#btnfin').click(function() {

//inputタグへの各単位の割当
unitAllocation();
　  

//インチから他の単位系への計算式
const convertedTocm = inch * 2.5399;　/* センチへ */
const convertedTom = inch * 2.5399 / 100;　/* メートルへ */


//インチに入力があったら他の単位系に計算後の数値を出力する
if (inch !== '' && cm === ''　&& m === "" ) {
      $('#cm').val(Math.round(convertedTocm * 10) / 10);
      $('#m').val(Math.round(convertedTom * 1000) / 1000);
     
 
    }else {
      $('#inch').val('');
      $('#cm').val('');
      $('#m').val('');
      
    }
  });

各単位への入力及び表示のinputタグへの割当を任意関数を作ってやってみたのですが、うまく動きません。
具体的には、インチの入力欄に1を入力して、convertボタンをクリックしても、反応せず、他の単位に換算された数値が入りませんでした。

上記の様にドライアップしていないコードでは、換算された数値が入力されうまく動きます。
つまり、unitAllocation();という関数を作成しないで、

$('#btnfin').click(function() {
の下に、

const inch = $('#inch').val();
const cm = $('#cm').val();
const m = $('#m').val();

を書いたコードでは、インチの入力欄に数値を入力し、Convertボタンをクリックすると、他の単位の入力欄に換算された数値が入り動きます。

elseの部分もドライアップしたいと思っています。

上記のような場合は、どのようにしたら正しくドライアップできるのでしょうか？
あるいは、できないものなのでしょうか？

初心者なので、お手数とは思いますが、噛み砕いて説明いただけますと大変助かります。

よろしくお願いいたします。

Comments

[m.ts10806]

リファクタリングの類はやろうと思えば幾らでもできるので
なるべく観点や具体的な目的を明確にした方が良いです。
結局「動けばそれで正しい」ので「正しい方法」というのは実は存在しません。ゴールは１つでもルートは無数にあります。

[yuiran]

コメントをありがとうございます。

そうかも知れませんが、何度も同じコードを書くのは効率が悪いし、冗長になってしまうのかなと思い、それらは短縮してかけたらと思って調べており、自分ではうまくできなかったのでこちらに相談をさせていただきました。

質問にあげました箇所について、短縮して書く方法をご存知でしたら、教えていただけますと幸いです。
よろしくお願いいたします。

[m.ts10806]

「試したこと」に関してだけ言及すると、変数や関数のスコープを理解してないところからです。関数内でをconstつけて定義してしまうとその変数のスコープはその関数内です。

[m.ts10806]

「正解がない」のでアドバイス得られないと思って差し支えないです。
なので、なるべく観点を明確にした方が良いですし、試したことについても「うまくいかない」ではなく「起きている問題」を明記してほしいです。
質問は編集できます。

[int32_t]

「ドライアップ」とはどういう意味でしょうか?

[yuiran]

m.ts10806さん
丁寧にお返事をいただきありがとうございました。
また、私の質問のし方に不十分な点があり、わかりにくかったとのこと申し訳ありませんでした。
合わせて、ご指導いただき感謝しております。

「うまく行かなかった」部分については具体的にどうだったのかを質問文に追記してみました。

[yuiran]

int32_tさん
ドライアップとは、海外のjQueryの講座を見ていたときにその先生が使っていた言葉で、何回も書くことになる、同じコードを、関数などを作ってまとめ、それを使う箇所に記述することで、コード全体の書く量を短くすることです。

[m.ts10806]

文脈からなんとなく理解したつもりですが海外的な表現なんですかね。
「非効率な処理の効率化やコードの正規化（変数名などの見直し含め）」を伝えたいのでしたら先に書いたように「リファクタリング」としたほうがダイレクトに伝わると思います。teratailのタグにもあるので、質問タグとして追記してみては。
https://teratail.com/tags/%E3%83%AA%E3%83%95%E3%82%A1%E3%82%AF%E3%82%BF%E3%83%AA%E3%83%B3%E3%82%B0
となると、jQueryの書き方や機能というよりJavaScriptのコードの正規化になるのでJavaScriptもタグとしてあったほうが良さそうです。

[int32_t]

ああ、なるほど。「ドライアップ」というのは聞いたことありませんでしたが、おそらく「DRY (Don't repeat youself) 原則」のもじりですね。
https://ja.wikipedia.org/wiki/Don%27t_repeat_yourself

[yuiran]

すみません。使う言葉が適切ではなかったようですね。ドライアップという単語はプログラマーの中で万国共通で使われている専門用語だと思っておりました。
失礼いたしました。

Answer 1

レートをオブジェクトでもっておけばよいでしょう

const rate={
m:{cm:100,mm:1000},
cm:{m:0.01,mm:10},
mm:{m:0.001,cm:0.1},
}
console.log(rate["m"]["mm"]);

Comments

[yuiran]

ありがとうございます。

初心者なので理解力が足りず申し訳ありません。
お示しいただきましたアドバイスは、各単位での変換レートの式でしょうか？

私が短縮したいのは、変換前の各単位の入力欄と、変換後の各単位の表示欄についてのコードを短縮したいと思っております。
例：インチは、#inchとidをふったinput欄に表示あるいは入力すると規定するためのコードです。

換算の式は、各単位系から他の単位系に換算するのがすべて異なるのでここは短縮せずに書こうと思っています。

理解力が乏しく、失礼になっていましたら申し訳ありません。
よろしくお願いいたします。

[yambejp]

こういうイメージかと思ったのですが違いますか？

<script>
window.addEventListener('DOMContentLoaded', ()=>{
const rate={
m:{cm:100,mm:1000},
cm:{m:0.01,mm:10},
mm:{m:0.001,cm:0.1},
}
document.querySelectorAll('select,input').forEach(x=>{
x.addEventListener('input',e=>{
const x1=document.querySelector('#x1').value;
const x2=document.querySelector('#x2').value;
const x4=document.querySelector('#x4').value;
const v=x1*rate[x2][x4];
document.querySelector('#x3').value=v||"";
});
});
});
</script>
<input type="text" id="x1">
<select id="x2">
<option value="">--</option>
<option value="m">m</option>
<option value="cm">cm</option>
<option value="mm">mm</option>
</select><br>
<input type="text" id="x3" readonly>
<select id="x4">
<option value="">--</option>
<option value="m">m</option>
<option value="cm">cm</option>
<option value="mm">mm</option>
</select>

[yuiran]

ご回答をありがとうございます。

イメージが難しくなりすぎていて余計わからないです…
初心者なので、自分が考えたフレームワーク以外のことを深く提案されても
余計混乱してしまいます。すみません。

コードで書くとお互いに理解に関する負担がかかって大変かもしれないと思いましたので、言葉で説明しますと、

単位換算をするために、３つのinputタグを使って、換算したい単位の数値を入力でき、かつ、入力がない場合には、他の単位からの換算された数値が出力されるinput欄を作りました。

短縮したいコードは上記コードで、この部分のコードは、どの単位から外の単位に換算するクリックファンクションのコードでも同じことを書くことになるので、この部分を１行など短い記述で短縮できるようにする方法はないかなと思っての質問です。

[yambejp]

> 自分が考えたフレームワーク以外のことを深く提案されても
> 余計混乱してしまいます

了解しました。
煩雑なソースだったリファクタリングを希望されているのかと思ったのですが
そういうわけではないのですね？
ちょっとおせっかいが過ぎたようです。
私からはこれ以上助言はありません。がんばってください

[yuiran]

高度なアドバイスを私の方で受け取れない形になってしまい申し訳ありませんでした。