プログラミング ゴン

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

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

こんにちは、ゴン（@GonYottela）です。

前回に続き、HTML + CSS + jQuery で作った計算ツールのコードを紹介しようと思います。

前回 ↓

mr.cooking-converter

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

2020年1月11日

 

今回のツールは 分量変えるくん1号 です！

jQueryで作った料理用計算ツールのイメージ画像

画像はイメージです

 

その名のとおり、分量を変えてくれます。

 

  • 1人分の分量のレシピを家族分作りたいとき
  • 複数人分の分量のレシピを1人分作りたいとき
  • ちょっと大盛り（または少なめ）で作りたいとき

 

そんなときにささっと各材料を○人分に変換するツールがあったらいいなと思い、作りました。

① に元々の分量を入力し、② に変更前と後の人数を入れ、変換ボタンを押したら ③ に計算後の分量が表示される仕組みです。

 

これもほぼ Progate で学んだ知識 + ググって調べた知識 でなんとか完成したので、作り方のメモを残しておきます。

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

 

① レシピ通りに分量を入力する欄のコード

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

まずは一番上の入力欄について解説します。

 

HTML のコード

<!-- （1）レシピ通りに入力する -->
<section class="step1">
  <div class="container">

    <div class="direction">
      <p>① レシピ通りに分量を入力！</p>
    </div>

    <div class="all">
      <!-- 1列目（入力エリア） -->
      <div class="column1">

        <div class="item-box">
          <input id="ri1" type="text" name="" placeholder="（例）にんじん">
          <input id="r1" type="number" name="" placeholder="1">
          <input id="rs1" type="text" name="" placeholder="本">
        </div>

        <div class="item-box">
          <input id="ri2" type="text" name="" placeholder="（例）砂糖">
          <input id="r2" type="number" name="" placeholder="1.5">
          <input id="rs2" type="text" name="" placeholder="大さじ">
        </div>

        <div class="item-box">
          <input id="ri3" type="text" name="" value="">
          <input id="r3" type="number" name="">
          <input id="rs3" type="text" name="">
        </div>

        <div class="item-box">
          <input id="ri4" type="text" name="" value="">
          <input id="r4" type="number" name="">
          <input id="rs4" type="text" name="">
        </div>

        <div class="item-box">
          <input id="ri5" type="text" name="" value="">
          <input id="r5" type="number" name="">
          <input id="rs5" type="text" name="">
        </div>

        <div class="item-box">
          <input id="ri6" type="text" name="" value="">
          <input id="r6" type="number" name="">
          <input id="rs6" type="text" name="">
        </div>

        <div class="item-box">
          <input id="ri7" type="text" name="" value="">
          <input id="r7" type="number" name="">
          <input id="rs7" type="text" name="">
        </div>

        <div class="item-box">
          <input id="ri8" type="text" name="" value="">
          <input id="r8" type="number" name="">
          <input id="rs8" type="text" name="">
        </div>

        <div class="item-box">
          <input id="ri9" type="text" name="" value="">
          <input id="r9" type="number" name="">
          <input id="rs9" type="text" name="">
        </div>

        <div class="item-box">
          <input id="ri10" type="text" name="" value="">
          <input id="r10" type="number" name="">
          <input id="rs10" type="text" name="">
        </div>

      </div>

      <!-- 2列目（ヒントとクリアボタン） -->
      <div class="column2">

        <div class="hint-wrap">
          <div id="hint" class="hint">
            <p><i class="far fa-question-circle"></i> 分数 → 小数のヒント</p>
          </div>

          <div class="hint-box">
            <!-- ヒントの内容 -->
            <div id="balloon" class="balloon hide">
              <div class="balloon2-top">
                <div class="hint-left">
                  <p><span>1/2</span> = 0.5</p>
                  <p><span>1/4</span> = 0.25</p>
                  <p><span>1/8</span> = 0.125</p>
                </div>
                <div class="hint-right">
                  <p><span>1/3</span> = 0.333</p>
                  <p><span>2/3</span> = 0.666</p>
                  <p><span>3/4</span> = 0.75</p>
                </div>
              </div>
            </div>
          </div>
        </div>

        <div class="clear-btn">
          <span id="clear-btn1" ontouchstart="">クリア</span>
        </div>
      </div>
    </div> <!-- all終わり -->
  </div> <!-- container終わり -->
</section>

 

本当は「＋ボタンを押したら1行ずつ増えていく」みたいなスマートなプログラムを実装したかったんですが、レイアウトとかがうまくいかず今回は断念しました……

分数 → 少数のヒントは、クリックで表示されるようにしています。

今パソコンから再度確認してみて「なんでホバーで表示されないんだ？？」と思ったんですが、入力欄にカーソルを立てるときに表示が消えたら使いづらいからクリック表示にしたんだと思い出しました。

ちゃんと使い心地考えててえらい！

