sig-web-07.md

TSG 第7回(最終回)Web分科会 カンペ

Node.jsによるサーバーサイドJavaScriptを学ぶ。あと、CSSをやる。

事前準備

Node.jsをインストールする。

Windows もしくは OS X

Node.js公式ページに行き、Current と書いてあるリンクをクリックするとインストーラーが落ちてくる。

あとは指示通りインストールを進めていけばよい。

Linux

nvmをおすすめする。

curl -o- https://raw.githubusercontent.com/creationix/nvm/v0.31.2/install.sh | bash

でnvmをインストールしたあと、

nvm install node

で最新版のNode.jsをインストールする。

curl | bashをしたくない人は公式ページに従ってインストールして。

Hello, World! (Node.js編)

適当な場所にindex.jsを作成し、次のように書く。

console.log('Hello, World!');

ターミナルからnode index.jsと打ち込むと、コンソール上に Hello, World! と表示されるはず。

Node.jsとは?

前回「JavaScriptは本来ブラウザ上で動かすための言語だったが、近年汎用スクリプト言語としてあらゆる場所でJavaScriptを使用するようにする、という流れが存在する」と説明した。Node.jsはそれを実現するためのJavaScript処理系、標準モジュール、コマンドラインインターフェイスの総体である。

具体的には、JavaScript処理系V8に加えて、

• CommonJSに基づくモジュール読み込みシステム
• ファイルシステムやネットワークなどにアクセスするための標準モジュール
• パッケージマネージャーnpmと、パッケージを作成しアップロードすることができるリポジトリnpmjs.comのホスティング

などを提供する。

モジュールを使ってみる

まずはNode.jsの標準モジュールであるfsを使ってみる。

const fs = require('fs');

fs.writeFile('tsg.txt', 'Hello, TSGer!', () => {
    console.log('Succefully helloed');
});

実行するとtsg.txtというファイルにHello, TSGer!と書き込まれているのが分かる。

npmjs上のパッケージをインストールして読み込む

Node.jsの強力な機能の一つは、コミュニティや個人が開発したnpmパッケージを容易にダウンロードして読み込むことができることである。

例えば、HTTP通信を簡単に扱えるようにするパッケージ、requestをダウンロードするには、コマンドライン上で以下のコマンドを打ち込む。

npm install request

コマンドが完了するとカレントディレクトリ上にnode_modulesというフォルダが生成されている。この中にダウンロードしたパッケージが保存される。

このパッケージをモジュールとして読み込んでみる。

const fs = require('fs');
const request = requrie('request');

request('https://tsg.ne.jp/', (error, response, body) => {
    fs.writeFile('tsg.html', body);
});

というように標準モジュールと同じように使うことができる。

CSSについて

そういえばCSSについて一言も喋ってないのに気付いたので、CSSについても触れておく。

前回まででリクエストに対しHTMLを返す部分は学んだが、ブラウザ上でそれらをどのように表示するか制御する部分は学んでこなかった。

ブラウザ上で表示する「内容」を表現するHTMLに対して、その「スタイル(見え方)」を調整するファイルはスタイルシートと呼ばれ、現在は通常CSSが用いられる。

CSSの文法

CSSの文法は非常に単純で、スタイルを適用したい要素を セレクター という記法で指定し、その後に適用したいスタイルを波括弧でくくって列挙していくというものである。例えば、

/* div要素に適用される */
div {
    width: 100px;
    height: 100px;
    border: 1px solid red;
}

/* div要素の子要素の、idがfugaでclassがpoyoの要素に適用される */
div > #fuga.piyo {
    background-color: #c0ffee;
    text-decoration: line-through;
}

CSSの読み込みかた

HTML文書にCSSを適用するには、以下のいずれかの方法を用いる。

インラインで記述する

<strong style="color: red;">つよい</strong>

style要素として記述する

<style>
    strong {
        color: red;
    }
</style>

外部ファイルとしてリンクする (推奨)

<link rel="stylesheet" href="hoge.css">

CSSプリプロセッサー

CSSはこのように文法が単純で機能が限られているので、大規模なCSSを書く場合はCSSプロプロセッサーと呼ばれる機構を通じてコンパイルをする場合が多い。最近よく使われているのは Sass, LESS, Stylus, PostCSS あたり。

以下で軽く説明する。

Sass

Railsに標準で付属するのでRailsの普及とともに広く使われるようになった。Sass文法とSCSS文法の2通りの文法が存在するが、SCSS文法を使用することが多い。

// div要素に適用される
div {
  $size: 100px;

  width: $size;
  height: $size;
  border: 1px solid red;

  // div要素の子要素の、idがfugaでclassがpoyoの要素に適用される
  & > #fuga.piyo {
    background-color: #c0ffee;
    text-decoration: line-through;
  }
}

