初心者がJavaScript(jQuery)で料理用単位変換ツールを作ってみた【ほぼProgateの知識】

mr.cooking-converter

こんにちは、ゴン(@GonYottela)です。

アプリやツールを作ってみたい! と思い Progate で学習を始めて、HTML・CSS・JavaScript・jQuery を修了したところで実際に単位変換ツールを作ってみました。

名付けて Mr. COOKING CONVERTER

jQueryで作った料理用単位コンバーターのイメージ画像

こんな感じのやつ

レスポンシブを頑張ったゴン
パソコンでもスマホでも使えるよ

 

私はアメリカに住んでいるのですが、こちらで使われているあらゆる単位が日本と違い、特に料理の際に不便しています。

オーブンの温度やミルクの量、小麦粉の重さなどをささっと変換できるツールがほしくて作りました。

 

Progateで学んだ知識 + ググって調べた知識 + 力技でなんとか完成したので、念のためプロセスを残しておこうと思います。

ど素人のコードなので、プログラミング初心者の方だけ参考にしてください🙇‍♀️

 

この次に作ったツールも解説してます ↓

分量変えるくん1号の画面サンプル

初心者がJavaScript(jQuery)で料理用計算ツールを作ってみた【ほぼProgateの知識】

2020年1月11日

① 温度の変換部分のコード

jQueryで作った料理用単位コンバーターのイメージ画像

オーブンマークの赤いところでは、摂氏と華氏を変換できます。

気温をチェックしたいときにも使えます◎

 

HTML のコード

<!-- 温度の変換 -->
  <section class="content1">
    <div class="container">
      <div class="icon">
        <img src="img/oven.png" alt="oven">
      </div>
      <div class="convert-box">
        <div class="celsius">
          <input id="celsius" type="number" name="celsius" value=""><h2>°C</h2>
        </div>
        <div class="convert-btn">
          <span id="btn1"><i class="fas fa-chevron-up"></i> CONVERT <i class="fas fa-chevron-down"></i></span>
        </div>
        <div class="fahrenheit">
          <input id="fahrenheit" type="number" name="fahrenheit" value=""><h2>°F</h2>
        </div>
      </div>
    </div>
  </section>

input タグと変換ボタンのところに id をふっています。

カップと重さの項目も同様。

 

ちなみに、CSSはごちゃごちゃすぎるので割愛します。

必要があれば、Mr. COOKING CONVERTER から直接ソースコードを見てください。

 

jQuery のコード

// (1)温度の変換
  $('#btn1').click(function() {

    //定義と計算式
    const celsius = $('#celsius').val();
    const convertedToFahrenheit = celsius * 1.8 + 32;
    const fahrenheit = $('#fahrenheit').val();
    const convertedToCelsius = (fahrenheit - 32) / 1.8;

CONVERT ボタンを押したときに変換したいので、まずは #btn1 に対してクリックイベントを作成します。

最初に摂氏←→華氏の計算式をググって定数に入れときます。

 

//摂氏に入力があったら華氏に計算後の数値を出力する
    if (celsius !== '' && fahrenheit === '') {
      $('#fahrenheit').val(Math.round(convertedToFahrenheit));
      if (isNaN(celsius)) {
        $('#fahrenheit').val("ERROR");
      }

上の欄(℃)になにか入力があり、かつ下の欄(℉)が空欄のとき、華氏を求める計算式を発動して下の欄に答えを表示する」という内容を書きました。

ちなみに、if文で「数値以外が入力されてたら ERROR を表示してね」って書いてあるんだけど、今HTMLのコードみたら inputtype=”number” って指定してあったからそもそも文字は入力できないようになってた。

過去を思い出したゴン
そういえば途中で追加したんだった…

 

//華氏に入力があったら摂氏に計算後の数値を出力する
    } else if (fahrenheit !== "" && celsius === '') {
      $('#celsius').val(Math.round(convertedToCelsius));
      if (isNaN(fahrenheit)) {
        $('#celsius').val("ERROR");
      }

次は逆に、「℉の方に入力があったら、答えを℃の方に表示してね」ということを書きました。

 

} else {
      $('#celsius').val('');
      $('#fahrenheit').val('');
    }
  });

