Express MongoDB を使って簡単なアプリを作る



## 初めに
私のプログラムの先生は、dotinstall先生なのですが、この先生のページには初心者向けとしていろいろなツールの紹介がされていますが初心者向けと謳っていますが、結構マニアックなものも紹介されていたりしますが、そこで勉強している生徒として、これを組み合わせれば簡単なアプリができるはず！とは想像できますが、組み合わせるとなると急に難易度が上がります。

組み合わせに挑戦して、なんとか形になったのでそれをアウトプットして共有したいと思います。
組み合わせて出来上がっていますので、dotinstall先生のエッセンスが７割くらい入っています。(笑)

基礎勉強は正直面白くないのです。　それは今勉強していることがどう使えるのかわからないからです。　簡単なアプリでも作れるようになると、なにを勉強すればいいのかが少しづつ見えてきますので、今回webの基礎的な、データベースに`mongodb` サーバーサイドに`Express` フロントエンドに `Pug` `JavaScript` を少しづつ使って、形にしていきたいと思います。
最終的に、完成形を`heroku`にUpして、webアプリにしたいと思います。

選んだ簡単なアプリは、最初のほうに学ぶおみくじアプリです。　これはボタンをクリックするとおみくじを引けるという簡単なものですが、これを自分なりに改造していきたいと思います。


##![画面収録 2018-12-26 9.46.12.gif](https://qiita-image-store.s3.amazonaws.com/0/131175/003a0620-1ea3-220f-e803-c5d0732fb07d.gif)


## [heroku DEMO](https://morning-lowlands-79086.herokuapp.com/)

記事の投稿は、複数回に分けて段階的にUpしたいと思います。
いっぺんに完成形を作ってしまうと、混ざってしまって説明がしにくので、フロントエンド側を最初に作り、サーバーサイト側にデータを置き、そしてデータベース側にデータを置くと段階を踏んでいきたいと思います。