LESS

Sassに大きな影響を受けて開発された。JavaScriptで実装されているのでNode.jsと相性がいい。

// div要素に適用される
div {
  @size: 100px;

  width: @size;
  height: @size;
  border: 1px solid red;

  // div要素の子要素の、idがfugaでclassがpoyoの要素に適用される
  & > #fuga.piyo {
    background-color: #c0ffee;
    text-decoration: line-through;
  }
}

Stylus

// div要素に適用される
div
  size = 100px

  width size
  height size
  border 1px solid red

  // div要素の子要素の、idがfugaでclassがpoyoの要素に適用される
  & > #fuga.piyo
    background-color #c0ffee
    text-decoration line-through

実習

Express.jsというNode.jsの軽量Webフレームワークを用いて簡単なアプリケーションを作ったので、まずはそれを動かしてみる。

まずは依存するnpmモジュールをインストールしておく。

npm install express body-parser

インストールしたら、このページの下部にあるプログラムを適当な名前(例えばexpress.js)で保存して、起動する。

node express.js

起動するとサーバーが起動するので、ブラウザで localhost:3000 にアクセスする。「ヨムヨムくん」と書かれたウェブページが表示されるはずである。

課題

適当なnpmモジュールを利用して、入力した日本語の読み方を教えてくれる機能を実装しよう。

ヒント

• 読み方を取得するには形態素解析を利用すると良いと思う
  • 頑張ればYahooのルビ振りAPIも使えるかも
• 使えるかもしれないnpmモジュール
  • kuromoji
  • kuromojin
  • mecab-async
  • japanese
  • などなど……
• 未知語は読み飛ばしてもいいし、そのまま出力してもいい
• nodemonを導入するとファイルの変更に合わせて自動的にサーバーを再起動してくれるので開発が楽になる。

余力があったら

• 読みを振り仮名の形で表示する
  • 素直にHTMLのruby要素を使うか、もしくはtable要素で誤魔化すか
• 読みをひらがな(or カタカナ)に変換する
• CSSをがんばる
  • テンプレートエンジンを導入しないと厳しいかも……
• JSをがんばる
  • 入力した文字列の読みがリアルタイムで表示されるとステキ
    • ヒント: Ajax, API, oninput

実装例

const express = require('express');
const bodyParser = require('body-parser');
const kuromojin = require('kuromojin');

const app = express();

app.use(bodyParser.urlencoded());

app.get('/', (req, res) => {
	res.end(`
		<!DOCTYPE html>
		<h1>ヨムヨムくん</h1>
		<form method="POST">
			<input type="text" name="text">
			<input type="submit">
		</form>
	`);
});

app.post('/', (req, res) => {
	const text = req.body.text;

	kuromojin.tokenize(text).then(tokens => {
		const yomi = tokens.map(token => {
			if (token.reading) {
				return token.reading;
			} else {
				return token.surface_form;
			}
		}).join('');

		res.end(`
			<!DOCTYPE html>
			<p>「${text}」の読み方は「${yomi}」です。</p>
			<p><a href="/">戻る</a></p>
		`);
	});
});

app.listen(3000, () => {
	console.log('Server started.');
});

今後のWeb分科会について

• とりあえず今回まででWebを形作る技術について一通りやった。
• 学期中に行うWeb分科会としては今回で最終回とするが、要望があればもっと細かい内容を夏休みor秋学期に行うことはやぶさかでない。
  • やってない内容といえば、
    • MVVM
    • Angular
    • React
    • WebSocket
    • Browserify
    • Babel
    • REST
    • Canvas / SVG
    • WebFont
    • HTTP2
  • あたりか。一部は僕も勉強しながらになると思う。
• あと、この分科会に参加した人はぜひMNEMOの開発に参加してほしい。

sig-web-07.md.js

const express = require('express');
const bodyParser = require('body-parser');
const qs = require('querystring');

const app = express();

app.use(bodyParser.urlencoded());

app.get('/', (req, res) => {
	res.end(`
		<!DOCTYPE html>
		<h1>ヨムヨムくん</h1>
		<form method="POST">
			<input type="text" name="text">
			<input type="submit">
		</form>
	`);
});

app.post('/', (req, res) => {
	const text = req.body.text;

	// ここになにか書く
	const yomi = 'ホゲホゲ';

	res.end(`
		<!DOCTYPE html>
		<p>「${text}」の読み方は「${yomi}」です。</p>
		<p><a href="/">戻る</a></p>
	`);
});

app.listen(3000, () => {
	console.log('Server started.');
});