読了: 約 3 分
最近JavaScriptの勉強で色々なものを試している中で土日にNode.jsをインストールして
少し試して見たのでメモがてら書いておきます。
参考書籍
技術評論社
売り上げランキング: 192649
概要
はじめにNode.jsとは
HTML5,CSS3,JavaScriptでリアルタイムに複数の人が遊べるWEBアプリが最近増えてきました.
HTML5のcanvasを使って、複数人が同時にお絵かきをしたり、同じ画面を見ながら、
自分に用意されたビンゴゲームを複数人が同時にやるとか。
そういった類のゲームを作ったり下記で上げるような企業のゲームにも使われているようです。
サーバーサイドというとPHP,Python,Perl等しか浮かんでこない私ですが、Node.jsはサーバーサイドのJavaScriptとして、
最近注目されていてよく聞いていましたのでまとめておこうと思います。
企業でもGREE社やサイバーエージェント社等でも導入しているようです。
詳細は下記のサイトにまとめられているのでこちらをご参考に。
サーバサイドJavaScriptの本命「Node.js」の基礎知識
Node.jsとは、サーバサイドJavaScriptの1つですが、「シングルスレッドベースの非同期処理環境」という特徴を持っています。
Node.jsのインストール方法
大体色々なサイトにまとめられていますが、下記のサイトが一番参考になりましたので
そちらを記載しておきます。
Node.jsのインストール
node.jsの本サイトからどうぞ
私はWindows環境ですので、Downloadでwindowsのアイコンをクリックしました。
インストールされるのが、C:Program Filesの中だと思いますが、そこからは特に変えてないです。
色々試してみる
JavaScriptでWebアプリを開発できる「Node.js」活用入門
デザイナーやマークアップをしている方だとあまり馴染みがないあの黒い背景のものを
基本使います。笑 いや、笑えないかもしれないですが。
上の写真はNode.js向けのフレームワークの中でも有名な『express』をインストールした時のものです。
下記のようにコマンドを打ってインストールします。
基本パッケージをインストールしたい場合は『npm install ～』でインストールします。
npm install express
■一旦処理を終えたい場合には、Ctrl+Cで処理を終えます。
■作成されたアプリケーションを実行するファイルがapp.jsになるので、nodeで実行する場合は下記のコマンド
node app.js
expressで採用されているテンプレート「Jade」
expressでは、「Jade」というテンプレートエンジンが採用されている。Jadeフォーマットのテンプレートは、HTML要素のネスト構造をインデントで表現するのが特徴。
CSSでいうところのSassとかLESSとかってところでしょうか、<>を書かなくてよい辺り楽なのかなーと思ったり。
具体的な書き方はこんな感じ
これを『http://localhost:3000/』で表示した場合こんな感じ
慣れないと不思議な気もしますが、スニペット等入れておいて楽なコーディングが出来るようになりそうですね。
さて、気になるCSSですが、実はJadeの制作者が『stylus』というCSSメタ言語を創っているようです。
アメーバピグなどはこちらを使用している模様。
スマートフォン版AmebaのCSSについて
stylusのダウンロード
SassやLESSの基本的な機能を持ったまま、記述が大分楽に出来るよう。
mixin等の機能もちゃんと使えるので今度試してみたい。
この辺Node.jsの記事を書かれているエンジニアさんが書いていなさそうなので書いていきます。
終わりに
下記ページにNode.jsの活用事例が載っています。
実際こういうものが出来るんだというイメージを持ちつつ作る事って重要ですよね。
これを見つつ自分の作りたいもののイメージを固めて進めていきたいですね。
ご参考までにどうぞ。
Node.jsの利用事例、7連発！
ミームの死骸を越えてゆけ
HTML5のcanvas+Node.js+WebSocketでリアルタイムお絵描き共有アプリを作ったよ
昔から、skypeなりで同時に複数人で何かするというアプリケーションがありましたが、
今後もどんどん面白いアプリが増えていくと思います。スマートフォンでもこういうのが
出来るようになってくればどんどん面白くなりますね！
次回は何か作ってアップしていきます。