JavaScript のみで作成する Web アプリケーションの最小構成について解説

はじめに

この記事では、JavaScript のみで Web アプリケーションを開発する際に自分が用いている最小構成について解説したいと思います。

環境構築

Node.js と npm のインストール

Node.js はサーバーサイド JavaScript の1つです。
npm は JavaScript 環境のパッケージマネージャです。

以下のサイトからインストーラをダウンロードし、インストールしてください。

Node.js
https://nodejs.org/en/

その後、コンソールで以下のコマンドを実行し、Node.js と npm がインストールされたことを確認してください。

$ node -v
v5.1.0

$ npm -v
3.3.12

gulp のインストール

gulp は JavaScript のビルドツールです。

以下のコマンドを実行してインストールしてください。

$ npm install -g gulp
$ gulp -v
[13:19:39] CLI version 3.9.0

サンプルアプリを動かそう

以下のリポジトリからサンプルコードをダウンロードしてください。

js-only-webapp-sample
https://github.com/teloo/js-only-webapp-sample

以下のコマンドを実行し、Webアプリを起動してください。

$ cd js-only-webapp-sample
$ npm install
$ npm run build
$ npm start

ブラウザから http://localhost:3000 にアクセスし、「English」ボタン、または、「Japanese」ボタンを押下して、メッセージが切り替わることを確認してください。

解説

package.json について

パッケージマネージャである npm が実行する際に参照する設定ファイルです。

{
  "name": "sample",
  "version": "0.0.1",
  "private": true,
  "dependencies": {
    "errorhandler": "1.4.2",
    "express": "4.13.3",
    "jquery": "2.1.4"
  },
  "devDependencies": {
    "babelify": "7.2.0",
    "babel-preset-es2015": "6.1.18",
    "babel-preset-react": "6.1.18",
    "browserify": "12.0.1",
    "gulp": "3.9.0",
    "vinyl-source-stream": "1.1.0"
  },
  "scripts": {
    "build": "gulp build"
  }
}

dependencies にはアプリケーションを実行する際に用いられるモジュールを設定します。
devDependencies にはテストやビルドなどで用いられるアプリケーション自体は使わないモジュールを設定します。
これらのモジュールは、 npm install コマンドでダウンロードされ、node_modules ディレクトリに展開されます。

scripts はコマンドを設定でき、 npm run (処理名) で実行できます。
今回のサンプルでは npm run build を実行することで、 gulp build コマンドを実行するようにしています。

server.js について

デフォルトでは、npm startを実行した場合、node server.jsが実行されることになっています。

var path = require('path');
var express = require('express');

var app = express();
var port = 3000;

app.use(express.static(path.join(__dirname, 'public')));
app.use(require('errorhandler')());

app.listen(port);
console.log('listening on port ' + port);

express というモジュールを呼び出していますが、これは Node.js の Web アプリケーションフレームワークの一種です。
app.use(callback) に入れるコールバック関数は middleware と呼ばれ、このコールバックには、以下の 3 つの引数を設定します。

• req
  • HTTPリクエストを表すオブジェクト
• res
  • HTTPレスポンスを表すオブジェクト
• next
  • 次の middleware を呼び出すコールバック関数。
  • 例外発生時は Error を throw するのではなく、この next メソッドの引数に Error を渡して return しましょう。

このサンプルアプリでは埋め込みの middleware である static と、サードパーティの middleware である errorhandler が用いられています。

gulpfile.js について

ビルドツールである gulp が実行する際に参照する設定ファイルです。

'use strict';

var gulp = require('gulp');
var browserify = require('browserify');
var babelify = require('babelify');
var source = require('vinyl-source-stream');

gulp.task('build', function() {
  return browserify({entries: './public/js/main.js', debug: true})
    .transform(babelify, {presets: ['es2015', 'react']}) // (1)
    .bundle()
    .pipe(source('sample.js'))
    .pipe(gulp.dest('public/dist'));
});

gulp.task('default', ['build']);

このサンプルでは browserify が用いられています。

browserify はフロントエンド JavaScript でも、 Node.js と同様に require でモジュールをインポートすることを可能にするツールです。
browserify は実行すると、require を実行している箇所を調べ、それらを適切に連結して 1 つの JavaScript ファイルを生成してくれます。

(1)の 1 行を入れることで、このサンプルでは特に使用しませんでしたが、ECMAScript 6 や JSX と呼ばれる文法を用いることができます。

さいごに

この記事では、JavaScript のみで Web アプリケーションを開発する際に自分が用いている最小構成を説明しました。

実際に活用する際には gulpfile.js に以下も加えています。

• 静的解析ツール (ESLint)
• CSS拡張メタ言語のコンパイラ (Sass, LESS)
• テスト関連ツール (mocha, karma)
• ファイル更新監視 (watch)

これを機に JavaScript を使って、Web アプリを積極的に作成していただければと思います。