Zenn
🐥

JavaScriptアプリケーションプロジェクトの作り方（基礎編）: 2020年10月版

2020/10/18に公開
JavaScript
Node.js
TypeScript
frontend
tech

2020年のフロントエンド開発で最低限求められるであろう条件を満たすようなJavaScriptアプリケーションプロジェクトを作る方法を、出来る限り一次情報と合わせてまとめました。

求められる条件

  • ソースコードをTypeScriptで書けること
    • src/...にソースコードを置く
    • yarn devでメインエントリーポイントを実行
    • yarn watchでホットリロード
  • node.js v12でアプリケーションを実行できること
    • yarn buildでTypeScriptからJavaScript（node.js v12が対象）へトランスパイル
    • ビルド結果はout/...に置かれる
  • Prettierでフォーマットできること
    • yarn prettier:fixでコードフォーマットを実行
  • ESLintを実行できること
    • yarn eslint:fixでLintを実行
  • ユニットテストコードをTypeScriptで書けて、Jestで実行できること
    • __tests__/...にテストコードを書く
    • yarn testでユニットテストを実行

最終結果だけ見たい方はこちらをご覧ください: https://github.com/kn3ny/js-app-boilerplate/tree/basic

どうやって環境を組み立てるか興味のある方に向けて、以下にまとめました。

事前準備

  • node.js v12をnやnvmでインストール
  • yarnをインストール

これらの手順はこの記事では省略します。

プロジェクトのディレクトリ構成はこのようにします。

js-app-boilerplate
├── __tests__  // テストコード
├── coverage   // テストコードのカバレッジ
├── out        // トランスパイル結果
└── src        // ソースコード

以下、全てのコマンドはプロジェクトのディレクトリのルートで行うものとします。

ソースコードをTypeScriptで書けるようにする

package.jsonを作成 [1] 

yarn init -yp

TypeScriptを導入 [2] 

yarn add -D typescript

ts-nodeと@types/nodeをこのタイミングで入れておきます。こちらについては一次情報が見つからなかったので、普段私がやっているやり方です。

yarn add -D ts-node @types/node

TypeScriptの初期設定 [3]

node.js v12用のtsconfigをインストールします。

yarn add -D @tsconfig/node12

その後、tsconfig.jsonを配置します。

tsconfig.json
{
  "extends": "@tsconfig/node12/tsconfig.json",
}

Hello Worldを作成

src/app.ts
export class App {
  greeting(): string {
    return "Hello world!";
  }
}
src/index.ts
import { App } from "./app";

const main = () => {
  console.log(new App().greeting());
};

main();

yarn devでHello Worldを実行できるようにする [4]

package.json に追加する部分
+ "scripts": {
+   "dev": "ts-node ./src/index.ts"
+ }

yarn watchでホットリロードできるようにする [5] 

