目次
はじめに
本著を手に取って頂き、ありがとうございます。『Pythonの2歩目でWebアプリ制作をやるならDjango』の著者、およびWebサイト「電脳世界」管理人のオーニシです。
本書は2023年5月に開催された技術書典14にて同人版として発刊させて頂いた『Pythonの2歩目でWebアプリを作るwithDjango』の好評を得て、商業化のお声掛けを頂いたことをきっかけに、元となった技術同人誌に大幅な修正・加筆を行なったものです。
同人版では容量や締切の関係でHTMLやCSS、JavaScriptといったフロントエンドの技術はある程度知っている前提として省略していたり、Djangoアプリについても制作までで止めて、デプロイやインフラに関することは載せていませんでした。本書ではそのあたりをまるっと追記し、より前提知識の少ない方も一からWebアプリを作って公開までできるよう構成しました。
Webアプリケーションの制作に関する要素は非常に広範かつそれぞれが深いため、そのすべてを詳細に書ききるには本という媒体を使ってもなお、1冊には到底収まりません。そこで本書は、各要素を細部まで深掘りするのではなく、ひとつひとつの要素は基本的な解説に留める代わりに、なるべく多くの要素を包括的に盛り込めるよう執筆しました。
HTMLやCSS、JavaScriptといったWebページ制作に必須となる要素や、仮想化技術、LinuxOSなどのインフラ環境には触れてはいるものの、あくまで基本的な解説とハンズオンに留めている点はご了承下さい。
また、Djangoについても本書の目的はフレームワークそのものの習熟ではなく、Webアプリケーションを制作するために必要な知識や仕組みの理解、そして読者が実際にWebアプリケーションを作れるようになることです。Djangoはあくまでもそのためのツールとして使用することにはご留意ください。Djangoそのものについて深く学びたいという方は、akiyokoさんが執筆されている『現場で使えるDjangoの教科書』がおすすめです。
本著が、Pythonプログラミングの2歩目としてWebアプリケーション制作を選んだあなたの一助となることを願っております。
想定する読者層
・Webアプリケーションを作ってみたい方
・Webアプリケーションの基本的な仕組みについて学びたい方
・Djangoの仕組みについてざっくり知りたい方
・Webアプリケーション制作に関わる技術や周辺知識についてまるっと全体像を知りたい方
・新入社員に「とりあえずこれ読んでおいて」っていうWebアプリの本をお探しの方
前提知識
・プログラミングの基本的な概念（データ型やデータ構造、制御構造など）
・Pythonの基本文法
本著のゴール
・Webアプリケーションや周辺の仕組みについて簡単な説明ができるようになっている
・Djangoを使って簡単なWebアプリケーションが作れるようになっている
免責事項
本著はできるだけ正確を期すように努めましたが、筆者が内容を保証するものではありません。よって本著の記載内容に基づいて読者が行った行為、及び読者が被った損害について筆者は何ら責任を負うものではありません。不正確あるいは誤認と思われる箇所がありましたら、電子版については必要に応じて適宜改訂を行いますので、筆者までお知らせいただけますと幸いです。
第1章 Webページを制作してみよう
まずはじめに、簡単なWebページの制作を通じて、Webページの基本的な仕組みとWebページの構造を定義するためのHTML言語について簡単に学びましょう。ガッツリ解説するとそれだけで分厚い本が1冊できてしまうため、本書ではあくまで仕組みの理解と制作に必要な基礎のみを解説します。ご留意ください。
1.1 Webページとはなにか
Webページとは、インターネット上で公開されていて、ウェブブラウザを通じてアクセスできる個々のページです。
たとえばブラウザで次のURLにアクセスすると、私が運営するITコミュニティ『富山IT勉強会』のホームページへアクセスできます。
https://toyamait.github.io/
このページ単体のことをWebページ、そして『電脳世界』のようにひとつ以上のWebページから構成されるものをWebサイトと呼びます。
そしてこのURL(Uniform Resource Locator) というのは各Webページのインターネット上での住所のようなもので、既に使われているURLに別のページを配置することはできません。
1.2 Webページが表示されるまで
このページが表示されるまでに何が起きているか、まずはごく簡単な図で見てみましょう。
１．PC（あるいはスマホ）上のWebブラウザでWebページにアクセスしようとする
２．ブラウザがネットワークを介してサーバーにデータを要求
３．サーバーが要求を受け取り、それに応じたデータを用意
４．サーバーがネットワークを介してクライアントにデータを送信
５．受け取ったデータを使ってWebブラウザが画面を表示
ものすごく簡略化していますが、Webページはこのような過程を経て表示されています。
1.3 HTMLでWebページを作ってみよう
Webブラウザで表示するページはHTML(HyperText Markup Language)という、ページの構造を定義するマークアップ言語で記述します。たとえば、画面上にHelloWorldとだけ表示させるHTMLコードは、次のとおりです。
<!DOCTYPE html>
<html>
<head>
</head>
<body>
Hello World
</body>
</html>このように、HTML文書はHTMLタグと呼ばれるもので囲って記述します。全体をhtmlタグで囲い、headタグにはメタデータ（Webページには表示されないけれどブラウザに読み込ませるもの）、そしてbodyタグの中にWebページに表示するものを記述します。
これをブラウザで開くと、次のように表示されます。
わかりやすいように最小の記述に留めましたが、次はもう少し実用的な雛形を見てみましょう。新しくフォルダを作成し、VSCodeのワークスペースに追加、index.htmlというファイルを用意し、
html:5と入力してTabキーを押すと、次のコードが生成されます。
HTMLの雛形
<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<body>
</body>
</html>先ほどよりも少し記述が多いHTML文書の雛形です。よくここで丸暗記しようとして詰まる初心者の方を見かけますが、これは定型文のようなものなので、丸暗記する必要はありません。
このようにツールに自動出力させてもいいですし、ググってコピペしても構いません。この時点ではhtml、head、bodyからなるHTML文書の構造と、タグで囲むというHTMLの記法さえ理解しておけばOKです。あとは必要になったときにググったり、ChatGPTに聞けばいいのです。
一応各行を説明すると、
HTMLの雛形の説明
<!DOCTYPE html><!-- これはHTML文書ですよという宣言 -->
<html lang="ja"><!-- HTML文書全体を囲むルート要素。lang属性はページの主要な言語を指定。 -->
<head>
<meta charset="UTF-8"><!-- 文書の文字エンコーディングを指定するメタ要素 -->
<meta http-equiv="X-UA-Compatible" content="IE=edge"><!-- Internet Explorerの互換表示モードを制御するメタ要素 -->
<meta name="viewport" content="width=device-width, initial-scale=1.0"><!-- ビューポートの設定を指定するメタ要素 -->
<title>Document</title><!-- ブラウザのタブに表示されるページのタイトル -->
</head>
<body>
ここにWebページに表示したいものを書く
</body>
</html>このようになっています。
1.4 HTMLの基本とよく使うタグ
HTMLの基本的な概念とWebページ制作でよく使われるタグについて、簡単に紹介しておきます。繰り返しますが、丸暗記する必要はありません。さっとどんなものがあるか目を通しておく程度で十分です。できれば先ほどの雛形を編集して一度使ってみると、理解しやすいです。あとは必要になるたびにググればいいですし、よく使うものは自然と覚えます。
| タグ | 説明 |
| <html> | HTMLドキュメント全体を囲むルート要素。このタグ内に全てのHTMLコードが含まれます。 |
| <head> | HTMLドキュメントのメタデータ部分を囲む要素。タイトル、スクリプト、スタイルシートなどのリンク、メタ情報がこのタグ内に記述されます。 |
| <body> | HTMLドキュメントのコンテンツ部分を囲む要素。テキスト、画像、リンクなど、ユーザーに表示される全てのコンテンツがこのタグ内に記述されます。 |
1.4.1 インライン要素とブロック要素
HTMLの要素は大きく「インライン要素」と「ブロック要素」のふたつに分けられます。ブロック要素は新しい行から始まり利用可能な全幅を占有するのに対し、インライン要素はテキストや他のインライン要素の間に挿入されます。
| タグ | 説明 |
| <div> | 汎用的なコンテナ要素。主にCSSやJavaScriptと一緒に使用して、ページ上の要素をグループ化したり、特定のスタイルを適用したりします。 |
| <h1>～<h6> | 見出しを作成するためのタグ。<h1>が最も大きく重要な見出しで、<h6>が最も小さい見出しを表します。 |
| <p> | 段落を定義する要素。<p>タグから閉じタグの</p>まででひとつの段落を定義しています。 |
| タグ | 説明 |
| <span> | 文章中の一部のテキストをマークアップするためのタグです。<div>と同様にスタイルを適用するために使われますが、<div>がブロックレベル要素であるのに対して、<span>はインライン要素です。 |
| <strong> | 重要性や真剣さを表すテキストを作成します。ブラウザはデフォルトで<strong>タグ内のテキストを太字で表示しますが、CSSを使用してスタイルを変更することも可能です。 |
| <em> | 強調を表すテキストを作成します。ブラウザはデフォルトで<em>タグ内のテキストを斜体で表示しますが、CSSを使用してスタイルを変更することも可能です。 |
インライン要素は他のインライン要素を含むことができますが、ブロック要素を含むことはできません。
たとえば次のように、ブロック要素であるpタグの中にインライン要素であるstrongタグを記述し、さらにその中にインライン要素であるemタグを含む構造は問題ありませんが、
<p>ここは <strong><em>強調された</em>太字</strong> のテキストです。</p>次のように、インライン要素であるspanタグの中にブロック要素であるdivタグを含む構造は推奨されません。
<span>
<div>これはブロック要素です。</div>
</span>現在は多くのブラウザがこういった記述は修正してレンダリングしてくれますが、推奨されない記法はページの見え方や動作が変わってしまったり、ページのSEOに悪影響を及ぼす可能性があります。
また、HTML5とCSS3の登場以降はインライン要素をブロック要素に、ブロック要素をインライン要素に変更することも可能になりましたが、あえて本来の性質と異なる使い方をする必要はほとんどありません。特段の必要がない限り、元々の性質に従った構造で記述しましょう。
1.4.2 箇条書き
HTMLでは、箇条書きは次のようにulタグとliタグを使って記述します。
箇条書き
<ul>
<li>りんご</li>
<li>ごりら</li>
<li>らっぱ</li>
</ul>
番号付きの箇条書きは、次のようにolタグとliタグを使って記述します。
番号付き箇条書き
<ol>
<li>りんご</li>
<li>ごりら</li>
<li>らっぱ</li>
</ol>
入れ子構造にして2階層目、3階層目を作りたいときは次のように記述します。
入れ子構造の箇条書き
<ul>
<li>くだもの</li>
<ul>
<li>りんご</li>
<li>ゴールデンデリシャス</li>
<li>ストロベリー</li>
</ul>
<li>どうぶつ</li>
<ul>
<li>ごりら</li>
<li>らくだ</li>
<ul>
<li>リャマ</li>
<li>アルパカ</li>
</ul>
<li>だちょう</li>
</ul>
<li>がっき</li>
<ul>
<li>らっぱ</li>
<li>ピアノ</li>
<li>ギター</li>
</ul>
</ul>
1.4.3 表
表は次のように、tableタグとtrタグ、thタグ、tdタグを使って記述します。
表
<table>
<tr>
<th>性</th>
<th>名</th>
<th>年齢</th>
</tr>
<tr>
<td>秋原</td>
<td>慎太郎</td>
<td>24</td>
</tr>
<tr>
<td>今井</td>
<td>豪</td>
<td>35</td>
</tr>
<tr>
<td>上田</td>
<td>勝義</td>
<td>56</td>
</tr>
</table>
1.4.4 ハイパーリンクと画像
ハイパーリンクと画像は、タグの後にhref属性やsrc属性を指定してURLを指定します。
実際に試してみましょう。まずは次のように、index.htmlと同じ階層にabout.htmlというhtmlファイルと、avatar.jpgという画像ファイルを用意します。
about.htmlの中身を次のように記述します。
about.html
<!DOCTYPE html>
<html lang="ja">
<head>
</head>
<body>
<div>
<h1>私たちについて</h1>
<p>オーニシと申します。富山でWebサイト、アプリなどの制作・運営をしています。</p>
<img src="avatar.jpg">
<h2>スキル</h2>
<ul>
<li>HTML</li>
<li>CSS</li>
<li>JavaScript</li>
</ul>
<h2>連絡先</h2>
<p>example@example.com</a></p>
<p><a href="index.html">トップページへ戻る</p>
</div>
</body>
</html>9行目が画像を表示するimgタグ、21行目がハイパーリンクを作成するaタグです。
このabout.htmlをブラウザで開くと、次のように表示されます。
1.4.5 フォーム
フォームは次のように記述します。
フォーム
<form action="/submit_form" method="post">
<label for="name">氏名：</label><br>
<input type="text" id="name" name="name"><br>
<label for="email">メールアドレス:</label><br>
<input type="email" id="email" name="email"><br>
<label for="message">本文：</label><br>
<textarea id="message" name="message"></textarea><br>
<button type="submit">送信</button>
</form>
ただし、HTMLだけではこのフォームを動作させることはできません。送信ボタンをクリックすると、次のようにエラーページが表示されます。
HTMLはあくまでWebページ用の文書を構造的に記述するためのマークアップ言語であり、機能を作るための記述は基本的に持ち合わせていません。
1.4.6 セマンティックなHTMLタグ
これでWebページ制作でよく使われるタグは押さえましたが、最後にセマンティックなHTMLタグについても知っておきましょう。セマンティック（セマンティクス）は「意味や目的を持たせる」という意味で、ウェブページのセマンティック（意味論的）構造を強化する役割を果たします。
これらはdivタグのようなブロックレベルのコンテナ要素で、ページ内の特定のコンテンツを明示的に区分けすることで、検索エンジンやスクリーンリーダーがそのページをより理解しやすくします。
| タグ | 説明 |
| <header> | ページやセクションのヘッダーを定義します。一般的にロゴ、サイトのタイトル、ナビゲーション等が含まれます。 |
| <footer> | ページやセクションのフッターを定義します。通常、著作権情報、リンク、連絡先情報等が含まれます。 |
| <article> | ページ内で独立して配布や再利用が可能なエリアを定義します。たとえばブログ投稿、新聞の記事、フォーラムの投稿などが該当します。 |
| <section> | ドキュメント内のスタンドアロンのセクションを定義します。各セクションは通常、ユニークなヘッダーとIDを持ちます。 |