【基礎知識】Web アプリケーション

# 記事概要
Webアプリケーションについて、まとめる。

# まとめ(用語)
## Web
インターネット上で画像や文章などを公開できる仕組み

## アプリケーション
「ある目的」のために作成されたプログラム

## Webアプリケーション
Webで使用されるアプリケーション

## 動的
表示されるデータが更新される仕組み
※表示データが更新される仕組みになっているサイトは、動的サイトという

## 静的
サイト作成者が更新した場合を除き、誰がいつ見ても、常に同じ内容が表示されるような仕組み
※表示データが更新されない仕組みになっているサイトは、静的サイトという

## HTTP通信
情報やデータなどを送受信するための通信方法

[![Image from Gyazo](https://i.gyazo.com/2c6112333dde74ada783bb31692c61ce.png)](https://gyazo.com/2c6112333dde74ada783bb31692c61ce)

### HTTPステータスコード
特定のHTTPリクエストが正常に完了したかどうかを示した、サーバーからクライアントに送信される番号のこと

|ステータスコード|状態|
|-|-|
|100〜199|リクエスト継続中|
|200〜299|リクエストが成功した|
|300〜399|リダイレクト中|
|400〜499|クライアントでエラーが発生している|
|500〜599|サーバーでエラーが発生している|

## URL(Uniform Resource Locator)
インターネットのサービスの場所を表すものであり、インターネットにある住所のイメージ

[![Image from Gyazo](https://i.gyazo.com/c070db2d6a78814de167e3424b463e59.png)](https://gyazo.com/c070db2d6a78814de167e3424b463e59)

## リクエスト
データや情報を要求すること

[![Image from Gyazo](https://i.gyazo.com/01b30a20dc4dd572cd5009a759e68547.png)](https://gyazo.com/01b30a20dc4dd572cd5009a759e68547)

## レスポンス
リクエストに対応するデータや情報を返すこと

[![Image from Gyazo](https://i.gyazo.com/5bd9b4c40ac71ea17a61c0a3567622ac.png)](https://gyazo.com/5bd9b4c40ac71ea17a61c0a3567622ac)

## クライアント
Webアプリケーションなどのサービスを利用する側のこと

## クライアントサイド
クライアントが利用する領域
Webアプリケーションの見た目や、それを表示するブラウザなどのこと

ユーザーに対するサービスの見た目や利便性を考えることを専門とするエンジニアを、クライアントサイドエンジニア(またはフロントエンドエンジニア)という

[![Image from Gyazo](https://i.gyazo.com/6cc071c566b271ecf3b48ac846a66282.png)](https://gyazo.com/6cc071c566b271ecf3b48ac846a66282)

## サーバー
画面の無いPCのようなもの
Webアプリケーションは世界中のどこかに置いてあるサーバーの中に保存されており、そこに対してインターネットを介して通信することで、サービスが利用できる

## サーバーサイド
実際にWebアプリケーションが存在する領域のこと
Webアプリケーションの仕組みを専門とするエンジニアは、サーバーサイドエンジニアという

[![Image from Gyazo](https://i.gyazo.com/3328799296cb27c8453063ce17eebec7.png)](https://gyazo.com/3328799296cb27c8453063ce17eebec7)

### サーバーの種類
| サーバー名 | 役割 |
|---|---|
| アプリケーションサーバー | Webサーバーを通して受け取ったリクエストを処理し、HTMLなどをWebサーバーへ返却する役割 |
| Webサーバー | リクエストを処理し、レスポンスを返却する役割 |
| データベースサーバー | アプリケーションで使用するデータを管理する役割 |

[![Image from Gyazo](https://i.gyazo.com/18b3a937a15363b92e851340fadd1ce7.png)](https://gyazo.com/18b3a937a15363b92e851340fadd1ce7)

### データベース(データベースサーバー)
情報の集合体、すなわちデータの集まりのこと

[![Image from Gyazo](https://i.gyazo.com/5508ab0c4d24dd0cf95a48cf92c66719.png)](https://gyazo.com/5508ab0c4d24dd0cf95a48cf92c66719)

## ローカルホスト(localhost)
「自分のPC」という意味
自分のPC内にサーバーを立ち上げると、インターネット接続が不要になる

[![Image from Gyazo](https://i.gyazo.com/c7adcd5bcb4909755ca3b0b988549dc2.png)](https://gyazo.com/c7adcd5bcb4909755ca3b0b988549dc2)

## アルゴリズム
「目的の達成にいたるまでの処理の一連の流れ」のこと

## RDB(Relational Database)
表形式でデータを管理するデータベース

### レコードとカラム
データベースにおいては、行を「レコード」、列を「カラム」
[![Image from Gyazo](https://i.gyazo.com/f4c8dd1f6e1f34205085a0fab1f3fbe3.png)](https://gyazo.com/f4c8dd1f6e1f34205085a0fab1f3fbe3)

## RDBMS(Relational Database Management System)
RDBを管理するシステムのこと

### MySQL
RDBMSの1つであり、多くの企業で採用されている

## ORM(Object Relational Mapping)
RDB(リレーショナルデータベース)のデータを、オブジェクト指向プログラミング言語でオブジェクトとして使用するために変換する技術

ORMのメソッドは、SQLに変換されるためテーブルの操作が可能になる

## SQL
RDBの操作を行うための言語

[![Image from Gyazo](https://i.gyazo.com/e9cb58dfd76b028d4b272bd56809783f.png)](https://gyazo.com/e9cb58dfd76b028d4b272bd56809783f)

### DDLのできること
|命令|機能|
|-|-|
|CREATE|データベースやテーブルの作成|
|ALTER|データベースやテーブルの更新|
|DROP|データベースやテーブルの削除|

### DMLのできること
|命令|機能|
|-|-|
|INSERT|データの登録|
|UPDATE|データの更新|
|DELETE|データの削除|
|SELECT|データの検索|

### DCLのできること
|命令|機能|
|-|-|
|COMMIT|DBの変更の確定|
|ROLLBACK|DBの変更の取り消し|
|GRANT|ユーザーに操作権限を付与|
|REVOKE|ユーザーの操作権限を無効化|

## DB制約
データを扱う際に制限をかけること

### NOT NULL制約
テーブルの属性値にNULL(空の値)が入らないように制限する制約

### 一意性制約
テーブル内で重複するデータを禁止する制約

### 主キー制約
レコード情報を識別するための項目(主キー)のデータが空になることがなく、かつ重複していないことを保証する制約
※主キーに対して、NOT NULL制約と一意性制約を両方設定するのと同義

### 外部キー制約
関連する他テーブルのレコードの主キーを値とする項目(外部キー)の元になるデータと参照するデータの整合性を保証する制約

- 存在しない値を外部キーとして登録することはできない
- 子テーブルの外部キーに値が登録されている親テーブルのレコードは削除できない

[![Image from Gyazo](https://i.gyazo.com/1e3813252d22ae269199e9e8dfc74a5d.png)](https://gyazo.com/1e3813252d22ae269199e9e8dfc74a5d)

### チェック制約
値が保存される際に条件を満たしているかチェックできる制約

## CRUD
アプリケーションのデータ取り扱いに関して、基本的な処理の頭文字を並べたもの
アプリケーションの機能は、この4つの処理を組み合わせながら実装する

|処理名|処理内容|
|---|---|
|C(Create)|生成|
|R(Read)|読み取り|
|U(Update)|更新|
|D(Delete)|削除|

## 中間テーブル
2つのテーブルの中間にあるテーブルのこと
多対多の関係にある2つのテーブルの間に挟まって、2つの組み合わせパターンだけをレコードとして保存する

[![Image from Gyazo](https://i.gyazo.com/5743da975b2fad4ac0b19413ff3be1d6.png)](https://gyazo.com/5743da975b2fad4ac0b19413ff3be1d6)
[![Image from Gyazo](https://i.gyazo.com/c8d25f805196b92a924f2a0c01ccf2b6.png)](https://gyazo.com/c8d25f805196b92a924f2a0c01ccf2b6)

## ERB(Embedded Ruby)
テンプレートエンジンと呼ばれる仕組みを持ったもの

テンプレートエンジン：雛形となるテンプレートと、そのテンプレートにデータとなる記述を埋め込むことで、最終的に別のファイルとして生成できる仕組みのこと

## レイアウトテンプレート
アプリケーションのビューファイルの共通部分をまとめたもの
headの情報やフッターなど、すべてのビューで共通となる部分を記述しておくと、各テンプレートファイルは個別の見た目を記述するだけでいい

## スネークケースとキャメルケース
それぞれ単語の区切り方を表したもの

|表記方法|説明|例|
|---|---|---|
|キャメルケース|先頭が小文字で、単語の区切りを大文字で表す|adminUserCommentCreator|
|アッパーキャメルケース|キャメルケースの1つ。先頭から単語の区切りを大文字で表す|AdminUserCommentCreator|
|スネークケース|単語の区切りをアンダースコアで表す|admin_user_comment_creator|

## リダイレクト
「本来受け取ったパスとは別のパスへ転送する」機能のこと

[![Image from Gyazo](https://i.gyazo.com/7cfec31b38e64e9f757db7c279c7625b.png)](https://gyazo.com/7cfec31b38e64e9f757db7c279c7625b)

## デバッグ
プログラムの誤り（バグ）を見つけて、手直しすること

## Git
ソースコードなどのファイルやフォルダの変更履歴を記録・追跡するためのバージョン管理システム

Gitでアプリケーションを管理すると、それぞれの開発段階でのアプリケーションの内容をセーブポイントのように記録し、時系列に沿って管理できる
このセーブポイントに遡ることも可能

### リポジトリ
Gitの管理下にあるファイルやディレクトリの変更履歴を保管しておく箱のようなもの

管理したいアプリケーションのディレクトリを、バージョン管理の範囲として指定する

### ローカルリポジトリ
自分のPC上(ローカル環境)に置くリポジトリのこと

作成したリポジトリは自分のパソコンの中にあるため、ファイルやディレクトリを変更・修正した際は好きなタイミングでこれらを記録できる

### リモートリポジトリ
外部サーバー上に置くリポジトリのこと

リモートリポジトリを直接変更修正することはなく、ローカルリポジトリの変更修正を同期して、反映させることで更新できる

リモートリポジトリは外部のサーバー上にあるので、他の人に自分の作成したコードを共有できたり、チーム開発をしやすくしたりできる

## GitHub
Gitの仕組みを利用し、簡単に複数人での開発ができるようにしてくれるWebサービス

### commit(コミット)
ファイルやディレクトリの変更修正を、リポジトリに記録すること

### コミットメッセージ
ファイルの変更修正の内容をわかりやすくするための記述
変更修正したファイルの中身を確認しなくても、「どのような変更修正なのか」がすぐわかる

### commit log
commitの履歴を確認できる

### インデックス
変更修正が一時的に保存される場所
インデックスに保存されている内容がcommitの対象になる

### add(アド)
追加するファイルや変更修正をインデックスに登録し、commitの対象にすること

### push(プッシュ)
ローカルリポジトリでのコミットをリモートリポジトリに反映できる

### ブランチ
リポジトリで管理しているファイルやディレクトリの変更の流れであり、commitの連なり

ブランチは分岐可能であり、本流を「masterブランチ(mainブランチ)」、分岐したブランチを「トピックブランチ」と呼ぶ

### プルリクエスト
ブランチでのコミット履歴を残すと共に、各コミットにおける変更修正にコメントをつけることができるGitHubの機能のこと

### コードレビュー
複数人での開発において、コードの記述内容に問題がないか、他の開発メンバー等が確認をすること

#### LGTM
Looks good to meの略で、「コードに問題はないと思うよ！」という意味

### merge(マージ)
機能実装のために作成したブランチを、リモートリポジトリ上のmasterブランチ(mainブランチ)に反映する作業のこと

### pull(プル)
リモートリポジトリの変更をローカルリポジトリに取り込む操作のこと

### clone
リモートリポジトリをローカルリポジトリに作成すること

|作業|作業の目的|
|-|-|
|pull|ローカルリポジトリとリモートリポジトリがすでに紐付いている状態で、リモートリポジトリの情報をローカルリポジトリに反映すること|
|clone|リモートリポジトリだけ存在し、手元にローカルリポジトリがない状態で、リモートリポジトリからローカルリポジトリを作成すること|

### stash(スタッシュ)
コードの変更を保留すること

現在の作業を一時的に退避したい時や、退避した作業を元に戻したい時などに使用する

### コンフリクト
あるファイルにおいてブランチごとに情報が異なり、辻褄が合わない状況のこと

[![Image from Gyazo](https://i.gyazo.com/a409592a413d74d7677fb7174cc0d9af.png)](https://gyazo.com/a409592a413d74d7677fb7174cc0d9af)

### revert(リヴァート)
commitを取り消すこと

## テストコード
アプリケーション内に記述し、そのアプリケーションの挙動を確認するためのコードのこと

### 正常系
「ユーザーが開発者の意図する操作を行った時の挙動」を確認するテストコード

### 異常系
「ユーザーが開発者の意図しない操作を行った時の挙動」を確認するテストコード

### 単体テストコード
機能ごとに問題がないかを確認する

### 結合テストコード
ユーザーがブラウザで操作する一連の流れを再現して、問題がないかを確認する

## README
ソフトウェアの仕様、規格、インストール方法などを文書化したアプリケーションの説明書のようなファイル

## マークダウン
文書を記述するための軽量マークアップ言語のひとつ
記法は、[こちら](https://qiita.com/Qiita/items/c686397e4a0f4f11683d)を参照

マークダウンファイルの拡張子は`.md`

## JSON
`JavaScript Object Notation`のことであり、データを扱う場合のフォーマットのこと
データを記述するフォーマットはいくつかあるが、動作が軽いことやモダンなフロント言語と親和性が高く管理がしやすいなどのメリットからJSONが用いられることが多い

## セッション
Webサービスにおいて情報を一時的に記憶しておく仕組み
サイトのページを離れても、再度アクセスした時にログインの状態やサイトで保存した情報を維持したままにできる

[![Image from Gyazo](https://i.gyazo.com/4383e8ff6b74b8a58b2b9f3fd3542b76.png)](https://gyazo.com/4383e8ff6b74b8a58b2b9f3fd3542b76)

## クッキー
ブラウザにあるセッションの情報の保存場所のこと
セッションが一時的にデータを保存する場所は、ブラウザ

[![Image from Gyazo](https://i.gyazo.com/24b453b5bd1de5a5011fab89af06b05a.png)](https://gyazo.com/24b453b5bd1de5a5011fab89af06b05a)

## 同期通信
リクエストのたびにブラウザが再読み込みされる通信方法のこと
ページ全体を再読み込みするため、通信環境が悪い場合になかなかページが表示されないといったことも起こりうる

一度リクエストを送信すると、レスポンスが返ってくるまで他の処理を行わない

## 非同期通信
リクエストのたびにブラウザを再読み込みせずに、ページの一部分のみが更新される通信方法のこと

リクエスト送信後、レスポンスが返ってくるまでの間にも他の処理を行える
サービスの例）Google Mapなど

## API
主にアプリケーション同士がデータをやりとりする場合に使用する一定のルール、仕組みのことを指す

APIという言葉はかなり抽象的なものであり、下記2つのような意味でも使われる
1. 「このようにリクエストが来たらこのようにデータを返す」という仕様全体を表す意味
2. 「呼び出したら実行されるメソッド」そのものを表す意味

[![Image from Gyazo](https://i.gyazo.com/fb2756bb8c1202285ea6215753dd4744.png)](https://gyazo.com/fb2756bb8c1202285ea6215753dd4744)

### WebAPI
HTTP/HTTPS通信を使用して利用するAPIのこと

[![Image from Gyazo](https://i.gyazo.com/44f9e8aae0b0d9d79a577742e269f5f1.png)](https://gyazo.com/44f9e8aae0b0d9d79a577742e269f5f1)

### オープンAPI(公開API)
外部に公開されているAPIのこと

利用する側からは、公開APIを利用するという文脈で「外部APIを利用する」と言うこともある

[![Image from Gyazo](https://i.gyazo.com/93ce7e1e23479cbf14f353554fbd5784.png)](https://gyazo.com/93ce7e1e23479cbf14f353554fbd5784)

### 内部API
自社や個人が開発したアプリケーションの内部で取り扱うAPIのこと

[![Image from Gyazo](https://i.gyazo.com/db5afe29e0d4569ad3744426385bd262.png)](https://gyazo.com/db5afe29e0d4569ad3744426385bd262)

## サーバーサイドとフロントエンドの分離
イメージは下記。

[![Image from Gyazo](https://i.gyazo.com/239cf21f51c84bef8b3735ee8ea151bd.png)](https://gyazo.com/239cf21f51c84bef8b3735ee8ea151bd)

### サーバーサイドとフロントエンドを分離するメリット
サーバーサイドとフロントエンドでは扱う言語が異なる
分離することで、大規模なプロジェクトでも効率的に作業ができる

JSONなどのデータ形式を統一しておけば、サーバーサイドとフロントエンドを部品のように片方だけ交換することが可能

[![Image from Gyazo](https://i.gyazo.com/9b56b220eed998af0be3d65b77b80b43.png)](https://gyazo.com/9b56b220eed998af0be3d65b77b80b43)

## ネイティブアプリケーション
スマートフォンやタブレットを使用してApp StoreやGoogle Play Storeでダウンロードできるアプリのこと

開発言語は下記
|OS|言語|
|-|-|
|iOS|Objective-C, Swift|
|android|Java, Kotlin|

ネイティブアプリケーションにも、APIの利用は最適。
[![Image from Gyazo](https://i.gyazo.com/3b05a532dfb8b4cb79e4b6b66f7454b8.png)](https://gyazo.com/3b05a532dfb8b4cb79e4b6b66f7454b8)

## クロスプラットフォーム(マルチプラットフォーム)
iOSやandroidのどちらにも互換性のある開発フレームワークのこと
フレームワークに沿って開発を行えば、iOSやandroidのどちらでも動作するアプリケーションを作成できる

## デプロイ
ネットワークを通じてWebアプリケーションなどのシステムを公開し、利用可能な状態にすること

デプロイするためのサーバーは、企業が一般向けにもレンタルを行っている
レンタルしたサーバーにアプリケーションをデプロイすることで、サービスを公開できる

## Basic認証
HTTP通信の規格に備え付けられている、ユーザー認証の仕組みのこと
サーバーとの通信が可能なユーザーとパスワードをあらかじめ設定しておき、それに一致したユーザーのみ、Webアプリケーションを利用できる

## シェル
「ターミナルとOSを繋ぐ窓口役」のような存在のプログラム

ターミナルから入力されたコマンドを読み取って、OSに対して指示を渡し、結果をターミナルに返して表示や実行などの動作をさせる

## zsh
ログインシェルと呼ばれるもの
プログラムを実行する時に、ユーザーの要求に一番最初に対応する役割

隠しファイルなので、通常はFinderなどに表示されない

## vim
サーバー上で使用できるテキストエディタ
`vim`コマンドを用いることで、指定したファイルの編集をターミナルから行うことが可能になる

### 通常モード
コマンドを打つことでファイルを保存したりvimを終了したりできる

|コマンド|説明|
|-|-|
|:w|作成・編集したファイルを保存します。|
|:q|vimを終了します。|
|:q!|編集した内容を保存しないでvimを強制終了します。|
|:wq|編集した内容を保存してvimを強制終了します。|

### インサートモード
ファイルに編集を加えることができる
「i」キーを押すことで「insert（インサート）モード」になり、文字の入力が可能になる
ファイル編集後は、Escキーを押すと「通常モード」に戻る

## リファクタリング
コードの保守性向上などの目的で、アプリケーションを利用するユーザーから見たアプリケーションの動作は変えずに、内部のコードを整理すること

整理とは、異なる文法で端的なコードに変更したり、新しいメソッドなどを使用して書き換えることなどを指す

## クラウドコンピューティング
ソフトウェアやハードウェアの利用権などを、ネットワーク越しに提供する技術

レンタルサーバーとは異なり「必要な時に、必要な分だけ使う」事ができるので、スモールスタートでサービスを始める際に重宝される

### Amazon Web Services(AWS)
https://aws.amazon.com/jp

### Google Cloud Platform(GCP)
https://cloud.google.com

### Microsoft Azure
https://azure.microsoft.com

## トークン
セキュリティーを担保するために用いられる、一度だけ使用可能なパスワードのこと