Web開発のための用語多すぎてわけが分からない問題(導入)

背景
まずWebアプリケーションの仕組みを図にしてみる
- 超ざっくりな仕組み
- そしてざっくり分けてみる
これからの方針

背景

Webサービス関連のお仕事をしているものの、関連用語が多すぎてわけが分からないのです。

言語
Java,HTML,JavaScript,Ruby,Python,php,C,C++,C#...etc
通信系
HTTP,TCP,FTP,SSL,Ajax,REST API,Webhook...etc
フレームワーク
Spring,AngularJS,NodeJS,Ruby on Rails,JUnit...etc
開発手法
ウォーターフォール,アジャイル,TDD,スクラム,リーン...etc
開発効率化
CI,バージョン管理(Gitとか),IDE,ライブラリ管理(Mavenとか),OSS...etc
その他各種用語
ビルド、デプロイ、リリース、エンコード...etc

このざっくりすぎる列挙の仕方からも、私がなんだか色々よく分かっていないことが分かるかと思います。
世の中には各用語をわかりやすく解説してくれているページがたくさんありますが、読んでるだけでは知識がぼんやり&すぐ忘れてしまうので、自分なりに色々整理してみようという試みです。

まずWebアプリケーションの仕組みを図にしてみる

超ざっくりな仕組み

ここだけはどんな仕組みを使っていたとしても変わんないだろ！！というレベルに抽象化しようとしたら、超絶ざっくりした図になりました。
f:id:moeka-dev:20180325230935p:plain ~~これはひどい。~~ いろんな意味でWeb業界の奥深さが感じられる図になってしまいました。
突き詰めればたったこれだけの仕組みに、世界中の頭いい人達が寄ってたかって技術詰め込んでビジネスやってるんですもんね。
せっかくなので私達開発者も登場させてみました。

f:id:moeka-dev:20180325230931j:plain (11を超えたら丸で囲まれなくなっちゃいました…)
まぁよっぽどのことがない限り、世に出ているWebサービスたちはこんな感じのフローを辿っているのではないでしょうか。恐らく。

そしてざっくり分けてみる

この図を大きく分けたらこんな感じになると思います。
f:id:moeka-dev:20180325230926j:plain 開発サイドって言葉は私が適当につけました。ツッコミどころは色々あると思いますが重々自覚しておりますので許してください。
なお、ここでいう「インターネット」の部分は専門外なのでしばらくは詳しくは勉強しないと思います。せいぜい「OSI参照モデル」や「TCP/IP階層モデル」でいうトランスポート層あたりまでかな…ネットワーク難しいっす…いや知っておかないといけないんですけどね…