もりけん塾 JS課題15に挑戦

2022.03.31

もりけん塾にて、JavaScriptの課題に挑戦しています。こちらで挑戦した課題を備忘録としてまとめていきます。

今回挑戦したのは、課題15です。

前回の課題はこちらです。

今回追加した機能

モーダル内に formをおいて、input(type number)値、input(type text)、を新たに作ったsubmitボタン押下で リクエスト、 APIから値を取ってくる。

input(type text)

<input type="text" name="name" id="js_inputName" />

inputのtype属性textを付与しました。また、色々な追加オプションがありました。

MDN

JavaScriptのコード

const inputName = document.getElementById("js_inputName");

要素を取得しました。

inputName.valueでテキスト内の値を取得できました。

const name = inputName.value;

変数nameにinputタグに入力した値を代入しました。

次に、下記のコードを記述してみました。

  if (!name.trim() || !num) {
    alert("Value is empty");
  } else {
    console.log(name.trim());
    console.log(num);
    modal.style.display = "none";
    modalBtn.style.display = "none";
    init();
  }

trim関数

trim関数を使用することで文字列に空白が入っていた場合、両端の空白を削除することができました。

name.trim()としたので、変数nameの値に空白が入っていたら空白を削除して値を返すことができました。

MDN

論理否定

if(!name.trim() || !num)の記述についてちひろさん(@chihiro7029)からレビューをいただきました。

これは、論理否定ということが分かりました。

論理否定は

単一のオペランドが true に変換できる場合は false を返し、それ以外は true を返します。

ある値が true に変換できる場合、その値は真値 (truthy) と呼ばれます。ある値が false に変換できる場合、その値は偽値 (falsy) と呼ばれます。

false に変換することができる式の例↓↓

  • null
  • NaN
  • 0
  • 空文字列 ("" または '' または ““)
  • undefined

if(!name.trim() || !num)の意味として

もし、
変数nameの値がfalse

かつ、

変数numの値がfalseの時にalert関数が動作するようにできました。

コード

いただいたレビューについて

当初、私が作成していたモーダルは、リクエストボタンを押してアラートが動作するとモーダルが消えてしまっていました。

なので、

  • リクエストボタンを押してアラートが動作してもモーダルが消えないこと
  • リクエストボタンを押してinputタグの入力が正しければinputタグの中身をコンソールに表示すること
  • リクエストボタンを押して入力内容が正しければ、モーダル・モーダルボタンを非表示にすること
  • その後、init関数を動作させる。

この4点を記述しました。

下記がそのコードになります。

requestBtn.addEventListener("click", (e) => {
  e.preventDefault();
  const inputName = document.getElementById("js_inputName");
  const inputNum = document.getElementById("js_inputNum");
  const name = inputName.value;
  const num = inputNum.value;

  if (!name.trim() || !num) {
    alert("Value is empty");
  } else {
    console.log(name.trim());
    console.log(num);
    modal.style.display = "none";
    modalBtn.style.display = "none";
    init();
  }
});

Event.preventDefaultについて

requestBtn.addEventListener("click", (e) => { e.preventDefault(); ...省略 });

上記のコードでは、アラートが動作してもモーダルが消えないことを実現するため、Event.preventDefaultを使用しました。

preventDefault()がなければ、アラートのOKを押すたびに、モーダルが消えるという動作が出ていました。

そこで、

Event オブジェクトの preventDefault メソッドを使用すると、イベントに対するデフォルトの動作を止めることができました。

MDN

デフォルトの動作をキャンセルする

キャンセルボタン(閉じるボタン)に当てるCSSについて

モーダルを開いた時に表示される閉じるボタンについて、もなかさん(@ruby443n)からレビューをいただきました。

当初、キャンセルボタン(閉じるボタン)に付与していたCSSですが、

&-close {
        border: 2px solid #F09090;
        color: #F09090;

        &:hover {
            background-color: #F09090;
            color: #fff;
        }
    }

ホバーした際に、背景が赤くなるように指定をしていました。

これについて、もなかさん(@ruby443n)から

  • キャンセルボタンには赤は不自然であること(赤は危険な操作だと勘違いするため)
  • ホバーした際にグレーに近いような色に変えた方がいいこと
  • hoverがないとdisableのように感じるので避けること

の3点をご指摘いただきました。

それを踏まえて、下記のように修正させていただきました。

    &-close {
        border: 2px solid #A9A9A9;
        background-color: #fff;
        color: #A9A9A9;

        &:hover {
            background-color: #A9A9A9;
            color: #fff;
        }
    }

参考になる記事も教えていただきました。

最後に

今回は御二方にレビューいただきました。

ちひろ(@chihiro7029)さん
もなか(@ruby443n)さん

ありがとうございます。

お二人のコードをGitHubで拝見させていただいて、変数名・関数名、ショートコードの使い方、ロジックまで本当に勉強になりました。

自分も頑張らねば！！

もりけん塾について

自分がお世話になっているもりけん塾の先生についてです。
基本から応用までのJavaScript、モダンな技術の共有をしてくださいます。
また、色々な相談にも乗っていただけます。

もりけん先生ツイッター(@terrace_tec)

もりけん先生ブログ↓
https://kenjimorita.jp/