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

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

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

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

今回追加した機能
1. inputタグについて
2. モーダルボタンをクリックしたらコンソールで表示する
コード
いただいたレビューについて
1. サーバーからのエラーはスローしないこと
  1. サーバーからのレスポンスエラーをスローしない理由として
  2. 変更した点
2. JSファイルの読み込みについて
最後に

今回追加した機能

課題13で作ったモーダルにinput (typeはnumber)をおいて、クリックした際にinput(type number)のvalueを取得
fetchを直接ラップしている関数の引数にその値を渡す

inputタグについて

htmlに下記のコードを追加しました。

    <input type="number" name="num" id="js_numBox">

inputにtype属性のnumberを設定することで、数字以外は入力されなくなります。

MDN

JavaScriptのコード

const numBox = document.getElementById("js_numBox");

上記で要素を取得します。

numBox.valueでinputタグに挿入した値が取得できるので、これを利用して

inputに値が入っていない場合、アラートを出すようにしました。
値が入っていた場合、inputに入っている数字を取得してコンソールに出力するようにしています。
下記がそのコードです。

  if (numBox.value === "") {
    alert("Value is empty");
  } else {
    console.log(numBox.value);
    init();
    modal.remove();
  }

モーダルボタンをクリックしたらコンソールで表示する

実装したコードが下記になります。

requestBtn.addEventListener("click", () => {
  const numBox = document.getElementById("js_numBox");
  if (numBox.value === "") {
    alert("Value is empty");
  } else {
    console.log(numBox.value);
    init();
    modal.remove();
  }
});

コード

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

サーバーからのエラーはスローしないこと

もりけん先生から、下記のアドバイスをいただきました。

サーバーからのレスポンスエラー50xはエラーをスローしてはいけないです。サーバーは意図があって返しているからです。現場の指針によりますが、それなりに対応して画面に表示させるのがよいですここの課題では画面を分ける必要はないですが、コンソールエラーぐらいにしておいてもらいたいです
エラーをスローするということは画面がクラッシュすることを意味していて、開発段階では開発者に気づかせる意味でやりますが、本番を想定している課題画面ではクラッシュさせないようにしてください

前回のコードでfetchした値で、サーバレスポンスでエラーが出た場合、その値をthorwして画面に表示していました。下記が前回のコードです。

async function getData() {
  try {
    const response = await fetch(url);
    if (response.ok) {
      const json = await response.json();
      return json;
    } else {
      throw new Error(`Server request failed:${response.statusText}`);
    }
  } catch (e) {
    console.error(e)
    throw new Error(e);
  }

if(response.ok) でサーバーからの応答が成功したかどうか（ステータスが200〜299の範囲）を示すブール値が含まれていました。

MDN

throw new Error(`Server request failed:${response.statusText}`);

resonse.okがfalseだった場合、サーバーからのレスポンスエラーをスローしてしまっていました。

サーバーからのレスポンスエラーをスローしない理由として

サーバーは意図があって返しているからです。現場の指針によりますが、それなりに対応して画面に表示させるのがよいです

本来のサーバーエラーを返している意味がなくなるからよくないそうです。

また、同じ塾生のまいさん(@mai2022web)がこのように言っておられました。

逆に、致命的なエラーではない独自の例外で、プログラムの実行をストップさせたい時にエラーをスローする

なるほど…勉強になった

変更した点

async function getData() {
   if (response.ok) {
      const json = await response.json();
      return json;
    } else {
      console.error(`${response.status}:${response.statusText}`);  //ここを変更
    }
  } catch (e) {
    throw new Error(e);
  }
}

JSファイルの読み込みについて

HTMLファイルでJavaScriptファイルを読み込む際には、bodyタグの終了の直前にscriptタグを置いていました。

<!DOCTYPE html>
<html lang="ja">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <meta http-equiv="X-UA-Compatible" content="ie=edge" />
    <link rel="stylesheet" href="./style.css" type="text/css" />
    <title>TerraceTechフロントエンドエンジニア養成所</title>
  </head>

  <body>
    //省略
    <script src=" ./index.js"></script> //bodyタグの直前
  </body>
</html>

上記のコードのように</body>タグの直前に<script>を置いていました。

HTMLを読み込む
JavaScriptファイルを読み込む
JavaScriptを実行する

今回、アドバイスいただいたのは、

<head>タグ内に<script>タグを置き defer属性を追加するということでした。下記がそのコードです。

<!DOCTYPE html>
<html lang="ja">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <meta http-equiv="X-UA-Compatible" content="ie=edge" />
    <link rel="stylesheet" href="./style.css" type="text/css" />
    <script src=" ./index.js" defer></script> //ここにscriptタグとdefer属性追加
    <title>TerraceTechフロントエンドエンジニア養成所</title>
  </head>

  <body>
    //省略
  </body>
</html>

<head>タグ内に<script>タグを置き defer属性を追加する

とすると、

HTMLの読み込みと同時にJavaScriptを読み込む
JavaScriptの実行

比較すると、defer属性を使用した場合の方が早いようでした。

MDN

【JS】8分で理解 deferとasyncを図で説明してみた【図解】

上記のリファレンス等を見てページの読み込み時間が短くなるようでした。

最後に

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

まい(@mai2022web )さん
よしかわ(@skill_up_john )さん
カエデ(@kaede_frontend )さん

ありがとうございました。

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

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