フルスタック開発
🔹 フロントエンド
アーキテクチャ
基本三大要素
HTML, CSS
Webブラウザ（Google Chrome, Safari, Edgeなど）は、「ブラウザで表示するためのタグづけ言語」であるHTMLを解釈し、画面表示。CSSはHTMLの装飾（フォントや見出しの大きさ、背景色など）を効率的に行うために用いられる。別々に管理することで、同じWebサイト内で共通の装飾を使い回すことができる。
JavaScript
ブラウザ上で動く「スクリプト」の1つ。主にWebページやアプリケーションにおける動きや機能を実現する役割を持っている。逆に言えば、クライアントサイドで動作するため、ブラウザにできることしかできない。サーバー内のデータの取得や更新などは、例えばPHP、Python、Java、サーバーサイドJavaScriptなどにバックエンドで処理してもらう必要がある。
（JavaScriptは、HTMLパーサーとは別のスクリプトエンジンによってコンパイルされる。）
JavaScriptを用いたフロントエンドアーキテクチャ
React, Angular, Vue.js, jQuery, Node.js, Next.js
SPA(Single Page Application)
最初に1つのHTMLページを読み込んだ後、必要なデータだけをサーバーから非同期的に取得し、動的に画面を変化させられる。
- ページ遷移がなく画面の一部のみが更新されるため、ユーザーエクスペリエンスが向上する。
- サーバーとの通信が非同期に行われるため、リアルタイムな情報の取得や更新が可能になる。
- フロントエンドがJavaScriptを中心に開発され、高度なインタラクティブUIを実現できる。
- 初回のページロードには多少時間がかかるが、その後のページ遷移は高速。
CSRとSSR
CSR(Client-Side Rendering)：クライアント（Webブラウザ）側でページの表示やデータの取得・処理を行う。
SSR(Server-Side Rendering)：サーバー側でページのレンダリング。
🔹 バックエンド
基本原理
- クライアントからのリクエスト受信
- 要求に応じたコンテンツ生成
- ビジネスロジックの実行
- レンダリングし画面を返す
アーキテクチャ
主に4つの層で構成される。
OS層
クラウドを含む
例：AWS, Azure, Google CloudPlatform
ミドルウェア層
VMのようなソフトウェアの実行環境
例：Apache, IIS, TOMCAT, nginx
言語
例：Java, Ruby, PHP, Python
フレームワークやAPI
例：Spring, Rails, Laravel, Django
🔹 モデル層
データベースや外部システムを指し、データを管理して提供する。
例：RDB, NoSQL, 郵便番号から住所を返すようなWebAPI
リレーショナルデータベース(RDB)
最も主流。データを表形式で保存し、それらの表の間の関係性を定義するデータベース。行（レコード）と列（カラム）の形式でデータを整理。
SQLという「データ操作・管理」を目的とする言語でコントロールする。
例：MySQL
モデルの利用方法
データを表で受け渡しするRDBやSQLと、オブジェクトのプロパティとして扱おうとするオブジェクト指向言語のデータモデルは必ずしも相性が良くない。そのため、プログラムやフレームワークからデータアクセスを行う際にはDAOやORMを使用して、直接SQLをプログラムを発行しない方法が主流になっている。
その他
インタプリタ言語
一般的に「解析」のオーバーヘッドが実行時にかかるため、パフォーマンスが出にくい言語が多くある。また、実行時に読み込んげ解析する動作の仕組み上、プロセスやスレッドの管理がこんなんで「アクセス数だけプロセスが立ち上がる」などの特徴を持つ言語もある。結果、リソースをコントロールしにくく、サーバー資源を圧迫し、パフォーマンスに影響を与えることがある。
例：Python, Ruby, JavaScript
コンパイル言語
都度解析する負荷がかからないことと、同時多数のスレッドやプロセスを管理できる構造の言語が多く、リソース資源を無駄にしにくい構造が特徴として挙げられる。また、コンパイル時にある程度のエラーチェックが行われるため不具合を減らしやすい性質や、マシンコードで配布することでソースコードを流出させにくい性質がある。
例：C, C++, Rust, Java
フロントエンド/バックエンドを分ける意味
それぞれ求められることが違う。
フロントエンド：変化に強く、高度なUIに対応でき、スマートフォンなどで軽く動作すること。
バックエンド：変化に対して堅牢で、可用性が高く、セキュアで正確であること。
フロントエンド/バックエンドの連携方法
紐付けは、Webを用いたAPIを作成し、それをフロント側から呼び出す方法で実現することが多い。その際に最もよく用いられるのがRestful API。HTTPのメソッド(Get, POST, PUT, DELETE)を用いてやり取りを行い、送受信するデータはJSON形式を取る。
Discussion