記事の投稿は、基本的にQrunchにUpして、Qiitaには初回のみクロス投稿にしたいと思いますので、Qrunch側にも足を運んでいただけるとうれしいです。
[Qrunch記事投稿ページ](https://atoris1192.qrunch.io/)

## 対象
* dotinstall 等の初心者サイトで　`javascript` を勉強している方
* webの仕組みを基本からじっくり学ぼうと思っている方



## Express Generetor で骨組みを作る
必要なツールですがこの記事では、インストール方法等は説明しませんので、各自で検索して入れてみてください。 私の環境は、Macに各ツールをインストールしていますが、windowsの方は読み替えて見てもらえればと思います。　ツールのライブラリは基本近ければ問題ないとおもいますが、JSは比較的あたらしいコードを使用しますので、`node.js`は`v10`以上を使用してください。

### 使用ライブラリのバージョン

| パッケージ | バージョン |
| --- | --- |
| node.js | v11.4.0 |
| ExpressGenerator | 4.16.0 |
| git | 2.20.1 |
| yarn | 1.12.3|
|      |       |


----

まず`Express Generetor` で骨組みを作っていきます。
`npm install express-generator -g` でインストールできます。
適当なディレクトリでアプリを作って行きます。ここでは`myapp`フォルダーを作っています

`express myapp --view=pug --css=sass --git`

`express --help` でオプションは確認できますので、各自お好みでお願いします.

```sh
cd myapp
yarn
yarn start
```

ブラウザーを立ち上げて、`http://localhost:3000/` で 画面が表示されれば問題なく動いています。

ディレクトリツリーを確認してみます

```sh
.
├── app.js
├── bin
│   └── www
├── package.json
├── public
│   ├── images
│   ├── javascripts
│   └── stylesheets
│       ├── style.css
│       ├── style.css.map
│       └── style.sass
├── routes
│   ├── index.js
│   └── users.js
├── views
│   ├── error.pug
│   ├── index.pug
│   └── layout.pug
└── yarn.lock
```

今回使うのは、主に`public` フォルダー内と`view`フォルダー内です。

開発を行う前に、若干設定を変えます。
`javascripts`フォルダー内に、HTML制御用の,`main.js`を作り,
`style.sass`形式は一般的に少ないので、`style.scss`にリネームをします。

リネームに伴って`app.js`も設定を変えておきます。

`app.js`抜粋

```js
app.use(sassMiddleware({
  src: path.join(__dirname, 'public'),
  dest: path.join(__dirname, 'public'),
  indentedSyntax: false, // true = .sass and false = .scss
  sourceMap: true
}));

```

`indentedSyntax: false, // true = .sass and false = .scss` を`true`から`false`に変えておきます。

これで、初期設定は完了です。

`index.pug`と`style.scss`を作って行きます。

ディレクトリツリーを再度Upしておきます。

```sh
.
├── app.js
├── bin
│   └── www
├── package.json
├── public
│   ├── images
│   ├── javascripts
│   │   └── main.js
│   └── stylesheets
│       ├── style.css
│       ├── style.css.map
│       └── style.scss
├── routes
│   ├── index.js
│   └── users.js
├── views
│   ├── error.pug
│   ├── index.pug
│   └── layout.pug
└── yarn.lock
```

### フロントエンド作成

`index.pug`

```Pug
extends layout

block content
  #btn 今日の運勢
  script(src="javascripts/main.js")

```

`main.js`

```js

document.addEventListener('DOMContentLoaded', () => {
  'use strict'
  console.log('-- main.js log --')

  const btn = document.querySelector('#btn')

  btn.addEventListener('click', () => {
    console.log('-- btn click --')
  })
})
```

`style.scss`

```css
#btn {
  margin: 60px auto 0;
  width: 300px;
  height: 100px;
  border-radius: 5px;
  background-color: #ec3f3f;
  color: #fff;
  text-align: center;
  line-height: 100px;
  font-size: 33px;
  font-weight: bold;
  cursor: pointer;
  opacity: .8;
  user-select: none;
  &:hover {
    opacity: 1;
  }
}
```

----

`yarn start`で再度　`express`を起動してみます。


<img width="851" alt="26-1.png" src="https://qiita-image-store.s3.amazonaws.com/0/131175/9003b849-daf1-426d-191e-6a5cb17afca4.png">

ブラウザーのデバックコンソールでクリックしたときログが流れていることを確認してください。


今日の運勢がボタンになっていますので、これをクリックしたら、今日の運勢が出るように実装します。

`main.js`

```js

document.addEventListener('DOMContentLoaded', () => {
  'use strict'

  const btn = document.querySelector('#btn')

  btn.addEventListener('click', () => {
    const items = [ '大吉', '中吉', '末吉', '凶']
    const random = Math.floor(Math.random()*items.length)

    btn.textContent = items[random]
  })
})
```
---

`express`を再起動しないと反映されないので、`ctrl + c`で終了して、再度`yarn start` で再起動します。

クリックして、今日の運勢が占えたら完成です。
これで、フロントエンド側はほぼ完成ですがフロントエンドですべて作ってしまうと,
ブラウザーのデベロッパーツールでズルができてしまいます。

例えば、`items`の配列をすべて、大吉にして、`command + s`をすると、大吉しか出なくなってしまいます。

---


<img width="849" alt="26-2.png" src="https://qiita-image-store.s3.amazonaws.com/0/131175/be204c7d-bafd-fc48-df29-6b9470b0e737.png">

---
次回は、配列をサーバー側である、`Express` の `routes/index.js` に記述していきたいと思います。

あとコードを書き換える度に、`express`を再起動するのは、面倒なので再起動用のツールをインストールしたほうがいいです。
よく使われるのは、`nodemon` , `node-dev`辺りかと思います。
`npm install -g node-dev` でインストールできます。

`yarn-start` の代わりに`node-dev ./bin/www` で起動します。
これで、コードを書き換えると、`express`の再起動を自動的にしてくれます。


---

あと次回の記事は、[Qrunch](https://atoris1192.qrunch.io/)にUp予定ですので、Qrunch側もよろしくおねがいします。

### ここまでのコードについて

コードは、`github`にもupしていますので、うまく動かない方は覗いてみてください。`https://github.com/atoris1192/omikujiExpress2`

ダウンロードの仕方もUPしておきます。

コミットは、step1.0です。コミットは、更新されている可能性がありますので、`git reset`で現時点に戻しています。 基本的に新しいコードは, `git pull` をしてもらえれば、最新のコードになっているはずです。

適当なディレクトリで

```sh
git clone https://github.com/atoris1192/omikujiExpress2.git
cd myapp
git reset --hard e0ce2a91e2e2f
yarn
yarn start

```