最後に、「それ以外(どちらにも入力がある場合)のときはクリアしてね」という内容にしてます。

クリアボタンを別に作ってもよかったんですが、ごちゃごちゃさせたくなかったので兼用にしました。

② 容積の変換部分のコード

jQueryで作った料理用単位コンバーターのイメージ画像

カップのマークの青いところでは、容積を変換できます。

日本では「カップとml(cc)」が使われ、アメリカでは「 Cup と fl oz(液量オンス)」が使われています。

 

HTML のコード

<!-- 容積の変換 -->
  <section class="content2">
    <div class="container">
      <div class="icon">
        <img src="img/cup.png" alt="cup">
      </div>
      <div class="convert-box">
        <div class="cup1">
          <div class="cup-equal1">
          </div>
          <div class="input1">
            <input id="j-cup" type="number" name="" value=""><h2>カップ</h2>
          </div>
          <div class="cup-equal2">
            <p>=</p>
          </div>
          <div class="input2">
            <input id="ml" type="number" name="" value=""><h2>ml (cc)</h2>
          </div>
        </div>
        <div class="convert-btn">
          <span id="btn2"><i class="fas fa-chevron-up"></i> CONVERT <i class="fas fa-chevron-down"></i></span>
        </div>
        <div class="cup2">
          <div class="cup-equal1">
          </div>
          <div class="input1">
            <input id="a-cup" type="number" name="" value=""><h2>cup(s)</h2>
          </div>
          <div class="cup-equal2">
            <p>=</p>
          </div>
          <div class="input2">
            <input id="fl-oz" type="number" name="" value=""><h2>fl oz</h2>
          </div>
        </div>
      </div>
    </div>
  </section>

 

jQuery のコード

死ぬほど力技を使ったパートです。

ほんとにこれはプログラミングと呼べるのか? というほどの洗練感のなさ。

 

