はじめに
本書を手に取っていただき、ありがとうございます。あなたが今このページを開いているということは、Webアプリケーション開発に興味を持ち、一歩を踏み出そうとしているのだと思います。もしかすると、「プログラミングは初めてで不安だ」と感じているかもしれません。あるいは、「少しだけコードを書いたことはあるけれど、一から自分でアプリを作りたい」と考えているかもしれません。どちらの気持ちも、まったく自然なものです。
私自身、初めてWebアプリに触れたときは、目の前にあるブラウザの画面がどのようにして表示されているのか、まるで魔法のように感じたのを覚えています。HTMLのタグを打ち込み、CSSで色を変え、JavaScriptでクリックに反応するページを作ったときの感動は、今でも鮮明です。その後、PythonとFlaskというフレームワークに出会い、自分だけのブログやツールを作れるようになったとき、開発の面白さに本格的にのめり込みました。
しかし、その道のりは決して平坦ではありませんでした。情報はネット上に溢れているものの、「次は何を学べばいいのか」「この知識はどこで使うのか」という迷いが常につきまといました。断片的なチュートリアルをいくつもこなしても、全体像が掴めず、自分だけでアプリを完成させることができない。そんなもどかしさを何度も味わいました。
本書は、そのような経験から生まれました。「ゼロから始めて、一つひとつ積み上げながら、最終的に実用的なWebアプリを完成させる」という一貫した流れを提供したい。これが本書執筆の最大の動機です。各章は、前の章で学んだ知識を土台として、新しい概念を少しずつ追加していくように設計されています。まるでブロックを積み上げるように、着実にスキルを身につけられる構成を目指しました。
本書で得られるもの
本書を読み終えたとき、あなたは次のことができるようになっています。
まず、Webアプリの基本的なアーキテクチャを理解しています。クライアントとサーバーがどのように通信し、HTMLやCSS、JavaScriptがそれぞれどのような役割を果たしているのかを説明できます。次に、自分でアイデアを形にするためのツールと知識を持っています。フロントエンド（見た目と動き）からバックエンド（データ処理と保存）まで、一貫して開発することができます。そして、実際に動作するブログアプリを手に入れています。ユーザー登録、投稿の作成・編集・削除、コメント、検索といった、多くのWebサイトで使われている機能を実装したアプリです。
さらに重要なのは、本書で学んだことが「基礎」として、今後の学習に活かせる点です。本書では、特定のフレームワークや言語に過度に依存しないよう、概念を丁寧に解説しています。そのため、DjangoやReact、Vue.jsなど、他の技術を学ぶ際にも、本書で培った知識が役立つはずです。
本書の構成と読み進め方
本書は全20章から構成されています。大きく分けて、前半（第1章から第6章）ではフロントエンドの基礎を学び、中盤（第7章から第14章）ではバックエンドの基礎とデータベース操作を習得し、後半（第15章から第20章）ではそれらを統合して本格的なアプリを完成させます。
初心者の方には、第1章から順番に進めることを強くお勧めします。各章は前の章で学んだ知識を前提としているため、飛ばしてしまうと理解が難しくなる可能性があります。ただし、すでにHTMLやCSSにある程度慣れている方は、第5章のJavaScriptから読み始めてもよいでしょう。Pythonの経験がある方は、第9章のFlaskから直接入ることも可能です。ご自身のレベルに合わせて、柔軟に読み進めてください。
各章の最後には、その章で学んだ内容を確認するための練習問題や、実際に手を動かすための課題を用意しています。これらの課題に取り組むことで、知識が確実に自分のものになります。最初は時間がかかるかもしれませんが、焦らずに一つひとつクリアしていってください。エラーに遭遇することもあるでしょう。しかし、そのエラーを解決する過程こそが、最も学びの多い瞬間です。ぜひ、粘り強く取り組んでみてください。
読者へのメッセージ
最後に、読者の皆さんに伝えたいことがあります。それは、「完璧を目指さないでほしい」ということです。初めてコードを書くとき、理解できない箇所やうまく動かない部分にぶつかるのは当然です。そんなときは、一歩下がって、これまで学んだことを振り返ってみてください。そして、わからなければ章を読み返すか、インターネットで検索してみてください。プログラミングの世界では、調べることも立派なスキルの一つです。
また、本書のサンプルコードを実際に打ち込むことを強くお勧めします。コピー＆ペーストではなく、自分の手で一文字ずつ入力することで、構文の感覚が身につき、ミスにも気づきやすくなります。最初は時間がかかるかもしれませんが、その時間は決して無駄にはなりません。
本書を通じて、Webアプリ開発の楽しさを味わい、自分だけのアプリを作る喜びを感じていただければ、これに勝る喜びはありません。あなたの開発者としての第一歩を、心から応援しています。さあ、一緒に始めましょう。
第1章 Webアプリ開発の世界へようこそ
あなたがこの本を手に取ったということは、おそらく「自分でもWebアプリを作ってみたい」という思いがあるからでしょう。あるいは、何か面白いサービスを思いついたけれど、プログラミングの知識がなくて諦めかけている、そんな状況かもしれません。あるいは単に、新しいスキルを身につけたいという純粋な好奇心からかもしれません。どちらにしても、あなたは今、新しい世界への扉を開こうとしています。
かつて私自身も、プログラミングとは無縁の世界で働いていました。画面の向こう側で動いている仕組みにただ感心するだけの日々。ある日、友人が趣味で作った簡単なタスク管理アプリを見せてもらったときの衝撃は今でも忘れられません。「たった一人で、こんなものが作れるのか」と。その日から私は、コードの書き方を独学で学び始めました。最初は何もかもが難しく、用語の意味さえ理解できないことばかりでした。しかし、一歩一歩進むうちに、やがて自分でも小さなアプリを動かせるようになりました。
本書は、まさにその第一歩を踏み出すあなたのために書かれています。難しい専門用語に頼らず、実際に手を動かしながら学べるように設計しました。特にこの第1章では、Webアプリ開発の全体像をつかみ、開発環境を整え、実際に最初のページを表示させるところまでを体験します。何も恐れる必要はありません。最初は誰でも初心者なのですから。
この章で学ぶことのロードマップ
まず、この章で何を達成するのか、全体の流れを確認しましょう。私たちは以下のステップを順に進みます。
- Webアプリの仕組みをざっくり理解する（難しそうに感じるかもしれませんが、イメージだけつかめばOKです）
- 開発に必要なツールをインストールする（VS CodeエディタとPython）
- 最初のHTMLファイルを作成し、ブラウザで表示する（これが本章の最大のゴールです）
- Pythonの簡易サーバーを使って同じページを表示する（将来のバックエンド開発への第一歩）
このロードマップを頭に入れた上で、さっそく始めましょう。わからない言葉が出てきても、今は気にしすぎる必要はありません。後からじっくり理解すれば大丈夫です。
Webアプリの仕組みをざっくり理解しよう（難しい用語は後回しでOK）
そもそも、私たちが日常的に使っているWebアプリとは、どのようにして動いているのでしょうか。あなたが今この文章を読んでいるのも、ブラウザと呼ばれるソフトウェア（ChromeやFirefox、Safariなど）を通じてWebページを表示しているからです。
ここでは、細かい専門用語は一旦脇に置いて、イメージだけつかみましょう。Webアプリは大きく分けて、「フロントエンド」と「バックエンド」という二つの役割でできています。
- フロントエンド：ブラウザ上で動く部分。あなたが今見ている文字や色、ボタンの配置などはすべてフロントエンドの仕事です。主にHTML（文章の構造を作る）、CSS（見た目を整える）、JavaScript（動きをつける）という3つの言語で作られます。
- バックエンド：インターネットのどこかにあるサーバー（データを保存したり処理を実行するコンピュータ）で動く部分。あなたがブログに記事を投稿したとき、その内容をデータベースに保存するのはバックエンドの仕事です。本書ではPythonという言語を使ってバックエンドを構築します。
このように、フロントエンドとバックエンドが連携して、一つのWebアプリが成り立っています。本書で最終的に作るブログアプリも、フロントエンド（HTML/CSS/JavaScript）とバックエンド（Python）の両方を使って構築します。
さて、ここで「クライアントとサーバーの通信」について、レストランに例えて説明します。あなた（クライアント）がレストランに入り、ウェイターに対して「ハンバーガーをください」と注文します（リクエスト）。すると厨房（サーバー）がハンバーガーを調理し、ウェイターがあなたのテーブルに運びます（レスポンス）。あなたはそのハンバーガーを食べて満足するわけです。Webアプリもこれと同じで、ブラウザ（あなた）がサーバー（厨房）に「このページを見せてください」とリクエストを送り、サーバーがそのリクエストに応じてHTMLデータを返して表示しています。
今はこれだけで十分です。HTTPメソッドやステータスコードといった難しい用語は、実際にコードを書いて動かしながら、必要になったときに少しずつ覚えていきましょう。
開発環境を整えよう
理論のイメージがつかめたところで、いよいよ実際に手を動かす準備を始めましょう。開発環境を整えることは、プログラミング学習の最初の関門ですが、このステップを丁寧に進めることで後々の作業がぐっと楽になります。
#### エディタの選び方（VS Codeのインストール）
コードを書くためには、テキストエディタ（コードエディタ）が必要です。メモ帳でもコードは書けますが、専用のエディタを使うと格段に作業効率が上がります。なぜなら、コードの色分け（シンタックスハイライト）や自動補完、エラーチェックなどの便利な機能が備わっているからです。
本書では、Visual Studio Code（通称VS Code）を推奨します。これはMicrosoftが開発している無料のコードエディタで、世界中の開発者に広く使われています。VS Codeは軽量でありながら拡張機能が豊富で、HTML、CSS、JavaScript、Pythonなど様々な言語に対応しています。初めての方でも直感的に操作できるインターフェースが特徴です。
インストールは簡単です。まず、お使いのコンピュータ（Windows、Mac、Linuxのいずれでも構いません）でブラウザを開き、検索エンジンで「Visual Studio Code ダウンロード」と検索してください。公式サイト（code.visualstudio.com）にアクセスし、お使いのOSに合ったインストーラをダウンロードします。ダウンロードが完了したら、インストーラを実行し、画面の指示に従って進めてください。基本的にはデフォルト設定のままで問題ありません。インストールが完了すると、VS Codeが起動するはずです。
VS Codeを起動したら、まず左側のアクティビティバーにある拡張機能アイコン（四角が四つ並んだようなアイコン）をクリックしてください。すると拡張機能のマーケットプレイスが表示されます。ここで「Japanese Language Pack for Visual Studio Code」と検索し、インストールするとメニューが日本語化されます。これでコードを書く準備が整いました。
#### Pythonのインストール（まずはここだけやればOK）
本書では、フロントエンド（HTML/CSS/JavaScript）を学んだ後、バックエンドを構築するためにPythonというプログラミング言語を使います。Pythonは初心者に優しい文法と豊富なライブラリを持ち、Webアプリ開発にも広く使われています。まずはPythonをコンピュータにインストールしましょう。
Pythonの公式サイト（python.org）にアクセスし、「Downloads」メニューからお使いのOSに合ったインストーラをダウンロードします。Windowsの場合は、「Download Python 3.x.x」（xの部分はバージョン番号）というボタンをクリックしてください。インストーラを実行する際に、「Add Python to PATH」というチェックボックスに必ずチェックを入れてください。これを忘れると、後でコマンドプロンプトからPythonを呼び出すときに面倒なことになります。それ以外の設定はデフォルトのままで問題ありません。
インストールが完了したら、正しくインストールされたか確認してみましょう。Windowsの場合は、スタートメニューから「コマンドプロンプト」を開くか、PowerShellを起動します。Macの場合は「ターミナル」を開いてください。そして、次のコマンドを入力し、Enterキーを押します。
python --versionもしくは
python3 --versionバージョン番号（たとえば「Python 3.12.0」など）が表示されれば、インストール成功です。もし「pythonは内部コマンドまたは外部コマンドとして認識されていません」というエラーが表示された場合は、PATHの設定がうまくいっていない可能性があります。その場合は再度インストーラを実行し、「Modify」を選んで「Add Pyth