node.js、express、handlebarsを使ってウェブサーバーの立ち上げからページの制作までをやってみた - 1

<h1>で、具体的にnodeを使ってどうやってウェブサイトを作るんじゃい？</h1>
<p>拙者、[前回nodeとは何なのか？](https://qiita.com/monsoonTropicalBird/items/f12848cc5d0cde726d4f)を解説し申しましたが、nodeをコンピューターに入れただけだと、基本的にはコマンドラインからファイル操作などをjavascriptで行うっていう作業しか出来ないんだけど、<strong>サーバーを立ち上げてページを作って所定のディレクトリにいれ、ブラウザから見れるようにする</strong>という作業には、フレームワークを使います。<br>
幾つか選択肢があるんだけど、今回は一番ポピュラーで軽い<strong>express</strong>というフレームワークを使って、サイトを構築。<br>
イメージとしては、nodeにてウェブやウェブアプリの制作に必要なモジュールが用意されているパッケージっていう感じ。<br>
以下順を追って、サーバーの構築方法。<br>
<h3>1、メインディレクトリの制作とモジュール類のインストール</h3>
まずはウェブサイト全体を収めるメインのフォルダ(ルーツになる)を適当なところに作って、cdコマンドでそのフォルダに移動し、下記コマンドを実行。init、つまり初期化！　＊今回は"NodeSite"っていうフォルダを制作したみたよ。
<pre><code>
~/NodeSite$ npm init
</pre></code>
幾つか質問が出てきますが、とりあえず全部そのままでOK。<br>
そうすると、<strong>package.json</strong>というファイルが自動生成されます。<br>
<pre><code>
  "name": "nodesite",
  "version": "1.0.0",
  "description": "",
  "main": "index.js",
  "scripts": {
    "test": "echo \"Error: no test specified\" && exit 1"
  },
  "author": "nanashi",
  "license": "ISC"
}
</pre></code>
<br>
で、次にExpressをインストール。下記コマンドを実行。<br>**npm**ってのは、Node Package Manager。つまり、色んなモジュールやパッケージをインストールしたり、設定したりしてくれるよ。
<pre><code>
~/NodeSite$ npm install express --save
</pre></code><br>
**package-lock.json**ファイルと<strong>node_modules</strong>フォルダが生成されます。dependenciesっていうのは、読み込んだ外部モジュールのこと。この一覧がpackage-lock.jsonファイルに記録されていきます。<br>
このjsonファイルがあれば、モジュール自体が無くても、npm install コマンド一発で、自動的にインストールしてくれます。持ち運びに便利！<br>
node_modulesはそのままで、読み込んだモジュールのデータ。便利機能の保存場所。ここがドラえもんたる所以ですね。<br>

<h3>２、app.jsファイルを作って、サーバー側 javascriptを書く</h3>

インストールが済んだら、app.jsファイルを作って、そこにサーバーサイドのjavascriptを書いていきます。<br>
制作したルーツフォルダ直下にsrcフォルダを作り、その中にapp.jsファイルを作りましょう。コードは以下<br>

<pre><code>
const express = require('express');
const app = express();

// routing
// app.com/ => root
// app.com/about => about page

app.get('/', (req, res)=>{
res.send('Hello Express!');
})

app.get('/about', (req, res)=>{
    res.send('This is about page');
})

app.listen(3333, ()=>{
    console.log("server running on Port:3333");
})
</pre></code><br>
これが超基本のコード。<br>
これだけでサーバーがセットアップされ、ホームページとaboutが表示されます。<br>
####コード解説
<pre><code>
const express = require('express');
const app = express();
</pre></code><br>
１行目：外部モジュールを呼び込むお決まりの呪文。require('モジュール名')<br>
２行目：expressはこの時点で関数なので、実行して、オブジェクトやメソッドを使えるようにし、app変数に入れる。<br>
<pre><code>
app.get('/', (req, res)=>{
res.send('Hello Express!');
})

app.get('/about', (req, res)=>{
    res.send('This is about page');
})
</pre></code><br>
**ルーティング**と言われている部分。
app.get()メソッドを使うと、各URLにリクエストを振り分けられる。<br>幾つでもここでルーティングできます。<br>
**引数は２つ。リンク先アドレスとコールバック。**で、コールバックは２つの引数**req**と**res**をとる。これは決まってる。<br>
req resについての詳細は長くなるので、調べてちょー。<br>
簡単に言うと、**getリクエストで指定したリンク先にアクセスがあった場合、コールバックの内容が返される。**<br>
今回のサンプルは単純にテキストを返してるだけですが、JSONを返したり、リダイレクトしたり、APIを発動したり、ここで好き放題出来ます。<br>
通常サイトのディレクトリ構造と大きく違うのは、別にリンクURLにフォルダやファイルがある必要がなく、適当なURLを設定できて、そこにアクセスがあれば、コールバックの内容を返せるという点ですかね。<br>
今回の例で見ても、/aboutにaboutページが存在するわけではありません。<br>
ここをこんな風にエンドポイントにして、JSONを送ることも可能です。<br>
<pre><code>
app.get('/app/music', (req, res)=>{
    res.json('{inu: meshi kuu na}');
})
</pre></code><br>
勿論、appフォルダとかは存在する必要ないです。<br>
<pre><code>
app.listen(3333, ()=>{
    console.log("server running on Port:3333");
})
</pre></code><br>
で、最後のこの行でサーバーの設定をしています。<br>
app.listen(ポートナンバー, コールバック)です。<br>
ポートナンバーは基本何番でもオーケーですが、nodeでは３０００が一般的みたい。コールバックは、接続時に実行される関数。<br>

<h3>３、プログラムの実行</h3>
コマンドライン cd で、app.jsの階層まで移動して、node app.js
<pre><code>
ubuntu@ubuntu-aurora-r4:~/NodeSite/src$ node app.js
server running on Port:3333
</pre></code><br>
サーバーが起動してるのが分かるね？<br>
で、ブラウザを立ち上げて、窓に　localhost:3333 って入れれば、/ が、localhost:3333/about っていれればaboutページが表示されます。<br>
今回の設定は、あくまでもローカル環境内でのセットアップで、公開するにはAWSやherokuなんかのnodeに対応したサーバーにてデプロイする必要があります。<br>
通常のHTMLページ等をhandlebarsを使ってレンダリングする方法は[次の記事](https://qiita.com/monsoonTropicalBird/items/fca2a08336b7176ddfcf)で。<br>
画像を幾つかアップロードしたかったんだけど、スクリーンショットの加工が面倒なのと、Qiitaでどう埋め込むのか調べるのが面倒くさかったので、今回は無しでござる。<br>
小生の自習用備忘録でもあるので、乱文誤字脱字失礼つかまつる！押忍