関連記事
【開発実況シリーズ】Web日報登録システムを作る #15 セキュリティ対策
2021.03.07
2022.01.25
【開発実況シリーズ】Web日報登録システムを作る #16 リファクタリング
この記事の動画版はこちら（画像クリックでYoutubeに飛びます）
チャンネル登録お願いします！
今回は、開発実況シリーズ「Web日報登録システム」の第16回ということで、前回の続きを進めていきたいと思います。
前回は・・・
現在は、このようなアプリの仕上げ作業を行っています。
①エラー処理の実装
②セキュリティ対策
③リファクタリング
前回は、②のセキュリティ対策を行いました。
ユーザーのパスワードと個人情報の暗号化、脆弱性対策のための「XSS」や「CSRF」対策の実装を行いましたね。
今回は、③のリファクタリングを行っていきましょう！
これで開発フェーズは一通り完了となります。
リファクタリングとは？
リファクタリングとは、アプリの動作自体は変えずに、ソースコードを内部的に整理していく作業です。
これまでの動画でも見て来て頂いたように、開発中は「機能を実現すること」を優先してコーディングを行っていますので、機能が動きはするものの、ソースコード的には結構効率の悪い書き方をしていたり、後から見た時に分かりづらい「可読性の低いコード」になっていたりします。
そういった部分を、アプリの動作はそのままに、綺麗に書き直していく作業のことを「リファクタリング」と言います。
実際の開発現場では当たり前に行われている作業工程ですが、プログラミングの入門書などでは、あまり取り上げられることがないですよね。
作業としては、それほど大変なものでは無いのですが、リファクタリングをやっておくかどうかで、今後のアプリのメンテナンス性や、不具合が発生した場合の調査時間の短縮などにもつながるため、結構重要な作業なんです。
リファクタリングには、色々なやり方がありますが、今回のアプリはソースコードの数もそれほど多くなくシンプルな構成のため、このような基本的なアプローチを実施していきます。
①不要コードの掃除
②処理の共通化
③レイアウトの共通化
それでは、上から順番に進めていきましょう！
不要コードの掃除
まずは、各ソースコードの掃除から始めていきましょう。
ソースコード内の不要な空白行やデバッグ文、不要なコメントなどを削除して綺麗にしていきます。また、逆にコメントが不足していて分かりづらいなーと思う部分には、コメントを追記していきます。
ここでこの作業を行う前提だからこそ、機能開発時はスピード優先で粗めにコーディングすることが出来ます。
機能開発時にソースコードを綺麗に整えることまで意識して書いていると、開発スピードが遅くなってしまうので、まずは「機能を実現すること」を優先して、その後で「ソースコードを綺麗にする」という風に、段階を分けた方が、開発をスムーズに進められると思います。
ただし、チーム開発をしている場合は、自分の書いたソースコードをリモートリポジトリにプッシュする前に、綺麗に整えるようにしましょう。
処理の共通化
次は、処理の共通化を行っていきます。
処理の共通化とは、ソースコードの色々な箇所に書かれている同じような処理を括り出して、共通関数として一元管理することです。
例えば、この「時間の形式チェック処理」ですが、ソース内に3箇所同じチェック処理を書いていますね。
これは社員側の日報登録画面のソースですが、管理者側のソースにも同様の処理が書かれています。
なので、この処理を共通関数化してまとめてしまいましょう。
共通関数用の「functions.php」に新しい関数を定義して、処理内容をそのままコピーしてきます。
引数で与えられた値をチェックするように変更して、チェック結果がOKの場合は「true」、NGの場合は「false」を返すようにします。
これで共通関数化はOKです。
あとは、チェックを行いたい部分で、処理を直接書くのではなく、このように、先ほど作った関数を呼び出すようにすればOKです。
このように、アプリの動きとしては修正前と全く変わりませんが
ソースコードの内部的には、各処理が簡素化されて見やすくなり、チェック処理も複数箇所に点在することなく、関数として一元管理されているので、もし後からチェックの仕様が変わり、正規表現を調整するような場合も、修正は1箇所だけで済みますね。
あとは、このheader関数で別画面にリダイレクトさせる処理も、色々な場所で登場しますが、処理は毎回同じなので関数化してしまいましょう。
↓
これで良いですね。
各処理の中で、別画面に遷移させたい時は「redirect()」と1行書くだけでOKです。
ソースコードがより簡素化されて見やすくなりました。
レイアウトの共通化
次は、HTMLレイアウトの共通化作業を行っていきます。
HTML部分も、このタグや、ロゴ部分など、全画面で共通のエリアがいくつかあります。
これらは別ファイル化して、共通化してしまいましょう。
まずはheadタグ。
共通レイアウトを格納するための「templates」フォルダを作り、その中に「head_tag.php」を新規作成します。
ここに、タグ全体を移設します。
元のPHP側では、このhead_tag.phpをインクルードするように指定します。
こうしておけば、全PHPに毎回同じタグを書かなくても、インクルード文を1行書くだけで済み、簡素化されます。
なお、タイトル部分は画面毎に異なるため、変数化して読み込むようにします。
これでOKですね。
同じようにヘッダー部分も共通化しておきましょう。
これで、各PHPのHTML部分は「その画面独自の部分」のみが残り、大分簡素化されましたね。
メンテナンスもしやすくなったと思います。
関数の時と同じように、例えばロゴ画像を別のものに差し替えたいとか、GoogleAnalyticsなどの追加タグをタグ内に組み込みたいといったことがあった場合にも、全画面を1つ1つ修正する必要はなく、テンプレートファイルを1箇所いじるだけで済みます。
このように、アプリの動作自体は変わらないまま、内部的にソースコードを綺麗に整えて、可読性やメンテナンス性を向上させていくのが「リファクタリング」という作業です。
このソースコードに行った作業を他のコードにも同じように適用していけば、今回のアプリのリファクタリングはひとまずOKです。
favicon設定
あとは、最終調整としてやり残している部分がないかどうかチェックしていきます。
このアプリにはまだfaviconを設定していなかったので、最後にfaviconを設定しておきましょう。
ロゴを元に、favicon生成サイトで作成します。
https://ao-system.net/favicongenerator/
faviconは、タグに組み込む必要があるため、先ほど共通化したhead_tag.phpに組み込みます。
テンプレート化する前であれば、全PHPに組み込まなければならないところでした。
いきなり、リファクタリングの恩恵が受けられましたね。
これでOKです。
画面をリロードすると、faviconが設定されました。
これで、今回の作業は完了です。
次回予告
ということで、今回は「③リファクタリング」を行いました。
①エラー処理の実装
②セキュリティ対策
③リファクタリング
今回は、アプリの動作としては目に見えて変わる部分はほとんどありませんでしたが、内部的なソースコードとしては、整理され、メンテナンス性が向上しました。
今後のプログラムの品質の上ではとても重要な作業です。
皆さんもアプリを作る際は、忘れずにリファクタリングを実施してみてくださいね。
さて、これで開発フェーズは全て完了です。
次回は、最終工程である「検証フェーズ」を進めていきましょう！
徳田 啓（トクタ ケイ）
Webプログラマー暦20年。自分で使うツールは、基本的に1人でゼロから自作。オールマイティなプログラミングの知識とスキルを学べる「フルスタックエンジニア マスター講座」を開講中。生徒さん1人1人に合わせてしっかりサポートしていきます！
プログラミングの実践的なノウハウを発信中！
ぜひフォローしておいてください。
ぜひフォローしておいてください。
