10分で復習「IT用語66選！エンジニアリングの基本をこの動画1本で！【非エンジニア必見】」をまとめてみた

Youtubeにある[「IT用語66選！エンジニアリングの基本をこの動画1本で！【非エンジニア必見】」](https://youtu.be/kZakG8UPZaY/)を見たあとに、10分で復習できるようにまとめてみました。

記事を読むときの注意[^1]。
記事を読むときの注意[^2]。

[^1]: 動画を最低1回は実際に見ないとイメージしにくいと思います。

[^2]: [「IT用語66選！エンジニアリングの基本をこの動画1本で！【非エンジニア必見】」](https://youtu.be/kZakG8UPZaY/)を見たわたしなりの解釈を含むので、動画を作った人の意図や定義が実際と異なる可能性があります。


## 1&emsp;`webアプリケーション`
<br>

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

<br>

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

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

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

<br>

## 2&emsp;`Webアプリケーションの仕組み`
<br>

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

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

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

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

<br>

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

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

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

<br>

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

<br>

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

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

#### フロントエンドとバックエンドとは？<br>

**《フロントエンド》** <br>HTML,CSS,Javascriptなどがある。その内のJavascriptは素で書いても良いが、ライブラリやフレームワークを使う方が便利なため、これらを使うのが主流。
<br>
**《バックエンド》** OS、プログラミング言語
・OSを選択する。主流はLinux
・プログラミング言語：PHP、Ruby、Python、java  
<br>

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


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


<table>
  <caption>javascript</caption>
  <thead>
    <tr>
      <th>ライブラリ</th><th>フレームワーク</th>
    </tr>
  </thead>
  <tr>
    <td>jQuery、react  </td><td>vue.js</td>
  </tr>
</table>


<table>
  <caption>フレームワーク例</caption>
  <thead>
    <tr>
      <th>Ruby</th><th>PHP</th><th>Python</th>
    </tr>
  </thead>
  <tr>
    <td>Ruby on Rails</td><td>Laravel(ららべる)</td><td>Django(じゃんご)</td>
  </tr>
</table>

<br>

## 3&emsp;`インフラ(基盤)`
<br>
ブラウザ側とサーバー側が通信を行うには、ネットワークを整備する必要がある。その基盤をインフラという。

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

<br>

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

<br>

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

<br>


~~~ md:クラウドはサービスの提供のしかたによって3つに分けることができる
★SaaS(さーす)★
  ネットワーク、サーバー、OS、アプリケーションすべて提供してくれる。

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

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

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

~~~
<br>

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

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

<br>  

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

<br>

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

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

<br>

## 4&emsp;`だれが作っているの？`
<br>

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

:::

実際に作っている人は大きく2つに分けることができる。
- エンジニア(実際に手を動かす人)
- マネジメントに係る人(会社によって定義が変わる)

#### 

:::note 
担当する分野によってエンジニアの名称は変わる
<dl>
  <dt>①&thinsp;フロントエンジニア</dt>
  <dd>フロントエイドを担当する人（ex　HTML、CSS、Javascript周りなど、Webの画面をつくる役割を担う）。</dd>
  <dt>&thinsp;</dt>
  <dd></dd>
  <dt>②&thinsp;サーバーサイドエンジニア</dt>
  <dd>サーバーサイドを担当するエンジニア。バックエンドの仕組みの部分をつくる。</dd>
  <dt>&thinsp;</dt>
  <dd></dd>
  <dt>③&thinsp;インフラエンジニア</dt>
  <dd>インフラを担当。サーバーやネットワークなどを構築する。</dd>
  <dt>&thinsp;</dt>
  <dd></dd>
  <dt>④&thinsp;SRE</dt>
  <dd>インフラエンジニアに近い。サービスの信頼性や生産性の向上を目指す。①と②の運用や保守の自動化を図る。</dd>
  <dt>&thinsp;</dt>
  <dd></dd>
  <dt>A）モバイルエンジニア</dt>
  <dd>&thinsp;</dd>
  <dt>&thinsp;</dt>
  <dd></dd>
  <dt>B）機械学習エンジニア</dt>
  <dd>機械学習を用いて開発(機械学習のアルゴリズムをつくる)</dd>
  <dt>&thinsp;</dt>
  <dd></dd>
  <dt>C）データサイエンティスト</dt>
  <dd>統計モデルを作成したり、データを解析したりしてサービスの課題を提供する。</dd>
  <dt>&thinsp;</dt>
  <dd></dd>
  <dt>D）フルスタックエンジニア</dt>
  <dd>1人ですべてできる人</dd>
</dl>

:::

:::note
マネジメントする人
<dl>
  <dt>①&thinsp;エンジニアリングマネージャー</dt>
  <dd>エンジニアをマネジメントする。</dd>
  <dt>&thinsp;</dt>
  <dd></dd>
  <dt>②&thinsp;プロダクトマネージャー</dt>
  <dd>プロダクトの方向性を決める。</dd>
  <dt>&thinsp;</dt>
  <dd></dd>
  <dt>③&thinsp;プロジェクトマネージャー</dt>
  <dd>プロジェクトの進捗管理を担う。</dd>
  <dt>&thinsp;</dt>
  <dd></dd>
  <dt>④&thinsp;プロダクトオーナー</dt>
  <dd>プロダクトの責任者。</dd>
  <dt>&thinsp;</dt>
  <dd></dd>
  <dt>⑤&thinsp;スクラムマスター</dt>
  <dd>チーム開発の手法の1つであるスクラムが円滑に進むようにする</dd>
  <dt>&thinsp;</dt>
  <dd></dd>
  <dt>⑥&thinsp;テックリード(リードエンジニア)</dt>
  <dd>技術面のリーダー(技術的なアウトプットを最大限にする)</dd>
  <dt>&thinsp;</dt>
  <dd></dd>
  <dt>⑦&thinsp;CTO</dt>
  <dd>会社の最高技術責任者(会社の技術戦略をすべて担っている)。技術面をみる。</dd>
  <dt>&thinsp;</dt>
  <dd></dd>
  <dt>⑧&thinsp;VPoE(ぶいぴーおーいー)</dt>
  <dd>エンジニア組織のの採用・育成・強化を担う。組織面をみる。</dd>
</dl>
:::


<br>

## 5&emsp;`どのように作ってるの？`
<br>

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

- **スクラム**&emsp;アジャイル開発の1つ

<br>

**《開発工程》**


```plantuml
@startuml
file f1 as "①目標設定"
file f2 as "②要件定義"
file f3 as "③設計"
file f4 as "④実装"
file f5 as "⑤テスト"
file f6 as "⑥デプロイ"
file f7 as "⑦運用"
cloud c1 as "・機能要件
・非機能要件"
f1 -> f2
f2 -> f3
f3 -> f4
f4 -> f5
f5 -> f6
f6 -> f7
f2 ~~ c1
@enduml

```


<dl>
  <dt>①&thinsp;目標設定</dt>
  <dd>どういった目的でいつまでに何を達成するのか、ビジネス上の目標を立てる。</dd>
  <dt>&thinsp;</dt>
  <dd></dd>
  <dt>②&thinsp;要件定義</dt>
  <dd>システムとしてどういった要件が必要かを決める。</dd>
  <dd>・<b>機能要件</b>: こういう機能が必要</dd>
  <dd>・<b>非機能要件</b>: レスポンス速度、セキュリティ要件など、機能ではないけれど必要なもの</dd>
  <dt>&thinsp;</dt>
  <dd></dd>
  <dt>③&thinsp;設計</dt>
  <dd>システムとしてどういう風な設計にするのかを決める。例えばインフラはどういう構成なのか、データベースはどういう構造にしていくのか、大枠の設計をする。</dd>
  <dt>&thinsp;</dt>
  <dd></dd>
  <dt>④&thinsp;実装</dt>
  <dd>実際にコードを書いて実装する。</dd>
  <dt>&thinsp;</dt>
  <dd></dd>
  <dt>⑤&thinsp;テスト</dt>
  <dd>仕様通りに動くかテストする。またはテストコードを書いて自動テストする。</dd>
  <dt>&thinsp;</dt>
  <dd></dd>
  <dt>⑥&thinsp;デプロイ</dt>
  <dd>本番環境へリリースする</dd>
  <dt>&thinsp;</dt>
  <dd></dd>
  <dt>⑦&thinsp;運用</dt>
  <dd>モニタリング</dd>
</dl>

<br>



:::note
開発関連ツール

- **エディタ**&emsp;例）VSコード、Vimなどがある。
  - codeを書くツール。
- **バージョン管理**&emsp;例）Git、GitHubなどがある。
  - コードのバージョンを管理する仕組みのこと。コードの変更毎にバージョンの記録をしておくことで、もし開発中にバグが起きた場合に前のバージョンへ戻ることができる。　

- **ＣＩ/ＣＤ**&emsp;例）**Circle CI（さーくる しーあい)**　SaaS型のCI/CDサービスでアジャイル開発をサポートする。
  - **ＣＩ(継続的インテグレーション)**&emsp;コードの変更毎に自動でテストし、バグが入りにくくする。
  - **ＣＤ(継続デリバリー)**&emsp;デプロイ、リリースを簡単にする。
- **Infrastructure as Code**　インフラの設定をコード化して自動化すること。SREが担う。
:::