で、具体的にnodeを使ってどうやってウェブサイトを作るんじゃい？ 拙者、前回nodeとは何なのか？を解説し申しましたが、nodeをコンピューターに入れただけだと、基本的にはコマンドラインからファイル操作などをjavascriptで行うっていう作業しか出来ないんだけど、サーバーを立ち上げてページを作って所定のディレクトリにいれ、ブラウザから見れるようにするという作業には、フレームワークを使います。 幾つか選択肢があるんだけど、今回は一番ポピュラーで軽いexpressというフレームワークを使って、サイトを構築。 イメージとしては、nodeにてウェブやウェブアプリの制作に必要なモジュールが用意されているパッケージっていう感じ。 以下順を追って、サーバーの構築方法。 1、メインディレクトリの制作とモジュール類のインストール まずはウェブサイト全体を収めるメインのフォルダ(ルーツになる)を適当なところに作って、cdコマンドでそのフォルダに移動し、下記コマンドを実行。init、つまり初期化！　＊今回は"NodeSite"っていうフォルダを制作したみたよ。 ~/NodeSite$ npm init 幾つか質問が出てきますが、とりあえず全部そのままでOK。 そうすると、package.jsonというファイルが自動生成されます。 "name": "nodesite", "version": "1.0.0", "description": "", "main": "index.js", "scripts": { "test": "echo \"Error: no test specified\" && exit 1" }, "author": "nanashi", "license": "ISC" } で、次にExpressをインストール。下記コマンドを実行。npmってのは、Node Package Manager。つまり、色んなモジュールやパッケージをインストールしたり、設定したりしてくれるよ。 ~/NodeSite$ npm install express --save package-lock.jsonファイルとnode_modulesフォルダが生成されます。dependenciesっていうのは、読み込んだ外部モジュールのこと。この一覧がpackage-lock.jsonファイルに記録されていきます。 このjsonファイルがあれば、モジュール自体が無くても、npm install コマンド一発で、自動的にインストールしてくれます。持ち運びに便利！ node_modulesはそのままで、読み込んだモジュールのデータ。便利機能の保存場所。ここがドラえもんたる所以ですね。 ２、app.jsファイルを作って、サーバー側 javascriptを書く インストールが済んだら、app.jsファイルを作って、そこにサーバーサイドのjavascriptを書いていきます。 制作したルーツフォルダ直下にsrcフォルダを作り、その中にapp.jsファイルを作りましょう。コードは以下 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"); }) これが超基本のコード。 これだけでサーバーがセットアップされ、ホームページとaboutが表示されます。 コード解説 const express = require('express'); const app = express(); １行目：外部モジュールを呼び込むお決まりの呪文。require('モジュール名') ２行目：expressはこの時点で関数なので、実行して、オブジェクトやメソッドを使えるようにし、app変数に入れる。 app.get('/', (req, res)=>{ res.send('Hello Express!'); }) app.get('/about', (req, res)=>{ res.send('This is about page'); }) ルーティングと言われている部分。 app.get()メソッドを使うと、各URLにリクエストを振り分けられる。幾つでもここでルーティングできます。 引数は２つ。リンク先アドレスとコールバック。で、コールバックは２つの引数reqとresをとる。これは決まってる。 req resについての詳細は長くなるので、調べてちょー。 簡単に言うと、getリクエストで指定したリンク先にアクセスがあった場合、コールバックの内容が返される。 今回のサンプルは単純にテキストを返してるだけですが、JSONを返したり、リダイレクトしたり、APIを発動したり、ここで好き放題出来ます。 通常サイトのディレクトリ構造と大きく違うのは、別にリンクURLにフォルダやファイルがある必要がなく、適当なURLを設定できて、そこにアクセスがあれば、コールバックの内容を返せるという点ですかね。 今回の例で見ても、/aboutにaboutページが存在するわけではありません。 ここをこんな風にエンドポイントにして、JSONを送ることも可能です。 app.get('/app/music', (req, res)=>{ res.json('{inu: meshi kuu na}'); }) 勿論、appフォルダとかは存在する必要ないです。 app.listen(3333, ()=>{ console.log("server running on Port:3333"); }) で、最後のこの行でサーバーの設定をしています。 app.listen(ポートナンバー, コールバック)です。 ポートナンバーは基本何番でもオーケーですが、nodeでは３０００が一般的みたい。コールバックは、接続時に実行される関数。 ３、プログラムの実行 コマンドライン cd で、app.jsの階層まで移動して、node app.js ubuntu@ubuntu-aurora-r4:~/NodeSite/src$ node app.js server running on Port:3333 サーバーが起動してるのが分かるね？ で、ブラウザを立ち上げて、窓に　localhost:3333 って入れれば、/ が、localhost:3333/about っていれればaboutページが表示されます。 今回の設定は、あくまでもローカル環境内でのセットアップで、公開するにはAWSやherokuなんかのnodeに対応したサーバーにてデプロイする必要があります。 通常のHTMLページ等をhandlebarsを使ってレンダリングする方法は次の記事で。 画像を幾つかアップロードしたかったんだけど、スクリーンショットの加工が面倒なのと、Qiitaでどう埋め込むのか調べるのが面倒くさかったので、今回は無しでござる。 小生の自習用備忘録でもあるので、乱文誤字脱字失礼つかまつる！押忍

