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

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

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

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

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

●課題13で学んだこと

・モーダルの表示/非表示

【もりけん塾】JavaScript課題13で学んだことまとめ
- モーダルの表示/非表示
あとがき

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

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

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

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

モーダルの表示/非表示

モーダルの表示・非表示には、モーダルの<div>にis-activeクラスを付け外しする実装にしました。

クラスのつけ外しのために、classListプロパティを学習しました。

MDN

Element.classList は読み取り専用のプロパティで、生きた DOMTokenList コレクションでその要素の class 属性を返します。これを使用してクラスリストを操作することができます。

DOMTokenListという言葉を初めて聞いたのですが、これはトークン(文字列)のリストを表すオブジェクトのことを指すのだそうです。MDNで引いたのですがよくわからず、したの参考サイトを参照しました。

十二章第一回　classList — JavaScript初級者から中級者になろう — uhyohyo.net

class属性は複数のクラスがスペースで区切られて並べられているものですので、DOMTokenListで表すことができます。

このような説明もありました。

Element.classListを使用することでClassを読み取ることができ、これ自体は読み取り専用と書かれていますが、.add()や.remove()を兼用することでオブジェクトの変更をすることが可能です。

<body>
　<div id="js-contents">
　　<ul id="js-lists"></ul>
　</div>
　<button id="js-modalOpen">Click to open!</button>

　<div class="modal" id="js-modal">
　　<div class="modal__contents">
　　　<button id="js-button">Click!</button>
　　</div>
　</div>
</body>

JSでモーダル要素を取得して、addEventListerでis-activeクラスを付け外ししました。

/* モーダル要素 */
<div class="modal" id="js-modal">

const button = document.getElementById("js-button");
const modalOpenButton = document.getElementById("js-modalOpen");
const modal = document.getElementById("js-modal");

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

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

学習した
– classList.add()
– classList.remove()
を使用してクラスのつけ外しを行いました。

CSSで、modalクラスにis-activeがついたときに表示されるようにしました。

.modal {
　display: none;
　position: fixed;
　z-index: 1;
　top: 0;
　left: 0;
　width: 100%;
　height: 100%;
　background-color: #ccc;
}

.modal.is-active {
　display: block;
}

今回はこの実装でApproveをいただきました。

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