Laravel×ReactでつくるSPAスケジュールアプリ【⑧関数化Ⅰ】

2022年2月26日
2022年5月19日
React
Laravel, React

React

LaravelとReactで作るSPAアプリ第8段です。
続いて関数での切り分けを行っていきましょう。
今回は共通部分、登録、更新、削除を関数化します。

Laravel×ReactでつくるSPAスケジュールアプリ【⑧関数化Ⅰ】

肥大化したソースを分かりやすく管理しよう

前回まででアプリの全体像は完成しています。
しかし「Example.js」ファイルを見てみると300行以上も行数があり、
表示、登録、更新、削除と処理が入り乱れています。

この程度のアプリならば1つのファイルで良いですが、今後どんどん増えていくと管理も大変になりますね。
どうせならそれぞれの役割別に、関数として処理を切り分けたいところです。
そこで今回は「Example.js」を以下のように分割して、管理しやすくします。

comon：共通で使いまわせる関数群
delete：削除処理
navigation：月ナビゲーション機能
register：登録機能
schedule：スケジュール表示機能
update：更新機能

まずはcommonから作成していきましょう。

commonを関数化する

Example.jsと同じ階層に「common」というフォルダを作成します。
その中に「Common.js」というファイルを作成しましょう。

Common.js

export function zeroPadding(num){
    return ('0' + num).slice(-2);
}

export function zeroPadding(num){

return ('0' + num).slice(-2);

}

Common.jsはどこでも使える共通関数として定義しています。
今回のアプリケーションではzeroPaddingだけですが、実際のアプリでは多数の関数が登録されます。
その場合には全体をコピペして新しい関数を作成すると良いでしょう。

別jsファイルが作成したので、今度は「Example.js」から「Common.js」を呼び出すようにします。
その際にはimport宣言を利用します。

Example.js

import {zeroPadding} from './/common/Common';　//追記

--省略--

function zeroPadding(num){             //削除
  return ('0' + num).slice(-2);        //削除
}                                      //削除
});

import {zeroPadding} from './/common/Common';　//追記

--省略--

function zeroPadding(num){ //削除

return ('0' + num).slice(-2); //削除

} //削除

});

import部分のfromにCommon.jsのディレクトリを指定します。
.jsは必要ありません。またimportで外部参照をしているので、Example.jsのzeroPaddingも不要です。
これで共通部分の関数化は完了です。

ビルドをして、エラーが出てないことを確認しておきましょう。

propsで登録機能を切り分ける

まだまだ切り分けられる部分は多そうですね。
続いて登録機能を切り分けましょう。この際にはpropsを使用します。
propsは関数に対する引数のように考えると分かりやすいですね。
まずはディレクトリを増やします。

registerフォルダの中に「Register.js」と「Registerdis.js」の2ファイルを作成してください。
「Register.js」は登録処理、「Registerdis.js」は登録画面として使用します。
それぞれの中身は以下の通りです。

import React from 'react';
import axios from 'axios';
import Button from '@mui/material/Button';

function Register(props){
    const{formData}=props;

    console.log(formData);
    //ダイアログデータを登録
    const createSchedule = async() => {
        //タイトルが空なら弾く
        if(formData.sch_title==''){
            return;
        }
        //入力値を投げる
        await axios
            .post('/api/posts/create',{
                sch_category:formData.sch_category,
                sch_contents:formData.sch_contents,
                sch_date:formData.sch_date,
                sch_time:formData.sch_hour + ':' + formData.sch_min
            })
            .then((res)=>{
                //戻り値をtodosにセット
                const tempPosts = post;
                tempPosts.push(res.data);
                setPosts(tempPosts)
                setFormData('');
            })
            .catch(error=>{
                console.log(error);
            })
    }

    return (
        <Button href="/dashboard" onClick={createSchedule}>Subscribe</Button>
    );
}

export default Register;

import React from 'react';

import axios from 'axios';

import Button from '@mui/material/Button';

