Webアプリって何？　デイトラJavaコース Webアプリ開発編 Day1「Webアプリケーションとは」

ハック

こんにちは！運営者のハックです！

今回からデイトラJavaコース最後の講義であるWebアプリ開発編に挑戦します！

Day１の今回は「Webアプリケーションとは」について学習しましたので、紹介します。

Webアプリケーションとは
1. Web アプリケーションでよく使う言葉
まとめ　ITパスポートとWeb制作コースで学習した内容の復習回

Webアプリケーションとは

Webアプリケーションは、インターネットを通じて利用することができるプログラムのことで、極端に言うと「ブラウザ上で利用できるアプリケーション」です。クライアント（利用者）がリクエスト（要求）を送信し、サーバー（提供者）がそのリクエストを受け取り、処理結果をレスポンス（応答）として返します。この仕組みにより、メールサービスやSNS、オンラインショッピングなどの機能が提供されます。

引用：Webアプリケーションについて知ろう！ | プログラミングの入門なら基礎から学べるProgate[プロゲート]

また、求められる技術としては「ブラウザの仕様」「通信」「サーバーの仕様」「プログラミング」「HTML や CSS などの画面描画」等が挙げられます。

引用：Webアプリケーションについて知ろう！ | プログラミングの入門なら基礎から学べるProgate[プロゲート]

Web アプリケーションを開発するには、RubyやJava等の「プログラミング言語」だけでなく、「画面を表示させるHTML/CSS」「通信を実現するTCP/IPの基礎」「ブラウザの挙動」等も理解する必要あります。ただ、全て一人で完璧に習得する必要はなく、多くの企業はそれぞれのプロフェッショナルが集まって開発するのが一般的です。

ねこ奈

画像の引用元であるProgateはこのブログの最初の方で紹介している記事があるから、興味があったらリンク先から覗いてみてほしいのにゃ。

Web アプリケーションでよく使う言葉

Web アプリケーションで代表的な用語とその意味について解説していきます。

リクエストとレスポンス

リクエストとレスポンスは、インターネット上で情報をやり取りするための仕組みです。

リクエスト

リクエストは、クライアント（利用者）がサーバー（提供者）に対して何かを求める行為です。リクエスト自体は「サーバーなどの提供者」に対して送るもので、Web アプリケーションに限ったではありません。Web アプリケーションという前提の場合は「HTTP Request」を指します。

引用：HTTP リクエスト、HTTP レスポンス、コンテキスト、ヘッダー: パート III。| Rohit Patil 著 | Medium

HTTP Requestとは、クライアント（例えば、ウェブブラウザ）がサーバーに対して行う情報の要求です。HTTP（HyperText Transfer Protocol）というプロトコルを使って行われます。

HTTPリクエストには、ユーザーが入力した情報（例えばユーザー登録情報）が文字列として含まれます。Webアプリケーションはこのリクエストを受け取り、処理方法を決定します。HTTPリクエストを送信するのはブラウザの役割であり、Webアプリケーションは受け取ったデータをどう扱うかを考えれば良いのです。通信はHTTPの取り決めに従ったフォーマットで行われ、これにより送信側と受信側の間で齟齬なく通信が可能となります。

最近よく利用される仕組みにAPI(Web API)があります。API（Web API）は、Web上で提供されるアプリケーションプログラミングインターフェースのことです。リクエストとレスポンスの形式やルールをアプリケーション提供者が定義しておくことで、利用者はアプリケーションの動作を詳しく知らなくても、必要なデータをサーバーから取得したり、サーバーにデータを送ったりできます。APIのやり取りは主にJSONやXML形式で行われ、特にWebアプリケーションではJSONが一般的です。APIは「叩く」とも言われ、簡単に利用できます。

レスポンス

レスポンスは、サーバーがクライアントに返す答えです。サーバーはリクエストを受け取ると、それに応じた情報を処理し、結果をクライアントに送り返します。
Web アプリケーションのレスポンスではリクエストの時と同様に「HTTP Response」を指します。

引用：HTTP リクエスト、HTTP レスポンス、コンテキスト、ヘッダー: パート III。| Rohit Patil 著 | Medium

