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

2022年3月5日
2022年3月5日
React
Laravel, React

React

LaravelとReactで作るSPAアプリ第9段です。
続けて関数での切り分けを行っていきましょう。
今回はスケジュールの表示部分を関数化します。
今回でこのシリーズは最後ですね。

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

まずはナビゲーション部分を切り分けよう

最初は、前回までの復習としてナビゲーションを切り分けましょう。
「Example.js」で切り分けられるナビゲーション部分は以下の通りです。

Example.js

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)
　}
}

--省略--

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>

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)

　}

--省略--

return (

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

　　</div>

まずは「components」ディレクトリに「navigation」フォルダを作成し、その下に「Navigation.js」ファイルを作成します。

これは前回と同じですね。そこに以下のように記述を移し替えます。

Navigation.js

import React from 'react';

function Navigation(props){
    const{year,month,setYear,setMonth}=props;

    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)
        }
    }

    return(
        <div className="calender-header">
            <h1>{`${year}年${month}月`}</h1>
            <div className="calender-nav">
                <button onClick={onClick(-1)}>{'<先月'}</button>
                <button onClick={onClick(1)}>{'翌月>'}</button>
            </div>
        </div>
    )
}

export default Navigation;

import React from 'react';

function Navigation(props){

const{year,month,setYear,setMonth}=props;

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)

}

return(

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

</div>

)

}

export default Navigation;

ほぼ元の「Example.js」からの移行です。
いくつか持ってくる必要があるので、propsにはyear、monthのステートを指定しています。
あとは「Example.js」にこれを連携するのみですね。

Example.js

import Navigation from './/navigation/Navigation';　//追加

--省略--

return (
　<Fragment>
　　<Navigation year={year} month={month} setYear={setYear} setMonth={setMonth}/>

import Navigation from './/navigation/Navigation';　//追加

--省略--

return (

かなり簡単に出来ましたね。
ビルドしてみると今まで通り正常に動くことも確認できます。
最後にスケジュール取得の部分を関数化して終わりにしましょう！

スケジュール取得部分を関数化する

最後にスケジュール取得部分を関数化します。
とはいえこれもとても簡単です。ナビゲーションと同じようにできます。
今までと同様に「schedule」というフォルダを作成し、その中に「GetSchedule.js」ファイルを作成しましょう。

GetSchedule.js

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

function GetSchedule(props){
    const userid = props;
    //スケジュールのデータ
    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
        })
    );

    return rows
}


export default GetSchedule;

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

import axios from 'axios';

function GetSchedule(props){

const userid = props;

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

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

})

);

return rows

}

export default GetSchedule;

「Example.js」からそのまま持ってきた形です。
「Example.js」も削減しましょう。

Example.js

import GetSchedule from './/schedule/GetSchedule';　//追記

--省略--

//スケジュールのデータを取得する
let rows = GetSchedule();　　　//追加

import GetSchedule from './/schedule/GetSchedule';　//追記

--省略--

//スケジュールのデータを取得する

let rows = GetSchedule();　　　//追加

「GetSchedule.js」の記述部分は削除し、呼び出しのみにします。
return部分の記述は「GetSchedule」にはないので、そちらは弄りません。
これでかなり削減ができましたね。「Example.js」の行数も130程度になり、
各機能ごとにフォルダ分けが出来たので、修正や機能追加もしやすいです。

【将来的に】これを拡張してもOK

さて、これでアプリケーションの作成については終了です。
全部で9回の長丁場、お疲れ様でした。
とはいえ、これはあくまでも基本的なもの、他にも追加できる機能は多いです。
例えば、

前月、翌月の日付部分は薄くする
スケジュールの文言を表示するための新しいタイトルというカラムをDBに設ける
オーバーフローしないようにタイトルの文字数制限をつける
ジャンル別にスケジュールの色を変える
1日に3件以上ある場合は「+2more」のように表示する
「+more」部分をクリックするとポップアップで隠れているスケジュールが見れる
認証機能を導入し、ログイン制で使えるようにする

などなど挙げればきりがありません。
とはいえこれらのことも、これまでの知識や、＋αで調べれば実現可能です。
色々と弄ってみて、自分の理想的なスケジュール表を作成してみてください！

最後に、これまで作成したフォルダの中身をGitHubにて公開しておきますね。

https://github.com/Lotusxx/Laravel-React-SPA-Schedule/tree/master/resources/js/components

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