【Web系】2021年以降の技術トレンド

こんにちは、ゆーろんです。

近年のWeb系で注目されている技術を全容把握のためにフロントエンド、バックエンドよらずまとめてみました。


## 1. フロントエンド
### 1.1. TypeScript
TypeScriptはJavaScriptを拡張して作られたAltJSのプログラミング言語であり、2014年頃にMicrosoftによって開発されました。
一言でいうなら**型定義可能なJavaScript**と言える。

TypeScriptが注目されるているのは、JavaScriptによるシステム開発がある程度規模が大きくなると実装・保守の効率が非常に悪くためです。

* 型の定義がないので、意図しない値が入ることがある。
* null safety でないので、意図しない null や undefined が入ることがある。
* オブジェクト指向言語だが、インターフェースやクラス定義がなく、プロパティ名を間違っていても実行時までエラーにならず、エラーになっても原因の解析に時間がかかることが多い。
* 型やインターフェース、クラス定義がないので、エディタによる入力補完があまり受けられない。

JavaScriptを使ったことがあれば、TypeScriptの学習コストは低い。
近年(2021年時点)ではType Scriptを実務で使う機会は増えていってます。
特にSPA構成のReactやVue、AngularJSとセットで使われることが多い。

### 1.2. SPA(React, Vue等)
SPA(Single Page Application)は単一のWebページで構成するアプリケーションです。
ページ遷移を行わずにページやコンテンツの切り替えが可能なのが特徴です。
言い換えると、**他のページへ移動せずにコンテンツの切り替えができる技術**です。
具体的にはユーザーがひとつのサービスを通じて得られる体験であるUXの向上に効果があり、ブラウザの挙動に縛られることがないUIの実現が可能です。

<img src="https://engineer-life.dev/wp-content/uploads/2019/07/%E3%82%B9%E3%82%AF%E3%83%AA%E3%83%BC%E3%83%B3%E3%82%B7%E3%83%A7%E3%83%83%E3%83%88-2019-07-27-17.31.53.png" width="60%">

SPAの開発はJavaScript(フロントエンド)により実現します。
オープンソースで提供されているSPAを構築可能なフレームワークは以下のようなものがあります.

* **React** ・・・ Facebook主導のフレームワーク、UIデザインの知識がなくても最先端のフロントエンドが作れる、スマホアプリにも拡張可能
* **Vue** ・・・ シンプルなフレームワークで使いやすい、日本語のドキュメントが充実している、学習コストが低い
* **Angular** ・・・ Google主導のフレームワーク、動作端末を考慮する必要がなく汎用性が高い、機能が多いため大規模開発に向いている

> SPAに対してMPA(Multiple Page Application)と呼ばれる複数のページで構成するアプリケーションがある
> HTTP GETが来たら、リクエストに応じたHTMLを1つ1つ組み上げてブラウザに返す。
> Railsやlaravelなどのサーバサイドフレームワークを公式ドキュメント通り作るとこの設計になる。

### 1.3. SSR(Server Side Rendering)
SSRはページ遷移のたびサーバーにリクエストが走り、そのままサーバー側でAPIと連携をしてレンダリングが行われ、生成されたHTMLをブラウザに返すアーキテクチャのことである。
サーバー側でレンダリングが行われることを特徴である。

<img src="https://storage.googleapis.com/zenn-user-upload/f7fef7675d04-20220206.png" width="60%">

> サーバーサイドレンダリング（SSR）とは、その名の通りサーバー側でアプリケーションの HTML を生成し、レスポンスとして返すことを言います。
> 一般的に利用されている MPA（Multiple Page Application）では言うまでもなく行われていることなので、SSR というワードは自ずと SPA（Single Page Application）を構築する際のオプション機能を指します。

SSRのメリットを整理すると、まず一番に挙がるのはレンダリングをサーバー側で行えるので、通常のSPAと比べて初回読み込みに時間がかからないということである。
厄介なレンダリング処理をサーバー側で行えるので、ブラウザの負担が減り、すなわちブラウザのスペックの高くない機器（スマホなど）でも安定した表示速度を保つことが可能。

