TypeScriptでスクレイピングとWebサーバーを開発する手順を書いていきます。

開発の手順

環境構築

# プロジェクトのディレクトリ作成
$ mkdir scraping-server
$ cd scraping-server

# パッケージのインストール
$ npm init
$ npm install express axios cheerio

# TypeScriptと型定義ファイルのインストール
$ npm install -D typescript ts-node
$ npm install -D @types/node @types/express @types/axios @types/cheerio

インストールしている外部パッケージは以下の３つです。

• express：Webサーバー
• axios：HTTPリクエスト
• cheerio：HTMLパーサー
• tsconfig.jsonの作成

プロジェクトのディレクトリ内に tsconfig.json というファイルを作成します。

tsconfig.json はTypeScriptでコンパイルする際の設定を書き込んでおくファイルです。

ファイル内に以下のように記述します。

{
  "compilerOptions": {
    "types": ["node"],
    "esModuleInterop": true
  }
}

Webサーバーの起動 以下の内容で main.ts を作成します。

import express from "express";

const app: express.Express = express();

app.get(
  "/",
  async function (
    req: express.Request,
    res: express.Response,
    next: express.NextFunction,
  ) {
    res.json("test");
  },
);

app.listen(3000);

その後、以下コマンドを実行して http://localhost:3000 にブラウザでアクセスすると、”test” の文字が表示されます。

$ npx ts-node main.ts これで、Webサーバーの起動ができました。

スクレイピングで取得した情報を表示する

main.ts に以下の実装を追加します。

import express from "express";
// パッケージを追加
import axios from "axios";
import cheerio from "cheerio";

// 関数を追加
async function getItems(): Promise<string[]> {
  const url: string =
    "https://en.wikipedia.org/wiki/List_of_programming_languages";
  const res = await axios.get(url);

  const $: cheerio.Root = cheerio.load(res.data);
  let items: Array<string> = [];
  $(".div-col li").each((i: Number, elem: cheerio.Element) => {
    items.push($(elem).text());
  });

  return items;
}

const app: express.Express = express();

app.get(
  "/",
  async function (
    req: express.Request,
    res: express.Response,
    next: express.NextFunction,
  ) {
    // 追加した関数を使用する
    const items: Array<string> = await getItems();
    res.json(items);
  },
);

app.listen(3000);

追加実装の後、 $ npx ts-node main.ts を再実行して http://localhost:3000 にアクセスすると、 Wikipediaのページから取得したプログラミング言語一覧の文字が表示されるようになります。