【もりけん塾】Modal Window

もりけん塾で取り組んだ課題のアウトプットです。
今回はモーダルウィンドウをJavaScriptで実装しました。

レビュー前の完成形

See the Pen by Sae (@Sae_codepen) on CodePen.

レビュー

今回ももりけん先生にレビューを頂きました。
ありがとうございます。

レビュー①上下中央配置の方がいいのではないか？

私が実装したものはTOPから10px下の位置にポップアップが出る様スタイルを当てていました。
（なんとなく…見やすいと思ったからです…）

ですが、色々なサイトやサンプルを見ると、基本的に上下中央配置が多かったです。

マテリアルデザインには以下の様にあります。

ダイアログとは、アプリのコンテンツの前に現れ、重要な情報を提供したり、判断を求めたりするモーダルウィンドウの一種です。ダイアログは、表示されるとアプリのすべての機能を無効にし、確認されるか、解除されるか、必要な行動が取られるまで画面に表示されます。

https://material.io/components/dialogs

ダイアログは、その内容が確実に扱われるようにユーザーの注意を引きつけます。

https://material.io/components/dialogs

ユーザーの注意を惹きつけるためには、やはり上下中央配置がいいのでは、と思い直しました。

Dialogs – Material Design 3

Dialogs provide important prompts in a user flow. They can require an action, communicate information for making decisions, or help users accomplish a focused t...

m3.material.io

レビュー②先生の書いたコードから学んだこと

アロー関数

アロー関数ではfunctionキーワードは書かず、代わりにアロー(=>)で引数と関数本体を繋ぎます。

(引数,.....) => {....関数の本体....}

//例文
let getTriangle = (base,height) => {
 return base * height / 2; 
};

例文をアロー関数を使用して書き直します↓↓

▪️ 関数本体が1文である場合は{ }は省略することが可能
▪️ 文の戻り値がそのまま戻り値となる為returnは省略可能
▪️ 引数が1つの場合は、引数をくくる( )も省略が可能。引数がない場合は( )の省略は不可

let getTriangle = (base,height) => base * height / 2; 

▪️ オブジェクトを返す場合は( )が必要

hoge => ({obj: "a;"})

アロー関数式 - JavaScript | MDN

アロー関数式は、従来の 関数式の簡潔な代替構文ですが、制限があり、すべての場面で使用することができるわけではできません。

developer.mozilla.org

addEventListenerとonclickの違い

主な違いは、イベントリスナーのメソッドを使うと、複数のイベントハンドラーを追加 (または削除) できることです。

https://developer.mozilla.org/ja/docs/Web/Events/Event_handlers

イベントの扱い (概要) - イベントリファレンス | MDN

イベントとは、ブラウザーや OS の環境の変化を知らせる信号で、ブラウザーのウィンドウ内で発行されます。プログラマーは、イベントが発行されたときに実行されるイベントハンドラーのコードを作成することで、ウェブページが変化に適切に対応できるようになります。

developer.mozilla.org

完成後

See the Pen by Sae (@Sae_codepen) on CodePen.

だいぶスッキリしました！

---

次回からJS課題をメインに進めていきます。

先生、今回もレビューをありがとうございました！

---