はじめに

この記事は、PHPとSQLiteを使って非常にシンプルなWebアプリケーション（ブログ）を作り、またそこから他のDBMSへ移行したり、他の言語等でWebアプリケーションを開発する基礎を押さえることを目的にしたものです。ある程度のプログラミング経験と自分で調べながら読み進めることを要求するかもしれません。各項目は割と手抜きだったり、文字が多かったりします。

また、Webの世界は日進月歩ですので、あまり新しいバージョンだと互換性が失われていることもあるかもしれません。しかし、同時に脆弱性の発見と修正も日々行われています。最新の安定版、というようなリリース元がおすすめしているバージョンを使うといいのではないかな、と思います（リリース元の発信する情報には注意するようにしてください。あなたのアプリケーションとそのユーザが影響/被害を受ける致命的な脆弱性が見つかることがあります）。

それから、もし（バージョンの関係や自分の追加したコードで）動かないところがあったら、自分で調べて直してみるのも大切なことかなと思います（誤植はすいません..）。また、英語で調べてみないと情報が得られないこともよくあります。苦手意識を持たずに、英語の勉強も兼ねて試してみましょう。

素人が書いているので、間違いがあったら訂正していただけると助かります。

HTML

PHPから始めると書きましたが、これはタイトル詐欺です。Webアプリケーションを作るからには、HTMLを扱えたほうがいいでしょう（ただし、「Webアプリケーション」というのがWebブラウザ上で動作するものである場合の話ですが）。

この回では静的ファイルとして管理されるようなWebサイトを作成することを目指します。このような形式のWebサイトの場合、GitHub PagesやFirebase Hostingなど無料でホスティングしてくれるサービスがあります。主にこのようなサービスで配信することを目的としていると思うのですが、Markdownなどのテキストから静的なHTMLなどを自動で生成し、それをサーバにアップロードする形でWebサイトの構築を支援するアプリケーション（Gatsby.js、Jekyllなど）もあります。

それでは話を戻して、HTMLについて説明します。

HTML: HyperText Markup Language | MDN

試しに、https://example.comを開いてみてください。シンプルなWebページが表示されるかと思います（このページはインターネットに関わる資源を管理する国際組織ICANNのサーバが配信しているものです）。現在は、次のような表示が得られます。

以下にこのページを構成するHTMLを引用します。なお、Firefox 74、Chrome 80ではF12（ファンクションキーです）を押すことで現在開いているページのソースコードや動作を分析するツール（開発者ツール、デベロッパーツール）が開きます。また、アドレスバーをクリックして、URLの前にview-source:を追加する、つまりview-source:https://example.comのようにして開くとブラウザはページのレンダリングを行わず、生のHTMLを表示してくれます。

<!doctype html>
<html>
<head>
    <title>Example Domain</title>

    <meta charset="utf-8" />
    <meta http-equiv="Content-type" content="text/html; charset=utf-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1" />
    <style type="text/css">
    body {
        background-color: #f0f0f2;
        margin: 0;
        padding: 0;
        font-family: -apple-system, system-ui, BlinkMacSystemFont, "Segoe UI", "Open Sans", "Helvetica Neue", Helvetica, Arial, sans-serif;

    }
    div {
        width: 600px;
        margin: 5em auto;
        padding: 2em;
        background-color: #fdfdff;
        border-radius: 0.5em;
        box-shadow: 2px 3px 7px 2px rgba(0,0,0,0.02);
    }
    a:link, a:visited {
        color: #38488f;
        text-decoration: none;
    }
    @media (max-width: 700px) {
        div {
            margin: 0 auto;
            width: auto;
        }
    }
    </style>
</head>

<body>
<div>
    <h1>Example Domain</h1>
    <p>This domain is for use in illustrative examples in documents. You may use this
    domain in literature without prior coordination or asking for permission.</p>
    <p><a href="https://www.iana.org/domains/example">More information...</a></p>
</div>
</body>
</html>