function Register(props){

const{formData}=props;

console.log(formData);

//ダイアログデータを登録

const createSchedule = async() => {

//タイトルが空なら弾く

if(formData.sch_title==''){

return;

}

//入力値を投げる

await axios

.post('/api/posts/create',{

sch_category:formData.sch_category,

sch_contents:formData.sch_contents,

sch_date:formData.sch_date,

sch_time:formData.sch_hour + ':' + formData.sch_min

})

.then((res)=>{

//戻り値をtodosにセット

const tempPosts = post;

tempPosts.push(res.data);

setPosts(tempPosts)

setFormData('');

})

.catch(error=>{

console.log(error);

})

}

return (

<Button href="/dashboard" onClick={createSchedule}>Subscribe</Button>

);

}

export default Register;

registerdisには登録用のデータ配列をpropsで渡しています。

Registerdis.js

import React from 'react';
import PropTypes from 'prop-types';
import Dialog from '@mui/material/Dialog';
import DialogActions from '@mui/material/DialogActions';
import DialogContent from '@mui/material/DialogContent';
import TextField from '@mui/material/TextField';
import DialogContentText from '@mui/material/DialogContentText';
import Button from '@mui/material/Button';
import DialogTitle from '@mui/material/DialogTitle';
import InputLabel from '@mui/material/InputLabel';
import MenuItem from '@mui/material/MenuItem';
import Select from '@mui/material/Select';
import Register from './Register';

function Registerdis(props){
    const{onClose,open,data,setFormData}=props;

    const handleClose = () =>{
        onClose();
    };

    //入力値を一時保存
    const inputChange = (e) =>{
        const key = e.target.name;
        const value = e.target.value;
        data[key] = value;
        let datas = Object.assign({},data);
        setFormData(datas);
    }

    return (
        <Dialog onClose={handleClose} open={open}>
            <DialogTitle>Subscribe</DialogTitle>
            <DialogContent>
                    <DialogContentText>
                        スケジュール登録
                    </DialogContentText>
                    <TextField margin="dense" id="sch_date" name="sch_date" label="予定日" type="text" fullWidth variant="standard" onChange={inputChange}/>
                    <InputLabel id="sch_time_label">時刻</InputLabel>
                    <Select labelId="sch_hour" id="sch_hour_select" name="sch_hour" label="Hour" variant="standard" defaultValue="00" onChange={inputChange}>
                        <MenuItem value="00">00</MenuItem><MenuItem value="01">01</MenuItem>
                    </Select>
                    <Select labelId="sch_min" id="sch_min_select" name="sch_min" label="Min" variant="standard" defaultValue="00" onChange={inputChange}>
                        <MenuItem value="00">00</MenuItem><MenuItem value="01">01</MenuItem>
                    </Select>
                    <InputLabel id="sch_category_label">カテゴリー</InputLabel>
                    <Select labelId="sch_category" id="sch_category_select" name="sch_category" label="Category" variant="standard" defaultValue="勉強" onChange={inputChange}>
                        <MenuItem value="勉強">勉強</MenuItem>
                        <MenuItem value="案件">案件</MenuItem>
                        <MenuItem value="テスト">テスト</MenuItem>
                    </Select>
                    <TextField margin="dense" id="sch_contents" name="sch_contents" label="内容" type="text" fullWidth variant="standard" onChange={inputChange}/>
                </DialogContent>
                <DialogActions>
                    <Button onClick={handleClose}>Cancel</Button>
                    <Register formData={data} />
                </DialogActions>
        </Dialog>
    );
}

Registerdis.propTypes = {
    onClose:PropTypes.func.isRequired,
    open:PropTypes.bool.isRequired,
};

export default Registerdis;

import React from 'react';

import PropTypes from 'prop-types';

import Dialog from '@mui/material/Dialog';

import DialogActions from '@mui/material/DialogActions';

import DialogContent from '@mui/material/DialogContent';

import TextField from '@mui/material/TextField';

import DialogContentText from '@mui/material/DialogContentText';

import Button from '@mui/material/Button';

import DialogTitle from '@mui/material/DialogTitle';

import InputLabel from '@mui/material/InputLabel';

import MenuItem from '@mui/material/MenuItem';

import Select from '@mui/material/Select';

import Register from './Register';

function Registerdis(props){

const{onClose,open,data,setFormData}=props;

const handleClose = () =>{

onClose();

};

//入力値を一時保存

const inputChange = (e) =>{

const key = e.target.name;

const value = e.target.value;

data[key] = value;

let datas = Object.assign({},data);

setFormData(datas);

}

return (

<DialogTitle>Subscribe</DialogTitle>

スケジュール登録

</DialogContentText>

</Select>

</Select>

<InputLabel id="sch_category_label">カテゴリー</InputLabel>

</Select>

</DialogContent>

<Button onClick={handleClose}>Cancel</Button>

</DialogActions>

</Dialog>

);

}

