こんにちは、キノトロープアカデミーです。

「キノトロープアカデミー」は、Web業界のトップランナーである株式会社キノトロープの社員が講師を務めるオンラインアカデミーです。リモートワーク時代に不可欠な「個のスキル」を高め、職人のような「匠」を目指す人を増やしたい。そんな願いを込め、基礎から経営判断、業務フローまで、一生モノのナレッジを惜しみなく公開していきます。

<入門編 第4回>
Webサイト制作のバックエンド
についてお伝えします。

担当は高橋です。

PHPはサーバサイドで動的なウェブアプリケーションを作成できるプログラミング言語であり、問い合わせフォームやECサイト、WordPressなどの構築に広く利用されています。

JavaScriptなどのフロントエンド言語との決定的な違いはサーバ側へのデータの保存と読み出しができる点にあり、これによりユーザー間で情報を共有する掲示板などの機能が実現できます。

”Webサイト制作のバックエンド”をテーマに、
今日お伝えしたいことは3つあります。

PHP(PHP: Hypertext Preprocessor)は特にサーバサイドで動的なウェブページ、ウェブアプリケーションを作成できるプログラミング言語です。

特にウェブブラウザ、ChromeやSafari、Edge上で動作するアプリケーションの制作に特化しているプログラミング言語でもありますので、Webサイト制作においても利用されることの多い言語です。

プログラミング言語ですので、作ろうと思えば何でも作成することは可能ですが、
例えば、
・Webサイトのお問い合わせフォームや
・不動産の物件検索システム
・ECサイト
・ログインを必要とするような会員サイト
・掲示板
・ブログのシステム
などがPHPで作成されていたりします。

ブログで有名なところではWordpressもPHPで作成されています。またサイトではFacebookがPHPで作成されています。

入門編の第一回で説明した全体概要のなかではソフトウェアのアプリケーション部分にあたります。なお、サーバサイドのプログラミング言語としてはPHP以外にはJavaやPython、Ruby、Goなどの言語があります。

また、前提として、今回説明する内容は、実際の仕事での方法とは異なっています。
入門向けになるべく前提知識がない場合でも説明が出来るように簡素化していますので、実務とは異なることにはご注意ください。

今回実際に試す環境としては、パソコンのOSはWindows 10、ブラウザはChrome、そしてPHPを動かすためのものとしては、XAMPP(ザンプ)というソフトウェアをインストールして利用します。

そのため、初めにXAMPPのサイトにアクセスし、ダウンロードしてインストールを行ってください。
https://www.apachefriends.org/jp/index.html

PHPにはバージョンというものがあります。バージョンごとにできる機能や記述方法に違いがあったりします。今回はPHP8(8.0.5)を利用しています。

PHPはプログラミング初心者には比較的とっつきやすいものですので、この入門編を参考に試してもらえればと思います。

PHP(PHP: Hypertext Preprocessor):
バックエンドで動的なウェブアプリケーションを作成するための言語です。
出来ることは先ほど述べた通りですが、バックエンドでの処理とJavascriptなどのフロントエンドで出来ることの大きな違いはなにか、

それは、バックエンド処理ではバックエンド、サーバ側へのデータの保存と、データの読み出しができます。フロントエンドのみでは絶対にできないことです。

具体的な例としては、掲示板です。Aさんが掲示板に書き込み、書き込んだ内容をBさんが見るといったことは、フロントエンド処理のみでは実現ができないものです。

PHPの習得難易度としては、プログラム言語全体から見れば比較的優しくまた試しやすいため、PHPから始めるというひとも多いかと思います。

PHPにもフレームワークと呼ばれる「枠組み」が提供されています。これらはPHPでよく構築する仕組みをより簡単に開発ができようにしたり、複数人で開発を行ってもメンテナンス性を担保できたりするようにするためのものです。

代表的なものとしてはlaravelやSymfony、cakePHPなどがあります。

実務ではこれらのフレームワークのどれかを採用し構築しますが、本講座では初級編ということもあり、紹介までとします。この入門編ではフレームワークは利用しません。

では、実際にPHPを書きながら文法や主要な記述を覚えていきましょう。ページが表示されたら「Hello!!」と表示するプログラムをつくってみます。

まずXAMPPを標準のままインストールすると、
Cドライブにxamppフォルダが作成されるかと思います。

C:\xampp

この中の
xampp-control.exe
をダブルクリックでコントロールパネルが起動します。



その後、Apacheの部分の「Start」ボタンを押すことで、ApacheというWebサーバが起動します。

その後ブラウザで、http://localhost/ にアクセスするとXAMPPのApacheが起動したことが確認できます。



このような画面が表示されると思います。
http://localhost/dashboard/



・PHPの文法



では改めてプログラムにもどります。01.phpを作成してHello!!と表示するプログラムを作ってみみます。
Kinotropeというフォルダを作り、そのなかに 01.phpファイルを作成します。

C:\xampp\htdocs\kinotrope
01.php

実際にブラウザで実行してみましょう。
http://localhost/kinotrope/01.php

Chromeで上記のURLにアクセスすると「Hello!!」と表示されているかと思います。

PHPではHTML中にも直接記述することができますが、標準ではファイルの拡張子を.phpとして作成する必要があります。これによりPHPとして動作する形となります。

またHTMLに記述する場合は
<?php と ?> で囲んだ範囲がPHPプログラムとして認識され処理が行われます。

文字列を表示してみましたが、他簡単な例としては
・変数
・演算 足し算など
・条件分岐
・繰り返し
があります。

前回Javascriptで作成した99の表をPHPで実装してみます。

手順については下記の動画で分かりやすく実演しています。是非ご覧ください。
https://www.youtube.com/watch?v=hZE0g0Qw3kw

手順通りに進めると、Javascriptで実装した99の表と表示上はまったく同じものができました。

ただ、ソースコードを見たときには違いがあります。
Javascriptの場合はJavascriptのプログラムが見えますが、PHPの場合は最終的に出力されたHTMLが見える形となっています。

そのため、サーバ側にデータを保存、読み出し以外の場合でも、内部の処理を秘匿化する必要がある場合はフロントエンド処理には記載することが出来ません。

例えば、秘密のパスワード的なものをJavascriptに記載してしまうと、ソースコードを見ることで中身がすぐにばれてしまいます。

PHP側への記述であれば、通常は外部からソースコードの中身を確認することはできないので安全です。

最後までご覧いただきありがとうございました。

の3点についての内容でした。

\ がんばれ!Web担当者 /

Web担当者応援マガジン

属人化の嵐の中で、時間と各部署と
そして上司と戦うWeb担当者のために

大規模Webサイトの運用業務に
よくある課題を解決するための手法を
簡潔にまとめました!

大規模CMS成功の法則