WEBサービス部:Lesson09「ユーザー登録画面を作ろう!」の処理フロー解説

WEBサービス部のユーザー登録から一気に難しくなっていきますが、ここではその処理フローを細かく解説していきたいと思います。

まぁ、難しいといっても高単価現場の実務じゃめちゃくちゃ初級的な扱いのものですが、プログラミング初心者の方はここらへんから一気にコード量が増えるので「拒否反応」が出て頭がパニックになり「思考停止」に陥りますので、落ち着いて集中してやっていきましょう。

コードの全体像

まず、ユーザー登録画面のファイルsinup.phpの全体のコードはこのように6つのブロックで出来ています。

コードの全体像の解説

まず、①と②は説明はいいですね。

①はログを表示させるための「お決まりの設定」なので、ただこう書いとくだけです。

php.logというファイルにログを表示してね。(ファイルがなければ、新規作成してそこにログを書き込んでね、PHPさん。)

という設定ですね。

 

実際にこの画面で「ユーザー登録の主な処理」をしているのは、⑤です。「この画面のメインの処理」になります。

それまでの①〜④のブロックでやっているのは、⑤の処理の中で使うための「準備」になります。

(②のブロックのあとには1行だけエラーメッセージ用のグローバル変数と呼ばれる変数を用意しています。)

そして、⑥では、PHPを使って

エラーがあった場合にエラーメッセージを表示させる処理

エラーがあった場合に入力した情報を「保持」させる処理

が書かれています。

とりあえず、ここまでで全体としてのやっている役割は掴めたと思います。

ブロック③の解説

次に③ですが、これは

バリデーション用の処理を各関数にまとめている

ということをしています。

いわゆる「自作関数」と呼ばれるもので、PHPに最初から用意されているものではなく、自分で作った関数のことですね。

PHP・MySQL入門でも、少しバリデーションの処理はやりましたが、それをもっと細かくやっているものになります。

ユーザー登録でいくつかのチェックを入門でもしましたが、それ以外に本来下記のチェックをする必要があります。

・未入力チェック(入力フォームの値が空かどうか)

・Email形式チェック(入力フォームの値がemailの形式になっているかどうか)

・Email重複チェック(入力フォームの値が既にユーザー登録済みかどうか)

・同値チェック(2つの入力フォームの値が同じ値かどうか。パスワード再入力で今回使うもの)

・最小文字数チェック(入力フォームの値が指定の文字数以上かどうか)

・最大文字数チェック(入力フォームの値が指定の文字数以下かどうか)

・半角チェック(入力フォームの値が半角英数字だけ使われているかどうか)

PHP入門では、こういった一部のチェックは⑤のメインの処理の中にそのまま書いていましたよね。

ですが、こういったチェックというのは色々な場所で使うので、いちいち同じ処理を毎回書かなくてもいいように今回から、関数にまとめています(「関数に切り出す。」という言い方をします)。

なので、それぞれのチェックごとの関数を③の中で作っていますね。(関数を定義している)

 

関数というのは、今までの関数の擬人化でもやったように「引数」というものを関数くんに渡すことで、関数くんに仕事をしてもらえます。

そして「return」を使って、仕事をした結果を報告してもらえるんでしたね。

「入力フォームに入力された値を関数くんに渡し、未入力かどうかをチェックして結果を報告してもらう関数validRequiredくん」

「入力フォームに入力された値を関数くんに渡し、Emailの形式かどうかをチェックして結果を報告してもらう関数validEmailDupくん」

といったようにそれぞれの仕事ごとの関数くんを作っています。

それぞれの中身は練習で解説をしてるのでそっちを参考にしてもらえればと思いますが、こういった関数くんを作っているのがこの③になります。

ブロック④の解説

そして、その下の④では、今まで入門でデータベースへ接続をするための設定や、実際にSQLを実行する処理をこれまた関数に切り出しています。

ここらへんも、あとあと他の画面(ログインなど)でもDBへ接続してなんやかんやしていきます。

そういう時のDBへ接続する準備の設定や実行するSQLの書き方は全く一緒

なわけなので、それだったら毎回書かなくてもいいように今のうちに関数にまとめておき、その関数を他の画面でも「呼び出して仕事させるだけ」にしましょう。ということで関数に切り出しています。

こういった「どれが自作の関数でどれがデフォルトの関数かわからない」という人のために赤い下線を引いておきましたので確認してください。

