Node.js超入門 4章 - Express-Gen/セッション/RSS

前置き

　前記事ではExpressの使い方をななめ読みし、データベース（SQL）に飛ばそうと思いましたが、肝心のSQLの実動作はExpressで行うとのことでExpressの”いろは”から着手しました。
　加えて本章には”セッション”などの重要技術や、”RSS”といった面白そうな節があるので時間かけて終わらせました。
　 　今夜はアニメ「進撃の巨人」の放送があるため、データベースは明日に繰り越します。

もくじ

　４−１）Expressの基本コード学習
　４−２）パラメータ、フォーム
　４−３）セッション
　４−４）RSSでGoogleニュース取得

記事本文

Expressの基本コード学習

　開発環境構築の方法と、環境の仕組みを学習。 　Express-Generatorというソフトをインストールすると、環境を自動生成してくれます。（次図)

　

　ルーティングの考え方がバニラなEJSとは違うので少し悩みましたが、理解すればあとは便利でした。 詳細は割愛。

パラメータ、フォーム

　Expressを使うとこんなに簡単にできますという説明の節でした。 特筆すべきはフォームで、面倒なパース処理などが不要になりました。詳細は割愛。

セッション

　ユーザ固有の情報を記録する方法に、クッキーを学びましたが、少ししか情報を持てず、またクライアントが自由にいじれる問題があります。
　セッションを使うと、ユーザ固有のセッションIDを付与し、サーバ上でデータを保管できます。ただし有効期限つきで、一定時間操作がないとデータは消えます。 買い物かごや、入力フォームの情報の一時保存に使うようです。

　

　上図では、フォームからPOST送信したデータをセッションに保存し、表示するサンプルです。６０分の間はデータが消えません。

　セッションのデータの実体はどこにあるのか？正直よく理解してません。サーバに少し置かせてもらうのでしょうか？ 詳細は割愛。

RSSでグーグルニュースを取得

　今回一番おもしろかったやつです。グーグルニュースから釣りのニュースだけを引用して表示してみました。

　RSSは、XMLという形式でデータを配信してます。Expressを使うと、XML形式のデータをJavaScriptで扱えるオブジェクトにパース処理してくれます。スマホアプリとかで、キャンプニュース、つりニュースなど特定ニュースをピックアップしてくれるものがありますけど、こういうことをしてるのですかね。
　そこはなんでJSON形式ではないんだろうと思いましたが、XMLにもメリットが有るのでしょうか。本書によれば、JSONとXMLがわかれば立派なエンジニアとのことです。（笑）

次に学ぶこと

　今度こそ、データベース（SQL）に着手します。NOSQLというものも紹介頂いたので、SQLー＞NOSQLで学ぶ予定です。
　６章「SequelizeでORMをマスターしよう！」や、７章「アプリケーションづくりに挑戦！」は、やらないかもしれないです：）

P.S.