// (2)容積の変換
  $('#btn2').click(function() {

    //入力値の定義
    const jCup = $('#j-cup').val();
    const ml = $('#ml').val();
    const aCup = $('#a-cup').val();
    const flOz = $('#fl-oz').val();

まず、容積のセクションの CONVERT ボタンにクリックイベントを作ります。

セレクタの入力値が頻出するので、それぞれ定数に代入しておきます。

 

//計算式
    const jCupToMl = jCup * 200;
    const jCupToACup = jCup / 1.182941;
    const jCupToFlOz = jCupToMl / 29.574;

    const mlToJCup = ml / 200;
    const mlToACup = ml * 0.00422680;
    const mlToFlOz = ml / 29.574;

    const aCupToJCup = aCup * 1.182941;
    const aCupToMl = aCup / 0.0042268;
    const aCupToFlOz = aCup * 8;

    const flOzToMl = flOz * 29.574;
    // ↑ 定数を使うために順番前後しました ↓
    const flOzToJCup = flOzToMl / 200;
    const flOzToACup = flOz / 8;

それぞれの単位に変換するための式をググり、全パターン当てはめます。(算数が苦手なのでとても混乱しながらがんばりました)

 

//カップに入力があったら他の欄に計算後の数値を出力する
  if (jCup !== '' && ml === '' && aCup === '' && flOz === '') {
    $('#ml').val(Math.round(jCupToMl * 10) / 10);
    $('#a-cup').val(Math.round(jCupToACup * 100) / 100);
    $('#fl-oz').val(Math.round(jCupToFlOz * 100) / 100);

    // もし半角数字以外が入力されたら「ERROR」を表示する
    if (isNaN(jCup)) {
      $('#ml, #a-cup, #fl-oz').val("ERROR");
    }

ひとつの欄に数値が入力されていたら、計算式を実行して他の欄に答えを表示する

数値以外が入力されていたら ERROR を表示する(※ 前述のとおり不要のやつ)

という内容が書いてあります。

他3つの項目についても同じ形で書いてあるので省略。

 

ちなみに、「Math.round(aCupToMl * 10) / 10」の部分は、10か100かで小数点以下の桁数を決めています。

 

// 2箇所以上数値が入力されていたら全てクリアする
  } else if (jCup !== '' && ml !== '') {
    $('#j-cup, #ml, #a-cup, #fl-oz').val('');

  } else if (jCup !== '' && ml !== '' && aCup !== '') {
    $('#j-cup, #ml, #a-cup, #fl-oz').val('');

  } else if (jCup !== '' && aCup !== '') {
    $('#j-cup, #ml, #a-cup, #fl-oz').val('');

  } else if (jCup !== '' && aCup !== '' && flOz !== '') {
    $('#j-cup, #ml, #a-cup, #fl-oz').val('');

  } else if (jCup !== '' && flOz !== '') {
    $('#j-cup, #ml, #a-cup, #fl-oz').val('');

  // ここからmlの分岐
  } else if (ml !== '' && jCup !== '') {
    $('#j-cup, #ml, #a-cup, #fl-oz').val('');

  } else if (ml !== '' && jCup !== '' && aCup !== '') {
    $('#j-cup, #ml, #a-cup, #fl-oz').val('');

  } else if (ml !== '' && jCup !== '' && aCup !== '' && flOz !== '') {
    $('#j-cup, #ml, #a-cup, #fl-oz').val('');

  } else if (ml !== '' && aCup !== '') {
    $('#j-cup, #ml, #a-cup, #fl-oz').val('');

  } else if (ml !== '' && aCup !== '' && flOz !== '') {
    $('#j-cup, #ml, #a-cup, #fl-oz').val('');

  // ここからaCupの分岐
  } else if (aCup !== '' && jCup !== '') {
    $('#j-cup, #ml, #a-cup, #fl-oz').val('');

  } else if (aCup !== '' && jCup !== '' && ml !== '') {
    $('#j-cup, #ml, #a-cup, #fl-oz').val('');

  } else if (aCup !== '' && jCup !== '' && ml !== '' && flOz !== '') {
    $('#j-cup, #ml, #a-cup, #fl-oz').val('');

  } else if (aCup !== '' && ml !== '') {
    $('#j-cup, #ml, #a-cup, #fl-oz').val('');

  } else if (aCup !== '' && ml !== '' && flOz !== '') {
    $('#j-cup, #ml, #a-cup, #fl-oz').val('');

  } else if (aCup !== '' && flOz !== '') {
    $('#j-cup, #ml, #a-cup, #fl-oz').val('');

  // ここからflOzの分岐
  } else if (flOz !== '' && jCup !== '') {
    $('#j-cup, #ml, #a-cup, #fl-oz').val('');

  } else if (flOz !== '' && jCup !== '' && ml !== '') {
    $('#j-cup, #ml, #a-cup, #fl-oz').val('');

  } else if (flOz !== '' && jCup !== '' && ml !== '' && aCup !== '') {
    $('#j-cup, #ml, #a-cup, #fl-oz').val('');

  } else if (flOz !== '' && ml !== '') {
    $('#j-cup, #ml, #a-cup, #fl-oz').val('');

  } else if (flOz !== '' && ml !== '' && aCup !== '') {
    $('#j-cup, #ml, #a-cup, #fl-oz').val('');
  }

  });

山場です。

2ヶ所以上の欄に数値が入力されていたら全てクリアする」というコードなんですが、この「2ヶ所以上」がどうやってもスマートに指定できませんでした。

なので力技を使い、総当たりで組み合わせを記入し、全パターンの if 文を作成しました。やばい。

③ 重さの変換部分のコード

jQueryで作った料理用単位コンバーターのイメージ画像

