初心者がPHPで簡易掲示板を作ったので振り返る

はじめに
---
この記事は[株式会社アクシアの米村社長](https://axia.co.jp/)の[プログラマーになりたいと思った人がやるべき７つのこと ](https://axia.co.jp/2018-03-16)を実践して、簡易掲示板を作成したことを振り返ったものです。

ということで出来上がったものがこちら（https未対応です。これから学びます）
[Master of Engineer(現在サーバー停止中です)](http://sonsyu0103.php.xdomain.jp/login/login.php)
ソースコードはこちらとなっております。
[GitHub:sonsyu0103/keiziban](https://github.com/sonsyu0103/keiziban)

それでは振り返ってまいります。

参考教材一覧
---
簡易掲示板を作るにあたってこれらの本があったからこそ完成しました。
[谷藤賢一『いきなりはじめるPHP』](https://www.amazon.co.jp/%E3%81%84%E3%81%8D%E3%81%AA%E3%82%8A%E3%81%AF%E3%81%98%E3%82%81%E3%82%8BPHP-%E3%83%AF%E3%82%AF%E3%83%AF%E3%82%AF%E3%83%BB%E3%83%89%E3%82%AD%E3%83%89%E3%82%AD%E3%81%AE%E5%85%A5%E9%96%80%E6%95%99%E5%AE%A4-%E8%B0%B7%E8%97%A4%E8%B3%A2%E4%B8%80/dp/4897978858)
[谷藤賢一『気づけばプロ並みPHP』](https://www.amazon.co.jp/%E6%B0%97%E3%81%A5%E3%81%91%E3%81%B0%E3%83%97%E3%83%AD%E4%B8%A6%E3%81%BFPHP-%E3%82%B7%E3%83%A7%E3%83%83%E3%83%94%E3%83%B3%E3%82%B0%E3%82%AB%E3%83%BC%E3%83%88%E4%BD%9C%E3%82%8A%E3%81%AB%E3%83%81%E3%83%A3%E3%83%AC%E3%83%B3%E3%82%B8-%E8%B0%B7%E8%97%A4%E8%B3%A2%E4%B8%80/dp/4897979269/ref=pd_sbs_14_5?_encoding=UTF8&pd_rd_i=4897979269&pd_rd_r=1fa8537a-1a0e-11e9-a05d-d16c0e6f9cb4&pd_rd_w=A31ge&pd_rd_wg=UinQA&pf_rd_p=cda7018a-662b-401f-9c16-bd4ec317039e&pf_rd_r=8ZQRTBNMWVB799S53VPB&psc=1&refRID=8ZQRTBNMWVB799S53VPB)
[湊川あい『わかばちゃんと学ぶWebサイト制作の基本』](https://www.amazon.co.jp/%E3%82%8F%E3%81%8B%E3%81%B0%E3%81%A1%E3%82%83%E3%82%93%E3%81%A8%E5%AD%A6%E3%81%B6-Web%E3%82%B5%E3%82%A4%E3%83%88%E5%88%B6%E4%BD%9C%E3%81%AE%E5%9F%BA%E6%9C%AC%E3%80%88HTML5%E3%83%BBCSS3%E3%80%89-%E6%B9%8A%E5%B7%9D-%E3%81%82%E3%81%84/dp/4863541945)
[湊川あい『わかばちゃんと学ぶGit使い方入門』](https://www.amazon.co.jp/%E3%82%8F%E3%81%8B%E3%81%B0%E3%81%A1%E3%82%83%E3%82%93%E3%81%A8%E5%AD%A6%E3%81%B6-Git%E4%BD%BF%E3%81%84%E6%96%B9%E5%85%A5%E9%96%80%E3%80%88GitHub%E3%80%81Bitbucket%E3%80%81SourceTree%E3%80%89-%E6%B9%8A%E5%B7%9D-%E3%81%82%E3%81%84/dp/4863542178/ref=pd_lpo_sbs_14_t_0?_encoding=UTF8&psc=1&refRID=QN2FA6RX6DZP60Z9SD4S)
[西沢夢路『基礎からのMySQL第３版』](https://www.amazon.co.jp/%E5%9F%BA%E7%A4%8E%E3%81%8B%E3%82%89%E3%81%AEMySQL-%E7%AC%AC3%E7%89%88-%E5%9F%BA%E7%A4%8E%E3%81%8B%E3%82%89%E3%82%B7%E3%83%AA%E3%83%BC%E3%82%BA-%E8%A5%BF%E6%B2%A2-%E5%A4%A2%E8%B7%AF/dp/4797393114)


因みに[『リーダブルコード』](https://www.amazon.co.jp/%E3%83%AA%E3%83%BC%E3%83%80%E3%83%96%E3%83%AB%E3%82%B3%E3%83%BC%E3%83%89-%E2%80%95%E3%82%88%E3%82%8A%E8%89%AF%E3%81%84%E3%82%B3%E3%83%BC%E3%83%89%E3%82%92%E6%9B%B8%E3%81%8F%E3%81%9F%E3%82%81%E3%81%AE%E3%82%B7%E3%83%B3%E3%83%97%E3%83%AB%E3%81%A7%E5%AE%9F%E8%B7%B5%E7%9A%84%E3%81%AA%E3%83%86%E3%82%AF%E3%83%8B%E3%83%83%E3%82%AF-Theory-practice-Boswell/dp/4873115655)も一通り読みましたが全く生かされていませんね。反省です。読み直します。

また[大塚弘記『GitHub実践入門』](https://www.amazon.co.jp/GitHub%E5%AE%9F%E8%B7%B5%E5%85%A5%E9%96%80-Pull-Request%E3%81%AB%E3%82%88%E3%82%8B%E9%96%8B%E7%99%BA%E3%81%AE%E5%A4%89%E9%9D%A9-PRESS-plus/dp/477416366X)を簡易掲示板が完成してから読み始めたため全然GitHubを制作に生かせませんでした。これも大いなる反省点です。

これらの本の勉強に大体３ヶ月かかり、簡易掲示板作成には半月ほどかかりました。
（それ以前にプログラミングスクールに３ヶ月通ってJavaとMySQLを学びましたが遠回りだったなと今では思います。スクールのおかげで独学で勉強できるようになれたのは助かりましたけど。）

簡易掲示板のコンセプト
---
ゴールを米村社長の仰っていた**「ログイン機能、画像投稿機能、データダウンロード機能が備わった掲示板」**に定め、それ向かって上記の本を購入しました（MySQLの本はスクールでの振り返り用に買ったのですが後に助かることになりました）
特に『気づけばプロ並みPHP』はゴールに必要なスキルが習得出来た反面、勉強に時間が大分かかりました。

しかし、スキルを習得しても「ログイン機能、画像投稿機能、データダウンロード機能が備わった掲示板」はすぐに作成できませんでした。
理由は簡単で、「ログイン機能、画像投稿機能、データダウンロード機能が備わった掲示板」を具体的にどうやって作成していくかわかりませんでした。
作りたいものが決まって、作るために必要な技術も習得しましたが、肝心の作り方がわからない。
家作りに例えるなら、要望を伝えて材料も用意して「じゃあこれで一軒家作ってね！」と職人さんに設計図もなしにお願いするみたいなもんです。
経験豊富な職人さんなら過去の経験からどうすればいいかわかるかもしれませんが、初心者にはできませんでした。

そこで出来上がった掲示板にログイン機能などを付け足していく方針に変えました。
いきなり全てが備わった掲示板ではなく、とりあえずまずは掲示板の部分だけ作ろうと。
ここでMySQLの本が活躍します。この本の最後にちょっと実用的な掲示板を作ろうという項目があったのです。
これを土台にして作ろう！　こうしてようやく簡易掲示板の作成が始まりました。

簡易掲示板作成にあたって
---
『基礎からのMySQL第３版』に掲載されているちょっと実用的な掲示板を土台に作り始め、実際に[Master of Engineer](http://sonsyu0103.php.xdomain.jp/login/login.php)の大部分は掲載されている通りなのですが、２つほど大きな変更を加えています。

####１つ目：ヒアドキュメントの有無
『基礎からの～』ではヒアドキュメントを活用していますが、私のは活用しておりません。
インシデントの関係もあるのですが、エラーがなかなか解決しなかったのでprintでゴリ押しました。
また『気づけばプロ並みPHP』でもprintでゴリ押ししていたので、やってしまったのかもしれません。
ここらへんは別の本などで勉強して改善したいと思います。

####２つ目：keizi_sure.phpとkeizi_resu.phpの存在
『基礎からのMySQL第３版』の場合スレッド名やレスの投稿をGETメソッドでリダイレクトし、それぞれの変数にデータがあればデータベースに挿入する仕組みでした。
しかし、この仕組みですとスレッドを新しく建てた時のURLにGETで送られてきたデータが残るわけです。
ここでもし更新ボタンを押すと、同じスレッドが更新ボタンを押した数だけ作り出されることになりました。

このままではまずいと作ったのがkeizi_sure.phpとkeizi_resu.phpです。
```   
 $sure=isset($_GET['sure'])? htmlspecialchars($_GET['sure']):null;
    if($sure==''){
    header('Location: keizi_top.php');
    exit();
    }else{
    $s->query("INSERT INTO sure VALUES (0,'$sure',now(),'$id')");
    header('Location: keizi_top.php');
    exit();
    }
```
header関数を使うことで、問題が無事解決しました。
また画像投稿機能の際に、POSTメソッドも使えたので結果としてheader関数の導入は大正解でした。
調べてわかったのですが、GETメソッドの場合サイズの関係で画像が殆ど送信できないようです。

欲を言えば連投禁止機能と、スレッド名を１０件だけ表示といった機能もあればよりよかったのかもしれません。ここらへんも勉強ですね。

こうして土台が出来上がり、行き当たりばったりにログイン機能なども組み込むことで何とか完成しましたが、同時に反省点も多く見つかりました。

反省点
---
####反省点１：正規表現
```    
if($pic['size']>0){
    if($pic['size']>1000001||preg_match("/^[0-9a-zA-Z._-]+$/",$pic['name'])==false){
      header('Location: pic_out.php');
      exit;
    }else{
      move_uploaded_file($pic['tmp_name'],'../picture/'.$pic['name']);
    }
  }
```
画像投稿の際、名前が英数字と一部の記号のみ投稿できるようにしたかったのですが、上手くできませんでした。
==falseと==0で結果も違って当時は大混乱した記憶があります。
==falseの場合ですと日本語名のファイルを確かに弾いてくれたのですが、英数字のファイルも一部弾いていました。
かといって==0の場合は英数字のファイルをきちんと通してくれても、日本語のファイルを通していました。
（==falseと==0が逆だったのかもしれません。何にせよ狙い通りにいきませんでした）
結局諦めて正規表現をコメントアウトにして、名前は英数字のみでとお願いしました。
悪意を極力排除する必要があるシステムの世界において、善意に頼るのは敗北ですね。

また画像投稿機能について調べたところ、ファイル制限や名前を変えたりするなどする必要があるとわかりました。
ここで初めてセキュリティの問題と勉強不足を実感し、Web公開の段階で痛感させられました。

####反省点２：セキュリティ問題
XAMPPを使ってlocalhostにこもりっぱなしでずっと開発していました。
なのでWeb公開する際に勝手が分からず大混乱しました。
XFREEで無料のレンタルサーバーを習得したのはいいものの、見事にhttps未対応です。
他にもデーターベースの情報も、一緒のディレクトリに公開する始末……
おかげでせっかく公開出来た簡易掲示板も誰かに利用してもらうのが怖いです。
サーバー関連の本を購入して、知識をつけます。
そして、胸を張って皆さんに利用してもらいます。

####反省点３：デザイン
htmlとcssを今回全く生かしておりません。
設計が全くできておらず、何をどうすればいいのかわかりませんでした。

まとめ
---
Web公開までしてみると、達成感がありますね。
色々と問題もありますが、今はどう評価されるのかが一番気になっています。
一人で開発していたので、不安との戦いでした。
良かった点悪かった点を含め、評価していただき次に繋げたいと思います。
次は自分だけのブログを作りたいと思います。
この掲示板で使ったスキルを是非とも活用して。

今後のこと
---
冒頭の記事の実践ができたので転職活動を開始します。
また勉強に関して、プログラミングは[山田祥寛『独習PHP』](https://www.amazon.co.jp/%E7%8B%AC%E7%BF%92PHP-%E7%AC%AC3%E7%89%88-%E5%B1%B1%E7%94%B0-%E7%A5%A5%E5%AF%9B/dp/479813547X)で。
知識として[リョッキーさん](https://twitter.com/ryokky59)の[未経験から4ヶ月でWeb系エンジニアに転職するためにやったこと](https://qiita.com/Ryokky/items/833cb3cf916ec0fd1e19)に最後書いてあった[小林恭平　坂本陽『イラスト図解式 この一冊で全部わかるWeb技術の基本』](https://www.amazon.co.jp/%E3%82%A4%E3%83%A9%E3%82%B9%E3%83%88%E5%9B%B3%E8%A7%A3%E5%BC%8F-%E3%81%93%E3%81%AE%E4%B8%80%E5%86%8A%E3%81%A7%E5%85%A8%E9%83%A8%E3%82%8F%E3%81%8B%E3%82%8BWeb%E6%8A%80%E8%A1%93%E3%81%AE%E5%9F%BA%E6%9C%AC-%E5%B0%8F%E6%9E%97-%E6%81%AD%E5%B9%B3/dp/4797388811/ref=sr_1_1?s=books&ie=UTF8&qid=1547711082&sr=1-1&keywords=%E3%82%A4%E3%83%A9%E3%82%B9%E3%83%88%E5%9B%B3%E8%A7%A3%E5%BC%8F+%E3%81%93%E3%81%AE%E4%B8%80%E5%86%8A%E3%81%A7%E5%85%A8%E9%83%A8%E3%82%8F%E3%81%8B%E3%82%8BWeb%E6%8A%80%E8%A1%93%E3%81%AE%E5%9F%BA%E6%9C%AC)をまずはやってみようと思います。
合わせてセキュリティとかの本も調べつつという感じで。やることややりたいことが多く優先順位をどうつけていくか悩ましいですね。

ここまで長文に付き合っていただきありがとうございました。