This is a document showed at a event "OTWEB" on 12/12/2019.

1. 非エンジニア*1が１ヶ月でPHPと
LARAVELのCRUD*2サイトを作るまで
2019/12/12(木) 表参道Web勉強会
Ruka Menda
画像は公式サイトから拝借しています。

2. 用語の説明
1. 非エンジニア・・・IT系の会社（というか、もしやWeb系会
社だけ？もしくは私の前の職場だけ？？）における、エンジ
ニア以外の職種の人（営業etc.）の人のこと。時に彼らが自
身のことを自 気味に「非エンジニア」と自称することも。
2. CRUD・・・クラッドと読む。それぞれCreate, Read, Update,
Deleteを意味し、これらを実装したサイト＝ブラウザからの
動作により、データベースに対してこの４つの情報操作全て
が実行可能であるサイトのことを指す（詳細は後述）。

3. 発表者について -経歴
• 北海道出身
• 2015年卒（大卒）→新卒で医療機器メーカーへ就職（営業）
• 2017年：海外へボランティアへ
• 2018年：Web系の会社Pへ入社（営業）
• 2019年11月はじめ：とあるきっかけで「プログラミングの勉強を本気でやろう、キャリアチェンジしよ
う！」と思い立ち、PHPの勉強を始める。
• 同月中旬：P社を休職。このころに掲示板サイトの完成（CRUD機能あり。PHP フレームワークなし）
• 同月下旬：P社を正式に退職。このころに口コミサイトの完成（CRUDのうちCR + ログイン機能 PHP
フレームワークはLaravel)

4. 本LTの目的
• 転職活動
• ここ１ヶ月のプログラミング学習の成果報告
• サーバーサイドプログラミング初学者が抑え
ておくべき（？）知識の紹介 ※アペンディ
クスにて

5. 成果物1 -掲示板
• サイト名：掲示板
• コンセプト：CRUD機能を網羅した掲示板
• 機能：投稿(Create)、読込(Read)、編集
(Update)、削除(Delete)
• URL: https://maysite.herokuapp.com/index.php
• ソースコード: https://gitlab.com/ruka04/bbc/tree/
div14
• 使用言語/フレームワーク: PHP / (なし)
• Webサーバ: Apache
• データベース(RDBMS): MySQL

6. 成果物2 -口コミサイト
• サイト名：料理本おすすめサイト Myレシピブック
• コンセプト：料理系の本の口コミ×「作ったよ」コメン
ト（＝クッ○パットのつくれぽ、もしくはインスタでの
料理自慢的な投稿と同義）
• 機能：投稿(Create)、読込(Read)、ログイン認証
• URL: https://lit-springs-31811.herokuapp.com/home
• ソースコード: https://github.com/lukamenda26/MyRecipeBooks
• 使用言語/フレームワーク: PHP / Laravel5.5, JavaScript /Vue.js
• Webサーバ: Nginx ＊公開サイトはApache
• データベース(RDBMS): MySQL
• その他：開発環境にDocker (Laradock)を、モジュール管理
にLaravel Mixを使用