Registerdis.propTypes = {

onClose:PropTypes.func.isRequired,

open:PropTypes.bool.isRequired,

};

export default Registerdis;

Example.jsで定義していたDialogの中身を全て持ってきています。
さらに登録ボタンの部分もRegisterを読み込むようにしています。
これで「Example.js」→「Register.js」→「Register.js」という流れが完成します。

ダイアログをRegisterdisに移したので、Exampleからダイアログ関連を削除しておきましょう。
またPropsでRegisterdisへの連携も行っておきます。

Example.js

import Registerdis from './/register/Registerdis'; //追加

--省略--

//登録用ポップアップ開閉処理
const[open,setOpen] = useState(false);

const handleClickOpen = (e) =>{
     setOpen(true);
};

const handleClose = () =>{
      setOpen(false);
};

//新規登録用データ配列
const [formData,setFormData] = useState({sch_category:'',sch_contents:'',sch_date:'',sch_hour:'',sch_min:''});

--この下にあった登録関連の処理は削除--

--省略--

</table>
  <Registerdis
    open={open}
    onClose={handleClose}
    data = {formData}
    setFormData = {setFormData}
  />

--省略--

export default Register;

import Registerdis from './/register/Registerdis'; //追加

--省略--

//登録用ポップアップ開閉処理

const[open,setOpen] = useState(false);

const handleClickOpen = (e) =>{

setOpen(true);

};

const handleClose = () =>{

setOpen(false);

};

//新規登録用データ配列

const [formData,setFormData] = useState({sch_category:'',sch_contents:'',sch_date:'',sch_hour:'',sch_min:''});

--この下にあった登録関連の処理は削除--

--省略--

</table>

<Registerdis

open={open}

onClose={handleClose}

data = {formData}

setFormData = {setFormData}

--省略--

export default Register;

Registerdisをimportで読み込んでいます。
それにより、RegisterdisとRegisterに移行した表示処理や登録処理は削除しました。
最後にreturn部分のダイアログを丸ごと書き換えています。

かなりシンプルになったことが分かりますね。
同じように更新、削除も関数化してしまいましょう。

登録、更新、削除を関数化したところで、コミットを行い、これまでの処理ができるかを確認しましょう。
OKならば、一旦SourceTreeでコミットしておくと良いですね。
これで関数化の第一弾は終了です。第二弾ではスケジュール表示の部分を弄っていきます。

少し処理が変わってくるので、一つ一つ丁寧に見ていきましょう。
ここまで削減し終わったExample.jsの全体は以下に折り畳み式で表示しておきますね。
かなり削減できていることが分かるはずです。

クリックでExample.jsの全ソース表示

import React,{Fragment,useState,useEffect} from 'react';
import ReactDOM from 'react-dom';
import axios from 'axios';
import {zeroPadding} from './/common/Common';
import Registerdis from './/register/Registerdis';
import Updatedis from './/update/Updatedis';

