👩‍💻

【フロントエンド】ダイアログを作った時の反省点🦩

2021/02/11に公開

どういうダイアログか

【概要】
ユーザーに通知したり、必要に応じて応答してもらうためのポップアップ画面。
ボタン無し、ボタン1つ、ボタン2つ等、用途に応じて使い分けが可能になっている。

【できること ユーザー目線】
・メッセージが、画面中央に表示される
・「はい」「いいえ」等提示された選択肢を選ぶことができる
・選択したボタンに対応した動きが行われる

【できること デベロッパー目線】
・他の画面から呼び出し可能
・オーバーロードを使うことで、設定したい人は気にすることなく使えて、
 変えたい人だけ引数を追加するだけで、メソッドの変更を行うことなく使用可能
・タイトルバー、メッセージの内容、ボタンの文字を自由に設定できる

どういう実装にしたか

ダイアログ本体と、ダイアログを加工するクラス、ダイアログを使いたいクラスを作って実装🔧
具体的には・・・
【Dialigクラス】
ダイアログ本体
メッセージを出す場所などボタンが押された時の処理を書く
×ボタンの動き、ダイアログ自体の表示場所など

【Dialog加工するクラス】
呼び出すとダイアログが表示できるメソッドを作る
引数にメッセージ、タイトルバーの中身、ボタンに表示される文字を持っていて、
このメソッドを呼んで引数を渡すと、その通りのダイアログが表示される

【Dialog使いたいクラス】
実際にダイアログを使うところ
表示したい文章などを引数に入れて、ダイアログを表示させることができる

ざっくりと図にするとこんな感じ…

共通ダイアログの反省点

◇ダイアログ本体のクラス名が微妙
最初に左にボタンがあるダイアログに「CommonDialog」って付けたのが良くなかった😗
ボタンが2つのダイアログとか、ボタンの位置が逆にあるダイアログの名前をつけるのに苦労することになった
色々なダイアログをまとめて「CommonDialog」になるのが理想だったなと思う
次は用途によってダイアログの形式を固定にするとかして、名前でどういうダイアログか推察できるようにしたい

◇引数が多い
最初に作った時はダイアログに表示するメッセージだけだったけど、その後ボタンの動き、タイトルバー、ボタンに表示されるもの…と引数が増えていって
最終的に引数が6つになってしまった
流石にちょっと多い気がする😅

◇ダイアログに張付けるボタンが決め打ちになっている
ボタン用途に応じていくつか種類があるけど、それが決め打ちになっている
もしボタンの数とか種類を変える必要が出てきたら、新しくダイアログを作成する必要がある
そしてまた名前を付けるのに苦労することになる…😢

感想

シンプルに作れるかと思ってたけど、かなり悩むところがあった
最初はただ表示したいメッセージが出せればいいと思っていたけど、
タイトルバー、文章、ボタンに表示するものなど使いたい人が自由に決められる作りになってることが大事だなと気づいた💡

最初はただ呼ばれて表示されるだけのダイアログを作ったけど、
そこからボタンの色を変えて、文章を変えて、戻り値を受け取れるようにして
文章を外から変えられるようにしたり、オーバーロード使って変えたい人だけタイトルバー変えられるようにしたり…
開発が進んで問題に当たりながら少しずつ改善されていくのが楽しかった🥳
今回の反省を活かして、次の開発も楽しんでやっていきたい👩🏻‍💻

Discussion