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

記事概要

Webアプリケーションについて、まとめる。

まとめ(用語)

Web

インターネット上で画像や文章などを公開できる仕組み

アプリケーション

「ある目的」のために作成されたプログラム

Webアプリケーション

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

動的

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

静的

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

HTTP通信

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

HTTPステータスコード

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

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

URL(Uniform Resource Locator)

インターネットのサービスの場所を表すものであり、インターネットにある住所のイメージ

リクエスト

データや情報を要求すること

レスポンス

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

クライアント

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

クライアントサイド

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

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

サーバー

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

サーバーサイド

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

サーバーの種類

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

データベース(データベースサーバー)

情報の集合体、すなわちデータの集まりのこと

ローカルホスト(localhost)

「自分のPC」という意味
自分のPC内にサーバーを立ち上げると、インターネット接続が不要になる

アルゴリズム

「目的の達成にいたるまでの処理の一連の流れ」のこと

RDB(Relational Database)

表形式でデータを管理するデータベース

レコードとカラム

データベースにおいては、行を「レコード」、列を「カラム」

RDBMS(Relational Database Management System)

RDBを管理するシステムのこと

MySQL

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

ORM(Object Relational Mapping)

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

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

SQL

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

DDLのできること

命令	機能
CREATE	データベースやテーブルの作成
ALTER	データベースやテーブルの更新
DROP	データベースやテーブルの削除

DMLのできること

命令	機能
INSERT	データの登録
UPDATE	データの更新
DELETE	データの削除
SELECT	データの検索

DCLのできること

命令	機能
COMMIT	DBの変更の確定
ROLLBACK	DBの変更の取り消し
GRANT	ユーザーに操作権限を付与
REVOKE	ユーザーの操作権限を無効化

DB制約

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

NOT NULL制約

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

一意性制約

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

主キー制約

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

外部キー制約

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

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

チェック制約

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

CRUD

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

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

中間テーブル

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

ERB(Embedded Ruby)

テンプレートエンジンと呼ばれる仕組みを持ったもの

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

レイアウトテンプレート

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

スネークケースとキャメルケース

それぞれ単語の区切り方を表したもの

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

リダイレクト

「本来受け取ったパスとは別のパスへ転送する」機能のこと

デバッグ

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

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(スタッシュ)

コードの変更を保留すること

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

コンフリクト

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

revert(リヴァート)

commitを取り消すこと

テストコード

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

正常系

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

異常系

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

単体テストコード

機能ごとに問題がないかを確認する

結合テストコード

ユーザーがブラウザで操作する一連の流れを再現して、問題がないかを確認する

README

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

マークダウン

文書を記述するための軽量マークアップ言語のひとつ
記法は、こちらを参照

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

JSON

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

セッション

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

クッキー

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

同期通信

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

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

非同期通信

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

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

API

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

APIという言葉はかなり抽象的なものであり、下記2つのような意味でも使われる

1. 「このようにリクエストが来たらこのようにデータを返す」という仕様全体を表す意味
2. 「呼び出したら実行されるメソッド」そのものを表す意味

WebAPI

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

オープンAPI(公開API)

外部に公開されているAPIのこと

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

内部API

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

サーバーサイドとフロントエンドの分離

イメージは下記。

サーバーサイドとフロントエンドを分離するメリット

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

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

ネイティブアプリケーション

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

開発言語は下記

OS	言語
iOS	Objective-C, Swift
android	Java, Kotlin

ネイティブアプリケーションにも、APIの利用は最適。

クロスプラットフォーム(マルチプラットフォーム)

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)

Google Cloud Platform(GCP)

Microsoft Azure

トークン

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

ストレージサービス

インターネット上でデータを保存する場所を提供するサービスのこと

GUI(graphical user interface)

マウスやトラックパッドから、画面（グラフィック）を通してコンピュータを操作する仕組みのこと

CLI(command-line interface)

キーボードからコマンドと呼ばれる文字を打ち込んで、コンピュータを操作する仕組みのこと

laC(Infrastructure as Code)

サーバーなどのインフラに関する設定を、コードとして管理する方法のこと
この方法を使うことで、インフラの設定をコード化し、コードを実行することでインフラを構築できる

正規表現

文字列の一部分を抽出・置換したり、文字列が制約を満たしているかを調べるための表現方法

利用シーン

プロセス

PC上で動くすべてのプログラムの実行時の単位
プログラムが動いている数だけ、プロセスが存在する

アクティビティモニタ

現在MacPC上で動いているプログラムの状況をモニタリングするアプリ
アクティビティモニタでプロセスを確認できる