HTTP Requestとは、クライアント（利用者）がサーバー（提供者）にデータやサービスを要求するために送るメッセージのことです。Webブラウザで特定のウェブページを開くときや、フォームに入力したデータを送信するときに使用されます。

ブラウザを介した HTTP Request を受け、サーバーは HTTP Response を返す、レスポンスを元にブラウザが画面表示する、という形です。

引用：APサーバとは、Web3層構造とは

Web アプリケーションを提供するサーバーの中にはアプリケーションサーバーと呼ばれるものが存在します。アプリケーションサーバーは、クライアントから受け取ったリクエストをデータベース命令に変換し、その結果をブラウザが処理できるレスポンスとして返す役割を持ちます。APサーバとも呼ばれ、プログラミング言語で構築されたアプリを実行して動的コンテンツを生成します。
また、プログラマーが扱いやすい形に情報を変換するフレームワークの機能も提供します。代表的なアプリケーションサーバーにはTomcat（Java）、Apache（PHP）、Unicorn（Ruby）があります。

通信

ブラウザからWeb アプリケーションを動かす場合は「URL(Uniform Resource Locator)」が必要になります。これはサーバー(提供者)がどこにいるかを指し示すもので「URI(Uniform ResourceIdentifier)」の一部です。

このイメージ図のようにURIには、URLとURNが存在しており、URLとURNの総称のことをURIといいます。
引用：URIとは – ITを分かりやすく解説

ブラウザでURLを入力する行為もリクエストの一種で、それに対してサーバーはレスポンスを返します。このリクエストとレスポンスのやり取りを「通信」と呼び、これによりWebページが表示されます。Webアプリケーションはサーバー側で動的な処理を行い、例えばTwitterやFacebookが該当します。
一方、リロードしても同じ情報が表示されるWebページは「Webサイト」と呼ばれます。通信はHTTPプロトコルに従って行われ、データ形式としてはJSONやXMLがよく使用されます。URLで特定されたWebサーバに対してリクエストを送り、レスポンスを受け取ることでWebページが表示されます。

ねこ奈

今回のようなインターネットや通信の仕組みはＩＴパスポート試験や基本情報技術者試験の内容で網羅的に学習できるのにゃ。

HTTP メソッド

HTTP メソッドは、リクエストを送る際に行いたい処理を伝える時に使います。メソッドは「GET」「POST」「PATCH」「PUT」「DELETE」がありますが、主に利用するメソッドは「GET」「POST」です。

引用：【図解/初心者向け】httpフォーマットとメソッド/ステータスコード一覧 | SEの道標

GETはデータの取得に使用し、URLにクエリパラメータが含まれます。
POSTはデータの送信に使用し、リクエストボディにデータを含めます。

HTML/CSS/JS

HTML

HTML（HyperText Markup Language）は、Webページの骨組みを作るための言語です。Webページを作るための設計図みたいなもので、見出しや段落、画像の場所を決めるために使います。プログラミング言語として扱われる事はなく、コーディングと呼ばれます。

<!DOCTYPE html>
<html>
<head>
    <title>Sample Page</title>
</head>
<body>
    <h1>Welcome to My Website</h1>
    <p>This is a simple HTML page.</p>
</body>
</html>

CSS

特徴: CSS（Cascading Style Sheets）は、Webページの見た目を装飾するための言語です。Webページにおしゃれな服を着せるようなもので、色を変えたり、文字の大きさを変えたりして見た目を良くします。

body {
    background-color: lightblue;
}
h1 {
    color: navy;
    font-family: Arial, sans-serif;
}
p {
    font-size: 16px;
    color: darkgray;
}

JavaScript

JavaScriptは、Webページに動きを付けるためのプログラミング言語です。Webページに魔法をかけて動かすための道具で、ボタンを押したときにメッセージを表示したり、画像を変えたりします。なお、当時注目を浴びていたJavaを冠した命名をしただけであり、Javaとは無関係なので注意。

<html>
<head>
    <title>JavaScript Example</title>
    <script>
        function showMessage() {
            alert("Hello, World!");
        }
    </script>
</head>
<body>
    <button onclick="showMessage()">Click Me!</button>
</body>
</html>

ねこ奈

Web制作コースも受講しているから、HTMLとかCSSの説明って今更感がすごいのにゃ。