WEBシステム関連プログラム言語まとめ

# WEBシステム関連プログラム言語まとめ

## 概要

WEBシステムってどんだけフレームワークあんねんムズすぎやろ...
と思って調べましたが、中々まとまったページが見つからなかったので自分で調べてみました。

せっかくなのでWEBシステムやネイティブアプリに必要なフレームワークやソフトウェアを一通りまとめています。

2024/07/05時点での個人的まとめです。

## 目次
  - [フロントエンド](#フロントエンド)
  - [バックエンド](#バックエンド)
  - [サービス構築](#サービス構築)
  - [構成例](#構成例)
    - [TypeScriptでクロスプラットフォーム開発(最推し)](#typescriptでクロスプラットフォーム開発最推し)
    - [コンパクトにWEBページ開発](#コンパクトにwebページ開発)
    - [Microsoft推しなら](#microsoft推しなら)
  - [所感](#所感)
  - [補足](#補足)


## フロントエンド

| 分類<br/>(構成/デザイン/スクリプト) | フレームワーク<br/>or<br/>ソフトウェア | 言語                               | 概要                                                    |
|------------------------|---------------------------|----------------------------------|-------------------------------------------------------|
| クロスプラットフォーム            | Flutter                   | Dart                             | -                                                     |
| ^                      | React Native              | JavaScript[^1]                   | JSX(JavaScriptXML)という構文で<br/>HTMLやCSSをJavaScriptに埋め込む |
| ^                      | \.NET MAUI                | C# + XAML                        | -                                                     |
| ネイティブ(Mobile)          | -                         | Swift(Objective-C)               | -                                                     |
| ^                      | -                         | Kotlin(Java)                     | -                                                     |
| ネイティブ(PC)              | Swing                     | Java                             | -                                                     |
| ^                      | JavaFx                    | Java                             | -                                                     |
| ^                      | WindowsForm               | C#                               | -                                                     |
| ^                      | WPF                       | C# + XAML                        | -                                                     |
| Webページ                 | -                         | HTML + CSS<br/> + JavaScript[^1] | "HTML Living Standard"<br/>(旧HTML5)が最新           |
| ^                      | Vue\.js                   | JavaScript[^1]                   | 小規模向け                                                 |
| ^                      | React                     | JavaScript[^1]                   | 大規模向け、厳密にはライブラリ群                                      |
| ^                      | AngularJS                 | JavaScript[^1]                   | -                                                     |
| ^                      | Blazor                    | C# + JavaScript[^1]              | -                                                     |


## バックエンド
| 分類                     | フレームワーク<br/>or<br/>ソフトウェア | 言語             | 概要                                   |
|------------------------|---------------------------|----------------|--------------------------------------|
| OS                     | WindowsServer             | -              | -                                    |
| ^                      | Linux                     | -              | -                                    |
| Webサーバ<br/>(待ち受け/負荷分散) | NGINX                     | -              | オンプレミスならロードバランサ<br/>(or リバースプロキシ)も兼任 |
| ^                      | Appatch                   | -              | 同上                                   |
| ^                      | IIS                       | -              | 同上                                   |
| サーバ処理                  | Django                    | Python         | 大規模向け                                |
| ^                      | Flask                     | Python         | 小規模向け                                |
| ^                      | Ruby on Rails             | Ruby           | -                                    |
| ^                      | Laravel                   | PHP            | -                                    |
| ^                      | Express                   | JavaScript[^1] | Node\.js上で動作                         |
| ^                      | Spring Boot               | Java           | -                                    |
| ^                      | ASP\.NET Core             | C#             | -                                    |
| DB                     | OracleDB                  | PL/SQL         | -                                    |
| ^                      | SQL Server                | Transact-SQL   | -                                    |
| ^                      | MySQL                     | MySQL          | 無料(有料版あり)                            |
| ^                      | DynamoDB                  | -              | NoSQLなデータベース                         |
| ^                      | Redis                     | -              | 同上                                   |
| シェルスクリプト               | PowerShell                | PowerShell     | -                                    |
| ^                      | bash                      | bash           | zshなるものがあるらしい                        |
| 設定ファイル                 | -                         | JSON           | JSONCやJSON5が上位互換                     |
| ^                      | -                         | YAML           | -                                    |

## サービス構築
| 分類     | ソフトウェア        | 概要            |
|--------|---------------|---------------|
| クラウド   | AWS           | 世界No.1シェア     |
| ^      | Azure         | Microsoft系に強い |
| オンプレミス | WindowsServer | -             |
| ^      | Linux         | -             |

## 構成例

### TypeScriptでクロスプラットフォーム開発(最推し)
| 分類            | フレームワーク<br/>or<br/>ソフトウェア | 言語           |
|---------------|---------------------------|--------------|
| 構成/デザイン/スクリプト | React Native              | TypeScript   |
| サーバOS         | WindowsServer             | -            |
| Webサーバ        | NGINX                     | -            |
| サーバ処理         | Express                   | TypeScript   |
| DB            | SQL Server                | Transact-SQL |
| シェルスクリプト      | PowerShell                | PowerShell   |
| 設定ファイル        | -                         | JSON         |
| クラウド          | AWS                       | -            |

### コンパクトにWEBページ開発
| 分類            | フレームワーク<br/>or<br/>ソフトウェア | 言語         |
|---------------|---------------------------|------------|
| 構成/デザイン/スクリプト | Vue\.js                   | TypeScript |
| サーバOS         | Linux                     | -          |
| Webサーバ        | NGINX                     | -          |
| サーバ処理         | Flask                     | Python     |
| DB            | DynamoDB                  | -          |
| シェルスクリプト      | bash                      | bash       |
| 設定ファイル        | -                         | JSON       |
| クラウド          | AWS                       | -          |

### Microsoft推しなら
| 分類            | フレームワーク<br/>or<br/>ソフトウェア | 言語           |
|---------------|---------------------------|--------------|
| 構成/デザイン/スクリプト | \.NET MAUI                | C# + XAML    |
| サーバOS         | WindowsServer             | -            |
| Webサーバ        | NGINX                     | -            |
| サーバ処理         | ASP\.NET Core             | C#           |
| DB            | SQL Server                | Transact-SQL |
| シェルスクリプト      | PowerShell                | PowerShell   |
| 設定ファイル        | -                         | JSON         |
| クラウド          | Azure                     | -            |


## 所感
- クロスプラットフォーム開発がかなり現実的になってきている
- TypeScriptは覇権になりそう
- 結局HTMLやCSSの知識は要りそう
- SQLは覚えるに越したことはない
- バックエンドもJavaScriptで書ける時代になったのってすごくない？
- htmxとやらでJavaScriptの要らない未来が迫ってきている説もあるとかないとか

## 補足
- クラサバがメインでWEB系はほとんど触ったことないので、認識の誤りがあるかも
- なるべく王道なものを挙げたつもりです
- 異論は大いに受け付けます
- 推しがあればぜひ教えて下さい
- 気が向いたら追記、修正します

[^1]: JavaScriptは基本的にほぼTypeScript[^2]で置き換えが可能
[^2]: TypeScript：MicrosoftがJavaScriptを拡張、静的型付けを必須としたため、エラーを未然に防ぎやすくなった