Webアプリ（PHP）をふわっと解説｜初心者向け

Webアプリってどんなものなのかざっくりとだけ把握しておきたい人向けにまとめてみました。

これから勉強してみたいけど背景がそもそもよくわからんって人は是非覗いていってください。

どんな構成になっているのか、また実際に動きを見ながら解説していきたいと思います。
動きを見ながらの解説なのでイメージは掴みやすいと思いますので是非チャレンジしてみてください。

HTML言語（えいちてぃーえむえる）
JavaScript言語（じゃばすくりぷと）
- ちょっと動きを付けたいとき
- JavaScriptサンプル
Webページ
PHP言語（ぴーえいちぴー）
最後に

HTML言語（えいちてぃーえむえる）

Webアプリの土台部分

HTMLファイル（HyperText Markup Language）は、webアプリの土台部分にあたるといってもよいぐらいに深く関わっております。（拡張子は、.htmlや.htm）

Windows上でこのファイルをダブルクリックすると、Webブラウザが立ち上がります。

Webブラウザ上に文字やボタンなどを表現できます。主に見た目を表現するのに欠かせないファイルとなります。

HTMLサンプル１

どういう事？って思っている方は、動かしてみればよいでしょう。物は試し。
以下ファイルを作成して、メモ帳などで入力します。

（sample_button1.html）

<form name="sample_button">
<input type="button" value="ぼたん"><br>
<input type="text" size="20" value="">
</form>

sample_button1.htmlをダブルクリックしてみると、Webブラウザが立ち上がって、

[ぼたん]という名前のボタンと、
空白のテキストボックス

が表示されます。

こんな感じで「HTML」とは、Webブラウザに文字やボタンなどを表現することが出来るプログラミング言語になります。

HTMLサンプル２

さて、今の状態では、

[文字表示]のボタンを押しても何も反応しません。

今度は、ボタンを押したらテキストボックスに文字を表示させてみます。

２つのHTMLファイルを作成します。
この２つのファイルは同じフォルダに置いてください。

（sample_button2.html）

<form name="sample_button">
<input type="button" value="文字表示" onclick="location.href='sample_button3.html'" ><br>
<input type="text" size="20" value="">
</form>

（sample_button3.html）

<form name="sample_button">
<input type="button" value="文字クリア" onclick="location.href='sample_button2.html'" ><br>
<input type="text" size="20" value="はろーわーるど">
</form>

sample_button2.htmlをダブルクリックしてみると・・・

[文字表示]のボタンを押してみると・・・

今度は、[文字クリア]のボタンを押してみると・・・

お気づきかと思いますが、ボタンを押すたびに、開いているファイル名を切り替えているだけになります＾＾；

sample_button2.html

⇔

sample_button3.html

ボタンを押したら、別のhtmlファイルを開きなおしているだけ

HTMLは静的ページなんて言われている所以ですね。

Webページの見た目はHTMLで。

JavaScript言語（じゃばすくりぷと）

ちょっと動きを付けたいとき

前述のHTMLの例について、静的ページだからしょうがないとはいっても、文字を表示するだけでページを切り替えるにしては、やりすぎ・大げさな感じがしますね。
そこまでの機能でないのにわざわざページを切り替えるのはちょっと。というのもあると思います。
その場合は、JavaScriptを使うことで「動的」に表現することが可能になります。

JavaScriptサンプル

以下、JavaScriptを使った例です。動きは前述の例とまったく同じになります。

JavaScriptは、HTMLファイル内に組み込むことができます。

（sample_button4.html）

<form name="sample_button">
<input type="button" name="btn_disp" value="文字表示" onclick="dispStr()"><br>
<input type="text" name="txt_data" size="20" value="">
</form>

<script>
function dispStr()
{
  var strBtn = "";
  var strTxt = "";
  // ボタンの名称が文字表示なら
  if( document.sample_button.btn_disp.value == '文字表示' )
  {
    strBtn = "文字クリア";
    strTxt = "はろーわーるど";
  }
  else{
    strBtn = "文字表示";
    strTxt = "";
  }
  document.sample_button.btn_disp.value = strBtn;	// ボタン名変更
  document.sample_button.txt_data.value = strTxt;	// テキストボックス変更
}
</script>

sample_button4.htmlをダブルクリックしてみると・・・
ボタンを押すたびに、テキストに文字が表示されたり削除され、わざわざ２つのHTMLファイルを用意しなくても、１つのHTMLファイルだけで前述の例と同じ動きを実現することが出来ました。

見た目にちょっと動きを付けたいときはJavaScriptで。

Webページ

インターネットのページを見るしくみ

お気づきかと思いますが、Webアプリの解説と言っておきながら、まだ自分自身のPC上でしか動かしておりません。

皆様がご覧になっているWebブラウザで見ているニュースやブログなどは、どんなしくみになっているのでしょう？

インターネットにつなぐことで、世界中のニュースやブログなどを参照することが出来るのは当たり前との認識ですよね。

