動かして、読んで、まねして覚える。
Webプログラミングの入門サンプル帳
動くデモと1行ずつのコード解説で、Webプログラミングの基本を身につける。どのページも「実際に動くデモ」と「黒い画面のコード」と「1行ずつの解説」がセットになっています。
ここに載せているサンプルは2017〜2018年ごろに書いたものです。情報が古くなり、今のPHPでは動かなくなっていたため、2026年にPHP 8.3で動くように書き直し、初めての人にも読めるよう解説をつけ直しました。
JavaScript の基本7本
ブラウザだけで動く小さなプログラム。HTMLとJavaScriptの基本を押さえます。
押したキーの情報を調べる
キーボードを押すと、そのキーの文字・位置・キー番号、Shift や Ctrl を押しているかを表示します。キーボード操作を扱うプログラムの第一歩です。
ストップウォッチを作る
スタート・ストップ・リセットの3つのボタンで動く、1/1000秒まで表示するストップウォッチです。時間の計り方と、くり返し処理の止め方を学びます。
タイピング練習ゲームを作る
お題の文字を正しく打つと次に進む、タイピング練習ゲームです。キーボードの図を SVG で描き、次に押すキーを光らせます。英語・日本語かな・ハングル・注音に対応しています。
画像をブラウザで縮小・拡大する
選んだ画像を、サーバーに送らずブラウザの中だけで縮小します。FileReader で画像を読み込み、canvas に描き直して、縮小した画像をダウンロードできるようにします。
ブラウザに文章を読み上げさせる
入力した文章を、ブラウザの音声合成機能（Web Speech API）で読み上げます。たった数行で、言語や速さを変えて声を出せます。
スマホかパソコンかを判定する
ブラウザが送ってくる「ユーザーエージェント」を PHP で調べて、スマホとパソコンで表示を変えます。PHP の配列・繰り返し・条件分岐の練習にもなります。
PHPのデータをJavaScriptで受け取る
データベースから取り出したデータを、PHP で表示する方法と、JSON に変えて JavaScript に渡す方法の2通りで表示します。PHP と JavaScript の橋渡しの基本です。
jQuery で動きをつける10本
クリックやアニメーション、ajax通信など、画面に動きをつける定番テクニック。
Typed.js でタイピング風に文字を表示する
文字を1文字ずつ打ち込むように表示するアニメーションを、jQuery プラグイン「Typed.js」で作ります。ページのキャッチコピーなどに使える表現です。
マウスを乗せて出るボタンで、入力欄に文字を挿入する
マウスを乗せると小さなボタン一覧が出て、クリックした記号が入力欄に入る仕組みを作ります。あわせて、行の追加・削除と「イベントの委譲」も学びます。
伝票番号から荷物の追跡ページのURLを作る
運送会社を選んで伝票番号を入れると、追跡ページへのリンクができる小さなツールです。セレクトボックスの値の読み取り方と、オブジェクトを使った「対応表」の作り方を学びます。
画像が横に流れて切り替わるスライダー
何枚かの画像を一定の時間ごとに横へ流して切り替える、シンプルなスライダーを作ります。「枠からはみ出た部分を隠す」CSS と、jQuery の animate() の使い方がわかります。
ajax で受け取った部品を追加し、そのボタンも動かす
ボタンを押すたびにサーバーの PHP から HTML の部品を受け取り、ページに追加します。あとから追加した要素のボタンを動かすための「イベントの委譲」もあわせて学びます。
円グラフのプラグイン Circliful：ボタンで1%ずつ増やす
円グラフを描く jQuery プラグイン「Circliful」を使い、ボタンを押すたびにグラフが1%ずつ増える仕組みを作ります。グラフの正体である SVG の線をどう伸ばしているかも解説します。
円グラフのプラグイン Circliful：レッスンの進み具合を表示する
全4回のレッスンの「完了」ボタンを押すと、進み具合が円グラフに反映されます。クラスの付け外しで状態を管理し、完了数を数えてグラフを更新する考え方を学びます。
円グラフのプラグイン Circliful：進み具合をデータベースに保存する
レッスンの完了状態を ajax で PHP に送り、MySQL に保存します。ページを再読み込みしても進み具合の円グラフが残る、実用的な仕組みです。
ボタンを押すたびに、次の25件を読み込んで表示する
データベースの一覧を25件ずつ表示し、「次の25件」ボタンでページを切り替えずに続きを読み込みます。SQL の LIMIT と ajax を組み合わせた、「もっと見る」ボタンの作り方です。
WYSIWYGエディターに「画像の削除」機能を付ける
見たまま編集できる文章エディター（WYSIWYG）に、アップロードした画像を一覧から削除する機能を追加します。ajax でサーバーの PHP を呼び出し、ファイルを安全に削除する方法を学びます。
フォームと画像アップロード7本
「追加」ボタンで入力欄を増やすフォームから、画像の保存・縮小・データベース登録まで。
「行追加」ボタンで入力欄を増やす（テキスト）
ボタンを押すたびにフォームの入力欄が1行ずつ増える仕組みを作ります。増えた入力欄の値を、PHP で配列としてまとめて受け取る方法も学びます。
「追加」ボタンで入力欄を増やす（テキスト＆画像）
前のサンプルに「画像を選ぶ欄」を加えます。ファイルを送るためのフォームの書き方と、PHP の $_FILES に届くデータの形を確認します。
選んだ画像を送信前にプレビューする
画像を選んだ瞬間に、その画像を画面に小さく表示します。JavaScript の FileReader を使い、サーバーに送る前のファイルを読み込む方法を学びます。
画像付きフォームをデータベースに保存・編集する
「行を追加」ボタンで増やせるテキスト＋画像のフォームを作り、画像を3つのサイズに縮小して保存、データベースに登録します。表示画面と、画像の差し替え・削除ができる編集画面まで作る、少し本格的なサンプルです。
プラグイン「Upload Thumbs」で画像をプレビューする
画像のプレビューを、jQuery プラグイン「Upload Thumbs」を使って1行で実現します。1枚だけ選ぶ欄と、複数枚をまとめて選ぶ欄の違いも確認します。
「追加」ボタン＋Upload Thumbs で画像の入力欄を増やす
「追加」ボタンで行を増やすフォームと、プラグイン「Upload Thumbs」のプレビューを組み合わせます。あとから追加した入力欄にプラグインを付ける方法がポイントです。
プレビュー付き画像フォームをデータベースに保存する（Upload Thumbs 版）
前のサンプル（画像付きフォームの保存・編集）と同じ仕組みを、画像プレビューを jQuery プラグイン「Upload Thumbs」に任せて作ります。プラグインを使うと JavaScript がどれだけ短くなるかを比べてみましょう。
PHP で便利ツールを作る3本
サーバー側のPHPで作る実用ツール。ファイル保存・短縮URL・Whois検索。
公開フォルダの外に画像を保存して、PHP 経由で表示する
アップロードされた画像を、ブラウザから直接アクセスできない「非公開フォルダ」に保存し、PHP で読み出して表示します。会員だけに見せたい画像などに使える考え方です。
短縮URLとQRコードを作るツール
長いURLを「go.php?c=Ab3x」のような短いURLに変換し、QRコードも作るツールです。URL をデータベースに保存し、短いURLが開かれたら元のURLへ転送（リダイレクト）します。
URLからサーバー情報とWhois情報を調べる
URL を入力すると、ページのタイトル・meta タグ・IP アドレス・サーバーの所在地、そしてドメインの登録情報（Whois）をまとめて調べるツールです。PHP からほかのサーバーに問い合わせる方法がわかります。
スマホアプリ用のAPI2本
スマホアプリからデータを読み書きするための、サーバー側の仕組み。
掲示板API（JSONでデータを返す）
スマホアプリから呼び出すための、とても小さな掲示板の API です。URL のパラメーターで「一覧・書き込み・削除」を切り替え、結果を JSON で返します。データベースを使わず、ファイルに保存します。
スマホ用メモアプリ（追加・編集・削除）
スマホアプリの画面（jQuery Mobile）から ajax でサーバーの PHP を呼び出し、メモをデータベースに追加・編集・削除するアプリです。画面は HTML、データの保存はサーバー、という役割分担がわかります。
動作停止中のサンプル2本
外部サービス（API）の提供終了により、現在は動かせないサンプル。コードの考え方だけ解説します。
Amazon の商品を検索する（旧 Product Advertising API）
Amazon の商品データを検索できる API に、PHP からアクセスして本の情報を取り出すサンプルです。API が提供終了したため現在は動きませんが、「APIキーで署名してリクエストする」という考え方は今も多くの API で使われています。
Twitter(X) 自動投稿ボット
ニュースの RSS を読み込んで最新記事を自動でツイートしたり、フォローを返したり、決まった文章をランダムに投稿したりする Twitter(X) のボットです。X の API の仕様と料金が変わったため、現在は動いていません。