家事分担可視化アプリ作成！！ 合わせて備忘録も
最近、友人より、、
Web系全然手を付けてなくない？どうしたの？
と言われてしまいました。。。
ちょっとサボってた感じです😅
ということで、久々にWebアプリの作成です！！
家庭内で家事の分担で言い争いをすることが多いな。と思い、可視化するアプリを作成することにしました！！
まずは、こちらの家事分担表を元に妻・夫を選択でき、結果を閲覧できるようにします。
https://publications.asahi.com/aera/pdf/160530/tomobataraki.pdf
本当は分担リストも考える必要があったり、ユーザによるカスタマイズとかも考える必要があるかもですが、
今回は一旦おいておきます。
また、最後の方で自分が忘れて毎回調べてしまう、
・Reactのstateでの配列の使い方
についてまとめておこうと思います！！
■作成アプリ
作成したアプリはこちらのようになりました。
夫・妻・両方・なし
のいずれかを選択すると、円グラフにて夫・妻・両方の割合が表示されます。
円グラフは
朝、夕、その他
の3パターンで表しました。
これで、誰がどの程度の割合なのか、が示せるようになっております。
我が家でやってみたところこちらのようになりました！！
やはり少し偏りが大きいですね😅
不満が出てしまうのも分かります。。
と、いうように可視化できるので、不満に対する根拠に使えそうだな。と感じております。
■ソースコード
コード量が少し多く、ブログに載せるには長すぎるので、
ソースコード全体についてはこちらに格納しました。
https://github.com/Elsammit/HomeWork.git
■Reactのstateでの配列の使い方
stateの配列の定義ですが、
constructor (props) {
super(props);
this.state = {
papa:[0,0,0],
mama:[0,0,0],
both:[0,0,0],
};
}というように、
変数名：[各配列毎の初期値]
で定義すればOKです。
上記の場合には"0"なので、整数型の配列で定義されます。
文字列の配列を定義したい場合には、
constructor (props) {
super(props);
this.state = {
papa:["","",""],
};
}とすればよいです。
また、各関数にて定義した配列内の数値や文字列などを変更したい場合には、
testfunc= () =>{
const papa_buf = this.state.papa.slice();
const mama_buf = this.state.mama.slice();
const both_buf = this.state.both.slice();
for(var i=0;i<3;i++){
papa_buf[i] = 0;
mama_buf[i] = 0;
both_buf[i] = 0;
}
this.setState({papa:papa_buf})
this.setState({mama:mama_buf})
this.setState({both:both_buf})
}というように、まずはSliceで配列をコピーし、
const papa_buf = this.state.papa.slice();
いつも配列を扱うように要素数を指定して数値を代入し、
papa_buf[i] = 0;
setStateで値をセットすればOKです。
his.setState({papa:papa_buf})今回は数値のみ記載しておりますが、文字列の場合も同様に、
・Sliceで配列コピー
・通常の配列を利用するように文字列を代入
・setStateで値をstateに代入
でOKです。
自分はいつもsliceをするのを忘れてしまい、その都度調べていたので今回備忘録として書かせていただきました。
■最後に
我が家はまだ子なしなので選択できない項目が多いです。
子あり/なしで家事の量や質が大きく変化するため、別で可視化できるようにした方がよさそうですね🤔
後、この結果を見ただけだと、だから何？？って感じになってしまうので、
改善のための策も用意してあげた方がよさそうです。
少しずつ改造していきます！！