function Example(){
    const [year,setYear] = useState(new Date().getFullYear())
    const [month,setMonth] = useState(new Date().getMonth()+1)
    const last = new Date(year,month,0).getDate()
    const prevlast = new Date(year,month-1,0).getDate()
    const calendar = createCalendear(year,month)

    const onClick = n => () => {
        const nextMonth = month + n
        if (12 < nextMonth) {
          setMonth(1)
          setYear(year + 1)
        } else if (nextMonth < 1) {
          setMonth(12)
          setYear(year - 1)
        } else {
          setMonth(nextMonth)
        }
    }

    //スケジュールのデータ
    const [schedules,setSche] = useState([])

    //画面読み込み時に、1度だけ起動
    useEffect(()=>{
        getPostData();
    },[])

    //バックエンドからデータ一覧を取得
    const getPostData = () =>{
        axios
        .post('/api/posts')
        .then(response=>{
            setSche(response.data); //バックエンドからのデータをセット
            console.log(response.data);
        }).catch(()=>{
            console.log('通信に失敗しました');
        });
    }

    //データ格納の空配列を作成
    let rows = [];

    //スケジュールデータをrowに格納する
    schedules.map((post)=>
        rows.push({
            sch_id:post.id,
            sch_category:post.sch_category,
            sch_contents:post.sch_contents,
            sch_date:post.sch_date,
            sch_time:post.sch_time
        })
    );

    //登録用ポップアップ開閉処理
    const[open,setOpen] = useState(false);

    const handleClickOpen = (e) =>{
        setOpen(true);
    };

    const handleClose = () =>{
        setOpen(false);
    };

    //新規登録用データ配列
    const [formData,setFormData] = useState({sch_category:'',sch_contents:'',sch_date:'',sch_hour:'',sch_min:''});

    //更新用ダイアログ開閉機能
    const[editopen,setEditOpen] = useState(false);

    const editHandleClickOpen = (e) =>{
        e.stopPropagation();
        setEditOpen(true);
        getEditData(e);
    };

    const editHandleClose = () =>{
        setEditOpen(false);
    };

    //更新用のデータ配列
    const [editData,setEditData] = useState({id:'',sch_category:'',sch_contents:'',sch_date:'',sch_hour:'',sch_min:''});

    //バックエンドからデータ一覧を取得
    function getEditData(e){
        axios
            .post('/api/edit', {
                id: e.currentTarget.id
            })
            .then(res => {
                setEditData({
                    id:res.data.id,
                    sch_category:res.data.sch_category,
                    sch_contents:res.data.sch_contents,
                    sch_date:res.data.sch_date,
                    sch_hour:res.data.sch_time.substr(0,2),
                    sch_min:res.data.sch_time.substr(3,2)
                });
            })
            .catch(() => {
                console.log('更新の通信に失敗しました');
            });
    }

    console.log(editData);

    return (
        <Fragment>
            <div className="calender-header">
                <h1>{`${year}年${month}月`}</h1>
                <div className="calender-nav">
                    <button onClick={onClick(-1)}>{'<先月'}</button>
                    <button onClick={onClick(1)}>{'翌月>'}</button>
                </div>
            </div>
            <table className="calender-table">
                <thead>
                    <tr>
                        <th>日</th><th>月</th><th>火</th><th>水</th><th>木</th><th>金</th><th>土</th>
                    </tr>
                </thead>
                <tbody>
                    {calendar.map((week,i) => (
                        <tr key={week.join('')}>
                            {week.map((day,j) => (
                                <td key={`${i}${j}`} id={day} onClick={handleClickOpen}>
                                    <div>
                                        <div>
                                            {day > last ? day - last : day <= 0 ? prevlast + day : day}
                                        </div>
                                        <div className="schedule-area">
                                            {rows.map((schedule,k) => (
                                                schedule.sch_date == year + '-' + zeroPadding(month) + '-' + zeroPadding(day) &&
                                                    <div className='schedule-title' key={k} onClick={editHandleClickOpen} id={schedule.sch_id}>{schedule.sch_contents}</div>
                                                
                                            ))}
                                        </div>
                                    </div>
                                </td>
                            ))}
                        </tr>
                    ))}
                </tbody>
            </table>
            <Registerdis
                open={open}
                onClose={handleClose}
                data = {formData}
                setFormData = {setFormData}
            />
            <Updatedis
                open={editopen}
                onClose={editHandleClose}
                data = {editData}
                setEditData = {setEditData}
            />
        </Fragment>
    );
}

function createCalendear(year,month){
    const first = new Date(year,month - 1,1).getDay()

    return [0,1,2,3,4,5].map((weekIndex) => {
        return [0,1,2,3,4,5,6].map((dayIndex) => {
            const day = dayIndex + 1 + weekIndex * 7
            return day - first 
        })
    })
}

export default Example;

if (document.getElementById('app')) {
    ReactDOM.render(<Example />, document.getElementById('app'));
}

100

101

102

103

104

105

106

107

108

109

110

111

112

113

114

115

116

117

118

119

120

121

122

123

124

125

126

127

128

129

130

131

132

133

134

135

136

137

138

139

140

141

142

143

144

145

146

147

148

149

150

151

152

153

154

155

156

157

158

159

160

161

162

163

164

165

166

167

168

169

170

171

172

173

174

175

176

177

178

179

180

181

182

183

184

import React,{Fragment,useState,useEffect} from 'react';

import ReactDOM from 'react-dom';