スケールアイコンの緑の箇所では、重さを変換できます。

「g(グラム)」←→「oz(オンス)・lb(パウンド)」に対応しています。

 

HTML のコード

<!-- 重さの変換 -->
  <section class="content3">
    <div class="container">
      <div class="icon">
        <img src="img/scale.png" alt="scale" width="112">
      </div>
      <div class="convert-box">
        <div class="oz-lb">
          <div class="equal-box">
          </div>
          <div class="gram oz-lb-box">
            <input id="g" type="number" name="" value=""><h2>g</h2>
          </div>
        </div>
        <div class="convert-btn">
          <span id="btn3"><i class="fas fa-chevron-up"></i> CONVERT <i class="fas fa-chevron-down"></i></span>
        </div>
        <div class="oz-lb">
          <div class="equal-box">
          </div>
          <div class="oz-lb-box">
            <input id="oz" type="number" name="" value=""><h2>oz (ounce)</h2>
          </div>
          <div class="equal-box">
            <p>=</p>
          </div>
          <div class="oz-lb-box">
            <input id="lb" type="number" name="" value=""><h2>lb (pound)</h2>
          </div>
        </div>
      </div>
    </div>
  </section>

 

jQuery のコード

// (3)重さの変換
  $('#btn3').click(function() {

    // 定義
    const g = $('#g').val();
    const oz = $('#oz').val();
    const lb = $('#lb').val();

前2つと同様にクリックイベントを作り、各欄の入力値を定数に入れます。

 

// 計算式
    const gToOz = g / 28.35;
    const gToLb = g / 453.592;

    const ozToG = oz * 28.35;
    const ozToLb = oz / 16;

    const lbToG = lb * 453.592;
    const lbToOz = lb * 16;

変換するための計算式をググってこれも定数にします。

 

// gに入力があったらozとlbに数値を表示
    if (g !== '' && oz === '' && lb === '') {
      $('#oz').val(Math.round(gToOz * 100) / 100);
      $('#lb').val(Math.round(gToLb * 100) / 100);

      // 数字以外だったらERRORを表示
      if (isNaN(g)) {
        $('#oz, #lb').val("ERROR");
      }

ひとつの欄に入力があったら、他の欄に計算式の答えを表示する」という内容です。

これを各欄に当てはまる場合のコードを繰り返し書きます。

 

// 2ヶ所以上入力がある場合
  } else if (g !== '' && oz !== '') {
      $('#g, #oz, #lb').val('');
  } else if (g !== '' && oz !== '' && lb !== '') {
      $('#g, #oz, #lb').val('');
  } else if (oz !== '' && lb !== '') {
      $('#g, #oz, #lb').val('');

こちらでも「2ヶ所以上に入力がある状態でボタンが押された場合、内容をクリアする」というプログラムを組んでいます。

 

④ 大さじ・小さじの変換

jQueryで作った料理用単位コンバーターのイメージ画像

ちなみに、大さじ小さじだけは日本とアメリカは同じ量でした。

(厳密にはすこ~~~し違うみたいですが、計算する必要がないくらいの微々たる差でした)

制作にかかった時間

  • HTML/CSS 1日
  • jQueryで温度の計算式実装 1日
  • カップの計算式実装 1.5日
  • 重さの計算式実装 0.5日
  • レスポンシブ対応 1日

 

合計:5日くらい

カップで相当つまずきましたが、ちゃんと形になったのはめちゃめちゃ褒めてあげたい。ものすごいコードだけど。

 

以上、穴だらけのコードですが、どなたかの参考になれば幸いです。

>> Mr. COOKING CONVERTER

 

他のツールの解説 ↓

分量変えるくん1号の画面サンプル

初心者がJavaScript(jQuery)で料理用計算ツールを作ってみた【ほぼProgateの知識】

2020年1月11日

関連記事

コメントを残す

メールアドレスが公開されることはありません。 * が付いている欄は必須項目です

CAPTCHA