1
0

Delete article

Deleted articles cannot be recovered.

Draft of this article would be also deleted.

Are you sure you want to delete this article?

More than 1 year has passed since last update.

Webアプリケーションの仕組み

Last updated at Posted at 2022-02-18

覚えておきたい専門用語をまとめました。
Udemyの講座を見ながら取ったメモのため、勉強用にこちらに置きます。
著作権違反などがありましたら、削除いたします。

web アプリケーション
処理はインターネット上のサーバー、画面はHTMLで作成、ブラウザで表示。

デスクトップアプリケーション:
ソフトを買って、パソコンにインストールすればおしまい。

サーバーサイド:リクエストに対してレスポンスを返す

インターネット:
世界中のコンピューターを相互に接続し、通信できるようにしたネットワーク網です。

インターネットの歴史:
電信:電気のオン、オフによってメッセージをやり取りする仕組みです。

バケツリレー方式:目的地により近い隣の局に転送していく。

メッセージブロック:データを丸ごとそのまま送るのではなく、細かく分けて送る。(現在のパケット交換方式)

メッセージを送る時に、メッセージの本文とは別に、目的地やメッセージの通し番号もセットで送る。(ヘッダも同じ)
どこのルートを通ってもOK、目的地に届いて、番号を元に再構成できれば良しとする。

HTML:webページを記述するためのマークアップ言語です。

マークアップ言語:<>で囲むことで意味を持たせる。

Hypet Text:特別な機能を持ったテキストデータ。他のwebページのリンクや図表を載せる機能。

Webシステムの土台となる技術:クライアントサーバー、URL、HTTP

クライアントサーバ:クライアントとサーバに役割分担をして運用する仕組みです。

クライアント:サービスを利用する側。
サーバ:サービスを提供する側。
webサーバの例:ApacheやIIS、nginxなどが有名なwebサーバソフトウェアです。

webシステムはリクエストとレスポンスの連続で成り立つ。

レスポンス:HTMLファイルを返す。
クライアントサーバ:ブラウザでHTMLファイルを表示させる。

役割分担:
サーバ:データを送る専門。
クライアント:データを見る専門。

クライアントサーバ:クライアントとサーバに役割分担して、運用する仕組みのこと。
処理を分散させるため、クラサバが主流に。

リクエストがWebページに表示する流れ:
1 WebクライアントがWebサーバにRequestメッセージを送信
2 そのメッセージをもとに、WebサーバがWebクライアントから要求されたWebページを用意(HTMLファイルを生成)
3 WebサーバがWebクライアントにResponseメッセージを送信し、Webページが表示
ここで送受信しているメッセージはhttpと言うプロトコルでやり取りを行なっています

単なるWebサーバだけでは、静的なWebページを表示させることしかできず、動的なWebページを表示させるためには、処理を実行させるためのSWが必要です。
クライアントがWebサーバに送るrequestメッセージとして、GETとPOSTの2種類あります。これをうまく使い分けて動的なWebページを実現させていく必要があります。

動的なWebページを実現するために何らかの処理(プログラム)が必要で、その処理を実行させるためにプログラムを実行するソフトウェアが必要になってきます。
ここでの何らかの処理というのを、C言語やPHPやJavaなどのプログラミング言語で実装していくことになります。

webサーバ上の動的処理(プログラムの実行)の流れは以下のようになります。
1 webクライアントがWebサーバにRequestメッセージを送信
2 そのメッセージをもとに、Webサーバに組み込まれたモジュールでアプリケーションを実行
3 実行されたアプリケーションがHTMLテキストを生成
4 webサーバーがWebクライアントにreponseメッセージを送信し、Webページが表示される

アプリケーションサーバ:アプリケーションを実行するためのソフトウェアです。
Javaのアプリケーションサーバで有名なのは、TomcatやJetty, GlassFishです。

