【もりけん塾】JavaScript課題14 – 擬似的にAPIを扱う ④ –

今日は、もりけん塾のJavaScript課題14 を終えて学んだことをアウトプットしていきます。

こんにちは。Webコーダーのはるです。

現在、所属している「もりけん塾」でハンズオン課題に取り組み、レビューをいただいています。

今日は、課題14 についてアウトプットをしていきます。
（前回までのアウトプットは、こちらです。）

●課題14で学んだこと

・inputのvalueを取得する
・数字が入力されていない時にアラートを出す
・アラートが出た後にモーダルが消えないようにする

【もりけん塾】JavaScript課題14で学んだことまとめ
あとがき

【もりけん塾】JavaScript課題14で学んだことまとめ

今回、取り組んだ課題はこちらです。

（もりけん先生のJavaScriptハンズオン課題より）

【以下の仕様を実装しました】
ボタンをクリックするとモーダルが出てくる
↓
inputに数字を入力して、モーダル内のボタンをクリックする
↓
コンソールに数字(value)を出力
↓
モーダルが閉じてAPIにリクエストをする
↓
配列データを取得して、リストを表示する

inputのvalueを取得する

まず、<input>の書き方を復習しました。

<input type="number" id="number" value="">

typeはフォームの型で、ここに指定した型によって動作が決められています。

今回は、type=”number”として、数字を入力するinputを作成します。

MDN

number型は、ユーザーに数値を入力させるために使用されます。数値以外の入力を除外するための値検証機能を内蔵しています。

valueには、初期設定しておく数字を入れますが、今回はなしにしました。

次にJavaScriptです。数字を取得する関数を作成しました。

function fetchNumber() {
　const numberField = document.getElementById("number");
　const number = numberField.value;
  console.log(number);
}

id名から<input>要素を取得して、Elements.valueでフォームに入力された値を取得します。

意外と簡単に取得できました・・！

最初のPRコード

ここまで学習して、最初に下記コードでPRしました。

const button = document.getElementById("js-button");
const modalOpenButton = document.getElementById("js-modalOpen");
const div = document.getElementById("js-contents");
const modal = document.getElementById("js-modal");
const ul = document.getElementById("js-lists");

function addLoading() {
　const img = document.createElement("img");
　img.src = "loading-circle.gif";
　img.id = "js-loading";
　div.appendChild(img);
}

function removeLoading() {
const img = document.getElementById("js-loading");
div.removeChild(img);
}

async function fetchData() {
　try {
　　const json = await (await fetch("https://myjson.dit.upm.es/api/bins/7ctn")).json();
　　return json.data;
　} catch (e) {
　　throw new Error(e);
　}
}

async function fetchListData() {
　addLoading();
　try {
　　const data = await fetchData();
　　if (data.length === 0) {
　　　throw new Error("データが空です");
　　}
　　return data;
　} catch (e) {
　　createErrorMessage(e);
　} finally {
　　removeLoading();
　}
}

function createErrorMessage(e) {
　const li = document.createElement("li");
　li.textContent = `エラー内容:${e.message}`;
　ul.appendChild(li);
　console.error(e.message);
}

async function addList() {
　const fragment = document.createDocumentFragment();
　const values = await fetchListData();

　if (values) {
　　values.forEach((value) => {
　　　const li = document.createElement("li");
　　　const anchor = document.createElement("a");
　　　const img = document.createElement("img");

　　　anchor.textContent = value.text;
　　　anchor.href = `/${value.to}`;
　　　img.src = value.img;
　　　img.alt = value.alt;

　　　li.appendChild(anchor).insertAdjacentElement("afterbegin", img);
　　　fragment.appendChild(li);
　　});
　　ul.appendChild(fragment);
　}
}

function fetchNumber() {
　const numberField = document.getElementById("number");
　const number = numberField.value;

　if(number) {
　　console.log(number);
　} else {
　　console.log('null');
　}
}

modalOpenButton.addEventListener('click', () => {
　modal.classList.add('is-active');
　modalOpenButton.remove();
})

button.addEventListener('click', () => {
　modal.classList.remove('is-active');
　fetchNumber();
　addList();
})

だんだんコードが長くなってきた・・！

課題14ではこちらの関数を追加しました。

function fetchNumber() {
　const numberField = document.getElementById("number");
　const number = numberField.value;

　if(number) {
　　console.log(number);
　} else {
　　console.log('null');
　}
}

フォームに何も入力しなかった時は、どうしよう・・と思い、コンソールに”null”と表示させるようにして、PRしました。

数字が入力されていない時にアラートを出す

もなかさん(ruby443n)にレビューいただきました！いつもありがとうございます！

やはり、フォームに何も入力しなかった時は、アラートを出すのが親切とレビューしていただきました。

function fetchNumber() {
　const numberField = document.getElementById("number");
　const number = numberField.value;
　//入力が空だったらアラートを出して処理終了
　if (number === "") {
　　alert("入力してください。");
　　return;
　}
　console.log(number);
　//ここでaddlistを実行させる
　addList();
}

ここでreturnの知らなかった使い方を知ることができました。

if (number === "") {
　　alert("入力してください。");
　　return;
}

いつも関数内で、return valuesという形で戻り値を返す使い方をしていたのですが、

今回は「処理を終了させて呼び出し元に処理を返す」という使い方をしました。

これで、もし入力が空だった場合は、アラートを出して＆処理を終了させることができます。
この時、returnの後のコードは実行されません。

if (number === "") {
　　alert("入力してください。");
　　return;
　}
console.log(number);　//入力空の時は実行されない
addList();　//入力空の時は実行されない

elseを使わなくても上記のように書くことができるのを知りました・・！！

アラートが出た後にモーダルが消えないようにする

アラートをOKしたら、モーダル(フォームが設置されているところ)が消えてしまうので、消えずに再入力できるように修正しました。

まず、モーダルを開く・モーダルを閉じるという目的がわかりやすいように関数を追加しました。

function openModal() {
　const modal = document.getElementById("js-modal");
　modal.classList.add("is-active");
}


function closeModal() {
　const modal = document.getElementById("js-modal");
　modal.classList.remove("is-active");
}

その上で、

closeModal()の動作を、入力が空ではない時のみに動作するようにしました。

if (number === "") {
　　alert("入力してください。");
　　return;
　}
console.log(number);
closeModal(); //追加
addList();

学習に使用している本は、もりけん先生推奨の”JavaScript本格入門”です。

あとがき

お忙しい時間を割いて課題を確認してくださったもなかさん(ruby443n)・さえさん(sae_prog)ありがとうございました！！

私の書いたコードはこちらです。

今日は以上です。

【もりけん塾で勉強しています】

もりけん先生(@terrace_tec)のHPはこちら

毎日24時更新/プログラミング芸人/WEBデザイン/フォトグラファー/インド/JavaScript芸人/Reactエンジニ

先輩芸人の運転手していた29歳の頃、芸人の中でも何か一芸を身に付けたいと思い、初海外単身インドへ、その後世界から発信したいと思いWebを習い始める。そのうちJavaScriptが好きになり...React/Redux/TypeScript/...

【もりけん塾】JavaScript課題14で学んだこと まとめ