こんにちは、だいちゃんです。

Nuxt.jsで作ったこのブログですが、Wordpressなどのように最初からいろいろな機能が用意されているわけではない分、イチから構築する楽しさを堪能できる点が醍醐味だと思っています。

今回も小さいながらアップデートを行い、その楽しさを実感しました( ˘ω˘ )

npm-run-all で npm script を連続実行

Markdown形式で記事を書いた後、コマンドをいくつか実行することでNuxt.jsが読める形に変換、そしてHTMLファイルの生成、FTPサーバーへのアップロード（デプロイ）を行っています。

すべてエディタ（上で動いてるターミナル）の中で完結するとはいえ、コマンドを1つずつ打っては待って、次を打って、、、とするのは生産的ではないので、コマンドをまとめて、 1つのコマンドだけで完結するようにしました。

記事を保存したあとに利用しているnpm scriptは下記のようなものでした。

"scripts": {
  "md": "processmd \"./src/_BLOG/markdown/*\" --stdout --outputDir ./src/_BLOG/json/ > src/_BLOG/json/summary.json",
  "generate": "nuxt generate",
  "upload": "node ftp-upload.js",
}

それぞれ、その名の通りなのですが、

• md ・・・processmdにてMarkdownファイルをNuxt.js（Vue.js）が読みやすいようにJSONファイルへ変換します
• generate ・・・Nuxt.jsにて静的ファイルの生成を行います
• upload ・・・ftp-deployにてFTPサーバーへアップロードを行います（設定ファイルがftp-upload.jsになっています）

という役割になります。

これらのスクリプトを連続実行させるには、（OS依存を解消するため） npm-run-all というNPMパッケージを利用します。

インストールは $ npm install --save-dev npm-run-all で行い、あとは package.json の scripts: に下記を追加するだけで利用可能になります。（script名のセンスはおいといて...）

"blog": "run-s md generate upload"

run-s の後ろに実行したい script 名を半角スペースで区切って羅列するだけで 1つずつ連続実行 してくれます。ちなみに、 run-s の代わりに run-p とすることで 並列処理 が可能のようです。

ということで、今後はMarkdownで記事を書いて所定のディレクトリに保存した後 npm run blog を叩くだけで、アップロードまで完結するようになりました！

ページネーションを改善

お気づきだっただろうか...

実はページネーションの実装が クソ だったので 「次へ」をクリックする度に表示される記事数が増えていっていました（笑

考え方って大事ですね。

詳細を言葉で説明するのは難しいのですが、読み込んでくる記事の数を指定する際に、継ぎ接ぎで無理やり数字を与えていたのでだんだんズレてしまっていました。ちゃんと計算して与えるように変更したので、多分きっとこのまま記事が増え続けても大丈夫だと思います！

今後もこうやって地道に（誰も気にしてないような部分も）アップデートして 自己満足に浸っていこうと思います！笑