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

初めに

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

組み合わせに挑戦して、なんとか形になったのでそれをアウトプットして共有したいと思います。

組み合わせて出来上がっていますので、dotinstall先生のエッセンスが７割くらい入っています。(笑)

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

最終的に、完成形をherokuにUpして、webアプリにしたいと思います。

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

heroku DEMO

記事の投稿は、複数回に分けて段階的にUpしたいと思います。

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

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

対象

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 でオプションは確認できますので、各自お好みでお願いします.

cd myapp 
yarn 
yarn start

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

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

. 
├── 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抜粋

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しておきます。

. 
├── 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

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

main.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

#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を起動してみます。

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

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

main.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をすると、大吉しか出なくなってしまいます。

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

あとコードを書き換える度に、expressを再起動するのは、面倒なので再起動用のツールをインストールしたほうがいいです。

よく使われるのは、nodemon , node-dev辺りかと思います。
npm install -g node-dev でインストールできます。

yarn-start の代わりにnode-dev ./bin/www で起動します。

これで、コードを書き換えると、expressの再起動を自動的にしてくれます。

あと次回の記事は、QrunchにUp予定ですので、Qrunch側もよろしくおねがいします。

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

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

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

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

適当なディレクトリで

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

このブログを検索

IT音痴オーバーフォーティーおやじのストック記事倉庫