Node.js + Socket.IOでチャットシステム (第3回)

さて第3回目の今回は、前回までで作ったチャットシステムを拡張しやすいように、フォルダ構成などを整えます。

おそらく現時点でのファイル構成は次のようになっていると思います。

chat_exapmle_files_01

それでは、早速準備を整えていきます。


ライブラリ配置ディレクトリの作成

現在のコードではindex.htmlに直接JavaScriptのコードを書き込んだり、jQueryの公式にリンクしたりしていますが、あまりかっこよくないので、配置を換えます。

Expressではアプリケーションのルートディレクトリにpublicというフォルダを作り、その中にスタイルシートやJavaScript用のフォルダを配置します。

今回はpublic下にcssとjsというフォルダを作ります。

次にpublic/js内にchat.jsというファイルを作り、index.htmlに書いていた以下のコードを移植します。

public/js/chat.js

これとあわせてjQeuryをダウンロードしてきて、同じくpublic/jsディレクトリに配置します。
 

さて続いてはスタイルシートです。スタイルシートはpublicディレクトリ下のcssというディレクトリに置きます。今回はそこにstyle.cssというファイルを作ります。

これまでindex.htmlに直打ちしていたcssの内容を次のように分離します。

public/css/style.css

 

これで、現在あったコードの整理は完了しました。

HTMLファイルのJade化

では続いて、index.htmlをJade化して後々いじる時に手抜きが出来るようにしておきます。

JadeというのはHTMLに似たマークアップ + ちょっとした制御構造を持つもので、HTMLの記述をより少なくすることができます。

まずJadeをnode.jsで使えるようにするために、以下のコマンドを打ちます。

これでJadeがローカル環境にインストールされると同時にpackage.jsonのdependenciesにも追加されます。
 

Jadeがインストールできたら、Jadeファイルを置くディレクトリを作成します。ここはExpressの標準に従って、アプリケーション・ディレクトリ下にviewsというディレクトリを作り、そこに以下の2つのファイルを配置します。

views/index.jade

views/layout.jade

この2つのファイルを合わせてindex.htmlを表現しているのですが、layout.jadeはヘッダなどのファイルごとに変わらない部分を記述しており、この中には「block content」という列があります。

index.jadeには「extends layout」という最初の一列があり、これはlayout中のblock要素をこのファイルの中で記述しますという意味です。

実際index.jadeのなかでは「block content」の下に、挿入されるべき内容が記述されています。
 

残るはindex.jsでJadeをレンダリングして表示するようにするだけです。index.jsを次のように書き換えます。

index.js

 

重要なのはapp.use関数で最初にクライアントから見た見た目のルートディレクトリを指定します。ここではpublicフォルダが指定されています。

次にviewを規定するjadeファイルの場所とレンダリングするための言語を指定します。

ここではjadeファイルがviewsをフォルダに入っているのでapp.set(‘views’, __dirname + ‘/views’)と指定し、レンダリングにはJadeを使うのでapp.set(‘view engine’, ‘jade’)とします。

これで今回の作業は終了です。基本的にブラウザで見られるものは変わりませんが、だいぶコードの分離が進んで整理された気がします。

最終的なファイル構成は次のようになります。

chat_example_files_03


 

次回はチャットの機能を少し拡充してログイン画面をつけるところまで行きたいと思います。

それでは、今回も最後までお読みいただきありがとうございました。

コメントを残す

メールアドレスが公開されることはありません。 * が付いている欄は必須項目です