再考したゴン
最初から表示させとけば？ っていう意見もあるね

 

jQuery のコード

// 分数のヒントをクリックでオンオフ
  $('#hint').click(function() {
    $('#balloon').fadeToggle(200);
  });

分数 → 少数のヒントをクリックで表示・非表示にするのは .fadeToggle を使いました。

 

// CSSだけでホバーの色変えがきかなかったので補足
  $('#hint p').hover(
    function() {
      $('#hint .fa-question-circle').css('color', '#716557');
    },
    function() {
      $('#hint .fa-question-circle').css('color', '#af977b');
    }
  );

ほんとはCSSでカーソルホバーの色変更はできるはずなんですが、なぜか反映されなかったので JavaScript で無理矢理変えました。

 

// 1つ目のクリアボタン
  $('#clear-btn1').click(function() {
    $('.step1 input').val('');
  });

欄の右下にあるクリアボタンを押すと、入力欄の内容を消せるようにしています。

 

② 変換する欄のコード

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

この欄に人数を入力して変換ボタンを押すと、分量が計算されます。

 

HTML のコード

<!-- （2）変換 -->
<section class="step2">
  <div class="container">
    <div class="arrow">
      <i class="fas fa-caret-down"></i>
    </div>
    <div class="direction">
      <p>②
      <input class="original-portion" type="number" placeholder="(例) 1">
      人前を
      <input class="converted-portion" type="number" placeholder="4">
      人前に
      <span class="convert-btn btn" ontouchstart="">変換</span>
      ！</p>
    </div>

    <div class="arrow">
      <i class="fas fa-caret-down"></i>
    </div>
  </div>
</section>

変換ボタンはクリックすると押されているように見えるようにしてますが、スマホでも同じように動かすのに手間取った記憶があります。

記憶を失ったゴン
span に ontouchstart が使われてるけど正直よく思い出せない…

 

jQuery のコード

