命令型プログラミングと宣言型プログラミング

#はじめに
アルゴリズムの理解に必要と言われたので対して詳しくないし調べながらまとめてみる。

---

#両者の軽い説明

###宣言型プログラミング
Declarative programming
何をするかが明確に宣言（記述）されている

###命令型プログラミング
Imperative Programming（Procedural programming）
どのように実行させるかを記述

---

##各言語の例

Imperative(命令型): C, C++, Java
Declarative(宣言型): SQL, HTML
(Can Be) Mix: JS（TS）, C#, Python

---

#具体的に
この画像が分かりやすかった
左が宣言的、右が命令的

---

##オートマティック（宣言的）
「R　後ろ、N　動かない、D　前に動く、P　駐車」これしか人間が指定しなくていい。これを指定してアクセルを踏むだけで、望む動きが実現される。やりたいことだけを指定。
##マニュアル（命令的）
マニュアルでは「1-6のどのギアに接続するか」を指定が必要。書かれていないが真ん中は「N　ニュートラル」になっており、前に加速するには、「1→N→2→N→3...→6」という順番での作業を覚えて実施しなくてはいけない。

---

#実際のコードで
ボタンなどのシンプルなUIコンポーネントを想像して違いを説明

---

###宣言的

if( this.state.liked ) {
    return <blueLike />;
} else {
    return <greyLike />;
}

宣言的アプローチは状態管理を分離するため、この部分はUIが特定の状態でどのように見えるべきかを処理するだけでよい

---

###命令的

if( user.likes() ) {
    if( hasBlue() ) {
        removeBlue();
        addGrey();
    } else {
        removeGrey();
        addBlue();
    }
}

現在画面に表示されているものを確認し、以前の状態からの変更を取り消すなど、現在の状態で再描画するために必要なすべての変更を処理する必要がある。

---

##別の例
配列の各要素に！を追加するコード

両方のアプローチで

const people = ['Amanda', 'Geoff', 'Michael', 'Richard', 'Ryan', 'Tyler']

を

["Amanda!", "Geoff!", "Michael!", "Richard!", "Ryan!", "Tyler!"]

に変える。

---

###命令的
JavaScriptに何をどのように行うかを正確に分かりやすく伝えている。

const people = ['Amanda', 'Geoff', 'Michael', 'Richard', 'Ryan', 'Tyler']
const excitedPeople = []

for (let i = 0; i < people.length; i++) {
  excitedPeople[i] = people[i] + '!'
}

---

###宣言的
JavaScriptの.map（）関数を使用して、実行したいことのみ宣言している。

const people = ['Amanda', 'Geoff', 'Michael', 'Richard', 'Ryan', 'Tyler']

const excitedPeople = people.map(name => name + '!')

---

#結論

---

どっちがいいとかはない

---

状況に応じて使い分けよう