HTMLはこのように、一定のルールのもとに記述されたテキストデータとして表されます。なお、この例は全体的に記法が古いのですが（互換性のためというのもあるかもしれませんが、10年前のブラウザをそのまま使っているような場合でもない限り影響はないでしょう。また、古いソフトウェアを更新せずに使い続けるのは致命的な脆弱性が明らかになっている場合があるので、セキュリティの面でよくないです）、一方でHTMLの構造がわかりやすくなっています。XMLを知っている方は、似ていると思うかもしれません。これは歴史的にXMLとHTMLが共通の祖先（SGML）を持っているためです。また、HTMLとXMLの融合を目指したXHTMLというものも過去にありましたが、現在は主流ではありません（一部の解説サイトなどでは見かけますが、古い記法です）。HTMLの仕様は数年ごとに更新されていますが、この記事ではHTML5を想定することとします。

bodyタグ

さて、まず注目してほしいのは、<body>と</body>で囲まれた部分です。<body>のような表記をタグといい、<body>は開始タグ、</body>は閉じタグといいます（<tag />のような表記はXHTMLのものであり、古い記法です）。開始タグ<body>と閉じタグ</body>で囲まれた部分をbodyタグで囲まれた部分、またはbody要素と呼びます。見てもらえれば分かると思いますが、ここがページの本体であり、画面に表示される内容を格納する、Webページの肝となる部分です（HTML5の場合、シンプルなWebページを作るときは、この中身と数行のメタ情報だけで用が足ります）。

body要素の中身を見ていきましょう。この例では、divタグ、h1タグ、pタグ、aタグが階層構造を持って格納されています。ある要素（A）が別の要素（B）の中（ただし、直下）に入っているということを入れ子になっている、とかAはBの子である、といいますが、この例でdivタグはbodyタグの子であり、h1タグと2つあるpタグはdivタグの子であり、aタグは2つ目の方のpタグの子になっています。HTMLを書く上では、このような親子関係と順序が大切になることがあります。

次に、bodyタグの子をそれぞれ見ていきましょう。まず、divタグは複数のタグをひとまとめにするために用いられます。ここでは、ページの中央に表示された白い四角に対応していて、このようなデザインを実現するために使われています。中央に寄せたり、色を付けたりするのはCSSの仕事ですから、ここでは詳しいことはおいておきます（この記事ではあまりCSSの詳しい解説はしないので、各自調べてみてください）。

h1タグは見出し/headingを表すタグです。後ろの番号はh1からh6まで定義されていて、見出しの深さを表すのに使われます（数字が小さいほど浅い見出し）。Webページ（文章）のタイトルにはh1、文章の見出しにはh2、h3、h4を使う感じでしょうか。

pタグは段落/paragraphを表すタグです。文章の1段落に対応します。このように、HTMLのタグはそれぞれの種類で異なる意味を持っています。普通のブラウザが（CSSが適用されていないデフォルトの状態で）文字を太字として表示するタグには、bタグ（bold）やstrongタグなどがありますが、HTML5ではstrongタグは強調を、bタグは強調の意図を含まない太字として扱われます。

aタグはリンクを表すタグです。HTMLのHTはHypertextですが、Hypertextというのは文書間にリンクを持つ文書のことです。Webページが相互にリンクし合うことで、今のWebは成り立っています。基本的に、hrefという属性（属性：タグの持つ付加情報のこと）にURLを記述することで他の文書（Webページ）へのリンクを張ることができます。ブラウザはその情報を解釈し、ユーザがa要素をクリックしたときに指定したページを表示する、という挙動をします。bodyタグについては以上です。文章を構成する細かいタグについて知りたい/知る必要がある場合は、自分で調べてみてください。

headタグ

次に、headタグを見ていきましょう。この例では、titleタグ、metaタグ、styleタグの3種類のタグが格納されています。

titleタグは、文書のタイトルを表すタグです。ブラウザのタイトルバーの表示やブックマークに保存するときの（デフォルトの）名前には、ここに記述された内容が使われます。

metaタグは、文書のメタ情報に関する汎用的なタグです（<meta />のような記述になっていますが、これは古い記法です。HTML5ではmetaタグは閉じタグを省略でき、/は必要ありません）。ここでは、文字コードの指定とviewportというデザインに関する指定が記述されています（2つ目の文字コードの指定http-equiv="Content-Type"はHTML5では必要ありません。charsetだけでOKです。なお、Content-Typeとはmimetypeを意味していて、拡張子に依存しない形でデータの種類を表すのによく用いられます）。