土曜はほぼ寝込んでて、日曜頑張りましたが、ちょっと重かったです。:-(

本日はここまで

Node.js超入門 3章末-4章末 - メッセージボード作成！＆ Express体験

記事概要

　３章：Node.js、Ejsの総集編といえるメッセージボードアプリのサンプルを動作させ、デバッグしつつNode.js、ejsの勘所を復習しました。

　４章：アプリケーションフレームワーク「Express」をななめ読みしました。

記事本文

メッセージボード　Webアプリ作成体験

メッセージボードは、次の画像の様にログイン画面と、メッセージの投稿/表示をする画面の２ページからなるアプリです。

　○ログイン画面

　○投稿画面

◆このサンプルプログラムの重要点
　-書籍のまとめとほぼ重複しますが、下記の３点

１）ページのルーティング
　初めてアクセスすると、IDの登録有無をチェックし、ID登録ページに飛びます。
　ID登録が正常に完了してると判定されると、投稿画面に飛びます。
　このように状態を見てページ(テンプレート）を行き来することを復習できました。

２）フォームの送信とイベント処理
　フォームから入力(リクエスト)があると、イベントが発生し、"request.on"でデータを受信し、.endで閉じる。
　コレ自体は複雑ではないですがサービス次第でフォームは多様しそうなので、覚えたいと思います。

３）JSON形式でのファイル保存（ファイル読み書き）
　投稿したデータは、サーバではなくてローカルにテキストファイルとして保存します。データベースがまだ使えないのと、あくまでお試しサンプルだからだと思います。　重要なのは、テキストに保存する際にJSON形式で保存していることです。ページをリロードしても、テキストからJSON形式のデータを読み出し、扱うことができました。

アプリケーションフレームワーク「Express」

　ななめ読みに留めました。Express Generaterというのを使うと、これまでゴリゴリ作成した基本のソースコード類や、ルーティングの仕組みを自動生成してくれるそうです。
　また、言語の表記がNode.jsと同じではなく、もっとシンプルに書くことができるそうです。その表現がNode.js likeなので、Node.jsユーザーとの親和性が高くて利用ユーザーが多いとのことです。
　お世話になってる先輩は、Express以外で実装してるそうなので、必要に応じて掘り下げたいと思いました。

次に学ぶこと

次の５章は、「Chapter5　データベースを使おう！」で、SQLite3を使うようです。
しかし… Expressで。
SQLについては、共通知識が沢山あるのではないかと思うので、手は動かさずとも、書籍に目を通したいと思います。 　

本日はここまで

Node.js超入門 3章2項まで - プログラム動作確認

記事概要

　前回、３章２項まで読み進めましたが、サンプルプログラムの実動作を一切していなかったため一通りの動作確認をしました。

確認したこと（抜粋）

ルーティング

クライアントが入力したURLの内容によって表示したいページ（ejsのテンプレート)を変えたい時、URLをパース処理してサーバ側でレスポンスの内容を変える必要があることを学びました。

次のページはただindex.ejsをレンダリングして表示してるだけですが、indexページヘのアクセスであることを識別した上で表示してます。

各ページごとの処理を関数化するなど自分なりに工夫もしてみました。
用意したいページの数だけテンプレートを作らないといけないなんて、正気なのかと思いましたが、割とそういうもんだとツイッターでリプライもらいました。このように関数化することを始めとして、色々ノウハウはあるようです。

クエリパラメータ と フォームの入力

クライアントからの入力を受け取る方法として、クエリパラメータと、フォームからの入力を学びました。
クエリパラメータは、URLのお尻に「?hoge=情報１&hoge2=情報２」のように書くことでサーバにデータを送る手法です。

ふと思いついた活用例としては、センサノードなどからサーバへのデータ送信です。センサの温度、湿度などの情報をクエリパラメータとしてサーバに送信することができれば、非常に簡単にセンサネットワークが作れそうです。というか過去にArduino 向けの3Gシールドを使って遊んだときに、そういうhttpライブラリが用意されてた記憶があります。

ただ、ユーザに提供するWEBアプリで、URLに文字を入力してもらうなんてありえないですよね。。
そこで、よくある入力フォームの活用が出てきました。以下は入力フォームに入力した様子。

Submitを押すと、次のように飛びます。

この章の勘所はPOST処理、GET処理の違いを学ぶところでした。
GETのアクセスは、動的な処理がなにもない、単純なWEBページへのアクセスで使われ、POSTのアクセスはフォームなどからユーザによって異なる情報を与えるときに使われるようです。

次に学ぶこと

　前回の記事で「書籍の３章ー３項にある「超簡単メッセージボードを作ろう」を遊んでみます。 」と言いましたが、上のお遊びに時間がかかってできませんでした。サンプルを入力して動かすだけなので、メッセージボードは明日やってみようと思います。
　

本日はここまで

Node.js超入門 3章2項まで & JavaScript基本

記事概要

　今回、大きく下記の２つを学びましたので、その感想を記録します。
　・書籍「Node.js 超入門 [第3版]」２章まで
　・JavaScript基本構文

学んだこと

書籍「Node.js 超入門[第3版]」３章-２項まで

　Node.jsとはなにか、Node.jsでできること、Node.jsでのプログラミングの基本を学びました。
　・Visual Studio Code環境構築
　・HTMLファイルを表示する方法 (readFile/readFileSync)
　・テンプレートエンジン(EJS)
　・ルーティング
　・複数ページの扱い方
　　-ページ間のデータ受け渡し
　　 -CSSの適応方法

　通販サイトなどで、自分の購入履歴のページを開くと自分の購入したものを一覧表示するHTMLが生成されますが、どうしてそんなことが可能なのか考えたこともなかったので非常に新鮮でした。

JavaScript基本構文

　JavaScriptの特徴的な構文の教材を頂いたので、学習しました。
　詳細は割愛しますが、C言語しか学んだことがなく、JavaScriptの構文は新鮮なものが多々ありました。特にコールバック関数を始めとした非同期処理・同期処理の考え方です。
　アロー関数の表記もC言語にはないので、慣れるのに時間がかかりそうです。

次に学ぶこと

　書籍の３章ー３項にある「超簡単メッセージボードを作ろう」を遊んでみます。
　IDでログインし、フォームに入力した内容を投稿することで掲示板のようなことができるようです。ただし、データベースの使い方はまだ学んでいないので、テキストファイルを読み書きしてデータを記録するようです。

本日はここまで