Rのつく財団入り口

ITエンジニア関連の様々な話題を書いているはずのブログです。

トップ > IT > 【感想】Node.js超入門【JavaScript】

【感想】Node.js超入門【JavaScript】

IT 読書 プログラミング 開発 JavaScript Node.js フレームワーク フロントエンド EJS

サーバサイドJavaScript Node.js に超入門する本

　JavaScript界隈の開発だと必須のnpmのインストール前に出てくるので、さらに必須となるJS実行環境のNode.js。もはや基本OSみたいにフロントエンド開発の根幹でいつも使われていますが、JavaScript周りが流行っている割にNode.jsをメインに扱った本をあまり見かけないので最近のものを1冊読んでみました。
　作者は超入門シリーズなどで知られる掌田津耶乃さん。479ページと厚め。中は電子書籍でもカラー刷りで見やすいです。初心者向けの入門書というのを意識してか、文章も簡単め、感嘆符多め、図解多めでプログラミング経験者であればかなりさくさく読めます。

Node.js超入門

Node.js超入門

Chapter1 Node.jsの基本を覚えよう！

　まずはWebサイトとWeb開発(=サーバサイドのWebアプリケーション)の違い、フレームワークを使うと開発が便利になるよという基本中の基本から。Node.jsはJSをブラウザ以外からも動かせるランタイム環境である、Webサーバにもなれる、(サーバサイドの)JSフレームワークが使える、JS開発の標準プラットフォームになりつつあるよという話。
　インストールもインストーラーを叩くだけですが丁寧に解説し、コマンドからJSプログラムを叩く例を載せています。開発環境としてはVisual Studio Codeを採用し、こちらも手順を丁寧に載せ、最後にnodeコマンドから1行のコードを書いてWebサーバーをポート3000で動かしてHello Node.js!!を表示するところまでです。
　JavaScript ベスト・オブ・ザ・イヤーのIDE部門でも不動の1位、VS CodeはJS周りの開発の主流になりつつありますね。

risingstars.js.org

Chapter2 アプリケーションの仕組みを理解しよう！

　Webサーバーとして動かす最低限のコードは以下なのですが、

const http = require('http');
var server = http.createServer(
  (request, response) => {
    response.end('Hello Node.js!');
  }
);
server.listen(3000);

　ここから始まってポート番号やリクエスト・レスポンスとはなんぞやのあたりも丁寧に解説し、レスポンスの中身やヘッダを増やしながら徐々に詳しくなっていきます。経験者には退屈かもしれませんが、Webアプリケーション全般の入門としても読めます。
　そして、進むとNode.jsのFileSystemオブジェクトを使って外部の .htmlファイルを読み込んでレスポンスとして表示、関数を分けて処理を細分化、.htmlファイルの中身を表示する際に最初はreplaceメソッドを使って動的部分を置換…から始まり、テンプレートエンジンの導入へ。
　標準的なテンプレートエンジンEJS(Embedded JavaScript templates)の導入例を載せています。使い方はとても簡単で、

  • npm経由でnpm install -g ejsでインストール
  • .htmlの代わりに.ejs形式のテキストファイルで出したいHTMLを記述。
  • その中で動的に置換したい部分は<%= title %>形式で記述。(懐かしのJavaのJSPなんかと同じ)
  • Webサーバとして動かすためのコードの中で、''ejs.render({画面の指定}, {JSオブジェクト})'' の形で置換したい部分をプロパティ：値の組のJSオブジェクトの引数で与える…

というもの。URLの原始的なルーティングも基本は簡単で、

  • JSコードの中でリクエストを分解してURLのパスを算出
  • case文で分岐
  • それごとにレスポンスにステータスコードや出したいHTMLの中身をセット…

というもの。なんらかの他言語でWebアプリケーションの経験のある方ならすぐイメージが湧くかと思います。

Chapter3 Webアプリケーションの基本をマスターしよう！

　Node.js＋テンプレートエンジンにEJSの構成で、Webアプリの各種機能の実現方法を解説していきます。

  • GETでクエリーパラメータを渡してサーバサイドで受け取って表示
  • フォームを使った送信、GETとPOSTの違い
  • サーバサイドでrequestのonイベントで処理するやり方
  • 検索結果のTABLEタグでの一覧行事
  • テンプレートの一部を外だし共通化できる「パーシャル」
  • テンプレート内での変数の使い方
  • クッキーの使い方
  • ログインページで入力したIDをローカルストレージを使って保存
  • 最後にまとめとして、簡単な掲示板アプリケーションの開発

　ローカルストレージは比較的新しいJavaScriptの技術ですが他は基本のキホン。他のプログラム言語やフレームワーク経験者の方なら、JavaScriptだとこういうコードで実現するんだ…と差分を見る形で、すんなり概要が理解できると思います。

Chapter4 フレームワーク「Express」を使おう！