7. 成果物の作成を通じて学んだ
こと・苦労したこと
• PHPの関数
• クラスの利用（クラス作成、インスタンス作成、メ
ソッドの利用、継承）
• CRUD *2
• PDOの利用 *3
• MySQLの利用、コマンドからのRDBM操作、データ
ベースの概念理解 *4
• データベース設計（ER図の作成）
• Heroku (https://dashboard.heroku.com)を利用したサ
イト公開方法 *5
• Laravel フレームワークの利用方法
• Dockerを利用した開発環境の構築方法
• MVCモデルへの理解 *6
• 画像の挿入（え、file()関数って、出力結果配列な
の・・・？で何回もハマったり）
• ORマッピング＆RDB利用時のN+1問題→Eager loader
で対処可能
• フロントエンドフレームワークとの併用、Webpack
の活用
• Gitでのソースコード管理方法、およびGithub, GitLab
の利用方法

8. 今後やりたいこと
• Laravelへのより深い理解
• AWSの勉強（DBの複数台構成とコードの関係など）
• Javaの学習（静的型付け言語の学習）
• ポートフォリオサイトの作成（WordPressの使用を想
定）

9. 成長のための３原則（プログ
ラミングに限らず）
1. 本人の適正・才能（生まれ持った個性）
2. 努力
3. メンター
1はなんともならない、でも２と３は自
力でなんとかできる！！！

10. お仕事をご紹介ください！
ご連絡は、お手数おかけいたしますが「compass」→本イベン
トの参加者一覧→「Ruka」をお探しいただき、そこから
Facebookアカウントへ→メッセンジャーよりお問い合わせく
ださい！（Facebookは滅多にアクセスしないので、友達申請
などではなくメッセンジャーでご連絡をお願いします）
資料に間違い（私が勘違いしている部分など）などあれば
指摘していただけるとありがたいですが、単なる 謗中傷は
傷つくのでやめてください・・・。
フクロウの写真が目印です。
就業先は決まりました。副業としてもしお手伝いで
きることがもしあれば、何卒よろしくお願いいたし
ます。

11. アペンディクス
概念の説明や
おすすめの書籍など

12. ＊2 CRUD
• 右図のようなER図で示せるデータベース
の情報群に対し以下の操作をするこ
と。
• Create（データの生成）INSERT tableA
into dataB;
• Read（データの取得）SELECT hoge
FROM tableA
• Update（データの更新）UPDATE
tableA SET price=1000 where id=1;
• Delete（データの削除）DELETE FROM
tableA where id=1;
画像参照元：https://www.mysql.com/common/
images/products/
MySQL_Workbench_Visual_Design_Windows.gif

13. ＊3 PDO
• PDO = PHP Data Object = PHPからデータベースに接続して行うメ
ソッドをまとめたクラス。
• メリット１：ドライバ（データベースを制御する機能）を切り替
えれば、MySQLだけでなくPostgreSQL等他のDBMSも複数操作可
能。ドライバはアプリケーションとDBMSの間の抽象レイヤ（抽
象＝同じような機能や情報がまとまっている、レイヤ＝層）とし
て存在しているため、このような利用が可能となる。
• メリット２：セキュリティの向上（プリペアメントステートメン
ト、htmlspecialchars関数の利用）
参考：「PHP7＋MariaDB／MySQLマスターブック」pp218

14. // create.php
$sql_cg = "INSERT INTO posts (name, comment,
postdate, image, imgsize) VALUES
( :name, :comment, :postdate, :image, :imgsize
)";
// dbconnect.php
$stmh = $pdo->prepare($sql);
$stmh->bindValue(':name', $nm,
PDO::PARAM_STR );
$stmh->bindValue(':comment', $cm,
PDO::PARAM_STR );
$stmh->bindValue(':postdate', $tm,
PDO::PARAM_STR );
$stmh->bindValue(':image', $ip,
PDO::PARAM_STR );
$stmh->bindValue(':imgsize', $is[3],
PDO::PARAM_STR );
$stmh->execute();
// controller.php
<p>
<!-- 投稿日時 -->
<span><?=htmlspecialchars($value['postdate'],
ENT_QUOTES)?> JST. </span>
<!-- 名前 -->
<span><?=htmlspecialchars($value['name'],
ENT_QUOTES)?> さんからの投稿：</span>
</p>
<p>
<!-- テキスト -->
<span><?
=htmlspecialchars($value['comment'], ENT_QUOTES)?
></span>
</p>
プリペアメントステートメントの
利用（名前付きプレースホルダ）
・・・SQLインジェクション（アプリケーションからのSQL指示
を上書きし、本来の意図と異なるデータベース操作を行うこと
で、個人情報などの機密情報の取得などを狙う攻撃）の防止
htmlspecialchars関数の利用
・・・変数内に含まれる可能性のあるHTMLタグを無効化し、クロス
サイトスクリプティング（悪意あるスクリプトを対象のサイトに注入
し、そのサイトを閲覧した人がそのスクリプトのリンクを開くよう仕
向ける→開くと悪意ある別サイトに飛ぶように）の防止
PDO -成果物1(掲示板)での利用例
参照元：下記ソースコード（掲示板）です！
https://gitlab.com/ruka04/bbc/tree/div14

15. ＊4 データベース
• DB = Database = コンピュータ上で扱う情報の集合。大抵は
DBMSを指している。
• DBMS = Database Management System = データベースを構築し扱
うためのソフトウェア。ex. MySQL, PostgreSQL, OracleDatabase,
Amazon Aurora etc.
• RDBMS = Relational Database Management System = リレーショナ
ル・データベース（複数の表とそれらの関係を定義）を扱う
DBMS
• Cf. RDS = (Amazon) Relational Database Service = AWSの登録商標。
AWS上でDBMSを容易にセットアップ・運用・スケーリングでき
る（らしい）マネージド型システム。https://aws.amazon.com/jp/rds/
参考：「プロになるためのWeb技術入門」pp135,136 ＊RDSを除く

