1 `webアプリケーション`

《webアプリケーション》
アプリケーションソフトウエアの略

《ソフトウエア》
コンピューターの中で動作するプログラム

（ソフトウェアの内訳）
OS - コンピューターの基本的人格
OS関連 - OSに付随するもの(デバイスドライバ⇒キーボードを認識する)
それ以外 - アプリケーションソフトウエア

《アプリケーション》

種類	例
デスクトップアプリ	word、excelなど
webアプリケーション	インターネットを介して表示するアプリケーション
ネイティブアプリ	アップルストアなどでインストールするアプリ

2 `Webアプリケーションの仕組み`

1) ブラウザ側(クライアントサイド)のほうでURLのアクセスされたら、サービス側(サーバーサイド)へ「webページを見たい」と リクエスト が飛ぶ。

2) サーバーサイドから「はい！Webページの情報ですよ」とクライアントサイドへレスポンスが返される。

サーバーサイドがリクエストを受けた時に何が起きているか？

① Webサーバーがリクエストを受ける
② WebサーバーがDBサーバーへ必要なデータを問合せして探しだす
③ ②の中から必要なHTML,CSS,Javascriptというデータを作ってブラウザ側へ返す
④ ブラウザ側が③のデータを解釈・実行してWeb上に表示する

サーバー：サービスを提供するコンピューター

WEBアプリサーバー	DBサーバー
Webアプリケーションが動いている	データが入っている箱

DBの主流：RDBMS
《RDBMSの種類》
・MySQL(オープンソース)
・Postgre SQL(オープンソース)
・Oracle Database(商用データベース管理システム)

DBサーバーを別名でミドルウェアと呼ぶことがある。後に説明。

また、どういうリクエストを受けて、どういうレスポンスを返すのかルールが決まっている。そのルールのことを「 プロトコル 」という。

《プロトコルの種類》
・HTTP・・・インターネットのWebの通信の取り決めをしたもの
・SSL・・・暗号化するための技術・約束事
・HTTPS・・・HTTPとSSLを合わせたもの←こっちが主流

フロントエンドとバックエンドとは？

《フロントエンド》
HTML,CSS,Javascriptなどがある。その内のJavascriptは素で書いても良いが、ライブラリやフレームワークを使う方が便利なため、これらを使うのが主流。

《バックエンド》 OS、プログラミング言語
・OSを選択する。主流はLinux
・プログラミング言語：PHP、Ruby、Python、java

フロントエンド(クライアントサイド)	バックエンド(サーバーサイド)
ブラウザ側で実行されるもの	サーバー側で実行されるもの

便利なもの
ライブラリ
プログラムの部品(椅子や机など個別のセット)を1まとめにしたもの
フレームワーク
モデルハウス(ライブラリよりもすぐ使えるようにしたもの、全体の処理の流れを枠組みしたもの)

javascript
ライブラリ	フレームワーク
jQuery、react	vue.js

フレームワーク例
Ruby	PHP	Python
Ruby on Rails	Laravel(ららべる)	Django(じゃんご)

3 `インフラ(基盤)`

ブラウザ側とサーバー側が通信を行うには、ネットワークを整備する必要がある。その基盤をインフラという。

インフラ
昔：自前構築(オンプレミス)
主流：クラウド

クラウドはインターネット経由でサーバーやネットワーク機器をコントロールできる(自分で構築しなくてOK)

《クラウド例》
・AWS
・Azure(アジュール)
・GCP

クラウドはサービスの提供のしかたによって3つに分けることができる

★SaaS(さーす)★
  ネットワーク、サーバー、OS、アプリケーションすべて提供してくれる。

★PaaS(ぱーす)★
  ネットワーク、サーバー、OSを提供してくれる。アプリはあなたで提供してね！

★IaaS(あいあーす)★
  ネットワーク、サーバーを提供してくれる。

##### システムのレイヤー
土台が `ネットワーク`、`サーバー`、その上に`OS`、`アプリケーション`がある

《SaaS例》	《PaaS例》	《IaaS例》
・Gmailなどのクラウドサービス	・google app engine	・AWS　EC2
・セールスフォース	・Heroku

Webシステムの全体像（おさらい）
1）ブラウザからWebサーバーへリクエストへ行く
2）WebサーバーがDBサーバーとやり取りをしてデータを取ってくる
3）そしてレスポンスをブラウザへ返す

