【WordPress】phpで自作の電卓を作成してみよう！前半
「電卓」は、プログラミングを始める方にとって適した課題です。
なぜなら、電卓を作成することで基本的な文法を理解することができるからです。
例えば、書道にも「永字八法（えいじはっぽう）」というものがあります。
それは、書道に必要とされる基本技法8種類が、全て漢字『永』に含まれていることからそう呼ばれています。
つまり「永」という漢字を書くと書道に必要とされる基本の技法8種類を習得することができます。
電卓もそれと同じで、プログラミングとして学ぶべき内容がぎっしりと詰まっています。
その為、ポートフォリオ作成やphpを始める人ならここから編集してみるのもありだと思います。
今回はphpで電卓を自作で作成するため、下記の2つのことについて紹介していきます。
① formタグを使って画面に値を出力する
② 条件分岐で計算した結果を画面に出力する
formタグを使って画面に値を出力する
電卓の画面を作成する
まずは電卓の画面のデザインを作成します。
電卓のphpファイル(page-calculate.php)を作成し、コードは下記のようになります。
page-keijiban.php
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 |
<!DOCTYPE html> <html> <head> <title>文字を入力</title> <meta charset="UTF-8"> </head> <body> <form action="page-result.phpまたはpage-result.phpの固定ページのURL" method="post"> <p><b>ここに文字を入力</b></p> <input type="text" name ="str1"><br><br> <p><b>ここに文字を入力</b></p> <input type ="text" name = "str2" value=""><br><br> <input type="submit" value="送信"> </form> </body> </html> |
出力結果
これで電卓の画面の作成は完了しました。
formタグで囲むことで囲まれた要素はサーバーに飛ばされるようになります。
入力した内容を画面に表示する
続いて入力した内容を画面に表示するようコードを修正していきます。
結果のphpファイル(page-result.php)を作成し、下記のように修正します。
page-result.php
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 |
<!DOCTYPE html> <html> <head> <meta http-equiv="Content-Type" content="text/html; charset=UTF-8"> <title>値を出力</title> <html> <head> <meta charset="UTF-8"> <title></title> </head> <body> <?php $str1 = $_POST['str1']; $str2 = $_POST['str2']; echo ($str1."n"); echo ($str2); ?> </body> </html> |
出力結果
送信ボタンを押下すると、入力した内容が投稿結果に反映されます。
これで画面に入力した内容を出力することができました。
条件分岐で計算した結果を画面に出力する
続いて条件分岐を使い、計算した結果を画面に出力します。
条件分岐とは
条件分岐とはある条件式によって処理が変わることを言います。
条件分岐にはif文とswitch-case文がありますが、今回はif文を使って条件分岐を行います。
もし、phpのif文について知りたい場合は【PHP】if文で条件分岐をする！書き方や使い方を分かり易く解説！をご参照ください。
条件分岐を使って計算を行う
条件分岐を使って計算を行いましょう。
電卓のphpファイル(page-calculate.php)を少し修正します。
page-calculate.php
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 |
<!DOCTYPE html> <html> <head> <title>calculator</title> <meta charset="UTF-8"> </head> <body> <form action="calc.php" method="post"> <p><b>数値1</b></p> <input type="text" name ="num1"><br><br> <p><b>符号</b></p> <input type ="text" name = "r1" value=""><br><br> <p><b>数値2</b></p> <input type="text" name="num2"><br> <input type="submit" value="計算結果を送信"> </form> </body> </html> |
出力結果
これで電卓のようになりました。
続いて、結果のphpファイル(page-result.php)に条件分岐のコードを追記していきます。
追記すると下記のようなコードになります。
page-result.php
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 |
<!DOCTYPE html> <html> <head> <meta http-equiv="Content-Type" content="text/html; charset=UTF-8"> <title>簡易電卓</title> <html> <head> <meta charset="UTF-8"> <title></title> </head> <body> <?php $num1 = $_POST['num1']; $num2 = $_POST['num2']; $operation = $_POST['r1']; if ($operation === "+") { $add = $num1 + $num2; echo ("足し算の結果: " . $add); } else if ($operation === "-") { $sub = $num1 - $num2; echo ("引き算の結果: " . $sub); } else if ($operation === "×") { $mul = $num1 * $num2; echo ("掛け算の結果: " . $mul); } else if ($operation === "÷") { $div = $num1 / $num2; echo ("割り算の結果: " . $div); } ?> </body> </html> |
出力結果
入力した数字と符号をpostで受け取り、受け取った符号によって加法、減法、乗法、除法に分岐しています。
つまり、符号を条件として分岐し、その分岐先の処理を行うようにしています。
これで前半は完了です。
ST
株式会社flyhawkのSTです。フライテックメディア事業部でのメディア運営・ライター業務なども担当。愛機はMac Book AirとThinkPad。好きな言語：swift、JS系(Node.js等)。好きなサーバー：AWS。受託開発やプログラミングスクールの運営をしております。ご気軽にお問い合わせください。
