前回の記事はこちら
node.jsの最初のメモ - brand new note
とりあえずインストールはできたので、本記事ではExpressを導入とサンプルの写経でアプリ開発の基本を押さえてみます。といっても下の記事をなぞっているだけなので、こちらも個人的メモの域を出ていません。本記事を読まれる方は併せて下の記事をしっかり読んで頂くといいと思います。
Express
node.jsのフレームワークの王道。REST APIとかと組み合わせるといい感じに開発できます。REST APIは、ざっくり言うとURIの末端をID化することによって同一ドメインで多様な処理を行えるようにする機能です。でも初めて知ったのでこの説明が正しいかちょっと不安です。
例えば写真や画像のリストを表示するサイトを作ってみたい場合、沢山の画像にIDをつけて管理できれば便利ですよね。URI解析用のコードを書かなくても、node.jsとExpressを使えばシンプルなコードで実現できるようです。
まあ詳しい話は分からないのですが、とにかく便利だから有り難がって使おうということですね（適当）
ディレクトリ作成
まず作業環境を作ります。ほんとはこのあたりをまとめてやってくれるツールもあるんですが、理解のため記事に沿って手作業でやってみます。
mkdir node cd node npm init
npm initでプロジェクトを初期化し、いくつかの質問に答えるとそれに合わせたpackage.jsonファイルが生成されます。プログラムの作者のところに名前を書いたりとか、gitのリポジトリを指定したりとかですね。
次にExpressをインストールします。
npm install express --save
--saveをつけるとpackage.jsonにexpressを使っていますという内容が追記されます。
プログラムを書く
サーバ側の処理、クライアント側の処理を分けて書いていきます。参考記事に沿って書いていくと、サーバサイドの処理というのは「画像を保存している場所を参照し、その画像をリスト化してIDをつける」部分を表しているようです。
逆にクライアント側の処理というのはサービスを使う側ができる操作の部分を表しますから、この場合「画像をIDによって検索し選択する」部分となります。で、サーバ側の処理とクライアント側の処理は「app.js」に書いていきます。もちろんデフォルトのファイル名なのでこの名前以外でもできます。
また、UI(ユーザインターフェース)の作り込みに関しても別に作っていく必要があります。これはwebサービスなので主にHTMLとかでいけます。他にもあるみたいですが。。。こちらは「views」ディレクトリ配下に「index.ejs」ファイルを作ることによって実装できます。もちろんデフォルトのディレクトリ名なのでこの名前以外でもできます。
以下写経。
詳しいコードの内容はちょっとまだ説明できないので元の記事を読んでもらえればと思います、ごめんなさい。
これらを実行してみたところ、とりあえず参考記事と同じような出力結果を得ることができました。3000番ポートを開けてnode app.jsで実行、ブラウザでhttp://localhost:3000にアクセスすると「New Project」が表示されます。この表示はhtmlで記述した「index.ejs」の内容です。F12キーでjavascriptコンソールを確認してみると、サーバの処理がクライアント側で呼び出されていることを確認できます。photo001,photo002といった画像ファイルの部分がリスト化されて読み込まれています。
おわりに
とりあえずNode.jsのさわりの部分である「クライアント、サーバ、UIを分けて実装する」といった空気感はこの参考記事でかなりつかめるのではないかと思います。写経しただけでは実際に画像を表示できるわけではないですが。。。
また、こうした「app.js」「index.ejs」などなどのワンセットは、「ミドルウェア」で生成することが可能です。同じ方が書かれている下の記事も、順番に読んでみると理解が深まると思います。
Express + Node.jsで基本を理解した次の一歩 - ディレクトリ構成をルーティング・ミドルウェアを理解して考えてみる - Qiita
ここから自分なりに少しずつ理解を深めて、まずはローカルで何かしら動くサービスを作れたらいいなと思います。
