はじめに

サーバーにWebhookな機能を実装しようと思ってなんかないかなと探してみたらnode-webhooksというのを見つけたのでちょっと簡単に試してみようと思う。

つかってみる

まずはインストールする

npm i -S node-webhooks

POSTする先のサーバーを立ち上げるためにjson-serverをインストールする

npm i -D jsonserver

json-server用の設定ファイルを作成する

db.json

{
  "posts":[
    {"id":1,"title":"this is a test server"}
  ]
}

サンプルコードを作成する

index.js

var WebHooks = require('node-webhooks');

webHooks = new WebHooks({
  db: {"addPost": ["http://localhost:3000/posts"]}
});

webHooks.add('shortname1', 'http://localhost:3000/posts')
  .then(() => {
    console.log('triggerd shortname1');
  }).catch((err) => {
    console.log(err)
  });

webHooks.trigger('shortname1', {title: 'posted from node-webhooks'});

json-serverを起動する

npx json-server --watch db.json

npx: 248個のパッケージを6.449秒でインストールしました。

  \{^_^}/ hi!

  Loading db.json
  Done

  Resources
  http://localhost:3000/posts

  Home
  http://localhost:3000

  Type s + enter at any time to create a snapshot of the database
  Watching...

別タブでサンプルコードを実行する

node index.js

triggerd shortname1

json-serverのコンソールにPOSTされたログが出力されている

POST /posts 201 26.041 ms - 53

db.jsonを確認してみる。サンプルコードから投稿されたデータが追加されている

cat db.json | jq .

{
  "posts": [
    {
      "id": 1,
      "title": "this is a test server"
    },
    {
      "title": "posted from node-webhooks",
      "id": 2
    }
  ]
}

感想

コンパクトにまとまっているので使いやすい。自前で実装するのもいいがこれを使ったほうが楽なケースはあるんじゃないだろうか。

そもそもなんでVue.js?

現在、WEBサイトのフロントエンド開発を主に仕事でしているのですが、フロントエンドエンジニアとしてJavaScriptのフレームワークのひとつぐらいまともにプログラミングできないとまずいよな〜と思ったのがきっかけです。
日本語のドキュメントもあり、フレームワークを調べてるときに比較的学習コストが少ないということで今回Vue.jsを選択しました。
現在は様々な機能が使えるVueCLIを使って開発するのがトレンドらしく、とりあえず触ってみよう的な試みです。

Vue.jsについてはこちらの記事に詳しく書いてありました。

Vue.js概要？

環境セットアップのための予備知識

OS環境	Mac OS 10.13.6(High Sierra)

VueCLI 3系をインストールするにあたり、以下のようなサイトを参考にしました。

10分で始めるVue.js(基本編)

Vue CLI 3 をインストールしプロジェクトを作成する方法

Homebrewからnodebrewをインストールして、Node.jsをインストールするまで

、、、。

いきなり、なじみのない言葉が、、、npm、homebrew、nodebrew、Node.js？？？？

ということで調べて自分なりの解釈でざっくりと以下のように理解しました。

Node.js

WEBブラウザ以外でjsを動かすための環境のひとつ。
サーバサイドで動くJavaScriptのことでサーバサイドJavaScriptと呼ばれることもある。
従来のjavascriptととの違いは実行環境(内部的に構築されてるみたい)とライブラリからなっている(最初の時点である程度のモジュールが組み込まれているらしい)

Homebrew

Macのターミナル用の※パッケージ管理システム

※パッケージ管理システムとは
ターミナル用のAppleストアやgoogleストア的なもの。それらが目的に応じていろいろ用意されている。
Ruby→gem/PHP→compser/など

npm

タスクランナー/モジュール(webpackやbrowserifyなど)などの開発環境系のパッケージ管理するためのもの

nodebrew

node.jsのversion管理するためのパッケージ管理システム

パッケージはそれぞれ、依存関係にあり、Vue.jsをインストールするための流れはざっくりこんな感じ

HomebrewをインストールするためにX codeをインストール

↓

nodebrewをインストールするため、Homebrewをインストール

↓