Webサーバとアプリケーションサーバがやり取りできるようにするために何かしらのプロトコルを必要とします。動的なWebページを実現するための流れは以下です。
1 WebクライアントがWebサーバへhttpプロトコルでrequestメッセージを送信
2 Webサーバがアプリケーションサーバ(Tomcat)へajp13プロトコルでRequestメッセージを送信
3 そのメッセージをもとにアプリケーションサーバがアプリケーションを実行
4 実行されたアプリケーションがHTMLテキストを生成
5 アプリケーションサーバーがWebサーバへajp13プロトコルでResponseメッセージを送信
6 WebサーバがWebクライアントへhttpプロトコルでResponseメッセージを送信し、Webページが表示される

サーブレット:
Javaで作られたHTMLなどのWebコンテンツを生成するためのプログラムのことです。
Tomcatなどのアプリケーションサーバによって実行されます。

APサーバがJavaファイルを実行し、HTMLテキストを生成し、ブラウザに表示しているため、動的なWebページになります。

GETとPOSTでリクエストメッセージを送信する。
1 GET
送信されたパラメータはURLに組み込まれていてWebサーバに届きます。

2 POST
送信されたパラメータをURLに組み込まず、Requestメッセージ内に組み込まれてWebサーバに届きます。

GETとPOSTの使い分け:
GETで送信することによって、あとでまたこのページを見たいと言う時にブックマークしたりして再度簡単にアクセスすることができます。
検索条件など他人に見られてもあまり問題なく、かつパラメータごと保存できる方が便利な場合はGETを使用します。

POST:
他人に見られてはいけない内容を送信しアクセスする場合や、データベースを書き換えたりする場合に使用します。

サーブレットとGET、POSTの関係性:
ServletControllerクラス内にはdoGetとdoPostというメソッドがあります。
RequestメッセージがGetが送られてきた場合、doGetメソッドが実装されます。
RequestメッセージがPostが送られてきた場合、doPostメソッドが実装されます。

JSP:
HTML形式の中にJavaコードを埋め込んだものです。
処理を行うサーブレットと、表示を行うJSPで役割分担することで、効率よく開発を行うことができます。
JSPはHTML形式なので、Javaコードを組み込む際には、<%...%>というタグの中に組み込んでいきます。
Webページに文字を出力させるには、out.println();の引数に表示させたい文字列を入れれば良いです。

しかし、何らのデータ保存や管理をしながらWebアプリケーションを扱いたい場合は、単にサーブレットとJSPで分けただけでなく、DBを必要とします。
MySQL,Oracl DataBase, PostgreSQLなどが有名なデータベースサーバソフトウェアになります。
またMVCモデルという開発手法を用いることで、より大規模な開発を効率よく行うことができます。

MVCモデル:

Model:モデルはアプリケーションの処理を担当します。例えば、データの管理、DBへのアクセスやメソッドの管理についてを行います。コントローラーからの指示により処理を実行します。
一般的なJavaファイルがモデルになります。

View:
アプリケーションの表示を担当します。コントローラーから出力結果を渡されます。HTML形式に書かれているJSPファイルがビューに当たります。

Controller:
コントローラーは、View(画面)からの情報入力を受け、Model(処理やデータ)を呼び出し、Viewへの結果出力を担当します。
つまり、一つのコントローラーに、特別のViewに対する処理や特定の処理の流れが書かれています。
サーブレットクラスがコントローラーになります。

アプリケーション処理の流れは以下となります。
1 クライアントがサーバへRequestメッセージを送信
2 アプリケーション内のControllerがRequestメッセージをもとに実行され、Model処理を呼び出し
3 Controllerから呼び出されたModelがDBアクセスもしくは処理実行
4 Modelが処理結果をControllerに受け渡す
5 処理結果を元にControllerがViewへ出力の指示(HTMLテキストの生成)
6 サーバーがクライアントへResponseメッセージを送信し、Webページが表示される

URL:
リソース(情報)の位置を指し示す統一的な記述方法

http: どのやり方で (スキーム)

www.example.jp: どのwebサーバに (ホスト名)
ホストコンピュータ:
ネットワークに接続されて、リクエストを受け取り、レスポンスを返すコンピュータ、
サーバとほぼ同じ。

contents/index.html: 何のコンテンツを (パス名)

