Web周りの関連技術一覧

私が初めてWebアプリを作成する際にその関連技術のあまりの多さに何から手をつけていいか分からなかったので， それを自分なりにまとめたものを公開します．順次アップデート予定．

概要

まずWebアプリの構造として，

1. クライアントサイド...アプリが動いている端末に入っており，通信が途切れても残る部分．
2. サーバサイド...アプリが動く端末には入らず，どこか別のマシンで動いている部分．
3. データベース...顧客や商品の情報などがそれはそれは大量に蓄えられる部分．

に大別でき，1・2・3の組み合わせで成り立ちます．この3つを構成する要素についてそれぞれ見ていきます．

クライアントサイド

主にアプリ自体の見栄えに関わります．以下の3要素からなります．

1. HTML ... Webページのレイアウトを決定するもの．
2. CSS ... HTMLを綺麗に飾り立てるためのもの．
3. JavaScript ... Webページを動的に動かすためのもの．サーバサイドとやりとりもする．

具体的な技術は以下のようになります．

言語	ライブラリ	フレームワーク	亜種
html			Handlebars, Mustache
css			Stylus, SCSS, SASS
javascript	jquery, React.js, axios, lodash	Vue.js, React.js, Angular.js	TypeScript, Babel, Buble, CoffeeScript

サーバサイド

クライアントサイド，およびデータベースとやりとりをする架け橋となる部分です．他にも色々な仕事がありますが，要するにユーザのマシンには重すぎる処理やユーザからは隠したい処理が行われる部分です．

具体的な技術は以下のようになります．

言語	フレームワーク
Ruby	Ruby on Rails, Hanami
PHP	Laravel, Slim, CakePHP
Node.js	Express, Meteor.js, AdonisJS
Java	Spring, Play, JSF
Python	Django, Responder
Go	gin, go-kit
Elixir	Phoenix
(シェルスクリプト)

データベース

データを蓄え，かつ高速でデータを探したり更新することに特化したデータ群で，これを管理するシステムをデータベース管理システムといいます．必要に応じてサーバとやりとりをします．データベース管理システムには大きく以下の2種類があります．

1. RDBMS ... RDB(関係データベース)と言われるデータ構造を管理します． RDBはいわゆる表です．表形式でデータを管理します．上の言語とフレームワークの図なんかもRDBと言えるでしょう．最も一般的なデータベースです．
2. NoSQL ... NotOnly SQLの略で，RDB以外を扱うデータベース管理システムの総称です．

具体的な技術は以下の通りです．

RDBMS	NoSQL
PostgreSQL	MongoDB(ドキュメント志向)
MySQL	BigTable
SQLite	Redis(インメモリDB, キーバリューストア,揮発性&永続性)
MariaDB	Memcached(インメモリDB, 揮発性)

オススメの学習フロー

1. HTML→CSS→JavaScript→JQuery
2. MySQLを使ったデータベース操作(1と前後しても良い．平行してやっても良い)
3. いずれかのフレームワーク

まとめ

以上の3種類を組み合わせてWebアプリを構築することが多いです．
例えば，
HTML,CSS,JavaScript (+ Vue.js) × Ruby on Rails × MongoDB
などです．
実際にはもっと多くの種類がありますし，フレームワークを使えばクライアントサイドとサーバサイドをあまり意識せず構築できます．また，一方で我々が実生活でお世話になっているアプリ達は，用途に応じてデータベースを使い分けたりともっと複雑で大規模です．
しかし，これらを知っていれば個人でアプリを作成する際に困ることはないでしょう．私はそもそもHTMLが何か知らない状態でインターンシップに飛び込んだのでとんでもなく苦労しました．
主には自分の知識の整理のために投稿しますが，誰かの目にとまりあわよくば助けとなることを願っています．私自身まだまだ未熟で間違いや不足があると思いますので，修正や加筆，苦言などもいただけると嬉しいです．
フレームワークごと，データベースごとの利点とかもまとめて加筆予定．