> SSG(Static Site Generation) ・・・ ビルド時に、サーバー側で、APIからのデータ取得とそれに伴ったHTMLの構築を終わらせておき、ユーザーからリクエストされた際にこの事前につくっておいたHTMLを渡すアーキテクチャ

## 2. バックエンド
### 2.1. NoSQL
NoSQL(Not Only SQL)は非リレーショナルデータベース(RDB)なデータベースの総称のことである。
近年RDBでは対応できないケースが増えてきたことから、昨今ではNoSQLが注目されています。

<img src="https://www.pasonatech.co.jp/workstyle/column/media/9063_tn_1.png" width="60%">

NoSQLでは音声や画像など、Excelのセルに入らないデータも扱えます。
速度を優先する構造であるためビッグデータなど大量データの処理に向くことも注目を集める大きな要因である。

NoSQLは4種類に分類される。
* キーバリュー型
* ワイドカラムストア型
* ドキュメント型
* グラフ型

#### NoSQLが適するケース
* 非構造化データや半構造化データを扱うとき
* スピードが第一に要求されるシステム
* 拡張する可能性が高いシステム

### 2.2. Go言語(Golang)
Go言語(Golang)は2009年にGoogleが公開した静的型付けコンパイル型言語である。
Go言語はhttpサーバー機能がデフォルトで実装されているため、簡単でシンプルかつ高速動作するマイクロサービスを実装可能です。
そのためマイクロサービス向けの開発言語として近年非常に注目されてWeb系のバックエンドでは需要のある言語です。

<img src="https://type.jp/et/feature/wp-content/uploads/2021/07/GO1.jpg" width="50%">

#### Go言語のメリット
* 構文が比較的シンプル
* ガベージコレクションや並行処理を簡単に実装できる機能がある
* コンパイラ言語なので処理が早い
* 安全性が高い

#### Go言語のデメリット
* スマホアプリケーションのフロントエンド開発が苦手
* フロントエンドのデザインには向いていない


## 3. インフラストラクチャー
### 3.1. AWSやGCPなどのクラウド(IaaS)
IaaS(Infrastructure as a Service)はクラウドコンピューティングのうちの1つで、仮想化技術を利用してハードウェアリソース（CPU／メモリ／ストレージ）などのデジタルインフラをインターネット経由でオンデマンドで提供するサービスです。
有名どころが提供しているサービスとしてはAmazonの運営するAWSやGoogleの運営するGCPなどがあります。

#### AWS
AWS(Amazon Web Service)はAmazonが運営するIaaSサービスです。
AWSではインフラストラクチャーを構築するための様々なサービスが提供されています。

> VPC, S3, API GateWay, Lambda, EC2, ECS, EKS, Fargate, Route53, IAM, Cloud Watchなど

Webアプリケーション開発には近年Dockerなどのコンテナ型仮想化技術が注目されて一般化され始めています。

EC2などのサーバ仮想化技術はGPUが必要な特殊な処理が必要なサーバ等の構築以外で今後選択されることは減ることが推測されます。


コンテナ型仮想化技術(Dockerの場合)でAWSでインフラを構築する際に必要になるメインのサービス
* ECS

　　ECSはフルマネージドコンテナオーケストレーションサービスです。
コンテナ化されたアプリケーションを簡単にデプロイ、管理、およびスケーリング可能です。
ECSによりクラスター上のコンテナを実行、停止、管理できます。

* Fargate

　　FargateはECSやEKSで動作するホストマシンを意識せずにコンテナを実行できる環境を提供するサービスです。
コンテナ向けのサーバーレスコンピューティングと言えます。

Fargateを用いることで、EC2インスタンスやそのスケーリング、インスタンスの集合体であるクラスターを管理する必要がなくなるため管理の効率化を図れます。
FargateはSSHによるコンテナへのアクセスを許可していませんが、ECS Execという機能を用いることで直接コンテナに直接ログイン可能である。

