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程度になり、
各機能ごとにフォルダ分けが出来たので、修正や機能追加もしやすいです。

【将来的に】これを拡張しても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の導入
カレンダー表示 スケジュール表示
スケジュール登録 スケジュール更新
スケジュール削除 関数化Ⅰ 
関数化Ⅱ