# フロントエンド・バックエンドの分離について
## フロントエンドとは
* Webサイトの視覚的な部分を担当する。最もユーザーに近い部分である。
* 言語はHTML、CSS、JavaScript、TypeScript等。
* Next.js等、フレームワークを合わせて利用する。
* PC・スマートフォン・タブレット等、デバイスごとに異なるサイズ設定（UI）や使いやすいデザイン性（UX）設定が必要である。
* バックエンドの前提としてフロントエンドの知識取得が必要である。

## バックエンドとは
* データベースやサーバ等、一般的にWebサイトの目につかない裏側の部分を担当する。
* 言語はJava、C++等（コンパイラ言語）、PHP、Ruby、Python等（インタプリタ言語）。
* フロントエンドと同様に、フレームワークを合わせて利用する。
* バックエンドの開発言語だけでなく、ミドルウェアという補完ソフトウェアの知識も必要である。
* ミドルウェアは、Apache、Tomcat、MySQL等。

## SPA(Single Page Application)　
* SPAとは、単一のWebページでアプリケーションを構成する設計構造である。
* SPAのメリット
* 動作性の向上（JavaScript上でページ遷移を行い、必要なページのみを読み込んで表示する。）
* より高度なWeb表現ができる。（ブラウザの挙動に縛られること無く、幅広いUIを実現できる。）
* ネイティブアプリ（ダウンロードしてローカルで動かすタイプのアプリ）の代用ができる。
* SPAのデメリット
* 開発者が少ない。
* 実装コストがかかる。
* JavaScriptコードが多くなり、初期ローディングに時間がかかる。
* SPAは、ページ遷移の高速化が必要で、滞在時間が長いサービスで適する。逆に直帰率が高いブログなどは適さない。

## フロントエンド・バックエンドを分離するメリット
* バックエンドが簡潔になり、再利用性が高まる。
* HTMLレンダリングやセッション管理、ルーティング等をフロント側で実施することで、バックエンドの機能を多様に生かすことが可能となる。（デバイスごとの画面調整等）
* フロントエンドとバックエンドを、別チーム（並行）で開発できる。
* フロントエンドとバックエンドがそれぞれ別にリリースができるため、リリースサイクルの短縮が可能となる。
* フロントエンドのフレームワークの仕組みを利用して、SPAを高めることができる。

## 参考文献
* [【徹底比較】フロントエンド vs バックエンド！両者の違いから必要なスキル、将来性まで分かりやすくご紹介します！](https://www.geekly.co.jp/column/cat-technology/1903_088/)
* [SPA(Single Page Application)ってなに？](https://digitalidentity.co.jp/blog/creative/about-single-page-application.html)
* [フロントエンドとバックエンドをわけて開発する](https://qiita.com/heiwa/items/10d1a74d0b141999220f)

###### tags: `バックエンドへ`