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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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