styleタグは、文書のスタイル情報、通常はCSSを格納するタグです（HTML5では埋め込まれたスタイル情報がCSSで記述されている場合type属性を省略できます）。外部にファイル（CSSファイル、*.css）として記述されたスタイル情報は<link rel="stylesheet" href="URL">というタグを埋め込むことで指定できます。

HTML5

headタグとbodyタグ、これらを囲むhtmlタグ、それからHTML文書であることを示す頭の1行がこのHTML文書のすべてです。例の解説については以上にします。ほかに気になるところがあれば自分で調べてみてください。

例では丁寧にタグの構造が記述されていますが、HTML5では大胆な省略が仕様として可能です。（作成者のミスで）構造の壊れたHTMLをブラウザが自動で復元してくれることがありますが、それとは異なりブラウザが仕様に沿って自動で補完してくれます（可読性やメンテナンスの点で有用なので、積極的な省略を推奨します）。以下にHTML5で書かれたシンプルなWebページの例を示します（HTMLにおいて、だいたいの場合大文字小文字に関しては好みの問題です）。これを好きなテキストエディタ（BOMなしUTF-8が保存できるものにしてください。Shift-JISは時代遅れです）で保存して、あなたのブラウザにD&Dしてみてください。シンプルなWebページが開かれるはずです。

<!DOCTYPE html>
<meta charset="utf-8">
<title>山田太郎のウェブサイト</title>

<h2>Welcome to My Website!</h2>
<p>
  こんにちは！　わたしは山田太郎です。

HTMLを書くとき発生する面倒な問題の1つがエスケープです。文書の構造を指定するために様々な文字が特別な意味を持っている（例えば、不等号>, <）ため、その意味をキャンセル（エスケープ）する必要がある場合があります。これには、実体参照/entity referenceという記法が使われます。例えば、大なり（greater than, >）は>、小なり（less than, <）は<と記述する必要があります（無視してもブラウザが推測してくれる場合もありますが、ページの表示に不具合が出る場合があるのでよくありません。パンくずリストや数式を書くときなどは気をつけましょう）。

CSS

CSSは、HTML文書のデザインを記述するのに使われる記法です。CSS文書はスタイルシートともいいます。

CSS: カスケーディングスタイルシート | MDN

以下のCSS文書は、body要素の背景色をピンク（#FF00FF）にするという指定です。#FF00FFというのはカラーコードといって、16進数各1バイトで赤、緑、青の光の3原色に基づいて色を指定しています（並び順はRRGGBB、Rは赤、Gは緑、Bは青）。カラーコードを一部省略したり色を名前で指定したりもできますが、ここでは扱いません。#000000は黒（black）、#FFFFFFは白（white）です。

body {
  background-color: #FF00FF;
}

上の例でいうと、bodyの部分をCSSセレクタ、background-colorの部分をプロパティといいます。CSSセレクタはHTML文書の中のどの要素にスタイルを適用するかを表し、プロパティは適用するスタイルを表します。ここではタグ名にもとづく指定しかしていませんが、id属性やclass属性、文書内でのタグの位置など様々な条件で指定することができますし、プロパティも色だけでなくサイズ、配置、余白、フォントの指定やアニメーションを実現するものなど、様々なものが利用できます。詳しくは調べてみてください（width、font-size、display: flex、display: grid、pt、emなど）。

body {
}
div {
}

もちろん、こんな風に複数のブロックを1つのCSS文書に含めることができます（優先度に注意）。ただし、body{ div{ } }のような入れ子にした記述はできません（CSSをブラウザに配信する前に処理して展開する記法で用いられることはあります）。

また、example.comの例に含まれる、@を使った記述をクエリといい、@mediaはメディアクエリといいます。これは指定した条件にマッチする環境でのみそのスタイルを適用する、という記述で、画面の幅などに基づいてスマートフォン用の表示とPC用の表示を切り替えたりするのに使われています（印刷用というのもあります）。

JavaScript