16. ＊5 HEROKU
• 無料でWebサイトを一般公開することが可能。ただし利用に際して、いくつ
か気をつけるべき点あり。
• MySQLを利用する場合は、アドオンに「ClearDB」の指定（herokuへ要クレ
ジットカード情報登録）と、「MySQL Workbench」というアプリをPCにイン
ストールする必要がある（後者はなくてもいけるかも・・・）。
• Laravelでは画像投稿時に取得した画像データを storage/app/public/images に保
存→ public/images へのエイリアスを設定して画像表示 という仕組みを推奨
しているが、herokuだとそれができない（画像が表示されない）。ので、画
像をフォルダに保存をやめて、バイナリデータを直接データベースに書き込
む仕様に変更した（ので、実はGithubに公開しているソースコードとheroku
に公開しているサイトのそれは、画像取得部分の関数が違うのです・・・！）

17. // app/Services/MakePostService.php
// 本の名前
if(!empty($req->img_pass)) {
$make->img_pass = $req->img_pass-
>storeAs('public/images', 'IMG_'.$req-
>id . '.jpg');
} else {
$make->img_pass = "public/
images/NoImage.png";
}
// app/Http/Controllers/
PhotosController.php
// 本の名前
if(!empty($request->img_pass)) {
// heroku用に編集：受け取った画像データ
をbase64でエンコード
// $image =
base64_encode(file_get_contents($reque
st->image->getRealPath()));
$image =
base64_encode(file_get_contents($reque
st->img_pass));
// $make->img_pass =
$request->img_pass->storeAs('public/
images', 'IMG_'.$request->id .
'.jpg');
$make->img_pass = $image;
} else {
$make->img_pass =
base64_encode(file_get_contents("image
s/NoImage.png"));
}
// app/Http/Controllers/
MakePostController.php
public function confirm(Make $make)
{
return view('photos/confirm', [
// 省略
'img_pass' =>
str_replace('public/', 'storage/',
$make->img_pass),
]);
}
Github上のコード
https://github.com/lukamenda26/MyRecipeBooks
公開中サイト(Heroku)のコード
https://lit-springs-31811.herokuapp.com/home
・・・ん？ていうか対象ファイル違くない？

18. ＊6 MVCモデル
• まずはデザインとロジックの分離
• デザイン＝画面表示（出力）＝View
• ロジック＝処理（DBMSデータ操
作、値の判定 など、当該アプリ固
有の処理）＝ビジネスロジック＝
Model
• ではModelの処理結果に応じてView
を変える時は？画面を遷移する時
は？誰がその振り分けを判断する？
→これを担うのがController
画像は下記サイトからお借りしました。
https://hackernoon.com/thinking-in-redux-when-all-
youve-known-is-mvc-c78a74d35133
MVCの概念理解およびサイト構築時の分離方法については、
書籍「プロになるためのWeb技術入門」pp183 219 がとて
もわかりやすいです。

19. Before
MVC無理解で構築すると・・・
FAT CONTROLLER
• Controllerにたくさんの処理を書き、Controllerにビジネスロジックの実行
からViewの振り分けまで、マルチタスクを背負わせること→プログラミン
グの世界ではよろしくない事態（メンテナンスがしづらくなるなど）
• 今回は、Service層なるものを新たに作成し、controllerにたくさん書いてい
た処理をそのサービス層へ移行することで対処しました（herokuで公開し
ているサイトはまだ修正できておらず、fat controllerのままです・・・）
Model Controller View
After
Model Controller ViewService

20. 参考書籍
• 小森裕介『「プロになるためのWeb技術入門」 ――なぜ、あなたはWebシステムを開
発できないのか』、技術評論社、2010年、https://www.amazon.co.jp/dp/4774142352/
ref=cm_sw_em_r_mt_dp_U_jCS6DbQRER8YC
• 永田順伸『PHP7＋MariaDB／MySQLマスターブック』、マイナビ、2018年、https://
www.amazon.co.jp/dp/4839962340/ref=cm_sw_em_r_mt_dp_U_QES6DbCW523QV
• 竹澤有貴他『PHPフレームワーク Laravel Webアプリケーション開発 バージョン
5.5 LTS対応』、ソシム、2018年、https://www.amazon.co.jp/dp/4802611846/
ref=cm_sw_em_r_mt_dp_U_YGS6DbYK27VW6
• mio『基礎から学ぶ Vue.js 』、シーアンドアール研究所、2018年、https://
www.amazon.co.jp/dp/4863542453/ref=cm_sw_em_r_mt_dp_U_6IS6DbRR49SF0