Webアプリケーション開発のツールやライブラリのまとめ

この文書は？

TypeScript を使ったWebアプリケーションを開発するときに、私がよく利用するフレームワークやツールの組み合わせを紹介します。

それぞれメジャーなものの組み合わせになっているので、汎用性は高いと思いますが、小規模な開発には向かないかもです。

この文書の対象者

• HTML、JavaScriptを使ったWebアプリケーションの開発初心者。
• TypeScriptやWebpackなど話は聞いたことあるけど・・・という人。

紹介するミドルウェア、フレームワーク、ツール

リンク先は、公式サイトです。

• 開発環境で利用するもの
  • Node.js
    • 開発環境のミドルウェア。yarn や webpack のツールの実行などにも利用する。
  • yarn
    • JavaScript のパッケージライブラリ。下記のツールのインストールや管理に利用する。
  • TypeScript
    • JavaScript の代替言語。JavaScriptに型指定が使えるようにした言語。
  • webpack
    • JavaScriptのモジュールバンドラ。分割したJavaScriptファイルを統合する。
  • ESlint
    • JavaScript/TypeScriptの構文チェッカー。
  • Prettier
    • コードの整形ツール。
  • jest
    • JavaScript/TypeScriptのユニットテストツール。
• 実行環境で利用するもの
  • React
    • WebUIに特化したJavaScriptフレームワーク
  • Redux
    • JavaScriptのデータフローツール
  • styled components
    • スタイルを JavaScript 内に記述できるツール。Reactとの相性がよい。
• 推奨するコードエディタ
  • Visual Studio Code

とりあえず動かしてみたい

Githubに、これらを組み込んた開発テンプレートを作成しました。

とりあえず動かしたい場合は、是非ご利用ください。

もう少し詳しい説明

それぞれの詳しい説明は、公式のサイトを読んだり、Web検索すると多くの解説が見つかると思います。

Node.js

サーバーサイドJavaScriptの実行環境として紹介されることが多いですが、ローカルPCで開発環境として利用することも多いです。

Webアプリ開発では、WebPackやTypeScriptのビルド、Jestによるテストの実行など開発の基盤となるミドルウェアです。

公式サイトから、インストーラーがダウンロードできます。

yarn

JavaScript のパッケージマネージャです。
Webアプリや開発で利用するライブラリやツールをインストールするときに、ホームページからそれぞれダウンロードするのではなく、コマンドで行う事ができます。

また、インストールしたライブラリは、それぞれのバージョンとともにリストで管理されます。他の環境で必要なライブラリをロードするときには、１つのコマンドで使用するライブラリのリストをもとに自動的にダウンロードすることができます。

よって、Gitなどの構成管理ツールではライブラリ本体を入れル必要なく、構成管理がシンプルでサイズも小さくなります。

Node.js には、npm というパッケージマネージャがバンドルされており、これを利用することもできますが、それを更に便利（早い、コマンドを短縮できる、など）にした yarn を利用することも多いです。

インストールは、npm から行います。

> npm install -g yarn

TypeScript

JavaScript は型定義がなく、シンプルで小さい規模の開発では素早いコーディングが可能です。一方で、一定以上の規模の開発では、これが原因で読みづらかったり、実行時でないとエラーが出ないなど効率が大変悪くなります。特に最近では、Webアプリケーションに求める機能が増えており、複雑さも高まっています。

そこで、JavaScriptに代わる言語（AltJS）がいくつか登場しており、その一つがTypeScriptです。

AltJSは、それぞれの言語仕様でコーディングしたものをコンパイルすることでJavaScriptに変換するものです。

そのため、JavaScriptとは異なる言語を習得する必要がありますが、TypeScriptは JavaScript をベースに拡張したものになっているので、JavaScript開発経験者にはハードルが低いものになっています。

特徴として下記があります。

• 変数に型指定ができる
• インターフェースが宣言できる
• React や jQuery などの外部ライブラリでも型定義ファイルが用意されていれば、それを利用できる。
• Visual Studio Code などのエディタでの高度なコードアシストが利用できる。
• コンパイル時に、構文エラーや型違いなどのエラーを出力できる。
• null/undefined-safetyなコーディングができる。

インストールは、yarn で行います。

> yarn add -D typescript

webpack

JavaScript の規模が大きくなると、ファイルを分けて管理する必要があります。他の言語では、ファイルをモジュールという単位に分けてコーディングし、モジュールが他のモジュールを参照する（import）ように書きます。

JavaScript の最新の仕様にはその仕様はあるのですが、ブラウザでは実現できません。

WebPackを利用することで、複数に分けたモジュール（ファイル）を1つ（パフォーマンスの必要に応じて複数）のファイルにまとめることができます。まとめたJavaScriptをWebサーバーに配置します。

また、CSSや画像ファイルなどもJavaScriptとして取り込むことも可能です。

ESLint

JavaScriptやTypeScriptのLinter（リンター）です。Linterとは、コードの構文チェッカーです。言語のシンタックス・エラー以外に、設定したコーディングルールに従っているか、などをチェックできます。

TypeScript のルールの一部の例として、下記のようなものがあります。