JavaScriptは、ブラウザ側（クライアントサイド）でWebページをプログラムで制御する際に用いられるスクリプト言語です。なお、この記事の目標のPHPもまたスクリプト言語という分類に含まれます（ただし、PHPはサーバ側＝サーバサイドで実行され、ユーザのブラウザに配信される前に実行されるものです）。スクリプト言語というのは、C言語やJavaのようにコンパイル（機械語への変換）や中間表現（バイトコード）への事前の変換を必要とせず、インタプリタというプログラムによってテキストとして読み込まれ（一部の言語ではJITという仕組みもありますが）、実行時に解釈されて処理を行うプログラミング言語です（JavaとJavaScriptは名前が似ていますが全くの別物です。名前が似ているけど別物、名前が同じだけど別物、名前が違うけど同じもの、ということはよくあり、しばしば名前だけでは判断できません）。JavaScriptの言語仕様はECMAScriptという名前で定義されています。このあたりは詳しくないのですが、Wikipediaを覗いたところ、ブラウザに実装された、現在表示されているHTMLを操作するDOMの機能やブラウザを操作するAPIをECMAScriptに追加した方言がJavaScriptであるようです（言語仕様自体はECMAScriptに準拠し、実装・アップデートは各ブラウザベンダー/スクリプトエンジン開発者が行っている）。

JavaScript | MDN

JavaScriptはHTML文書中に埋め込むこともできますし、外部ファイル（JavaScriptファイル、*.js）として読み込むこともできます。どちらもscriptタグを用います。なお、scriptタグは外部ファイルを読み込む場合でも閉じタグが必須なので、忘れないように注意しましょう。

<script>
var text = 'こんばんは';
document.querySelector('#greeting').innerText = text;
</script>
<script
  src="https://code.jquery.com/jquery-3.4.1.min.js"
  integrity="sha256-CSXorXvZcTkaix6Yvo6HppcZGetbYMGWSFlBw8HfCJo="
  crossorigin="anonymous"></script>

1つ目のタグに書かれたスクリプトは、id属性がgreetingの要素に表示されるテキストをこんばんはに書き換えるものです。querySelector関数の引数にはCSSセレクタを指定します（他にもid属性の値のみで指定するgetElementByIdなどの関数も利用できます）。詳しいDOMの操作については調べてみてください。

2つ目のタグは何やら複雑に見えますが、JavaScriptの有名なライブラリjQueryを読み込むもので、公式サイトからコピーしてきただけのものです。integrity、crossoriginはSRIというハッシュ値に基づいてコードの同一性を検証する仕組み（ドメインが乗っ取られてファイルが改ざんされた場合など）のための属性です。このURLの指すサーバのように、スクリプトやフォント、スタイルシートを（専門に）提供するWebサーバ・システムをCDNといい、共通のキャッシュを持つことができるため、複数のサイトで利用されることで高速化が期待でき（印象）、またCDN側でCloudflareなどの負荷分散の仕組み/サービスを使っていたりします。GitHubのraw contentなどはこのような利用を想定したものではないので、（配布元の指定する）CDNを使うか、ダウンロードして利用しましょう。また、他人の作ったライブラリを利用する際はライセンス（利用条件、利用許諾、再配布条件）を確認するようにしましょう。

注意する点として、スクリプトは上（におかれたタグ）から順に実行されるという点、特に外部の文書を読み込みにいく必要がある場合、スクリプトの読み込みが終わるまでページが描画されない点（スタイルシートも同様です）があります。まず前者についていうと、例えば上の例では1つ目のタグ（の中のすぐに評価される式）でjQueryの機能を使うことはできません（関数を定義したり、イベントリスナを登録してあとから呼び出す/呼び出される場合は問題ありませんが、読みにくいです）。後者についていうと、サーバが非常に遠かったり、負荷がかかっているなどの理由でレスポンスが遅いとページ全体のレスポンスが落ちたように見えます（あまり時間がかかるとブラウザは読み込みを諦め、スタイル/スクリプトの適用されていない画面が表示されたりします）。後者はasync属性をつけることで非同期の読み込み（読み込みの完了を待たない）ができますが、この場合実行順の問題が発生するため注意してください。

また、JavaScriptも他のプログラミング言語と同じように計算や文字列処理が可能です（得意とは限りませんが）。

var a = 1234;
a += 3456;

console.log(a);

consoleは開発者ツール（のConsole）に出力を表示します。このスクリプトが埋め込まれたページを開いたとき、4690と（コンソールに）表示されるはずです。logだけでなくwarnやdebugを使ってログの表示のされかた（色、フィルタなど）を変えられます。開発者ツール自体にもWebページをデバッグする上で様々な便利機能があるので、いろいろと試してみてください。