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

LaravelとReactで作るSPAアプリ第9段です。
続けて関数での切り分けを行っていきましょう。

今回はスケジュールの表示部分を関数化します。
今回でこのシリーズは最後ですね。

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

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

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

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

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

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

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

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

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

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

Example.js
「GetSchedule.js」の記述部分は削除し、呼び出しのみにします。
return部分の記述は「GetSchedule」にはないので、そちらは弄りません。

これでかなり削減ができましたね。「Example.js」の行数も130程度になり、
各機能ごとにフォルダ分けが出来たので、修正や機能追加もしやすいです。

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

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

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