$('.btn').click(function() {

    // 〇人前の数値を取得
    const originalPortion = $('.original-portion').val();
    const convertedPortion = $('.converted-portion').val();

まずは変換ボタンにクリックイベントを設置して、人数欄の数値を取得するようにしてます。

 

// レシピ通りの分量の数値を取得
    const r1 = $('#r1').val();
    const r2 = $('#r2').val();
    const r3 = $('#r3').val();
    const r4 = $('#r4').val();
    const r5 = $('#r5').val();
    const r6 = $('#r6').val();
    const r7 = $('#r7').val();
    const r8 = $('#r8').val();
    const r9 = $('#r9').val();
    const r10 = $('#r10').val();

次に、① の項目で入力してもらった、元々のレシピの数値を取得。

 

// 元の分量　÷　元の人数　×　作りたい人数
    const converted1 = r1 / originalPortion * convertedPortion;
    const converted2 = r2 / originalPortion * convertedPortion;
    const converted3 = r3 / originalPortion * convertedPortion;
    const converted4 = r4 / originalPortion * convertedPortion;
    const converted5 = r5 / originalPortion * convertedPortion;
    const converted6 = r6 / originalPortion * convertedPortion;
    const converted7 = r7 / originalPortion * convertedPortion;
    const converted8 = r8 / originalPortion * convertedPortion;
    const converted9 = r9 / originalPortion * convertedPortion;
    const converted10 = r10 / originalPortion * convertedPortion;

ここの計算は簡単。

元の分量 ÷ 元の人数（＝1人分の量）× 作りたい人数

の計算式を定数に片っ端からぶちこんでいきます。

力しかないゴン
お気づきかもしれないが今回も力技です

 

// ↑ の計算式を表示する
    $('#a1').val(Math.round(converted1 * 100) / 100);
    $('#a2').val(Math.round(converted2 * 100) / 100);
    $('#a3').val(Math.round(converted3 * 100) / 100);
    $('#a4').val(Math.round(converted4 * 100) / 100);
    $('#a5').val(Math.round(converted5 * 100) / 100);
    $('#a6').val(Math.round(converted6 * 100) / 100);
    $('#a7').val(Math.round(converted7 * 100) / 100);
    $('#a8').val(Math.round(converted8 * 100) / 100);
    $('#a9').val(Math.round(converted9 * 100) / 100);
    $('#a10').val(Math.round(converted10 * 100) / 100);

計算は済んだので、それを次の③のセクションの空欄に表示するプログラムを書きます。

 

// 未入力だった欄は0じゃなくて未入力のまま反映する
    if (r1 === '') {
      $('#a1').val('');
    }

    if (r2 === '') {
      $('#a2').val('');
    }

    if (r3 === '') {
      $('#a3').val('');
    }

    if (r4 === '') {
      $('#a4').val('');
    }

    if (r5 === '') {
      $('#a5').val('');
    }

    if (r6 === '') {
      $('#a6').val('');
    }

    if (r7 === '') {
      $('#a7').val('');
    }

    if (r8 === '') {
      $('#a8').val('');
    }

    if (r9 === '') {
      $('#a9').val('');
    }

    if (r10 === '') {
      $('#a10').val('');
    }

未入力の欄がある状態で変換ボタンを押すと「0」と表示されてしまいなんか邪魔だったので、そのまま空欄に表示させるコードをきっちりと丁寧に書きました。

 

// 入力した材料を反映させる
    $('#ai1').val($('#ri1').val());
    $('#ai2').val($('#ri2').val());
    $('#ai3').val($('#ri3').val());
    $('#ai4').val($('#ri4').val());
    $('#ai5').val($('#ri5').val());
    $('#ai6').val($('#ri6').val());
    $('#ai7').val($('#ri7').val());
    $('#ai8').val($('#ri8').val());
    $('#ai9').val($('#ri9').val());
    $('#ai10').val($('#ri10').val());

これは ① で入力した材料（文字列）をそのまま ③ の input 欄に表示させるだけなので簡単。

 

// 入力した単位を反映させる
    $('#as1').val($('#rs1').val());
    $('#as2').val($('#rs2').val());
    $('#as3').val($('#rs3').val());
    $('#as4').val($('#rs4').val());
    $('#as5').val($('#rs5').val());
    $('#as6').val($('#rs6').val());
    $('#as7').val($('#rs7').val());
    $('#as8').val($('#rs8').val());
    $('#as9').val($('#rs9').val());
    $('#as10').val($('#rs10').val());

こちらは一番右にある単位の欄の分。これも簡単。

③ 変換後の分量が表示される欄のコード

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

最後の欄はコードはほぼないです。

 

HTML のコード

<!-- （3）結果表示 -->
<section class="step3">
  <div class="container">

    <div class="direction">
      <p>③ この分量で作ってね！</p>
    </div>

    <div class="result">
      <!-- 1列目（入力エリア） -->
      <div class="column1">
        <div class="item-box">
          <input id="ai1" type="text" name="">
          <input id="a1" type="number" name="">
          <input id="as1" type="text" name="">
        </div>

        <div class="item-box">
          <input id="ai2" type="text" name="" value="">
          <input id="a2" type="number" name="">
          <input id="as2" type="text" name="">
        </div>

        <div class="item-box">
          <input id="ai3" type="text" name="" value="">
          <input id="a3" type="number" name="">
          <input id="as3" type="text" name="">
        </div>

        <div class="item-box">
          <input id="ai4" type="text" name="" value="">
          <input id="a4" type="number" name="">
          <input id="as4" type="text" name="">
        </div>

        <div class="item-box">
          <input id="ai5" type="text" name="" value="">
          <input id="a5" type="number" name="">
          <input id="as5" type="text" name="">
        </div>

        <div class="item-box">
          <input id="ai6" type="text" name="" value="">
          <input id="a6" type="number" name="">
          <input id="as6" type="text" name="">
        </div>

        <div class="item-box">
          <input id="ai7" type="text" name="" value="">
          <input id="a7" type="number" name="">
          <input id="as7" type="text" name="">
        </div>

        <div class="item-box">
          <input id="ai8" type="text" name="" value="">
          <input id="a8" type="number" name="">
          <input id="as8" type="text" name="">
        </div>

        <div class="item-box">
          <input id="ai9" type="text" name="" value="">
          <input id="a9" type="number" name="">
          <input id="as9" type="text" name="">
        </div>

        <div class="item-box">
          <input id="ai10" type="text" name="" value="">
          <input id="a10" type="number" name="">
          <input id="as10" type="text" name="">
        </div>

      </div> <!--column1 -->

      <!-- 2列目（クリアボタン） -->
      <div class="column2">
        <div class="clear-btn">
          <span id="clear-btn2" ontouchstart="">クリア</span>
        </div>
      </div>
    </div> <!-- result終わり -->
  </div> <!-- container終わり -->
</section>

基本的に最初の入力欄のところと一緒。

 

jQuery のコード

// 2つ目のクリアボタン
  $('#clear-btn2').click(function() {
    $('.result input').val('');
  });

jQuery のコードはクリアボタンだけ。

 

制作にかかった時間

  • 構想　0.5日
  • HTML/CSS　1日
  • レスポンシブ化　0.5日
  • 計算部分のjQuery実装　0.5日
  • 謎のエラーの解明　0.5日

 

合計：約3日

前回が5日だったのでそれよりは早くできてる……！

けど HTML/CSS に（相変わらず）つまずいてる感あるし、計算もこっちの方がシンプルだったから順当といったところ( ˘ω˘ )

 

野暮ったいですがけっこう便利なので、よかったらときどき使ってください。

>> 分量変えるくん1号

 

前回作ったツール ↓

mr.cooking-converter

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

2020年1月11日

関連記事

コメントを残す

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

CAPTCHA


RECOMMENDこちらの記事も人気です。