赤い下線が引かれているのがデフォルトでPHPで用意されている関数(一部はメソッドと呼ばれますが、詳しくはオブジェクト指向部の方でもやっていきます)で、あとは「自作関数」を呼び出しているものになります。

さすがにini_set()define()empty()はPHPで用意されている関数だっていうことは大丈夫ですよね?

DBの接続設定など処理内容は今までやっているところなので、割愛します。

こういう設定やSQLの実行というのは、毎回まっさらから書ける必要はありません。一回こういう関数作ったら使い回すのが現場でも当たり前なので、皆一から書ける人はほぼいません。書けと言われたら現役エンジニアでもググって書いてる人ばかりなので安心してください。ほぼコピペで構わないです。ただし、どんな処理やっているのか?は理解出来ておきましょう。

また、⑥に関してもPHP入門でやっている内容でしかないので、割愛しちゃいます。

ブロック⑤の解説

それでは、ここがメインの処理になります。

今までは「準備」をしていただけです。

PHPもHTMLの処理も全部「ファイルの上から1行1行、一命令一命令ずつ処理されていく」というのは今まで学んできた話ですが、この④までは特に「何かを処理する」といったことは行なっていません。

単なる準備、設定をしただけですね。

もちろん「設定という処理を行なった」「関数を定義(作る)するという処理をした」ということではありますが、何かデータを操作したりといった処理をしているわけではありません。

料理で言えば、包丁を準備し、まな板を準備し、食材を準備し、鍋やらお皿やら入れ物を準備し、コンロに火をつけ、電子レンジの電源をつけた。(電子レンジのコンセント毎回抜いてんの?っていうのあるけど)

みたいなものですね。

ですので、この⑤からが実際の「処理フロー」と呼ばれるものになります。

これをまずは、フローチャート図にしてみるとわかりやすいです。

フローチャートで処理フローを書こう!

フローチャート図はシステム開発の「設計書」を作る際にもよく使われますが、がっつりときちんと正確に書こうとすると大変なので、業務システムのような大規模でない限り、一般的なWEB系の現場ではまず書くことがないので、ラフに書ければよいです。

そういった現場で使う頻度の低いもの、現場に出てから学べばいいものをあえてウェブカツでは教えていません。最短で稼いでいくという目的に立つと「学習時間の無駄」でしかないですからね。

若手プログラマー保存版!フローチャート徹底解説と作成カンニングペーパー

https://cacoo.com/ja/blog/keep-it-simple-how-to-avoid-overcomplicating-your-flowcharts/

 

フローチャートを書く際に大事なポイントは3点です。

1.「何」を「どう」するのか

2.ループ(for文を使う)する処理なのか

3.条件分岐(if文)するのか

という3つになります。

フローチャートはCACOOというサービスを使ってもいいですし、手書きで書いてもいいです。(最初は手書きの方が早いと思いますし、誰に見せるわけでもないので無理にサービスを使う必要もありません。目的は綺麗に書くことではないので目的を履き違えないようにしましょう)

簡単に書くと今回の処理フローはこうなります。

こういう処理フローをまず書いてみましょう。

最終的にこういう処理フローだけを見てコードが書ければOK

です。

ただし、卒業試験までには、

処理フローを見なくても、機能(やりたいこと)だけ聞いて書ける

状態にはなっている必要があります。

実際の実務現場では、「こういう感じの作りたいんですが」だけの話から、エンジニアが自分で考えて実装しなければいけないので、これができないと実務じゃ何もできない初心者と何ら変わりませんからね。

「作りたい機能から処理フローがパッと思い浮かぶ」のが理想ですが、未経験から月数十時間足らずを半年そこら学んだだけでそこまでのレベルに行くというのはなかなか難しいので、

1手、2手先の処理を考えながら書ける

くらいまで出来れば実戦で通用しますので安心してください。

 

こういった処理フローを見れば、どこでif文を使うのか、どこでどういう処理をすればいいのか(実際の細かな処理の書き方はこの段階ではまだわからなくて大丈夫です。)は想像しやすいですよね。

未入力チェック

①POST送信しているか

②変数にフォームに入力された値を格納する

という部分はPHP入門でもやっているので大丈夫でしょう。

その次の処理でやっているのは、未入力チェックですね。