Node.jsとnpmをインストールするため、nodebrewをインストール

↓

VueCLIをインストールするため、Node.jsとnpmをインストール
(node.jsをインストールする際にnpmをインストールされる)

↓

ようやく、VueCLIをインストール

セットアップ

それではいきましょうw

X codeをインストール

App storeからXcodeをインストール

コマンドライン・デベロッパーツールをインストール

ターミナルから$ xcode-select --installコマンドを発行すると
以下のようにインストールを要求されて

$ xcode-select --install
xcode-select: note: install requested for command line developer tools

同時にポップアップが出てくるので"インストール"を選択し利用規約に同意します。

Homebrewをインストール

Homebrewの公式サイトからコードをコピペしてEnterを押します。
途中でEnterの入力/インストールユーザのOSパスワードの入力を求められるので入力して進んでください。

$ /usr/bin/ruby -e "$(curl -fsSL https://raw.githubusercontent.com/Homebrew/install/master/install)"

インストールが確認するには以下のコマンドを実行できればインストールされたことになります。

$ brew doctor

nodebrewのインストール

$ brew install nodebrew

インストールを確認するには

$ nodebrew -v

情報が表示されたらインストールされてます！！

Node.jsとnpmのインストール

Node.jsの最新版をインストール

$ nodebrew install latest

Node.jsを有効にします。

nodebrew use 先程インストールしたNode.jsのver

nodeコマンドを使用するため、パスを通します。

#zshの場合は
echo "export PATH=$HOME/.nodebrew/current/bin:$PATH" >> ~/.zshrc

#bashの場合は
echo "export PATH=$HOME/.nodebrew/current/bin:$PATH" >> ~/.bashrc

先程追加したパスが動くようになり、nodeコマンドが使えるようになります。

#zshの場合は
$ source ~/.zshrc

#bashの場合は
$ source ~/.bashrc

npmはNode.jsとともにインストールされます。

npmがインストールしたか確認

$ npm -v

Node.jsがインストールしたか確認

$ node -v

バージョンが表示されればOKです！！

Vue CLI(Vue.js)のインストール

npm install -g @vue/cli

vueコマンドを使うためのパスを確認

npm bin -g
#/Users/xxxxxxx/npm/bin

vue コマンドを使用するためにパスを通す

$ export PATH=/Users/xxxxxxx/npm/bin:$PATH

vueのインストールを確認

$ vue --version

バージョンが表示されればOKです！！

おしまい

とりあえず、Vueを動かす環境づくりはこんな感じでした。

注意点

いきなりチャットアプリは避けよう

Node.jsと言えば、websocketと相性が良いので
チャットアプリのバックエンドに良く採択されます。

しかし、MVCも理解していない入門の方が
チャレンジするとワケワカメになってしまう可能性があるので、
目的がwebsocketを使ったチャットアプリでも最初は
MVCのCRUD Webアプリで慣れましょう。

Express無しでの習得は避けよう

理想的な順番はExpress無しのNode.jsからExpress等を使った
フレームワークですが、Expressがデファクトとなっており、
Node.jsのみでのチュートリアルは多くはないこととExpressがシンプルな
事もありそれほど問題ないのでいきなりExpressで雰囲気つかむのもOKです。

mongodbじゃなくmysqlやposgreに対応できるようにしよう

主に海外サイトですがNode.jsと相性が良いmongodbが採択されたチュートリアルが多いですね。
国内ではmongodbの案件が少ないのでmysqlやposgreに書き換えるスキルを早めに身につけておくと
幅が広がります。

進めかた

Node.js超入門[第2版]
Express無しのNode.jsからExpress有りのNode.jsへ、しかもmongodbじゃなくmysqlを使ってるので理想的な流れになってます。読了後にSequelizeをORMマッパーとして書き換えれると良い感じです。

Node.js + Express で作る Webアプリケーション 実践講座
より本格的なNode.jsアプリケーショnションを作れるようになります。

The Complete Node.js Developer Course (3rd Edition)
テストコード等本格的な事を学べます。

環境構築

Docker Tool BoxとNode.jsは相性が悪いので注意