《ミドルウェア》　　
アプリケーション と OS との中間にいて、橋渡し(特別な機能を提供）する。

《API》
別のプログラムからある機能を使うために用意されている窓口(外部アプリと連携できるようにする)。

例）googleマップAPI
自分のサイトにgoogleマップを入れることができる

4 `だれが作っているの？`

作っている企業視点

受託: クライアントから「こういう機能作ってください」と言われて作る
自社開発: 自社でシステム開発し、サービス提供(amazon、googleなど)

実際に作っている人は大きく2つに分けることができる。

エンジニア(実際に手を動かす人)
マネジメントに係る人(会社によって定義が変わる)

担当する分野によってエンジニアの名称は変わる

① フロントエンジニア: フロントエイドを担当する人（ex　HTML、CSS、Javascript周りなど、Webの画面をつくる役割を担う）。

② サーバーサイドエンジニア: サーバーサイドを担当するエンジニア。バックエンドの仕組みの部分をつくる。

③ インフラエンジニア: インフラを担当。サーバーやネットワークなどを構築する。

④ SRE: インフラエンジニアに近い。サービスの信頼性や生産性の向上を目指す。①と②の運用や保守の自動化を図る。

A）モバイルエンジニア

B）機械学習エンジニア: 機械学習を用いて開発(機械学習のアルゴリズムをつくる)

C）データサイエンティスト: 統計モデルを作成したり、データを解析したりしてサービスの課題を提供する。

D）フルスタックエンジニア: 1人ですべてできる人

マネジメントする人

① エンジニアリングマネージャー: エンジニアをマネジメントする。

② プロダクトマネージャー: プロダクトの方向性を決める。

③ プロジェクトマネージャー: プロジェクトの進捗管理を担う。

④ プロダクトオーナー: プロダクトの責任者。

⑤ スクラムマスター: チーム開発の手法の1つであるスクラムが円滑に進むようにする

⑥ テックリード(リードエンジニア): 技術面のリーダー(技術的なアウトプットを最大限にする)

⑦ CTO: 会社の最高技術責任者(会社の技術戦略をすべて担っている)。技術面をみる。

⑧ VPoE(ぶいぴーおーいー): エンジニア組織のの採用・育成・強化を担う。組織面をみる。

5 `どのように作ってるの？`

《チーム開発の種類》

ウォーターフォール(伝統的)	アジャイル(主流)
企画・設計・開発・テスト・リリースを1Stepずつ進める。仕様変更に弱い。	1週間～2週間など短期間で一気に「計画」、「設計」、「実装」、「テスト」、「リリース」運用する。細かくリリースしていくため、仕様の修正に強い。対応・改善速度を上げる。

スクラム アジャイル開発の1つ

《開発工程》

① 目標設定: どういった目的でいつまでに何を達成するのか、ビジネス上の目標を立てる。

② 要件定義: システムとしてどういった要件が必要かを決める。; ・機能要件: こういう機能が必要; ・非機能要件: レスポンス速度、セキュリティ要件など、機能ではないけれど必要なもの

③ 設計: システムとしてどういう風な設計にするのかを決める。例えばインフラはどういう構成なのか、データベースはどういう構造にしていくのか、大枠の設計をする。

④ 実装: 実際にコードを書いて実装する。

⑤ テスト: 仕様通りに動くかテストする。またはテストコードを書いて自動テストする。

⑥ デプロイ: 本番環境へリリースする

⑦ 運用: モニタリング

開発関連ツール

エディタ 例）VSコード、Vimなどがある。
- codeを書くツール。
バージョン管理 例）Git、GitHubなどがある。
- コードのバージョンを管理する仕組みのこと。コードの変更毎にバージョンの記録をしておくことで、もし開発中にバグが起きた場合に前のバージョンへ戻ることができる。　
ＣＩ/ＣＤ 例）Circle CI（さーくるしーあい)　SaaS型のCI/CDサービスでアジャイル開発をサポートする。
- ＣＩ(継続的インテグレーション) コードの変更毎に自動でテストし、バグが入りにくくする。
- ＣＤ(継続デリバリー) デプロイ、リリースを簡単にする。
Infrastructure as Code　インフラの設定をコード化して自動化すること。SREが担う。

動画を最低1回は実際に見ないとイメージしにくいと思います。 ↩
「IT用語66選！エンジニアリングの基本をこの動画1本で！【非エンジニア必見】」を見たわたしなりの解釈を含むので、動画を作った人の意図や定義が実際と異なる可能性があります。 ↩

1 webアプリケーション

2 Webアプリケーションの仕組み