web開発に関するキーワードをまとめてみた

今回個人的にweb開発の仕事に転職することになったので、web開発で使いそうなキーワードを勉強しました。
多分初歩的なものが多いですがご容赦ください。

HTTP(Hyper Text Transfer Protocol)

ブラウザとサーバーが通信する上でのルール

クライアント　→（リクエスト）→  サーバー
クライアント　←（レスポンス）←  サーバー

リクエストにはいくつかのメソッドがある。

• GET: リソースをもらう
  • ex. urlを叩いたら開いたらページが開く
• POST: リソースを送る
  • ex. webページのフォームで情報を送る
• PUT: リソースを上書きする
  • ex. webページの編集フォームで情報を保存
• DELETE: リソースを削除する
  • ex. wordpressでブログ記事の「削除」ボタンを押す

REST(Representational State Transfer)

Webサービスの設計思想の一つ。
6つの制約を受ける

• クライアント/サーバー
  • 1つのコンピュータの中で全ての処理を行うのではなく、クライアントとサーバーの二つに分離し、お互い必要最低限のメッセージをやり取りしながらアプリケーションを構成する
• ステートレスサーバー
  • 過去の情報を記憶しないステートレスな設計
• キャッシュ
  • 取得したリソースをクライアントが一時的に保持しておく
• 統一インターフェース
• 階層化システム
• コードオンデマンド
  • プログラムをサーバーからダウンロードして、クライアントでそれを実行する
  • javascriptが該当

DOM(Document Object Model)

HTMLやXMLをオブジェクト化し、プログラムから操作するための文書の構造モデル。
JavaScriptからページの要素を取得・変更する際の「橋渡し役」。

例

document.getElementById('title').textContent = '新しいタイトル';

 

SPA(Single Page Application)

画面の描画JavaScriptのみが担う設計。
ユーザー体験は良くなるが、初回表示が遅くなりやすい。

ページ生成アーキテクチャ

CSR(Client Side Rendering)

ブラウザ側（クライアント）でJavaScriptを実行してHTMLを生成・表示する方式。
表示は遅めだがページ間移動は速い。

SSR(Server Side Rendering)

サーバーでHTMLを生成して返す方式。ブラウザはそのままHTMLを表示できる。
初回表示が速く、ページ遷移時は再リロードが発生。

SG(Static Generation)

ビルド時にHTMLを作っておき、サーバーからそのまま配信する方式。
高速・安定。頻繁にデータが更新されるようなサービスには不向き。

ISR(Incremental Static Regeneration)

リクエストがくるたびにAPI通信処理などを行いHTMLをビルドし、一旦生成済みの古いHTMLを返却する。（指定した時間間隔で静的ページを自動的に再生成する仕組み）

負荷対策

スケールアップ

1台のサーバーの性能を上げる（CPU、メモリ強化など）
簡単だが限界あり。

スケールアウト

サーバー台数を増やして負荷分散する。
柔軟で大規模対応可能だが設計が複雑。

ロードバランサー

複数サーバーへのアクセスを均等に振り分ける装置/サービス。
AWS ロードバランサーなど。

CDN（Content Delivery Network）

世界中のキャッシュサーバーから、ユーザーに近い場所からコンテンツを配信する。表示速度向上・負荷軽減・DDoS対策に
AWS CloudFrontなど

セキュリティ

XSS(クロスサイトスクリプティング)

ユーザー入力HTMLにスクリプトを直接埋め込み、悪意あるスクリプトを実行される攻撃。下記の様に埋め込んだ時に内容が実行されてしまう

<sctipt>
    alert('yabai poyo!!')
</sctipt>

• 対策
  • HTMLエスケープ: < や&などの特殊文字をエスケープする
  • 入力値検証:
    • 年齢のフォームのときに0 – 2000などの数字の範囲にあるか
    • ユーザー名は最大20文字
    • など

SQLインジェクション

ユーザー入力値にSQL文を直接入力し、意図しないデータ操作が行われる攻撃。

• 対策1: 入力SQLにプレースホルダーを利用する

-- プレースホルダー利用する
SELECT * FROM users WHERE name = ?;

• 対策2: ORMを利用する
  • SQL文を直接書かず、プログラム言語のオブジェクトやメソッドとしてデータベース操作を行うライブラリやフレームワークのこと
  • SQLを直接書かずプレースホルダーの仕組みが自動で使われる

CSRF(クロスサイトリクエストフォージュリ)

Cokieを不正利用してユーザーがログイン中のサービスに対してユーザーが意図しないリクエストを送らせる攻撃

例

1. ユーザーが「銀行サイトA」にログインし、Cookieにセッション情報が保存される。

2. ログアウトせずに別タブで、攻撃者が用意した「悪意あるページB」を開く。

3. ページBには、見えないフォームや画像タグを使って、銀行サイトAに
   POST /transfer?to=attacker&amount=1000000 のようなリクエストを送る仕掛けがある。

4. ブラウザはCookieを自動送信してしまい、銀行サイトA側は「正規ユーザーの操作」と誤認して処理してしまう。

• 対策1: CSRFトークン

  • フォーム送信や重要なAPIリクエストに、予測不能な乱数トークンを付与しサーバー側でトークンを検証し、正しいものだけ処理する。

おわり

今回の記事の参考文献はこちらです。
この本を呼んで個人的にあやふやだったキーワードをまとめました。

この本、Web開発について体系的に書かれていて非常に勉強になりました、おすすめです。

ではまた( ´ ▽ ` )

 

改訂新版 Webエンジニアの教科書【電子書籍】[ 石橋尚武 ] 価格：2,901円 (2025/8/11時点) 楽天で購入