　とサーバサイドJSでもWebアプリがふつうに作れちゃうのが分かりましたが、これまでの例でもWebサーバとしての起動/URLルーティングの振り分け/ それぞれの1関数の中でリクエスト受信＋処理＋テンプレートに組み込んでレスポンス送信…が長い長い1スクリプトの中で実現されています。
　ふつうに考えてこのままじゃ規模が大きくなったらアカンよねということで、出ましたサーバサイドJSのWebアプリケーションフレームワーク。JavaScriptベスト・オブ・ザ・イヤー2017のNode.jsフレームワーク部門でも1位の「Express」です。
日本でも発表資料なんかで時々名前を聞くので、とりあえずサーバサイドをNode.jsでやるならこのExpressを選んでおけばOKな感じのようです。

  • フレームワークの方向性としては軽量シンプルめで、拡張機能は別途インストールしていくスタイル。
  • プロジェクトフォルダを作ってからnpm initでpackage.jsonを作成し、その後npm install で入れていく。
  • 用意されたExpressオブジェクト、Applicationオブジェクトなどを使ってサーバを稼働。
  • 画面作成のテンプレートエンジンにはejsを使う。
  • 定形の res.render('EJSファイル名.ejs', {画面に渡したいキー:値の組を入れたJavaScriptオブジェクト}); のコードで画面描画。
  • 完全に静的なページを返す仕組みもある。
  • URLのクエリーパラメータも定形の関数の引数から取得可能。
  • フォームの内容を分解して取り出すのもふつうに可能。
  • ひとつのアプリケーションの基本部分をディレクトリ構成ごと全て自動生成してくれる「Express Generator」というツールがある。これもnpmでインストールして実行。最近のクライアントサイドJSフレームワークのReactのcreate-react-appやVue.jsのvue-cliみたいな感じ。
  • Routerオブジェクトを使った定形のコードでURLルーティングもできる。

…というように、読んでいくと何の事はない、Javaなら懐かしのStrutsやJSFやSpring MVCなどなど、C#ならASP.NET、RubyならRails、PythonならDjango、PHPならLaravelやCakePHPなどなどなど、他言語のWebアプリケーションフレームワークと本質はほとんど変わりません。このへんを少しでも経験のある方なら、なんだ大体同じなんじゃんという感じですんなり読み進められるかと思います。

　余談ですが Express というネーミングは、特急電車の他にも商用ツールの廉価版や無料版によく使われるのでちょっと紛らわしいなあと思います。(SQL Server Express とか Oracle Express Edition とか Visual Studio Express とか。)

Chapter5 値とデータをマスターしよう！

　Expressのキホンが分かったところで応用編的な章。

  • クエリパラメータやフォームの内容取得の詳細
  • セッション処理。デフォルトではついていないので、「Express Session」という別のモジュール(ライブラリ)をnpmでインストールして使う。サーバに飛んできたリクエストの req.session.{キー} = {値};のようにして使う。
  • Ajax系はExpress専用のバージョンがちょっと古い「Express jQuery」というのをnpmで入れる方法も、手動でjQueryを入れる方法もある。クライアントサイドでの書き方はHTMLに書くときと同じ。
  • 「XML2JS」というモジュールを使って、RSSを取得したりもできる。
  • RDBを使おうということで例。
    • RDB本体はモバイル用アプリのサンプル等でもよく使われるSQLiteを例に。
    • テーブル作成用に操作ツールのDB Browser for SQLiteを使用。
    • ExpressはDB接続機能がないので、「SQLITE3」というモジュールをnpm経由で入れる。
    • サーバサイドのJSコードでDatabaseオブジェクトというのを使った定形の書き方で、SQLを実行したりできる。
    • CRUDが揃ったユーザ一覧管理の簡単なアプリでの実装例。

　最後のCRUDが揃ったアプリでの演習なんかは、各種プログラム言語の入門書でもよく見かけるお馴染みの題材ですね。サーバサイドJavaScriptのNode.js/Expressだとこう書くんだ、という感じで読み進められるかと思います。サーバサイドのフレームワークなのにデフォルトだとセッション管理やDB接続の機能がついてないというのは、なかなか珍しくて逆に面白いです。

Chapter6 データベースを使いこなす！

こちらも応用的な章。DBと関係ない気がしますがまずは「Express Validator」というモジュールの使い方。

  • これもnpm経由でインストール。
  • 画面側の.ejsファイルにはテキストボックスなどにvalue属性で再表示用の値を書く。
  • サーバサイドのコードで、requestオブジェクトの関数を呼ぶ形でバリデーションを実施。
  • サーバサイドのコードで、定形の書き方でエラー時の分岐や表示、リダイレクトなどが書ける。
  • エスケープ処理や空白のトリミングなどもサニタイズ用メソッドが用意されている。

