node.jsでWEBサイトを作成したい！
4月からフリーランスとなり新しい現場での仕事となりました。
今まではずっとjavaばっかりやっていましたが、node.js+Riot.jsで開発することになったので、一通りまとめていこうと思います。
node.jsとは
一言で言うと、node.jsとはjavaScriptのサーバー実行環境です。
javaScriptはもともとWEBブラウザで使用するクライアントのプログラミング言語としてHTMLで読み込みDOM操作を行なったりすることをメインに使用されていました。
しかし、2009年にnode.jsが登場してからサーバ処理もJavaScriptで開発することができるようになり、言語の学習コストは多少削減されたのでは無いかと思います。
node.jsはサーバ実行環境のためjavaでいうtomcatのようにWEBサーバの役割を持っています。node.jsのサーバを実行することでブラウザでサイトを表示する時のURL(http://xxxx.xxxx/)のようにhttpのプロトコルでプログラム処理を呼び出すことができます。
Riot.jsとは
Riot.jsとは、javaScriptのフロントサイドのライブラリです。軽量でシンプルな設計思想のライブラリとして登場しましたが、日本語の参考サイトは少なく、参考書は現在下記の一冊のみしか無いのではないでしょうか。
開発環境構築
今回の現場では、node.jsとRiot.jsを使用して開発を行っています。
サーバ構成としては以下です。
フロント：HTML、CSS、javascript、riot.js
サーバ：javascript(node.js、koa.js)
node.jsで有名なフレームワークといえばExpress.jsかと思いますが、今回はkoa.jsを使用しています。koa.jsはExpress.jsの開発者が作成した新しいフレームワークです。コールバックを無くしたり、エラーハンドリングを強化したり、コードの見やすい設計がされています。
node.jsでは、基本的に使用するライブラリをnpm installコマンドでプロジェクトフォルダ配下にダウンロードして、使用します。koa.jsもこの時にインストールします。
npm installでインストールされたライブラリはnode_moduleフォルダに保存され、package.jsonというファイルで管理されます。
今回使用した開発環境の基本構成とし必要なライブラリをいくつか以下に紹介します。
- @koa/router
- @riotjs/compiler
- @riotjs/webpack-loader
- axios
- bootstrap
- gulp
- jquery
- koa
- log4js
- pg
Riot.jsでは、基本的にはHTMLでの記述と同じですが、特徴をいくつか挙げると下記です。
- コンポーネント指向
- 軽量でシンプル
- 学習コストが低い
- 大規模開発向きではない
- シェアが低い
今回Riot.jsを使用したのは、過去実績としてRiot.jsを使用したシステムの構成・機能を流用したかったと言うのもありますが、画面の表示を1HTMLファイル、複数riotファイルを使用して行うことで、HTMLでソケット通信などのイベントリスナーを常駐させることができるので便利だと感じました。
まとめ
環境構築は参考サイトが少ないため、初心者には難易度が高いかもしれませんが、ぜひ試してみてください！
コメント