【WordPress】phpで自作の電卓を作成してみよう!後半

こちらは【WordPress】phpで自作の電卓を作成してみよう!後半になります。
もし、前半を見ていない場合は【WordPress】phpで自作の電卓を作成してみよう!前半を先にご覧ください。

前半では以下2つの内容を学習しました。
formタグを使って画面に値を出力する
条件分岐で計算した結果を画面に出力する

前半の学習で簡易な電卓を作成することができました。
しかし、後半では計算ができない場合にエラー画面を表示することや、コードを見やすくするためにリファクタリングを行っていきます。

後半では以下の内容を紹介します。
計算できない場合、エラー画面をを出力する
メソッドやswitch-caseを使ってリファクタリングする

計算できない場合、エラー画面をを出力する

計算できない場合、エラー画面をを出力する挙動を作成してみましょう。
計算できない場合は、以下の条件が挙げられます。
数値1、符号、数値2のどこかが空白である場合
符号の枠に符号が入力されていない場合

入力する値が空白である場合にエラー画面をを出力する

まずは前半で作成した電卓のphp(page-calculate.php)を紹介します。

page-calculate.php

出力結果

このファイルは修正する必要はありません。

入力する値が空白であるかどうかを確認するにはif文を使って空白である場合とない場合で条件を設定します。
その為、空白でないなら計算の結果を表示し、空白ならエラー画面を表示するよう結果のphp(page-resuklt.php)を修正します。

結果のphp(page-result.php)を修正すると下記のようになります。

page-result.php

出力結果

入力する値を空白の状態で計算ボタンを押すとエラー画面へ移動するようになります。

符号の枠に符号を入力しなかった場合にエラー画面をを出力する

符号の枠に符号を入力しなかった状態で計算ボタンを押すとエラー画面へ移動するよう結果のphp(page-resuklt.php)を修正していきます。
修正すると下記のようになります。

page-result.php

出力結果

符号の枠に符号ではない値を入力すると「符号がおかしい為、計算できません。」というエラーを表示するようになります。
これでエラー画面を表示するよう修正が完了しました。

メソッド化やswitch-caseを使ってリファクタリングを行う

エラー画面まで作成できましたら、電卓の作成は完了ですが、メソッドやswitch-caseを使ってリファクタリングを行っていきます。リファクタリングをすることでコードの量が少なくなり、第三者の人が見ても分かりやすいコードになります。

計算の処理をメソッド化する

if文で書かれてある計算の処理をメソッド化していきましょう。
メソッド名はcalculateとして、結果のphp(page-result.php)を下記のように修正します。

page-result.php

出力結果

if文からswitch-case文へ変更する

if文からswitch-case文へ変更することで、分かりやすコードを書くことができます。
現状、if文で計算の処理を行なっていますが、ネストになっています。
今はまだ浅いですが、これが深くなっていくと分かりにくいコードになってしまいます。

それでは、if文をswitch-case文に変更します。
結果の画面(page-result.php)を修正すると下記のようなコードになります。

page-result.php

出力結果

if文に比べると分かりやすいコードになりました。
これでリファクタリングが完了しました。

Writer
壷井

壷井

株式会社flyhawkの壷井です。フライテックメディア事業部でのメディア運営・ライター業務なども担当。愛機はMac Book AirとThinkPad。好きな言語:swift、JS系(Node.js等)。好きなサーバー:AWS。受託開発やプログラミングスクールの運営をしております。ご気軽にお問い合わせください。

最新の案件情報

フリーランスエンジニアの案件探し