　そしてSQLite以外にPostgreSQL/MySQL(MariaDB) など一般的なDBに対応し、SQLレスでDBアクセスのコードが書ける「Bookshelf」というモジュールの使い方。

  • 内部でSQLクエリ作成に「knex」という別モジュールを使うので、まずnpm経由でインストール。
  • その後「Bookshelf」自体をnpm経由でインストール。
  • 画面側の.ejsファイルには、Bookshelfが独自のBaseModelオブジェクトの中に検索結果を持って返すので、これをfor文で繰り返して中身を取り出すようにコードを書く。
  • サーバサイドのコードでは、まず定形のコードでknexオブジェクトを生成、ここで接続先のDB設定などを書く。
  • このknexを引数にしてBookshelfオブジェクトを生成。
  • このBookshelfオブジェクトのメソッドを使って、テーブル名を指定してテーブルに対応したモデルのオブジェクトを生成。
  • このモデルオブジェクトを使って、.fetchAll() , .where(), .save() ...などなど各種メソッドを使ってDBアクセスできる。
  • ページネーション(ページング)のサポートもある。

　MVCアーキテクチャなどでModel層近辺で出てくるDBアクセスライブラリ、O/Rマッピング機能のあたりに該当する仕組みですね。JavaならJavaEE自体が備えるようになったJPAやHibernate, MyBatis, Spring内の仕組みあれこれ、C#のASP.NET内ならSQLレスなLINQ、Ruby on RailsやPythonのDjangoでのActiveRecordパターンのDBアクセス、PHPのフレームワーク群なら例えばLaravelのEloquent ORM、このへんの技術にだいたい相当する位置づけのモジュールです。
　この章の話も他言語のフレームワークがある程度分かる人であれば、なるほどとすんなり行けるかと思います。

Chapter7 アプリ作りに挑戦！

　最後は本書で紹介された技術を全部使って仕上げということでアプリのチュートリアル。ログイン画面＋CRUDができるミニ伝言板アプリの開発です。DBには [users] テーブル1つを作り、Express Generatorでプロジェクト作成、EJS/Express Session/Express Validator/SQLITE3/knex/Bookshelf ...と総動員してWebアプリケーションを作っていきます。

　もうひとつ、こちらはDBに [users], [markdata] と2つテーブルを作り、Markdown形式のドキュメントを表示するWebアプリケーションを作るチュートリアルも載っています。この題材はあまり見かけないので面白いですね。

　最後はプログラミングは1から全部理解しようとせずとにかく実際にコードを書いてものを作って慣れていき、徐々に理解や改良を進めていくといいよ…というスタンスで後書き、ミニJavaScript入門がついて終わっています。

気になったところ

★電子版でもカラーで読みやすく、ソースコード部分も背景色があって分かりやすいのですが、行番号があるともっとよいかなと思いました。

★作者の掌田津耶乃さんの本で心配なのが、時々誤植が多い本があること。読んだ限りだと目立つ大々的な間違いはそんなになかったような気がするのですが…初学者の方が読むとまた違うのかもしれません。サポートページにはソースコードのサンプルはありますが正誤表はまだありませんね。

www.shuwasystem.co.jp

★Amazonの書評にサンプルの構成で、DBがSQLiteを使っていて実用的でない…というのがあり、確かに一理あるなとは思いました。僕も実務ではまだ使う機会がないのですが今はNoSQL系のMongoDBとかRedisとか色々ありますからね。とはいえ、なんでもいいから簡単なRDBに繋いでCRUDのサンプル一式を見せるという意図で接続先にSQLiteを選ぶという構成は、往年のJavaの入門書やAndroidの初心者向けの本でも割と見かけます。このへんは初心者向けの本と思って割り切るしかないのかなと思います。

まとめ：Node.jsやExpressの基礎が超わかる本

　僕もよく知らなかった頃はサーバサイドもJavaScriptって一体どんな複雑怪奇なことをしてるんだろう…と勝手に戦々恐々としていたのですが、本書でよく実物イメージが湧きました。書いてきたとおり、他言語や他のフレームワークでWebアプリケーション開発の経験のある方ならスムーズに、JSでも書き方が違うだけでだいたい同じなんじゃんという感じですんなり概要を理解していけると思います。
　一方、本書自体がターゲットとしている初心者は、完全初めてでなくプログラミング自体やJS自体は多少でも知っている人を想定しているような気がします。読み進めるのにもっと時間がかかるでしょうしハマるところもあるでしょうが、本もカラーで説明も平易、入門には丁度よいでしょう。URLのパラメータとかリクエストにレスポンス、GETやPOSTとはなんぞやとか、Webのキホンも扱っているのでWebアプリケーション自体の入門書としても読めます。
　既に仕事のアプリケーションのサーバサイドをNode.jsで立ててモリモリ動かしているような人にはきっと物足りないので他の本や英語の情報でとなるでしょう。(日本語のNode.jsの本も何冊か出ていますが、最近の新しい本があまりないんですよね。)

　僕は直近でNode.jsを深く使う予定はなく概要の把握が目的で読んだので、この目的には丁度フィットする感じでした。
サーバサイドJSフレームワークのExpressの構成は、本体はとてもシンプルで追加モジュールで機能を増強する…というスタイルになっています。最近流行りのクライアントサイドJSフレームワークのReactやVue.jsの思想とも似ていて、このへんちょっと面白いですね。