#### GCP
GCP(Google Cloud Platform)はGoogleが運営するIaaSサービスです。
Googleではインフラストラクチャーを構築するための様々なサービスが提供されています。

> VPC, GCS, Cloud Functions, GCE, GKE, Cloud Run, IAM, IPM, Firebaseなど

コンテナ型仮想化技術(Dockerの場合)でGCPでインフラを構築する際に必要になるメインのサービス
* Cloud Run

　　AWSで言うFargateのような機能を提供するサービス

* GKE

　　GKEはGoogleが開発したKubernetesを用いたマネージドサービス。
AWSでいうECS,EKSに相当する。KubernetesのコンテナだけではなくDockerコンテナにもサポートしている。

### 3.2. Terraform
TerraformはHashiCorp社が開発した**インフラストラクチャーをソースコードで管理できるツール**です。
> IaS(Infrastructure as Code)と呼ばれるインフラストラクチャーをコード化する技術の1つです

ただし管理できるのはインフラ構成であって、サーバー内のユーザー設定やライブラリのインストールなどはサポートしていません。

Terraformなどを含むIacのメリットの1つはAWSやGCPなどのIaaSサービスを手動でサイトにアクセスしてひとつひとつ設定する必要がないことです。
またインフラストラクチャーを1つのプロバイダ(AWSやGCPなど)に限定せず、ほとんどすべてのタイプのインフラをTerraformのリソースとして表すことが可能なことは大きなメリットです。

### 3.3. Docker
DockerはDocker社が開発している**コンテナ型仮想化技術**を実現するためのプラットフォームの1つです。
DockerではホストOSの上に動作しているDocker Engineからコンテナと呼ばれるミドルウェアの環境構築がされた実行環境を作成し、その中でアプリケーションを動作させます。
そのためホスト型仮想化よりも圧倒的に**軽量に動作**する特徴がコンテナ型仮想化技術にはあります。

<img src="https://camo.qiitausercontent.com/e1829a8f27e2a0656d1d7bdfea06fc98b0b565b8/68747470733a2f2f71696974612d696d6167652d73746f72652e73332e616d617a6f6e6177732e636f6d2f302f3230393930392f39393631326331312d343262302d393438352d376261342d3230336231313862393534352e706e67" width="50%">

Dockerを使う最大のメリットは以下の通りです。
**ソフトウェアの実行環境を複雑なアーキテクチャであっても、Dockerを使って管理することで簡単にどんなマシンにでも共有できる**点。

* コード化されたファイルを共有することでどこでも誰でも同じ環境が作れる
* 作成した環境を配布しやすい。
* スクラップ＆ビルドが容易にできる。

以上の点もDockerを使うことメリットです。

### 3.4. kubernatu
Kubernetesはオーケーストレーションツールの一つであり、コンテナの運用管理と自動化を実現するオープンソースソフトウェアです。
Kubernetesは、Google社が社内で利用していたコンテナ管理ツールが汎用化され、オープンソースソフトウェアとなったものであり、複数のコンテナを統合的に管理しつつ、スケールイン・アウトなども自動化することが可能です。
> オーケストレーション:コンピュータシステム、アプリケーション、およびサービスにおける、設定、管理、調整の自動化すること

コンテナ仮想化技術とマイクロサービスアーキテクチャは相性が良いため注目されています。

## 5. その他
### 5.1. サーバーレスアーキテクチャ
サーバーレスアーキテクチャーは常時稼働するサーバー（仮想マシン）を極力使わずにアプリを構築するアーキテクチャーです。

### 5.2. マイクロサービスアーキテクチャ
マイクロサービスアーキテクチャはアプリケーションを一枚岩の「モノリシック」なプログラムとしてではなく、複数のサービスや機能を疎結合させて構築するアーキテクチャです。
マイクロサービスのアーキテクチャでは、大規模で複雑なアプリケーションを提供する際のスピードと信頼性が向上することがメリットです。

マイクロサービスをWeb系システムで組むための関連技術としては、Go言語やKubernetesなどが注目されています。