この記事を書くきっかけ
DjangoでWebアプリケーション（Webアプリ）を一つ作成した初心者です。
最初は、「基本情報技術者試験に合格しているし、Pythonの基本も勉強したので、書籍やネットを参考にすればWebアプリを作れるだろう」と考えていました。
完成したときはとても嬉しかったのを覚えていますが、今振り返ると、Webアプリの全体像をしっかり理解していれば、もっと早く効率的に作成できたと思います。
しかし、当時は、VSCodeも触ったことがなく、Gitも知らず、自分でソースコードを一から書く経験もありませんでした。そんな状態でWebアプリを作り始めたので、わからない用語や概念を一つひとつ調べていては、作業のモチベーションを保つのが難しかったかもしれません。
ただ、わからない用語や概念を調べずにすっ飛ばしてしまったため、Webアプリが完成しても、「設計図通りに作ったけど、これで本当に合っているのか？」という疑問が残ってしまいました。Webアプリの全体像が見えていないので、不安でいっぱいです。せっかく完成したのにモヤモヤするばかりでした。
それでも、経験がほとんどない状態でWebアプリを作成したおかげで、「あのときの作業は何だったのだろう？」という疑問がたくさん出てきて、勉強の機会を得ることができました。こうして今、初歩の初歩からWebアプリとは何かに向き合っています。
参考にした書籍
動かして学ぶ! Python Django開発入門 第2版
Webアプリとは何か
Webアプリケーションとは、常に同じHTMLを返すWebサイトと異なり、ユーザーごとに表示内容を変えるなど動的に変化するHTMLも返すWebサイトのことです。みんなに同じ内容が表示されるWebサイトより、その人に合わせた内容を表示してくれるWebアプリの方が便利な気がします。
- WebブラウザからURLを入力してEnterを押すと、リクエスト情報がWebアプリに送信されます（リクエスト）
- ブラウザから送信されたリクエストがWebアプリに届くと、リクエスト情報に基づいて要求されているリソース（HTMLやCSSなど）をデータベースなどと連携して取得し、ブラウザに返します（レスポンス）
リクエストメッセージの形式
- リクエストライン：サーバで行ってほしい処理を指定。リクエストメソッドが記述されている。
- ヘッダー：リクエストに関連する情報を記述
- メッセージボディ：送信するデータがあれば、ここに記述
| リクエストメソッド | 内容 |
|---|---|
| GET | HTMLなどのリソースを要求する |
| POST | WEBアプリにキーと値をセットしてデータを渡す |
| PUT | リソースの更新を要求する |
| DELETE | リソースの削除を要求する |
レスポンスのリクエストメッセージ
- ステータスライン：サーバの処理結果を記述。ステータスコードが記述されている。
- ヘッダー：レスポンスに関連する情報を記述
- メッセージボディ：サーバから出力するデータ
| ステータスコード | 説明 | 内容 |
|---|---|---|
| 200 | OK | 成功 |
| 301 | Moved Permenently | 恒久的にページが移動している |
| 302 | Found | 一時的にページが移動している |
| 403 | Forbidden | アクセス権限がない |
| 404 | Not Found | リソースが存在しない |
| 500 | Internal Server Error | サーバー内でエラーが発生している |
Webアプリはどんな処理をするのか
処理１：ブラウザからWebアプリに処理をリクエストする
処理２：Webサーバーで処理する
- 静的コンテンツの要求であれば、処理４のようにWebサーバーからレスポンスデータをブラウザに返す
- 動的に作らなければならないコンテンツならAPサーバーに処理を依頼する。
処理３：APサーバーで処理する
- 必要であればデータベースからデータを取得し、レスポンスデータを作成する
- レスポンスデータをWebサーバーに返す
処理４：Webサーバーからレスポンスデータをブラウザに返す
Webアプリはどうやって構築するのか
DjangoでWebアプリを作成したときに利用したソフトウェアやサービスです。その機能と役割を一つひとつ見ていきたいと思います。
Python
Pythonとは何か
Pythonは、シンプルで読みやすいコードが特徴のプログラミング言語です。多くの用途に対応できる汎用プログラミング言語であり、特にコードの記述が簡潔であるため、初心者にも学びやすいです。
Webアプリではどんな役割を果たすか
Pythonは、Webアプリケーションのロジックやデータ処理を行うために使用されます。例えば、ユーザーの入力を処理したり、データベースと連携して情報を取得・保存したりする役割を担います。
Django
Djangoとは何か
Djangoは、Pythonで開発されたWebフレームワークです。フレームワークとは、Webアプリを効率的に開発するための部品や機能が揃ったツールセットのことです。Webで必要となる機能を網羅的に備えています。Djangoは、認証機能やメール配信など、Webアプリでよく使われる機能を最初から備えているため、開発の効率を上げてくれます。また、セキュリティなどの非機能要件に関わる機能もデフォルトで提供されています。
Webアプリではどんな役割を果たすか
Djangoは、Webアプリケーションの開発を簡単にするために、ユーザー認証やデータベース管理、メール送信などの機能を提供します。多様な機能を備えているため、開発者は基本的な機能を一から作る必要がなくなり、迅速に開発を進められます。
VSCode
VSCodeとは何か
VSCode（Visual Studio Code）は、Microsoftが提供する無料の統合開発環境（IDE）です。コードを書くためのエディタ機能を中心に、デバッグやバージョン管理などの開発に必要な機能が統合されています。
Webアプリではどんな役割を果たすか
VSCodeは、Webアプリケーションのコードを書く際に使用されます。効率的にコードを記述し、エラーをチェックし、デバッグを行うためのツールとして重要です。
BootStrap
Bootstrapとは何か
Bootstrapは、Twitter社が開発したCSSフレームワークです。CSSとは、Webページの見た目を指定する言語です。Bootstrapを使うことで、簡単に美しいデザインを作成することができます。
Webアプリではどんな役割を果たすか
Bootstrapは、Webアプリケーションのユーザーインターフェース（UI）をデザインするために使用されます。レスポンシブデザインを簡単に実現でき、異なるデバイスや画面サイズに適応する見た目を作ることができます。
PostgreSQL
PostgreSQLとは何か
PostgreSQLは、オープンソースのリレーショナルデータベース管理システム（RDBMS）です。データを表形式で管理し、SQLという言語を使ってデータを操作します。
Webアプリではどんな役割を果たすか
PostgreSQLは、Webアプリケーションで扱うデータを保存・管理するために使用されます。例えば、ユーザー情報や投稿内容など、アプリケーションで必要なデータをデータベースに保存し、必要に応じてそれらのデータを取り出して利用します。
Git/SourceTree/GitHub
Gitとは何か
Gitはバージョン管理システムの一つです。ファイルの状態を記録するサービスで、操作はコマンドラインで行います。コードの変更を追跡し、複数の開発者が協力して作業する際に役立ちます。
SourceTreeとは何か
SourceTreeはGitをGUI（マウスなどのポインティングデバイスを用いてコンピューターへの命令を、ユーザーが視覚的に捉えてできるようにするためのインタフェース）に操作できるソフトウェアです。
GitHubとは何か
GitHubは、リモートリポジトリ（インターネット上でソースコードなどを管理）を提供するサービスです。
Webアプリではどんな役割を果たすか
Gitは、コードのバージョン管理を行うために使用されます。SourceTreeは、その操作を簡単にするためのツールです。GitHubは、プロジェクトのコードを共有・管理するためのプラットフォームとして利用されます。これらは主に、チームでの開発やコードのバックアップを簡単に行うために使用します。
AWS
AWSとは何か
AWS（Amazon Web Services）は、Amazonが提供するクラウドコンピューティングサービスの総称です。サーバーやストレージ、データベースなどをインターネット経由で利用できるサービスです。AWSは必要に応じてリソースを増減できるのが特徴です。
Webアプリではどんな役割を果たすか
AWSは、Webアプリケーションのホスティングやデータベースの運用、ストレージの管理などに使用されます。物理的なサーバーを用意する必要がなく、柔軟なリソース管理が可能です。今回のWebアプリでは、EC2（サーバー）、AmazonSES（メール機能）を使用しました。
Nginx/Gunicorn
Nginxとは何か
Nginx（エンジンエックス）は、Webサーバーです。静的コンテンツの配信やリバースプロキシとして利用されます。
Gunicornとは何か
Gunicorn（Green Unicorn）は、Pythonで書かれたWSGI（Web Server Gateway Interface、ウィズギー）サーバーです。WSGIは、PythonのWebアプリケーションとWebサーバーを連携させるための標準仕様です。Gunicornを使うことでNginxとDjangoを繋ぐことができます。
Nginxは静的ファイルを効率よく配信し、Gunicornは動的なリクエストを処理します。
Webアプリではどんな役割を果たすか
Nginxは、クライアントからのリクエストを受け取り、適切なサーバーに振り分ける役割を担います。Gunicornは、DjangoのようなPythonのWebアプリケーションを実行し、Nginxからのリクエストを処理します。両者を組み合わせることで、高性能なWebアプリケーションの運用が可能です。
Let's Encrypt
Let's Encryptとは何か
Let's Encryptは、無料でSSL/TLS証明書を提供するプロジェクトです。SSL/TLS証明書は、Webサイトとユーザー間の通信を暗号化するために必要です。
Webアプリではどんな役割を果たすか
Let's Encryptは、Webアプリケーションの通信を暗号化し、セキュリティを確保するために使用されます。HTTPS通信を実現するためにSSL/TLS証明書を発行し、自動で更新する機能も提供しています。
CloudFlare
CloudFlareとは何か
CloudFlareは、Webアプリケーションのパフォーマンス向上やセキュリティ強化を目的としたCDN（Content Delivery Network）＋ DNS管理サービスです。
Webアプリではどんな役割を果たすか
- 世界中に分散したサーバーを使って（CDN）、ユーザーに最も近い場所からコンテンツを配信します。そのおかげで、表示が速くなります。（高速化）
- 悪意ある攻撃（例えばDDoS攻撃）からWebサイトを守り、サイトのダウンを防いでくれます（セキュリティ強化）
- DNS管理を簡単にして、ユーザーがどこからアクセスしても最適なサーバーに接続できるようにしてくれます。DNSとはインターネット上でWebサイトにアクセスするための住所のようなものです（DNS管理）
多くのサービスに頼ってWebアプリは動くんですね。自分の利用したサービスがWebアプリでどの位置にいて、どんな役割を果たしているのかがうっすら見えてきました。
上記の説明を簡単にまとめました
| サービス | 機能 | 役割 |
|---|---|---|
| Python | プログラミング言語 | Webアプリのロジックやデータ処理 |
| Django | Webフレームワーク | ユーザー認証やデータベース管理などの機能提供 |
| VSCode | 統合開発環境 | コードの記述、デバッグ、バージョン管理 |
| Bootstrap | CSSフレームワーク | WebアプリのUIデザイン、レスポンシブデザイン |
| PostgreSQL | リレーショナルデータベース | データの保存・管理 |
| Git | バージョン管理システム | コードの変更履歴管理 |
| SourceTree | GitのGUIツール | 視覚的にGitを操作 |
| GitHub | リモートリポジトリサービス | コードの共有・管理 |
| AWS | クラウドサービス | Webアプリのホスティング、データベース運用 |
| Nginx | Webサーバー | 静的コンテンツ配信、リバースプロキシ |
| Gunicorn | WSGIサーバー | Djangoのリクエスト処理 |
| Let's Encrypt | SSL/TLS証明書プロジェクト | 通信の暗号化、セキュリティ確保 |
| CloudFlare | CDNおよびDNS管理サービス | コンテンツ高速配信、DDoS攻撃防御、DNS管理 |
もちろん、同じ役割を果たす別のサービスも多く存在します。これは、あくまで私が作成したWebアプリで使用したサービスに限っています。
まとめ
まずは、Webアプリとは何かについて、簡単にまとめてみました。自分で作成したWebアプリがどう動いているのか、何からできているのかを知る良い機会になりました。
「こういう部品（サービス）で作成していたんだ」とわかっただけで、細かいところまではまだまだ知らないことが多いですが、これからも勉強しつつ実践していければと思います。