喉頭がんの治療プロトコルをNode.jsでVueに表示しHerokuにデプロイ

##概要
プログラムの勉強を始めて4か月ほどの開業医です。

病気のおすすめの診断法や、治療法などを記載した診療ガイドランというものがあります。その中に治療の進め方（治療計画）を示す、**治療プロトコル**というものがあります。病気の程度や治療の効果によって、治療の進め方が枝分かれしていくものなので、ifとelseさえ知っていればプログラム初心者でも治療プロトコルが簡単に作成できます。

昔私が書いた喉頭がんの診療プロトコルの医学書の内容を基に勉強したばかりのVueを少し使ってNode.jsでプログラミングしHerokuにデプロイしました。


##実装
質問に答えていくと喉頭がんの治療の進め方が分かるWEBアプリ。

##動作
<blockquote class="twitter-tweet"><p lang="ja" dir="ltr">喉頭癌治療プロトコル <a href="https://t.co/Nonj4qkvdJ">pic.twitter.com/Nonj4qkvdJ</a></p>&mdash; 病気のセルフチェック (@Selfcheckhealt1) <a href="https://twitter.com/Selfcheckhealt1/status/1198469270402813952?ref_src=twsrc%5Etfw">November 24, 2019</a></blockquote> <script async src="https://platform.twitter.com/widgets.js" charset="utf-8"></script> 
<img width="340" alt="1.jpg" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/453374/b93cc45a-88ee-d662-e248-a3d76effa45d.jpeg">




<img width="341" alt="2.jpg" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/453374/8926a436-d390-a77a-f354-798e176fc60c.jpeg">
<img width="341" alt="3.jpg" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/453374/a7ae6a7e-22ce-808e-a0cb-b84333338199.jpeg">
<img width="345" alt="4.jpg" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/453374/38e1b76b-b177-958a-97a0-f0c826db6ff6.jpeg">


##作成方法
**1.ライブラリーのインストール**

heroku-sampleというフォルダー作成します。

初期設定します。

```sh
npm init -y
```
必要なライブラリをインストールします。

```sh
npm i body-parser express
```



**2.index.jsの作成**

index.jsを作成し、こちらのコードをコピペします。

```js
var express = require('express');
var app = express();

// public というフォルダに入れられた静的ファイルはそのまま表示
app.use(express.static(__dirname + '/public'));

// bodyParser
var bodyParser = require('body-parser');
app.use(bodyParser.json());
app.post('/post', function(req, res) {
  for (key in req.body) {
    console.log(key, '=', req.body[key]);
  }
  res.end();
});
app.listen(process.env.PORT || 8080);

console.log("server start! (heroku)");
```

**3.index.htmlの作成**
index.js と同じ階層に public フォルダを作りその中に index.html を新規作成します。
以下のようなコードを書きました。