yarn add -D ts-node-dev
package.jsonに追加する部分
  "scripts": {
+   "watch": "ts-node-dev --respawn --transpile-only ./src/index.ts"

node.js v12でアプリケーションを実行できるようにする

トランスパイルの結果を./outに出力するようにtsconfigの設定を修正 [6]

tsconfig.jsonに追加する部分
+   "compilerOptions": {
+     "outDir": "./out"
+   }

yarn buildでトランスパイル出来るようにする [7]

package.jsonに追加する部分
  "scripts": {
+   "build": "tsc"

トランスパイル後は以下でアプリケーションを実行できます。

node ./out/index.js

Prettierでフォーマットできるようにする

Prettierを導入 [8] 

yarn add -D prettier

Prettierの初期設定 [8:1][9]

.prettierignore
out
coverage
.prettierrc.js
module.exports = {};

Prettier CLI will ignore files located in node_modules directory.

とあるように、node_modulesは自動で除外される[10]ので、.prettierignoreに書かなくても大丈夫です。

yarn prettier:fixでフォーマットできるようにする [8:2]

package.jsonに追加する部分
  "scripts": {
+   "prettier:fix": "prettier --write ."

ESLintを実行できるようにする

ESLintを導入 [11] 

yarn add -D eslint @typescript-eslint/parser @typescript-eslint/eslint-plugin

PrettierとESLintを組み合わせるため以下も導入します。

yarn add -D eslint-config-prettier

ESLintの初期設定 [11:1][12]

.eslintignore
node_modules
out
coverage
.eslintrc.js
module.exports = {
  root: true,
  parser: "@typescript-eslint/parser",
  plugins: ["@typescript-eslint"],
  extends: [
    "eslint:recommended",
    "plugin:@typescript-eslint/recommended",
    // Prettierと組み合わせるため
    "prettier",
    // Prettierと組み合わせるため
    "prettier/@typescript-eslint",
  ],
  // node.js v12をターゲットにしたソースコードを対象にするため
  parserOptions: {
    ecmaVersion: 2019,
  },
  // node.jsをターゲットにしたソースコードを対象にするため
  env: {
    node: true,
  },
};

yarn eslint:fixでESLintを実行できるようにする [11:2]

package.json
  "scripts": {
+   "eslint:fix": "eslint . --ext .js,.jsx,.ts,.tsx --fix"

yarn fixでPrettierとESLintを実行できるようにする

2つのタスクを実行できるようにnpm-run-allを導入します。こちらについては一次情報が見つからなかったので、普段私がやっているやり方です。

yarn add -D npm-run-all
package.jsonに追加する部分
  "scripts": {
+   "fix": "run-s prettier:fix eslint:fix"

ユニットテストコードをTypeScriptで書けて、Jestで実行できるようにする

Jestとts-jestを導入 [13] 

yarn add -D jest ts-jest @types/jest

Jestの初期設定 [13:1] 

yarn ts-jest config:init

Hello Worldのテスト

__tests__/app.test.ts
import { App } from "../src/app";

describe("App", () => {
  test("greeting()", () => {
    expect(new App().greeting()).toStrictEqual("Hello world");
  });
});

yarn testでユニットテストを実行できるようする [14]

package.jsonに追加する部分
  "scripts": {
+   "test": "jest --coverage"

To be continued...

需要と時間があれば、この続きで以下を書くかもしれません。

  • Webブラウザをターゲットにしたビルド編 (Webpack + Babel)
  • Production-readyなHTTP API編 (Fastify, Observability)
  • Universal App編 (next.js / nuxt.js)
  • Dockerイメージ作成編 (Multi-stage build)
  • CI/CD編
  • Storybook編
  • E2Eテスト編 (Codeceptjs + Puppeteer)

一次情報を元にした誰でも再現可能なドキュメントが世の中に増えると良いなと思います。

脚注

  1. https://classic.yarnpkg.com/ja/docs/cli/init/ ↩︎

  2. https://www.typescriptlang.org/download ↩︎

  3. https://www.typescriptlang.org/docs/handbook/tsconfig-json.html ↩︎

  4. https://github.com/TypeStrong/ts-node ↩︎

  5. https://github.com/whitecolor/ts-node-dev ↩︎

  6. https://www.typescriptlang.org/tsconfig#outDir ↩︎

  7. https://www.typescriptlang.org/docs/handbook/compiler-options.html ↩︎

  8. https://prettier.io/docs/en/install.html ↩︎ ↩︎ ↩︎

  9. https://prettier.io/docs/en/configuration.html ↩︎

  10. https://prettier.io/docs/en/cli.html#file-patterns ↩︎

  11. https://github.com/typescript-eslint/typescript-eslint/blob/master/docs/getting-started/linting/README.md ↩︎ ↩︎ ↩︎

  12. https://eslint.org/docs/user-guide/configuring ↩︎

  13. https://kulshekhar.github.io/ts-jest/user/install ↩︎ ↩︎

  14. https://jestjs.io/docs/ja/cli#--coverageboolean ↩︎

Discussion