Node.jsってなんやねん？なんで知っとかんとあかんねん？ という超初歩的な疑問に対して答えようと思うのじゃ。 元々はphpとSQLというウェブの作り方はもう時代遅れだから、既存のサイトを全てnodeとnon-SQLに置き換えたいというプロジェクトへのオファーがあり、２０年以上ウェブの現場から遠ざかっていた身としては、nodeっていうのはphpみたいなサーバー側の言語かのぉくらいに思っていたわけですが、調べると、サーバー側で動くJavascriptっていう言い方がよくされていて、さらに触れてみると、その言い方も間違いで、サーバー側でJavascriptを動かす為の実行環境と便利なモジュール群が正しい表現の仕方かなと。 元々javascriptって、ブラウザ上でしか動かないんで、サーバーサイドはphpとかpythonとか他の言語で書かないといけなかったわけです。 で、そんなんやったら、両方で動いたほうが便利やん！って思ったギークたちがGoogleからV8エンジンを運び出し、両方で動くようにしてしまったわけです。 つまり、javascriptでOSの機能とかファイルシステムにもアクセスできてしまうわけです。phpで書いていたのを、javascriptの.jsで代替できるっていうことでもあります。 で、どうやって使うねん？と思うかも知れませんが、https://nodejs.orgからNode.jsをあなたのコンピューター（サーバー）にダウンロードするだけです。 で、それから、どうやって使うねん？って？　基本的にコマンドラインからの操作か、コードエディタでサーバー側コードをJavascriptで書いて、サーバー側で実行です。クライアントサイドのjavascriptはブラウザで動作確認できるよね？ nodeをインストールしたら、コマンドラインを立ち上げて、node とコマンドを打つだけで環境が立ち上がります。 ubuntu@ubuntu-aurora-r4:~$ node Welcome to Node.js v13.14.0. Type ".help" for more information. > で、普通にjavascriptのコードを打つとちゃんとコードが実行されているのが分かります。 ubuntu@ubuntu-aurora-r4:~$ node Welcome to Node.js v13.14.0. Type ".help" for more information. > > let x=11; let y=15; let sum=x+y; console.log(sum) 26 > const name='henoheno'; console.log(name); henoheno > ブラウザが無くても、OSの中（つまりサーバー内）でjavascriptが動いてるよね？ つまりこれがnodeの力。 ブラウザからフォームとかを通してjavascriptで書かれたリクエストが来ると、サーバー側のjavascript(node)でそのリクエストを処理して、送り返すっていう感じ。 普通のjavascriptと何が違うんじゃい？ 例えば、ブラウザ側で使われるjavascriptにあるような、Windowオブジェクトとか、Documentオブジェクトはありません。だってOS側の操作にブラウザとか画面は関係ないんだから。 その代わりに、fsコマンドや、Processオブジェクトなど、ファイルの操作に使うようなオブジェクトやメソッドが存在します。 ブラウザ側ではAPIからデータを持ってくる場合、fetch()を使いますが、node側ではrequestモジュールを使ったり、そういった細かい違いはあるけども、結局javascriptです。javascriptのシンタックスとか書き方で動きます。 基本的に、元々のnodeに入ってるモジュールはグローバルと言って、ほんの少ししか入っていないので、ほぼ裸の状態です。色々便利なモジュールは、別途インストールして自分で服を着ていかないといけません。 モジュールのインストールや、操作はnpmっていうモジュールをインストールして行います。 こいつがいないと、node環境での作業は捗りません。まさにnode界のドラえもんです。 ノビグラマー「npmえもん！簡単にAPIをたたいてデータを持ってきてくれる道具なんか無いかな！くそだるくて、一から書いてられないよ！」、npmえもん「ノビくんはしょーがないなー、いつも楽することばっかり考えて。”Request～”☆☆☆彡！！！。使い方は公式ドキュメントで勝手にしらべるんだよ。」っていう感じ。 なんでnodeやねん！phpでもええんやないのか？ nodeはNetflix、Facebook、PaypalやAmazonでも使われています。 勉強していくとわかるんだけど、どちらかというと今までみたいなメニューがずらっと並んでてリンクがあるようなサイトよりも、Web APPやAPI、ヘッドレス、シングルページのウェブに非常に向いてる感じ。 デプロイの仕方も全然違います。 nodeの特徴としてよく言われるのが、”ノンブロッキングI/O”というコンセプト。 javascriptはシングルスレッドで、１個づつしかコードを実行できないんだけど、ポイントは”待ち時間”。 料理に例えると分かりやすい。シングルスレッドなので、シェフは一人でサラダとスープとステーキとデザートを作るとする。 スープから作るとすると、スープを煮込んでる間にサラダの準備とステーキの仕込みが出来るのが、”ノンブロッキング”。スープが仕上がるまで、鍋の前で待っていないといけないのが、”ブロッキング”。phpは元々これ。 この場合、ステーキが焼き上がるまで、デザートの準備も出来ないことになり、全てのコースが揃うまで膨大な時間が必要になる。 その点、ノンブロッキングは一度コードを実行させると、待ってる間に他のコードも複数実行させる事が出来る。 nodeはこの点が非常に優れており、結果的に多くのリクエストをすばやく効果的に捌けるため、超軽くて速いっていう事になる。 実際にサーバーの立て方、ディレクトリの構成、ページの作り方を少しづつアップしていく予定です。がんばれ、俺。 次回！nodeでサーバーを立てる