import axios from 'axios';

import {zeroPadding} from './/common/Common';

import Registerdis from './/register/Registerdis';

import Updatedis from './/update/Updatedis';

function Example(){

const [year,setYear] = useState(new Date().getFullYear())

const [month,setMonth] = useState(new Date().getMonth()+1)

const last = new Date(year,month,0).getDate()

const prevlast = new Date(year,month-1,0).getDate()

const calendar = createCalendear(year,month)

const onClick = n => () => {

const nextMonth = month + n

if (12 < nextMonth) {

setMonth(1)

setYear(year + 1)

} else if (nextMonth < 1) {

setMonth(12)

setYear(year - 1)

} else {

setMonth(nextMonth)

}

//スケジュールのデータ

const [schedules,setSche] = useState([])

//画面読み込み時に、1度だけ起動

useEffect(()=>{

getPostData();

},[])

//バックエンドからデータ一覧を取得

const getPostData = () =>{

axios

.post('/api/posts')

.then(response=>{

setSche(response.data); //バックエンドからのデータをセット

console.log(response.data);

}).catch(()=>{

console.log('通信に失敗しました');

});

}

//データ格納の空配列を作成

let rows = [];

//スケジュールデータをrowに格納する

schedules.map((post)=>

rows.push({

sch_id:post.id,

sch_category:post.sch_category,

sch_contents:post.sch_contents,

sch_date:post.sch_date,

sch_time:post.sch_time

})

);

//登録用ポップアップ開閉処理

const[open,setOpen] = useState(false);

const handleClickOpen = (e) =>{

setOpen(true);

};

const handleClose = () =>{

setOpen(false);

};

//新規登録用データ配列

const [formData,setFormData] = useState({sch_category:'',sch_contents:'',sch_date:'',sch_hour:'',sch_min:''});

//更新用ダイアログ開閉機能

const[editopen,setEditOpen] = useState(false);

const editHandleClickOpen = (e) =>{

e.stopPropagation();

setEditOpen(true);

getEditData(e);

};

const editHandleClose = () =>{

setEditOpen(false);

};

//更新用のデータ配列

const [editData,setEditData] = useState({id:'',sch_category:'',sch_contents:'',sch_date:'',sch_hour:'',sch_min:''});

//バックエンドからデータ一覧を取得

function getEditData(e){

axios

.post('/api/edit', {

id: e.currentTarget.id

})

.then(res => {

setEditData({

id:res.data.id,

sch_category:res.data.sch_category,

sch_contents:res.data.sch_contents,

sch_date:res.data.sch_date,

sch_hour:res.data.sch_time.substr(0,2),

sch_min:res.data.sch_time.substr(3,2)

});

})

.catch(() => {

console.log('更新の通信に失敗しました');

});

}

console.log(editData);

return (

<h1>{`${year}年${month}月`}</h1>

</div>

<thead>

<tr>

</tr>

</thead>

<tbody>

{calendar.map((week,i) => (

{week.map((day,j) => (

<div>

{day > last ? day - last : day <= 0 ? prevlast + day : day}

</div>

{rows.map((schedule,k) => (

schedule.sch_date == year + '-' + zeroPadding(month) + '-' + zeroPadding(day) &&

<div className='schedule-title' key={k} onClick={editHandleClickOpen} id={schedule.sch_id}>{schedule.sch_contents}</div>

))}

</div>

</td>

))}

</tr>

))}

</tbody>

</table>

<Registerdis

open={open}

onClose={handleClose}

data = {formData}

setFormData = {setFormData}

<Updatedis

open={editopen}

onClose={editHandleClose}

data = {editData}

setEditData = {setEditData}

</Fragment>

);

}

function createCalendear(year,month){

const first = new Date(year,month - 1,1).getDay()

return [0,1,2,3,4,5].map((weekIndex) => {

return [0,1,2,3,4,5,6].map((dayIndex) => {

const day = dayIndex + 1 + weekIndex * 7

return day - first

})

}

export default Example;

if (document.getElementById('app')) {

ReactDOM.render(<Example />, document.getElementById('app'));

}

Laravel×Reactでつくるスケジュールアプリ
環境構築	Git、Reactの導入
カレンダー表示	スケジュール表示
スケジュール登録	スケジュール更新
スケジュール削除	関数化Ⅰ
関数化Ⅱ