HTTP(Hyper Text Transfer Protocol):
ハイパーテキストを転送するためのプロトコル。
Web上でコンピュータがデータをやり取りするための約束事。

CGI(common gateway interface):
クライアントからのリクエストに対して、サーバーが新たにHTMLファイルを作って返す仕組み。
Webサーバとプログタムを連携させる仕組みです。

CGIで実現されたWebアプリ:
検索サイト、掲示板システム、ショッピングサイト
静的なコンテンツだけではできない、クライアントがサーバに働きかけることで実現

Perlのプログラムをwebサーバに付け加えることで、そこに新たなにHTMLファイルを作成。

CGIの問題点:
Perlが大規模な開発に向いてなかったこと
CGIではHTMLの作成に時間がかかったこと

オブジェクト指向:大きな部品(クラス)を使って、プログラムを作成すること。大きなパーツに注目する考え方。

プロセス指向:小さな部品(関数)を使って、プログラムを作成すること。大規模のシステム開発には向いてません。処理に注目する考え方。

例:ジャンケンゲームを作る
□プロセス指向
ユーザが手を決める処理 GetUserHand関数
コンピュータが手を決める処理 GetComputerHand関数
勝敗を判定する処理   DoJudge関数

□オブジェクト指向
ユーザ userクラス
コンピュータ Computerクラス
ジャッジ Judgeクラス

サーブレット:Webアプリ開発のため生まれました。サーバ上で動くJavaのこと。

サーバ上で動くJavaのメリット:

  1. HTMLファイルの作成をJavaで出来る
  2. WebサーバとJavaを一緒に動かせる

Java: OSやハードに依存しない。
Java VM(Java virtual Machine):Javaで作ったプログラムを翻訳し、それぞれのOSで実行可能なコードに変換してくれる。

問題点:1枚のHTMLでプログラムとデザインを行うと、複雑になってしまう。

JSP(Java Servlet Pages):HTMLの中にJavaプログラムを埋め込む。ロジックとデザインの分離です。

フレームワーク:大規模なWebアプリを開発する際に、欠かせない手法です。(Ruby on Rails, React, Struts) システム開発を楽に行うために用意されたプログラムの雛形。

リクエスト、レスポンス:パケットをやり取りしているということ。パケットには大切な情報が詰まっています。特別なソフトを使って、中身を見ていきます。

Fiddler:httpやhttpsに特化したパケットキャプチャツールです。

リクエストライン:メソッド、URI,httpバージョンで構成される。
GET: メソッド
GETメソッド:URIの中に欲しい情報を指定するリクエストの方法

http://masahiro-toba.com/get_request1.html: URI=URL,どのWebページが欲しいのかを表す。

HTTP/1.1: HTTPバージョン、どのバージョンによるリクエストなのかを表す。

リクエストラインが一番重要な情報、それに付随している情報はメッセージヘッダにあります。

HTTPステータスライン
HTTP/1.1 200 OK
HTTP/1.1 : HTTPバージョン
200: ステータスコード、レスポンスの状態を表します。ここを見れば、リクエストが成功したかどうかが分かります。レスポンスが成功した場合は200になります。
レスポンスフレーズはステータスコードと同じです。

ステータスコード:
200: OK リクエストが正常に完了
302: Found リソースが一時的に別のURIに所属

実際にWebアプリを動かすのがAPサーバ。

サーブレット、JSPとは:サーバ上で動くJava(Web開発に特化している)。デザインとロジックを分離するため。デザインはJSP、ロジックはサーブレットで役割分担することで、効率的にWebアプリケーションを開発できるようになりました。

サーブレットとJSP連携の仕組み:
1 画面のログインページはデザインのため、担当しているのがJSP。
2 内部でログインの処理を担当するのがサーブレット

1
0
0

Register as a new user and use Qiita more conveniently

  1. You get articles that match your needs
  2. You can efficiently read back useful information
  3. You can use dark theme
What you can do with signing up
1
0

Delete article

Deleted articles cannot be recovered.

Draft of this article would be also deleted.

Are you sure you want to delete this article?