ざっくり一言でいうと、外のネット回線の先には、サーバと呼ばれるもうひとつのPCがあり、そこの中にあるHTMLファイルをダウンロードして、ブラウザ上に表示している流れとなっております。

なんだか、ネットワーク上で再生されているものを見ているイメージがあったかもしれませんが、そういうふうに見えているだけであって、実は自分のPCに取り込んでから、その取り込んできたファイルを表示しているだけなんですね。

前述のサンプル例でいうと・・・

前述のサンプル例でいうと、HTMLファイルは、自分自身のPC上で用意して実行しておりました。

Webページを見るにしても、一旦HTMLを自分のPCにコピー（ダウンロード）してから、HTMLを実行していることになります。

HTMLファイルをダブルクリックで表示させているのと変わらないです。

ただファイルの元が、自分のPCからなのか、外のPCからなのかの違いだけです。
（ダウンロードしたという工程がひとつ増えているだけになります。）

サーバにHTMLを置くには

HTMLファイルを、サーバという外のPCに置くにはどうしたらいいのかという話ですが、サーバを用意するために月々の利用料を支払って準備する必要があります。
それは、サーバ管理会社との契約してからのお話になりますので、ここでの説明は省きます。

サーバ契約すると、サーバという外のPCにHTMLファイルを置けるようになります。

そうするとURLと呼ばれている「https://www.～～」みたいな形でアクセスすると、ページが見れるようになります。

PHP言語（ぴーえいちぴー）

よくみるWebページの中で

よくWebページの中で、商品の検索だったり、在庫の数だったり、商品の価格だったり・・・

こういった情報を表示しているWebページをよく見かけると思います。

これらを実現するために、前述のHTMLの例で実装する事を考えてみると・・・

ひとつひとつHTMLファイルを直していかなければならないの！？
商品名や在庫数や値段を、毎日のように手書きで！？

と思ってしまうのではないでしょうか。

ひとつの商品だけならまだしも、何十種類、何百種類と扱っていくと、とてもじゃないですがやっていけません。時間がいくらあっても足りません。

そういった場合に便利なのがPHPというプログラミング言語です。

以下、解説したいと思います。

PHP言語って何？＆PHPサンプル

PHPとは、一言でいうとHTMLを動的に作ってくれるプログラム言語です。
（拡張子は、.php）

サンプル紹介（hello.php）

<html>
 <head>
  <title>PHP Test</title>
 </head>
 <body>
 <?php echo '<p>Hello World</p>'; ?> 
 </body>
</html>

サンプルと紹介しておきながら、先に謝っておきます。

phpファイルは、ダブルクリックしても動かせません。

サーバという外のPC上でしか動かせないプログラミング言語と思ってください。

自分自身のPC上で動かすためには、仮想サーバを簡単に作れるXAMPPのインストールが必要になります。それなりに準備が必要なので、ここでの説明は省きます。

もし、サーバ上で動かすとどうなるかというと、上記の例でいうと、<body>タグ部分が以下のように

 <body>
 <p>Hello World</p>
 </body>

と置き換えられたHTMLファイルを作成してくれます。

Webページ上では、置き換え済みのHTMLをダウンロードして、Webブラウザで表示する流れになります。

最初の商品の検索の話に置きかえると・・・

たとえば、PHP側で商品コードを受け取ると、商品名や価格、在庫数などを、動的に置きかえたHTMLファイルを作ってくれるという事になります。

動的にHTMLが作成できると何がよいのかというと

例えば、商品が増えたり変更するたびに、いちいちHTMLを修正する必要は無くなります。

商品情報はデータベースに持たせ、この中の値を変更していくだけでよいので、データベースさえ更新できていれば、プログラムは何も修正する必要がなくなるわけです。

動的にHTMLを作りたいときはPHPで。

ほか、PHP言語には、ログイン機能や自動メール送信機能やcsv・pdf出力など、Webページ上で必要な機能がいろいろと実現できたりします。

最後に

いかがでしたでしょうか？

最後にこれから勉強するにあたっての補足などを記載したいと思います。

PHP言語であれば、Laravelというフレームワークを利用すると良いと思います。
新規プロジェクトを作成すると、土台が勝手に作られるので便利です。

以前はLaravelのほかに、CakePHPなど数々のフレームワークがありましたが、最近Laravelが頭一つ抜けた状態となりました。

PHP言語のほか、人気があるのがpythonになります。（フレームワークはDjango）
何よりライブラリが豊富なのが魅力的なことではないでしょうか。
pythonという言語自体は20年以上も前から登場しておりましたが、おそらくこれらライブラリのおかげなのか、ここつい最近になって大人気となりました。

Webアプリについては、日本ではPHPがまだまだ根強く、海外のほうでは、pythonが人気で多く利用されているようです。

PHPは、まだまだ息の長い言語だとは思いますが、先を見据えpythonのほうも少しずつでも勉強しておくのもよいかもしれませんね。

最後まで見てくれてありがとう。