はじめに

遊ぶときにいつも詰まるので、自分用メモとしてまとめる。
遊び始めのハードルを下げるのが目的。
たぶんこれがあれば5分くらいで遊び始められるはず。

前提

パスワードは忘れててもリセットすれば良いので、そんなに心配しなくて良い。
ログインメールアドレスすら忘れたとかなら作るしかねぇ。

GitHubアカウントがある
herokuアカウントがある

以下は必須では無いですが、この記事における前提です。

Git操作は SourceTree を使用
IDEは VisualStudioCode を使用

最小構成の構築

GitHub

ログインする
https://github.com/login

リモートリポジトリを作る
https://github.com/new
あとで変更できるので、名前はテキトーに決めて始めちゃって良い。
変更したいとき　→　Qiita - Githubリポジトリ名変更

Sourcetree

（Sourcetreeじゃなくても良いけど、もうインストールしてあるので。）

クローンする

起動＞リモート
自分のリポジトリの一覧とか出てくるので、そこからクローンする。

node.jsのスケルトンプロジェクトを生成する

「ターミナルで開く」を押下
npm install -g express #expressの導入（PC自体に）
npm install -g express-generator #ジェネレータを導入（PC自体に）
express --view=pug sampleapp #ジェネレータでスケルトンを導入（対象プロジェクト配下に）
sampleappディレクトリ配下だと面倒なので、ディレクトリ構造を一段上にあげる。
npm install #依存関係の解消（対象プロジェクト配下）
npm start #試しに起動してみる
http://localhost:3000/ #稼動確認してみよう
ctrl + C #終了

参考にした情報： Qiita - Node.js + Express入門
参考にした情報： Qiita - Windows10 + Express & Pug（旧Jade

VSCodeを開く
（VSCodeじゃなくても良いけど、もうインストールしてあるので。）

「Fiderで表示」を押下
対象のディレクトリをドラッグ&ドロップでVSCodeを開く

Visual Studio Code

gitignore作る
githubライブラリからパクる： https://github.com/toptal/gitignore/blob/master/templates/Node.gitignore

なお間違えてすでにpushしてたら以下を実行する

git rm -r --cached .

参考： Qiita - git管理している途中から.gitignoreを追加して、その設定を反映させる方法

SourceTree

add -> commit -> push
（なんかVSCodeから操作する拡張あると思うけど、後で考える。）

heroku

ログインする
https://id.heroku.com/login

create new app
https://dashboard.heroku.com/new-app
あとで変更できるので名前はテキトーに決めて始めちゃう。（作ってるうちにイメージが変わっていくことも多いし）
変更したいとき　→　Qiita - herokuのアプリ名(URL)変更方法【10秒でできる】

pipelineはちょっとわかんないからパス。（後で調べて理解できたら追記する。きっと追記しない。）

Deployment method

「GitHubアイコン」を押下
「Connect to GitHub」を押下
流れに身をまかせる。(リポジトリを指定する)
「connect」の押下を忘れずに・・・

Automatic deploys
「Enable Automatic Deploys」を押下しとく。（自動デプロイの有効化）

もう少しだけ丁寧に設定した場合はこっち　→　Qiita - 【備忘録】GitHub経由でHerokuにデプロイするまでの流れ

Manual deploy
「Deploy Branch」で手動デプロイする。
（このままだとpushしないとデプロイされないので、初回は稼動確認もかねて、手動でデプロイする。）

稼動確認
以下がherokuで表示されていることを確認する。
以下リンクから対象appに飛んでなんやかんやすれば行ける。
https://dashboard.heroku.com/apps/

ダメなら、デプロイエラーか実行時エラー。
まずは手動デプロイして、様子をみる。
デプロイ成功してれば、実行時エラーなので、heroku経由でログを見ながらリクエストを飛ばしてみよう。

ちょっとしたtips

環境変数

パスワードやAPIキーなど、githubには公開したくない情報の管理方法として、環境変数を使う場合の方法。

heroku

# 環境変数一覧
$ heroku config --app "app_name"

# 環境変数名を指定して参照
$ heroku config:get ENV_VAR_NAME --app "app_name"

# 追加 (一応addも使えます)
$ heroku config:set ENV_VAR_NAME="value" --app "app_name"

# 削除 (一応removeも使えます)
$ heroku config:unset ENV_VAR_NAME --app "app_name"

参考： Qiita - [heroku] 環境変数の操作

Node.js
なお、.envは、.gitignoreに指定しておくこと。（GitHubで公開されている.gitignoreなら、既に含まれているはず。）

.env

# これはコメント行
KEY1=VALUE1
KEY2=VALUE2
KEY3=VALUE3

app.jsとか

require('dotenv').config();

if (typeof process.env.KEY1 == 'undefined') {
  console.error('Error: "KEY1" is not set.');
  console.error('Please consider adding a .env file with KEY1.');
  process.exit(1);
}

console.log(process.env.KEY1);  //=> VALUE1

参考： GitHub - 環境変数の代わりに .env ファイルを使用する (dotenv)

npm uninstall

入れてみたのものの、要らないモジュールだったときに。

npm uninstall @@@@@@@

参考：Qiita - npmのuninstallコマンドを忘れがちなのでメモ

ルーティング

Express でのルーティング - Express.js
app.useとapp.getは混同しがちだが、挙動が全然違うので注意。

app.use: app.jsで基本使う感じ。他のjsで処理を任せるときに使う。
app.get: 渡されたurlをベースとして、相対パス記載する感じ。ページへの遷移を記載するイメージ。

app.js

// 基本的な書き方
const routerUsers = require('./routes/users'); //ここで指定したのと同じ名前のjsファイルを作成する
app.use('/users', routerUsers);

// 以下はおまけ
// 正規表現が利用可能
app.get(/.*fly$/, function (req, res) {
  res.send('/.*fly$/')
})

// URL内の指定された値を取得するってのもできる
// リクエストURL: http://localhost:3000/users/34/books/8989
// req.params: { "userId": "34", "bookId": "8989" }
app.get('/users/:userId/books/:bookId', function (req, res) {
  res.send(req.params)
})

routes/users.js

// app.jsで基本的な書き方をした場合
var express = require('express');
var router = express.Router();

router.get('/', function(req, res, next) {
  res.render('user', { title: 'Express' }); // 一つ目の引数で指定した名前のpugファイルをviewsフォルダに用意
});

module.exports = router;

views/user.pug

extends layout
block content
  h1= title
  p Welcome to #{title}

pugファイルの書き方

ここに書くにはちょっとボリューミーなので、参考文献を載せとくだけにする。

ちょっとしたコマンド集

npm自体のアップデート

npm --version
npm i -g npm
npm --version

インストールしたパッケージが古くなってないかのチェック

npm outdated

古いパッケージのバージョアップ（uninstallしないと、package.jsonに定義された範囲の最新版になっちゃう）

npm uninstall ＜対象パッケージ＞
npm install ＜対象パッケージ＞

※バージョンが上がりきらない場合は、依存関係の都合だと思われる。package-lock.jsonを眺めているとなんとなく分かる。

インストールしたパッケージに問題が無いかのチェック

npm audit

始まりの終わり

あとは好きにしてくれー

以上。