因みにこの練習の質問欄でも質問されていますが、チェックの順番に決まったものはありません。

未入力チェックより前にemailの形式チェックをやってもいいんですが、大体この流れでチェックを行うことが多いのでそうしています。

1.まず未入力か(そもそも入力されていないのに他のチェックしてもね)

2.形式(email形式や半角英数字)や文字数、重複に問題ないか

3.同値かどうか

という3段階が多いですね。

(因みにこのコードにはひっかけがありますが、それも質問欄に書いてあるので自分で出来るだけ疑問に思えるといいでしょう。疑問に思えないということは、確実に理解ができていない証拠です。)

未入力チェックでは、validRequiredという自作関数を呼び出して、それぞれの入力フォームの値をチェックしていますね。

やっていることは単純ですね。これもPHP入門でやっているはずです。

empty関数を使って「引数でもらった値をチェックする」ということですね。

空ならグローバル変数の$err_msgに配列のキーをつけて、エラーメッセージが入っている定数を入れています。

あとは、このエラーメッセージの配列$err_msgを使って、なんやかんやしていきます。

実際は「グローバル変数を使う」なんてのはやらない方がいいんですが、そういう話を今の段階するとさらにこんがらがるので、今はこういう書き方でやってみましょう。(もっと言えば、if文ネストさせ過ぎだろ!とか現役エンジニアからは突っ込むような箇所もありますが、そんなもん初心者の学習段階で気にすることではないのでそういう声は学習者としては無視していきましょう。)

それ以外も、やっていることは各関数でチェックをしているだけです。

(Email重複チェックはちょっとDBに接続したり処理が複雑ですが、それ以外のチェック関数はpreg_matchを使うか、mb_strlenを使うかくらいのチェックが違うだけで皆やっていることは同じですよね)

 

そして、それぞれの関数でチェックしてエラーなら、同様にエラーメッセージを配列に入れていっています。

こうやって、

1.それぞれの入力フォームの値をチェックをする

2.エラーならエラーメッセージを$err_msg配列に入れる

3.$err_msg配列が空かチェックし、空なら次のチェックをしていく

ということをやっていっているわけですね。

 

こういうバリデーション系の関数は一から書ける必要があります。

空チェックの処理はどう書くの?

最大文字数チェックはどう書くの?

というのは、エディターに面と向かったら、まっさらから書ける状態にしておいてください。

ただし、「文字数ってmb_なんだっけ?」みたいな関数名がわからない系は「ググればいい話」なので、思い出せずに書けないということは気にしなくて構いません。

書きまくれば勝手に覚えていくものなのですし、忘れたってググればいいだけです。結局、スポットでググれれば実務では困りません。「ググるものすらわからない。」「どうググればいいかわからない」という事だけ無くしていきましょう。

WEBサービス部の乗り越え方

こうやって、

処理フローを書き、それぞれの自作関数があるのなら、その自作関数の中の処理フローもまた書いてみる。

と頭の中でイメージしやすくなりますので、まずはWEBサービス部の1週目では処理フローを出来るだけ書くようにしましょう。

(全然わかんねーやってとこはどんどん飛ばしてください)

 

2週目では、必ず

機能単位(ユーザー登録やログインといった機能単位です)

で、処理フローを元にアウトプットをしてください。

後半の機能になればなるほど難しくなります。

前半のコーヒーブレイクまでの

ユーザー登録、ログイン、ログアウト、退会、プロフィール編集機能

までの5つの機能を出来るようにまずしてください。

そこがまず書けないのに後半の処理が書けるわけがありません。

ですので、前半のその5つの機能に絞って確実に書けるようにしていきましょう。

 

それが出来るようになったら後半の機能の理解に勤めていってください。

後半もそれぞれ、商品登録、商品一覧表示など各機能ごとに確実に処理フローを見ながら書けるようになるよう、アウトプットしていきましょう。

それぞれの1機能が書けなければ、他の機能が書けるはずがありませんので、一つ一つの機能を着実に書いていってください。

 

それが出来るようになったら、やっと処理フローを見ずに作りたい機能だけを頼りに書いてみる。ということをしましょう。

もちろん、完璧に見ずに書ける必要はありませんが、挑戦は必要です。

それが終わってやっと「ポートフォリオ用のアウトプット」をしていってください。

BLOGコンテンツをパーソナライズします

あなたは現在「プログラミング学習者」ですか?