• 比較演算子として、"=="を禁止し、"==="を強制する。
• インターフェースの名前の先頭に "I"をつけることを強制する（またはその逆）
• 変数やクラス名のルール（大文字始まりのキャメル型など）を強制する。
• メソッドの戻り型を明示的につけることを強制する。

prettier

コードを指定したルールに従って整形するためのツールです。

ESLint にも整形のためのルールが有るのですが、それより拡張性があるので、整形に関するルールはこちらで定義することにします。

prettier は整形のためのツールで、チェッカーではないのですが、ESLintのプラグインを導入することで、チェッカーとしても機能させることができます。

ルールの一部を記載します。

• インデントの種類(space or TAB)やスペースの場合の数。
• 文末のセミコロンの強制。
• 文字列リテラルの統一(" or ')
• ファイルの最後に空白行を1行だけ入れることを強制する。

jest

JavaScript のテストフレームワーク。主にUnitTestプログラムを書くときに利用します。

特徴として、他のフレームワークに比べてモックの作成が簡単にできたり、カバレッジ機能も内包しているのが特徴です。

Reactのコンポーネント（画面の部品）のテストとして、スナップショットやイベントによるテストもできます。

React

ReactはUIに特化したJavaScriptフレームワークです。

特徴としては下記が挙げられます。

• コンポーネントというUIを部品化を作成して、組み合わせて画面を作成する。
• jQuery のようにHTMLを操作するのではなく、HTMLをパラメータに合わせて生成する。
• JSXをサポートしており、JavaScriptの中に、HTMLのタグのように記述することができ、直感的な実装が可能。
• 基本的には、クライアントサイド（ブラウザ）での動作だが、サーバーサイド(Node.js)でも利用できる。
• データフローの機能はないので、必要な場合は他のツールを併用する。

以上により、出力するUIの定義(HTML)とそれを動的に決定するパラメータとロジックが、コンポーネントとして一緒に定義することにより、直感的なコーディングが可能でメンテナンス性も向上します。

JSXを使った React のコードの例を示します。
https://codesandbox.io/s/react-sample001-3esb5?file=/src/App.tsx

import React, { useState } from 'react';

const Example: React.FC = () => {
  // Declare a new state variable, which we'll call "count"
  const [count, setCount] = useState<number>(0);

  return (
    <div>
      <p>You clicked {count} times</p>
      <button onClick={() => setCount(count + 1)}>
        Click me
      </button>
    </div>
  );
};
export default Example;

Redux

Flux というデータフローのアーキテクチャを実現する、JavaScriptフレームワークです。

データフローの処理に特化していて、UIの機能はありません。

データフローを持たないReact と併用することが多いですが、ライブラリとして独立しているので、jQuery など他のフレームワークとも併用できます。

Redux は3つのモジュールに分かれています。データを保持する Store、Storeのデータを変更する Reduxer、Reducerにデータの変更を指示する Action と役割が明確なので、その仕組を理解すれば実装に迷うことが少ないです。また、UnitTestも書きやすくなります。
ただし、使いこなすには少々学習が必要です。

Redux の必要性については、この説明だけではピンと来ないかもしれません。規模の小さい、複雑でないWebアプリケーションでは必要ないものです。
慣れてしまうと React だけで Webアプリケーションを作ろうとしたときに、一定規模以上になるとデータの扱いに困ってしまいます。そのときに Redux を導入すると良いでしょう。

Redux のデータフロー (Redux入門【ダイジェスト版】10分で理解するReduxの基礎より)

styled-components

上で書いたように、React で、出力するUIの定義(HTML)とそれを動的に決定するためのパラメータとロジックがコンポーネントとしてパッキングできるのですが、スタイルだけはCSSファイルで定義しなければなりませんでした。

styled-components はJavaScript中にスタイルを書くことができます。これを利用することで、スタイルもコンポーネントの中に含めることができるので、ロジック、UI、スタイルがパッキングでき、さらに効率とメンテナンス性が向上します。

スタイルは、JavaScriptの"タグ付きテンプレート"を利用して、文字列としてCSSを定義します。これにより、JavaScript の中であるにも関わらず、CSSと同じ記述をすることができます。（Sassと同じように、階層化された記述も可能）

コードの例を示します。
https://codesandbox.io/s/styled-component-sample001-1135q

import React, { useState } from 'react';
import styled from 'styled-components';

const Container = styled.div`
  border: 1px solid #999;
  padding: 1em;
`;

const Example: React.FC = () => {
  // Declare a new state variable, which we'll call "count"
  const [count, setCount] = useState<number>(0);

  return (
    <Container>
      <p>You clicked {count} times</p>
      <button onClick={() => setCount(count + 1)}>
        Click me
      </button>
    </Container>
  );
};
export default Example;

まとめ

以上のように、様々なライブラリやツールを組み合わせることで、効率的なWebアプリ開発ができるようになります。

それぞれのものを習得するにはある程度時間はかかりますが、ものにしてしまうと、効率は格段に上がります。

今回紹介したもの以外のものを追加したり差し替えたりするのも、もちろん自由です。

色々な組み合わせを試して、自分や組織にあったものを探してみるのもいいでしょう。