> For the complete documentation index, see [llms.txt](https://engineer.toggle.co.jp/llms.txt). Markdown versions of documentation pages are available by appending `.md` to page URLs; this page is available as [Markdown](https://engineer.toggle.co.jp/chapter-1-toggle-holdings-engineer-101/ji-chu-yan-xiu/webapurikshonno.md).
# Webアプリケーションの基本概念
## はじめに
### クライアントサイドとサーバーサイドの役割と相互関係の理解
ウェブアプリケーションの開発において、クライアントサイドとサーバーサイドは異なる役割を担当し、相互に連携して動作します。
クライアントサイドは、ユーザーが直接対話する部分であり、ウェブブラウザ上で実行されます。主な役割は、ユーザーインターフェースの表示や操作、ユーザーからの入力の処理です。クライアントサイドの技術としては、HTML、CSS、JavaScriptが使用されます。HTMLはコンテンツの構造を定義し、CSSはスタイリングやレイアウトを指定します。JavaScriptは、クライアントサイドの動的な機能や振る舞いを実装します。
一方、サーバーサイドは、クライアントからのリクエストを受け取り、必要な処理やデータの操作を行います。主な役割は、データベースとのやり取り、ビジネスロジックの実行、セキュリティの管理などです。サーバーサイドの技術としては、プログラミング言語（例: Node.js、Python、Ruby）やフレームワーク（例: Express、Django、Ruby on Rails）、データベース（例: MySQL、MongoDB）が使用されます。
クライアントサイドとサーバーサイドは相互に連携し、ウェブアプリケーションの動作において重要な役割を果たしています。ユーザーがクライアントサイドで操作を行うと、クライアントはサーバーに対してリクエストを送信します。サーバーはそのリクエストを受け取り、必要な処理を行った後、クライアントにレスポンスとして結果を返します。この相互作用により、ウェブアプリケーションはユーザーとのインタラクティブな体験を提供します。
### HTTPプロトコルとリクエスト/レスポンスの基本的な仕組み
HTTP（HyperText Transfer Protocol）は、ウェブ上で情報をやり取りするためのプロトコルです。ウェブブラウザとサーバーの間でリクエストとレスポンスが行われる際に使用されます。
HTTPプロトコルの基本的な仕組みは、クライアントからサーバーへのリクエストと、サーバーからクライアントへのレスポンスで構成されています。リクエストは、クライアントがサーバーに対して要求する内容を表し、レスポンスはサーバーからの応答を含んでいます。
リクエストは主要な要素で構成されており、以下のような特徴があります:
* HTTPメソッド（例: GET、POST、PUT、DELETE）: クライアントが行いたい操作を指定します。
* リクエストURL: サーバー上のリソースの場所を指定します。
* ヘッダー: リクエストに関する追加の情報を含みます（例: クライアントの情報、受け入れ可能なレスポンス形式など）。
* ボディ: 必要な場合に、データやコンテンツを含めることができます。
サーバーはリクエストを受け取ると、要求された処理を実行し、結果をレスポンスとしてクライアントに返します。レスポンスも同様に要素で構成されており、以下のような特徴があります:
* ステータスコード: レスポンスの状態を示す3桁の数値です（例: 200 OK、404 Not Found）。
* ヘッダー: レスポンスに関する追加の情報を含みます（例: コンテンツタイプ、キャッシュ制御など）。
* ボディ: 必要な場合に、レスポンスのデータやコンテンツを含めることができます。
HTTPプロトコルのリクエストとレスポンスのやり取りにより、クライアントとサーバーは情報を交換し、ウェブアプリケーションの機能を実現します。
### ブラウザの役割と主要なウェブブラウザの特徴
ウェブブラウザは、クライアントサイドでウェブページやウェブアプリケーションの表示を行うソフトウェアです。ユーザーはブラウザを通じてウェブコンテンツにアクセスし、対話することができます。ブラウザは以下のような役割と特徴を持っています。
1. ページの表示: ブラウザはHTMLやCSSを解釈し、ウェブページの構造やスタイルを表示します。これにより、ユーザーは見やすい形式でコンテンツを閲覧できます。
2. スクリプトの実行: ブラウザはJavaScriptを実行し、ウェブページに動的な機能やインタラクティブな要素を追加します。これにより、ユーザーとの対話や動的なコンテンツの表示が可能となります。
3. ネットワーク通信: ブラウザはHTTPプロトコルを使用して、ウェブサーバーからコンテンツを取得します。これにより、ウェブページやリソースの読み込みが行われます。
4. プラグインや拡張機能のサポート: ブラウザは、プラグインや拡張機能を通じて、追加の機能やコンテンツ形式をサポートすることができます。例えば、Adobe Flash PlayerやPDFビューアなどがあります。
一般的な主要なウェブブラウザには、以下のような特徴があります:
* Google Chrome: 高速なパフォーマンス、豊富な拡張機能、開発者向けのツールが特徴です。
* Mozilla Firefox: カスタマイズ性の高さ、セキュリティへの重視、プライバシー保護機能が特徴です。
* Safari: Appleのデフォルトのブラウザであり、優れたパフォーマンスと統合が特徴です。
* Microsoft Edge: シームレスなWindowsとの連携、高速なパフォーマンス、拡張機能のサポートが特徴です。
これらのブラウザは、ウェブアプリケーションの表示と対話において重要な役割を果たしています。開発者は、主要なブラウザの特徴や動作の違いを理解し、クロスブラウザの互換性を確保するためにテストと調整を行う必要があります。
## HTMLとCSSの基礎
### HTMLの基本構造と要素の理解
HTML（HyperText Markup Language）は、ウェブページの構造やコンテンツを定義するためのマークアップ言語です。HTMLは要素（Element）を使用して構成されており、それぞれの要素はタグ（Tag）によって表されます。
HTML文書の基本構造は次のようになります:
```html
タイトル
```
* ``: HTML文書のバージョンを指定します。
* ``: HTML文書のルート要素であり、全体のコンテンツを囲みます。
* ``: 文書のメタデータやリンク、スタイルシートなどの情報を含みます。
* ``: 文書のタイトルを指定します。
* `<body>`: 実際のコンテンツが含まれる部分であり、ウェブページ上に表示される要素を配置します。
HTML要素は、開始タグと終了タグで囲まれ、その間にコンテンツが配置されます。例えば、段落を表す要素`<p>`は以下のようになります:
```html
<p>これは段落のコンテンツです。</p>
```
一部の要素は終了タグを持たず、自己閉じタグとして使用されます。例えば、改行を表す`<br>`要素は終了タグを持たず、単独で使用されます。
### CSSの基本構文とスタイリングの基礎
CSS（Cascading Style Sheets）は、HTML要素のスタイルやレイアウトを定義するためのスタイルシート言語です。CSSはセレクタとプロパティから構成され、要素を選択してスタイルを適用します。
CSSの基本構文は次のようになります:
```css
セレクタ {
プロパティ: 値;
}
```
* セレクタ: スタイルを適用する対象の要素を指定します。セレクタは要素名、クラス、IDなどで指定することができます。
* プロパティ: スタイルの属性を指定します。例えば、`color`（文字色）、`font-size`（フォントサイズ）などがあります。
* 値: プロパティに対する設定値を指定します。例えば、`red`（赤色）、`12px`（12ピクセル）などがあります。
CSSのスタイルはHTML文書内に`<style>`要素を使用して直接指定することもありますが、一般的には外部のCSSファイルとして分離して管理します。HTML文書内で外部CSSファイルを読み込むには、`<link>`要素を使用します。
### レスポンシブデザインとモバイルフレンドリーなウェブページの作成
レスポンシブデザインは、ウェブページが異なるデバイスや画面サイズに対応し、最適な表示やユーザーエクスペリエンスを提供するためのデザインアプローチです。これにより、モバイルデバイスやタブレットなどの小さい画面からデスクトップ画面まで、様々なデバイスでウェブページが適切に表示されます。
レスポンシブデザインを実現するためには、以下の手法やテクニックを使用します:
* メディアクエリ: 特定の画面サイズやデバイスに基づいてスタイルを適用するためのCSSの機能です。メディアクエリを使用して、異なるビューポートサイズに応じてレイアウトやスタイルを変更します。
* フレキシブルなレイアウト: 相対的な長さや幅の単位（%など）を使用して、要素のサイズと位置を柔軟に調整します。
* 画像の最適化: 画像の解像度やサイズを適切に最適化し、異なるデバイスに合わせて適切な画像を表示します。
* タッチ対応の要素: モバイルデバイスではタッチ操作が主流なので、ボタンやリンクなどの要素をタッチ対応にすることでユーザビリティを向上させます。
モバイルフレンドリーなウェブページを作成するには、モバイルデバイスでの利用を考慮したレイアウト、操作性の改善、パフォーマンスの最適化などが重要です。また、Googleのモバイルフレンドリーテストなどのツールを使用して、モバイルフレンドリーな設計を検証することも推奨されます。
## JavaScriptの基礎
### 変数、データ型、演算子の理解
#### 変数
変数はデータを格納するための名前付きのコンテナです。JavaScriptでは、`let`や`const`キーワードを使用して変数を宣言します。`let`は再代入可能な変数を宣言するために使用され、`const`は再代入不可能な定数を宣言するために使用されます。
データ型: JavaScriptにはさまざまなデータ型があります。主なデータ型には以下のものがあります:
* 数値（Number）: 整数や浮動小数点数を表します。例: `let age = 25;`
* 文字列（String）: テキストを表します。シングルクオートまたはダブルクオートで囲みます。例: `let name = 'John';`
* 真偽値（Boolean）: `true`または`false`の2つの値のいずれかを表します。例: `let isTrue = true;`
* オブジェクト（Object）: キーと値のペアの集合です。例: `let person = { name: 'John', age: 25 };`
* 配列（Array）: 複数の値を格納するためのオブジェクトです。例: `let numbers = [1, 2, 3, 4, 5];`
#### 演算子
演算子は変数や値を操作するために使用されます。主な演算子には以下のものがあります:
* 算術演算子: `+`（足し算）、`-`（引き算）、`*`（掛け算）、`/`（割り算）など。
* 代入演算子: `=`（値の代入）、`+=`（加算代入）、`-=`（減算代入）など。
* 比較演算子: `==`（等しい）、`!=`（等しくない）、`>`（より大きい）、`<`（より小さい）など。
* 論理演算子: `&&`（論理積）、`||`（論理和）、`!`（否定）など。
### 制御構造（条件分岐、繰り返し）の使い方
#### 条件分岐
条件分岐は、特定の条件が満たされるかどうかに基づいて異なるコードのブロックを実行するための構造です。主な条件分岐文には以下のものがあります
* `if`文: 条件式が`true`の場合にブロック内のコードを実行します。必要に応じて`else if`や`else`を追加して複数の条件をチェックすることができます。
* `switch`文: 式の値に基づいて、複数のケースの中から該当するコードブロックを実行します。
#### 繰り返し
繰り返しは、同じ処理を繰り返し実行するための構造です。主な繰り返し文には以下のものがあります
* `for`ループ: 初期化式、条件式、更新式を指定し、指定した回数だけブロック内のコードを繰り返し実行します。
* `while`ループ: 条件式が`true`の間、ブロック内のコードを繰り返し実行します。条件が最初から`false`の場合、一度も実行されません。
* `do...while`ループ: ブロック内のコードを実行し、条件式が`true`の場合は繰り返し実行します。条件判定はループの最後で行われるため、ブロック内のコードは少なくとも1回は実行されます。
### 関数の作成とイベントハンドリングの基本:
#### 関数の作成
関数は、複数の処理をまとめたコードのブロックです。関数を使用すると、同じコードを繰り返し実行する必要なく、コードを再利用することができます。関数の作成は以下のように行います:
```javascript
function 関数名(パラメータ1, パラメータ2, ...) {
// 処理の実行
return 結果; // 返り値（任意）
}
```
関数は引数（パラメータ）を受け取ることもあります。また、処理結果を返す場合は`return`キーワードを使用します。
#### イベントハンドリング
イベントハンドリングは、ユーザーのアクションやページ上で発生するイベントに対して処理を実行する方法です。イベントハンドリングには以下のような手法があります:
* インラインイベントハンドラ: HTMLの要素に直接イベント属性を追加し、関数を呼び出します。例: `<button onclick="myFunction()">クリック</button>`
* イベントリスナー: JavaScriptの`addEventListener`メソッドを使用して、特定のイベントに関数を関連付けます。例: `element.addEventListener('click', myFunction);`
イベントハンドリングを使用することで、ユーザーのアクションに応じて特定の処理や動作を実行することができます。
## バックエンドの基礎
### サーバーサイドの言語の選択（例: Node.js、Python）
バックエンド開発において、適切なサーバーサイドの言語を選択することは重要です。いくつかの一般的なサーバーサイドの言語の中から、以下の例としてNode.jsとPythonについて説明します。
* Node.js: Node.jsはJavaScriptのランタイム環境であり、非同期イベント駆動の特性を持っています。Node.jsはシングルスレッドで非同期処理を実行するため、高いスケーラビリティとパフォーマンスを提供します。また、JavaScriptの知識を活用できるため、フロントエンドとの統一感があります。
* Python: Pythonはシンプルで読みやすい文法を持つ人気のある汎用プログラミング言語です。Pythonは豊富なライブラリとフレームワークがあり、ウェブ開発においても幅広く使用されています。Pythonの特徴としては、扱いやすさ、実行速度のバランス、データサイエンスや機械学習の分野での強みが挙げられます。
言語の選択はプロジェクトの要件や開発者のスキルセット、コミュニティのサポートなどを考慮して行います。
toggle holdingsにおいては、Node.js（TypeScript）とPythonを標準的な開発言語としています。
### データベースとの連携（例: MySQL、Redis）
バックエンド開発では、データベースとの連携が必要な場合があります。データベースは永続的にデータを保存し、データの取得や更新、クエリの実行などを行うための仕組みです。以下に代表的なデータベースの例を示します。
* MySQL: MySQLはリレーショナルデータベース管理システム（RDBMS）の一つであり、広く使用されています。MySQLは安定性と信頼性があり、トランザクションのサポートやスケーラビリティが高い特徴があります。
* Redis: Redisはインメモリデータストアであり、高速なキーバリューストアとして使用されます。Redisはデータのキャッシュやセッション管理、キューなどの用途に適しており、パフォーマンスとスケーラビリティが重視される場合に有用です。
データベースの選択はプロジェクトの要件、データの構造と関連付けられる処理、パフォーマンス要件などを考慮して行います。
toggle holdingsでは、MySQL, PostgreSQL, Redisが主に利用されています。
### RESTful APIの基本的な設計と実装
REST（Representational State Transfer）は、ウェブアプリケーションのアーキテクチャスタイルの一つであり、クライアントとサーバー間の通信を行うための原則と規約を提供します。RESTful APIは、このRESTの原則に従って設計されたAPIのことを指します。
RESTful APIの設計原則には以下のような特徴があります
* リソース指向: APIのエンドポイントはリソース（データや機能）を表します。例えば、`/users`や`/products`などのエンドポイントがあります。
* HTTPメソッドの使用: HTTPのメソッド（GET、POST、PUT、DELETEなど）を使用して、リソースの取得、作成、更新、削除などの操作を表現します。
* ステートレス性: サーバーは各リクエストを個別に処理し、セッション状態を保持しません。必要な情報はリクエスト内に含める必要があります。
RESTful APIの実装には、選択したサーバーサイド言語とフレームワークを使用します。言語やフレームワークによって実装方法は異なりますが、エンドポイントの定義やHTTPメソッドの処理、データベースとの連携などが含まれます。また、セキュリティや認証の実装も重要な要素となります。
## セキュリティ
### 脆弱性と対策概論
セキュリティにおける脆弱性は、システムやソフトウェアに存在する脆弱な点や欠陥のことを指します。これらの脆弱性は悪意のある攻撃者によって悪用され、システムへの不正なアクセスやデータの漏洩などのセキュリティ上のリスクを引き起こす可能性があります。
脆弱性に対抗するためには、以下のような対策が必要です
* セキュリティパッチの適用: システムやソフトウェアのメーカーから提供されるセキュリティパッチを定期的に適用し、最新の状態を保つことが重要です。
* 安全な開発プラクティスの採用: セキュリティを意識したソフトウェア開発プロセスを採用し、セキュリティテストやコードレビューを行うことで脆弱性を防止します。
* アクセス制御の実施: システムへのアクセスを制限し、必要な権限を持つユーザーのみがシステムやデータにアクセスできるようにします。
* セキュリティ意識の向上: 社内の教育やトレーニングを通じて従業員のセキュリティ意識を高め、セキュリティポリシーやベストプラクティスの遵守を促します。
### クロスサイトスクリプティング（XSS）
クロスサイトスクリプティング（XSS）は、攻撃者が悪意のあるスクリプトをウェブページに埋め込み、ユーザーのブラウザ上で実行させる攻撃手法です。XSSによって攻撃者は、セッションハイジャックやユーザー情報の窃取などの悪意のある行動を行うことができます。
XSSの対策には以下のような手法があります:
* 入力検証とエスケープ処理: 入力データを検証し、不正なコードや特殊文字をエスケープすることでXSS攻撃を防止します。
* クッキーのセキュアフラグの有効化: セキュアフラグを有効にすることで、HTTPSでの通信時にのみクッキーが送信されるようにします。
* Content Security Policy（CSP）の導入: CSPを使用することで、ウェブページ内で許可されるリソースやスクリプトの制御が可能となり、XSS攻撃のリスクを低減します。
### クロスサイトリクエストフォージェリ（CSRF）
クロスサイトリクエストフォージェリ（CSRF）は、攻撃者がユーザーの代わりに不正なリクエストを送信し、権限のあるアクションを実行させる攻撃手法です。CSRF攻撃によって攻撃者は、不正な資金移動やデータの削除などの悪意のある操作を行うことができます。
CSRFの対策には以下のような手法があります:
* リクエストの検証: リクエストに対してワンタイムトークン（CSRFトークン）を含め、正当なリクエストかどうかを検証します。
* SameSite属性の設定: SameSite属性をStrictまたはLaxに設定することで、クロスサイトリクエストを制限します。
* リファラーチェックの実施: リファラーヘッダーを検証し、同一オリジンからのリクエストかどうかを確認します。
これらの対策は、セキュリティ脆弱性を低減するために重要な役割を果たしますが、完全なセキュリティを保証するものではありません。セキュリティの脅威は常に進化しているため、最新のセキュリティ情報やベストプラクティスにアクセスし、適切な対策を実施する必要があります。
## 開発の基本
### タスク管理とプロジェクト進捗の追跡（例: GitHub, Trello）
プロジェクト管理とタスク管理は、効率的な開発プロセスとプロジェクトの進捗管理に重要な役割を果たします。以下に、タスク管理とプロジェクト進捗の追跡に役立つツールと手法の例を示します。
* GitHub: GitHubは、ソースコードのホスティングやバージョン管理を行うためのプラットフォームです。GitHubのプロジェクトやIssueトラッカーを使用することで、タスクの管理やプロジェクトの進捗状況の追跡が容易になります。Issueを作成し、タスクを割り当てたり、マイルストーンやラベルを使用してタスクの進捗を可視化することができます。
* Trello: Trelloは、ボードやリスト、カードなどの視覚的な要素を使用してタスクやプロジェクトの管理を行うためのオンラインツールです。Trelloを使用すると、タスクの進捗を追跡し、優先順位を設定し、チームメンバーとの共同作業を効果的に行うことができます。
これらのツールを使用することで、タスクの整理、優先順位付け、進捗の追跡、チームのコラボレーションなどがスムーズに行われ、プロジェクトの進行管理が向上します。
toggle holdingsにおいては、エンジニアはGitHubを使い、ビジネスサイドではTrelloを利用しています。
### コミュニケーションスキルと効果的なドキュメンテーションの重要性
コミュニケーションスキルと効果的なドキュメンテーションは、開発プロセスでの円滑なコミュニケーションと知識共有に不可欠です。以下に、コミュニケーションスキルとドキュメンテーションの重要性についてのポイントを示します。
* チームコミュニケーション: 開発チーム内でのコミュニケーションは、意思疎通や問題解決に重要です。適切なコミュニケーションスキルを持つことで、要件や目標の明確化、進捗の共有、意見の交換などが円滑に行われます。コミュニケーションツール（Slack）や会議、週次報告などを活用して、効果的なチームコミュニケーションを確保しましょう。
* ドキュメンテーション: プロジェクトの成功には、適切なドキュメンテーションが欠かせません。ソフトウェアの仕様書、設計ドキュメント、コードコメントなど、開発プロセスやシステムの理解を支援する文書を作成することが重要です。効果的なドキュメンテーションには明確で簡潔な情報、図表やスクリーンショットの活用、更新と共有のプロセスが含まれます。
* ナレッジ共有: チームメンバー間での知識共有は、生産性を向上させるために不可欠です。ドキュメンテーションやウィキ、コードレビュー、定期的なチームミーティングなどを通じて、ベストプラクティス、問題解決手法、学んだことを共有しましょう。
効果的なコミュニケーションスキルとドキュメンテーションの実践によって、チーム全体が同じ目標に向かって協力し、プロジェクトの品質と効率を向上させることができます。