もりけん塾で取り組んだ課題のアウトプットです。
今回はモーダルウィンドウをJavaScriptで実装しました。
レビュー前の完成形
See the Pen by Sae (@Sae_codepen) on CodePen.
レビュー
今回ももりけん先生にレビューを頂きました。
ありがとうございます。
レビュー①上下中央配置の方がいいのではないか?
私が実装したものはTOPから10px下の位置にポップアップが出る様スタイルを当てていました。
(なんとなく…見やすいと思ったからです…)
ですが、色々なサイトやサンプルを見ると、基本的に上下中央配置が多かったです。
マテリアルデザインには以下の様にあります。
ダイアログとは、アプリのコンテンツの前に現れ、重要な情報を提供したり、判断を求めたりするモーダルウィンドウの一種です。ダイアログは、表示されるとアプリのすべての機能を無効にし、確認されるか、解除されるか、必要な行動が取られるまで画面に表示されます。
https://material.io/components/dialogs
ダイアログは、その内容が確実に扱われるようにユーザーの注意を引きつけます。
https://material.io/components/dialogs
ユーザーの注意を惹きつけるためには、やはり上下中央配置がいいのでは、と思い直しました。
レビュー②先生の書いたコードから学んだこと
アロー関数
アロー関数ではfunctionキーワードは書かず、代わりにアロー(=>)で引数と関数本体を繋ぎます。
(引数,.....) => {....関数の本体....}
//例文
let getTriangle = (base,height) => {
return base * height / 2;
};
例文をアロー関数を使用して書き直します↓↓
▪️ 関数本体が1文である場合は{ }は省略することが可能
▪️ 文の戻り値がそのまま戻り値となる為returnは省略可能
▪️ 引数が1つの場合は、引数をくくる( )も省略が可能。引数がない場合は( )の省略は不可
let getTriangle = (base,height) => base * height / 2;
▪️ オブジェクトを返す場合は( )が必要
hoge => ({obj: "a;"})
addEventListenerとonclickの違い
主な違いは、イベントリスナーのメソッドを使うと、複数のイベントハンドラーを追加 (または削除) できることです。
https://developer.mozilla.org/ja/docs/Web/Events/Event_handlers
完成後
See the Pen by Sae (@Sae_codepen) on CodePen.
だいぶスッキリしました!
次回からJS課題をメインに進めていきます。
先生、今回もレビューをありがとうございました!
現在、もりけん塾でJavaScriptを中心に学習をしています!
もりけん先生のTwitter:https://twitter.com/terrace_tech
コメント