HTML、CSS、JavaScriptだけだとフロントエンドの掲示板しか作れず、自分以外の人には見えない掲示板になってしまうので、Node.jsを使ってサーバーを作ります。
サーバーを使うことによって、ユーザーがフォームに書き込んで送信した内容はサーバーに書き込まれ、保存されます。
サーバーには誰でもアクセスできるので、誰でも「書き込まれた内容を見せて」とサーバーに命令をしてデータを取得し内容を見ることができる、というイメージです。
このとき、「データを送って」という命令をPOSTリクエスト、「データを持ってきて」という命令をGETリクエストといいます。
さて。
サーバーを作るにあたって、下準備をいくつかしておかなければなりません。 やることは
・作業をするフォルダを作成する
・Node.jsのインストール
・ターミナルを使えるようにする
・プロジェクトの初期化
・Expressをインストールする
・nodemonのインストール
一つずつ見ていきます。
①フォルダの作成
掲示板を作る作業をするフォルダです。
今後色々出てくるファイルなどを入れておくところです。
スキな場所に、スキな名前で作って問題ないです。
私はデスクトップに「NODE_INTRO_CODE」という名前で作成しました。
②Node.jsのインストール
まあNode.jsを使ってあれこれやろうってんですから、これをインストールしないと始まりませんね。
下記サイトにインストールのファイルがあります。
③ターミナルを使えるようにする
ターミナルとは、パソコンに対する指示を文字列で行うソフトです。
おそらくたいていの人は、ファイルを作ったり削除したり移動させたり、というのはマウスやキーボードを使って行っていたと思いますが、これらをコマンドでやることになります。
コマンドは結構たくさんあるので、覚える必要があるのですが、「なんでそんなことをしないといけないの」かというと、node.jsではターミナルを使わないとできないことがあるからです。
つまりパソコンやサーバーの操作では、ターミナルを使わないと手が届かないところがあるんです。
ただこれ、使いこなせるようになるとマウスとかを使うよりはるかに早くなります。
例えばフォルダを作るときは「右クリック→新規作成→フォルダ→名前をつける」という感じですが、ターミナルだと「mkdir myFolder」だけ書けば出来上がります。
このmkdirがコマンドなので、こういうのを覚えて行く必要があるんですね。
面倒ですけど。
ターミナルは何を使ってもいいんですど、ウインドウズに付いてる標準のものだとすべての文字が真っ白で面白くないので、Git Bashというのを使ってます。
これだと色々と色分けがされるので見やすくなります。
ウインドウズに標準装備されてるやつだと、文字が真っ白で見づらいんですよ。
インストールしたあとはnode -vと書き込んでください。
バージョンが出てきたらNode.jsのインストールは成功しています。
もし出てこなかったらGit Bashを再起動してください。
おそらくそれでうまくいくと思います。
④プロジェクトの初期化
初期化というか、「掲示板を作る机を用意する」を作る感じです。
初期化をすると、package.jsonという、いわば設計図みたいなものも同時に作られます。
やり方はターミナルで最初に作ったフォルダまで行って
npm init -y
と入力するだけです。
これで自動的に初期化ができます。
⑤Expressをインストールする
ここではExpressってなに？って人も多いと思いますが、とりあえず「Node.jsを使うにあたっての便利な道具」くらいの認識でいいです。
詳しくは次の記事「掲示板のサーバーを作る①Node.js + Express だけで JSON を扱うAPIって？」に記載しておきましたので。
タイトルからわかると思いますが、私自身が全くこれらの言葉がわかってないので調べていったという内容です。
そんな便利な道具であるところのExpressですが、ターミナルで
npm install express
と入力すればOKです。
「node_modules」というフォルダとか、「package-lock.json」とかが出来てたら成功です。
ターミナルでも確認できます。
npm list express
と書いて、なんかよくわからんのがいっぱい出てきて、最後にバージョンとかが出てきたら成功です。
⑥nodemonのインストール
これは必須じゃないんですけど、あったほうが間違いなく便利なのでインストールをしておいたほうがいいです。
普通、Node.jsでなにかを書き込んで、それを反映させるにはいちいちサーバーを止めて再起動する必要があるんですけど、これがあればその手間が省けます。
いちいち止めて再起動なんてやってられないので、やっぱり必須レベルでのおすすめです。
やり方はターミナルで
npm install -g nodemon
と書いて実行です。
これで準備は完了です。
以降、APIを作るためのコードを書いていきますが、上で作ったserver.jsをVScodeで開いて、そこで書き込んだりブログからコピペなどをしてください。
そしてそれをターミナルで
node server.js
と書き込めば起動できます。
サーバーを落とすためには、ターミナルで「Ctrl+c」を押してください。
と思ってたのですが、このあと実際に進めていったら、server.jsのコードを書きなおしたら再起動しないと反映されませんでした。
nodemonに仕事をさせるためには
nodemon server.js
と書く必要がありました。
このブログでは、最初は、起動が成功した場合「サーバーがポート3000で稼働中」と表示されるようにしています。
と思ってたのですが、
nodemon server.js
で起動したらこんな風になりました。
では次回からサーバーを作っていきます。
