ウェブアプリのつくり方:超入門編

つくってみよう

まず、とにかく作ってみる→その後に知識を学ぶほうが効率的

・プログラミングの最初のハードルは環境構築
　→XAMPPでやろう（macならMAMPで）
・「とにかく作ってみることが大事」でも、何をつくったらいいかわからない
　→「初学者はまずはこんなのつくったらいいよ」サンプルを例示

1.環境構築

XAMPPのインストール
https://techacademy.jp/magazine/1722

phpの文字コードの設定（文字化け予防）
https://techacademy.jp/magazine/2412

2.phpを書いてみる

テキストエディタ（メモ帳でもよい）に、以下のように書く。

<?php
$str = 'hello world!';
echo $str;

XAMPPのドキュメントルート（設定をいじってなければ"C:¥xampp¥htdocs"のはず）に、hello.phpという名前で保存

ブラウザのURL欄に’http://localhost/hello.php'と入力してEnter
'hello world!'が表示されれば成功

3.データベースに値を入れてみる

XAMPPのphpMyAdminの操作の仕方
https://www.adminweb.jp/xampp/mysql/index5.html

データベース名：sample
テーブル名：test
カラム名：id, name, value

を作ってみる
好きな値を入れてみる

↑たとえばこんな感じ

4.データベースに入れた値を、プログラムから取り出す

<?php
$dsn = 'mysql:dbname=sample;host=localhost';
$user = 'root';
$password = 'root';

$db = new PDO($dsn, $user, $password);
$sql = 'select * from test';

foreach ($db->query($sql) as $row) {
    print($row['id'].',');
    print($row['name']);
    print($row['value']);
    print('<br />');
}

$db = null;

ウェブアプリのすすめ

ウェブアプリケーションとは
・ブラウザとインターネット上にあるシステムとで動作するアプリケーション
　ブラウザ：インターネットを見るためのアプリケーション。
　Internet Exproler、Microsoft Edge、Google Chrome、など

他にはどんなのがある？
・ネイティブアプリケーション
　Windows PCやiPhoneなどの、本体にインストールして使用するアプリケーション
・クライアント-サーバー型システム
　複数のコンピューターを専用の線・通信規格で接続して機能するシステムやアプリケーション

これらと比べて・・・
・ネイティブアプリはWindows PCやiPhoneなど、機種ごとに個別のプログラムを書かないといけない
→ウェブアプリなら、そもそも本体にインストールしないので機種を気にしなくていい
・クライアント-サーバー型システムは通信の規格などがメーカーごとに独自の規格で動いているため、その規格について勉強しないとつくることができない
→通信規格にインターネットのものを利用することによって規格が統一され、現在では専用規格でつくることはほぼなくなった。

ウェブアプリケーションのうごくしくみ

1.ユーザーがブラウザにURLを入力して、ウェブアプリケーションにアクセスしようとする
2.ユーザーのPCがDNSサーバーに問い合わせの通信をする
3.DNSサーバーがURLをIPアドレスに変換し、ユーザーに返す
4.ユーザーPCがIPアドレスを元にインターネット上に通信を試みる
5.インターネット上の機器（ルーター、スイッチ）がIPアドレスを元にリクエストを配送し、目的のコンピューターに届ける
6.コンピューター内のプログラム（サーバー）がリクエストを受け取る
7.リクエストがプログラムを呼び出している場合は、そのプログラムをサーバーが動かす
8.プログラムがデータベースを参照している場合は、データベースサーバーへリクエストを出し、データベースサーバーはそれに応答する
9.処理結果をユーザーPCに返す（レスポンス）。このときもインターネット上の複数の機器によって届けてもらう
10.ユーザーPCはレスポンスを受け取る。レスポンスがHTMLだった場合には、ブラウザがウェブサイトになるよう描画する（レンダリング）
11.ユーザーPCの画面にウェブアプリケーションのページが表示される

ウェブアプリケーションの...というか、現代プログラミングの難しいところ
上記の流れのそれぞれについて、ひと通り知っておく必要がある。
非常に広範囲、かつそれぞれ奥が深いので、最初から全部勉強しようと思うと挫折する。

例題アプリ

計算機

・テキストボックスとテキストボックスの間のセレクトボックスは、四則演算が選べるようにする
・２つのテキストボックスとセレクトボックスの値をサーバー側に渡すことになる
・セレクトボックスの値によって計算式が異なる

掲示板

・テキストエリアに入力した値を、上の表示部に表示させる
・入力→サーバー上のtxtファイルに保存→ファイルを取り込んで出力、となる

TODO

・下のフォームに入力すると、上の表に追加される
・一番右の「完了」を押すと、そのTODOが消える

※ここまでの時点で、セキュリティについてまったく考慮していないことに注意すること。
インターネット上にアプリケーションなどを公開すると、すぐにハッカーの標的となってアタックが試みられる。
公開する場合には、ひと通りのセキュリティについて学んでおく必要がある。
今のところは、書いたプログラムは公開せずローカルでのみ動かす前提とし、セキュリティの話は後回しにして進むこととする。