```html
 <!DOCTYPE html>
<html>

<head>
  <title>Step 01</title>
  <script src="https://unpkg.com/vue"></script>
</head>

<body>

  <h1>今後の治療方針は？</h1>

  <h2 id="app">
    {{ message }}
  </h2>

  <script>
    let mes;
    
    var stage = window.prompt("喉頭がんのステージをローマ数字で入力");
    if (stage == "Ⅰ") {
      var size = window.prompt("bulky tumor？(yes,no)");
      if (size == "yes") {
        var effect = window.prompt("多分割照射法 total 66~72.8Gy＋化学療法(NDP or TS-1)施行 \n52Gy時点で治療効果判定\n反応良好？(yes,no)");
        if (effect == "yes") {
          var recurrence = window.prompt("照射継続➡経過観察\n腫瘍残存or再発あり？(yes,no)");
          if (recurrence == "yes") {
            mes="喉頭全摘術（＋頸部郭清術）施行";

          } else {
            mes="経過観察";
          }
        } else {
          mes="喉頭全摘術（＋頸部郭清術）施行";
        }
      } else {
        var effect = window.prompt("通常分割照射法 total 60~68Gy施行 \n52Gy時点で治療効果判定\n反応良好？(yes,no)");
        if (effect == "yes") {
          var recurrence = window.prompt("照射継続➡経過観察\n腫瘍残存or再発あり？(yes,no)");
          if (recurrence == "yes") {
            mes="喉頭全摘術（＋頸部郭清術）施行";

          } else {
            mes="経過観察";
          }
        } else {
          mes="喉頭全摘術（＋頸部郭清術）施行";
        }
      }
    } else if (stage == "Ⅱ") {
      var size = window.prompt("bulky tumor？(yes,no)");
      if (size == "yes") {
        var effect = window.prompt("多分割照射法 total 66~72.8Gy＋化学療法(NDP or TS-1)試行 \n52Gy時点で治療効果判定\n反応良好？(yes,no)");
        if (effect == "yes") {
          var recurrence = window.prompt("照射継続➡経過観察\n腫瘍残存or再発あり？(yes,no)");
          if (recurrence == "yes") {
            mes="喉頭全摘術（＋頸部郭清術）施行";

          } else {
            mes="経過観察";
          }
        } else {
          mes="喉頭全摘術（＋頸部郭清術）施行";
        }
      } else {
        var effect = window.prompt("通常分割照射法 total 60~68Gy施行 \n52Gy時点で治療効果判定\n反応良好？(yes,no)");
        if (effect == "yes") {
          var recurrence = window.prompt("照射継続➡経過観察\n腫瘍残存or再発あり？(yes,no)");
          if (recurrence == "yes") {
            mes="喉頭全摘術（＋頸部郭清術）施行";

          } else {
            mes="経過観察";
          }
        } else {
          mes="喉頭全摘術（＋頸部郭清術）施行";
        }
      }

    } else if (stage == "Ⅲ") {
      var tumor = window.prompt("T3以上？(yes,no)");
      if (tumor == "yes") {
        var fix = window.prompt("T3NOで声帯固定？またはT3N1？(yes,no)");
        if (fix == "yes") {

          var constriction = window.prompt("気道狭窄あり？(yes,no)");
          if (constriction == "yes") {

            var malignancy = window.prompt("緊急気管切開\n施行\n（拡大）喉頭全摘術＋患側甲状腺切除（＋頸部郭清術）（＋再建術）\n施行 \n病理検索結果:再発ハイリスク群？(yes,no)");
            if (malignancy == "yes") {
              mes="術後（化学）放射線療法施行";
            } else {
              mes="経過観察";
            }
          } else {

            var malignancy = window.prompt("（拡大）喉頭全摘術＋患側甲状腺切除（＋頸部郭清術）（＋再建術）\n施行 \n病理検索結果:再発ハイリスク群？(yes,no)");
            if (malignancy == "yes") {
              mes="術後（化学）放射線療法施行";
            } else {
              mes="経過観察";
            }
          }
        } else {

          var effect = window.prompt("１コース目：通常分割照射法40Gy＋化学療法（NDP40mg/m2＋5FU700mg/m2）\n２コース目：加速分割照射法 24~27Gy＋化学療法(NDP40mg/m2)\n試行 \n52Gy時点で治療効果判定\n反応良好？(yes,no)");
          if (effect == "yes") {
            var recurrence = window.prompt("照射継続➡経過観察\n腫瘍残存or再発あり？(yes,no)");
            if (recurrence == "yes") {
              mes="喉頭全摘術（＋頸部郭清術）";

            } else {
              mes="経過観察";
            }
          } else {
            mes="喉頭全摘術（＋頸部郭清術）";
          }
        }
      } else {

        var effect = window.prompt("多分割照射法 total 66~72.8Gy＋化学療法(NDP or TS-1)\n試行 \n52Gy時点で治療効果判定\n反応良好？(yes,no)");
        if (effect == "yes") {
          var recurrence = window.prompt("照射継続➡経過観察\n腫瘍残存or再発あり？(yes,no)");
          if (recurrence == "yes") {
            mes="喉頭全摘術（＋頸部郭清術）";

          } else {
            mes="経過観察";
          }
        } else {
          mes="喉頭全摘術（＋頸部郭清術）";
        }
      }
    } else if (stage == "Ⅳ") {
      var constriction = window.prompt("気道狭窄あり？(yes,no)");
      if (constriction == "yes") {
        var ope = window.prompt("緊急気管切開試行\n腫瘍切除可能？(yes,no)");
        if (ope == "yes") {

          var malignancy = window.prompt("（拡大）喉頭全摘術＋患側甲状腺切除（＋頸部郭清術）（＋再建術）\n施行 \n病理検索結果:再発ハイリスク群？(yes,no)");
          if (malignancy == "yes") {
            mes="術後（化学）放射線療法施行";
          } else {
            mes="経過観察";
          }
        } else {
          var condition = window.prompt("全身状態良好？(yes,no)");
          if (condition == "yes") {
            mes="放射線療法or化学放射線療法（＋胃瘻造設）";
          } else {
            mes="緩和療法（＋胃瘻造設）";
          }
        }
      } else {
        var ope = window.prompt("腫瘍切除可能？(yes,no)");
        if (ope == "yes") {

          var malignancy = window.prompt("（拡大）喉頭全摘術＋患側甲状腺切除（＋頸部郭清術）（＋再建術）\n施行 \n病理検索結果:再発ハイリスク群？(yes,no)");
          if (malignancy == "yes") {
            mes="術後（化学）放射線療法施行";
          } else {
            mes="経過観察";
          }
        } else {
          var condition = window.prompt("全身状態良好？(yes,no)");
          if (condition == "yes") {
            mes="放射線療法or化学放射線療法（＋胃瘻造設）";
          } else {
            mes="緩和療法（＋胃瘻造設）";
          }
        }
      }
    } else {
      mes="Ⅰ、Ⅱ、Ⅲ、Ⅳのいずれかを入力してください。";
    }

    var app = new Vue({
      el: '#app',
      data: {
        message: mes
      }
    })
  </script>
</body>

</html>
```

以下の部分で少しVue.jsを使って書いています。

```js
var app = new Vue({
      el: '#app',
      data: {
        message: mes
      }
    })
```

**4..gitignore を作成**
node_modules フォルダはアップロードから除外するため .gitignore というファイルを最上部のindex.jsなどと同じ場所に作成し以下のコードをコピペします。

```
# Logs
logs
*.log
npm-debug.log*
yarn-debug.log*
yarn-error.log*

# Runtime data
pids
*.pid
*.seed
*.pid.lock

# Directory for instrumented libs generated by jscoverage/JSCover
lib-cov

# Coverage directory used by tools like istanbul
coverage

# nyc test coverage
.nyc_output

# Grunt intermediate storage (http://gruntjs.com/creating-plugins#storing-task-files)
.grunt

# Bower dependency directory (https://bower.io/)
bower_components

# node-waf configuration
.lock-wscript

# Compiled binary addons (https://nodejs.org/api/addons.html)
build/Release

# Dependency directories
node_modules/
jspm_packages/

# TypeScript v1 declaration files
typings/

# Optional npm cache directory
.npm

# Optional eslint cache
.eslintcache

# Optional REPL history
.node_repl_history

# Output of 'npm pack'
*.tgz

# Yarn Integrity file
.yarn-integrity

# dotenv environment variables file
.env

# next.js build output
.next
```

**5.Procfile**
一番上の階層にProcfileというファイルを新規作成し以下のコードをコピペします。

```js

web: node index.js
```


**6.herokuにデプロイ**
gitリポジトリの対象にする初期設定をします。



```sh
git init
```

gitリポジトリにアプリを追加します。


```sh

git add --a
```

gitリポジトリにコミットします。


```sh

git commit -m "commit"
```

herokuアプリ追加します。自分で考えたアプリケーションネーム（英語）を入力します。


```sh

heroku create アプリケーションネーム
```


herokuにプッシュして完了です。


```sh
git push heroku master
```



**6.URL**
https://selfcheck.herokuapp.com/


##考察
ifとelseだけで書いているので、きれいなコードではありませんが、喉頭がんの診療プロトコルが実装できました。プログラム初心者の方にif文だけでもなんとかなるという参考になれば幸いです。