ディレクトリ、ファイル概要

CreateJsをtypescriptで利用する

2024.08.18

こんにちはjunです。最近canvasを利用した描画やゲームを開発する機会があり、その時に「CreateJs」というcanvas のライブラリを利用しました。

CreateJsはFlashの開発者が代表を務める会社が開発しており、OSSとして利用することができます。canvasで図形、グラフィック、アニメーションを描画したり、ゲームなどを開発する時に使用すると便利です。webGLよりまだ開発難易度が低く、描画速度もそれなりに早いのでおすすめです。

公式のチュートリアルや導入の説明ではこのCreateJSをCDN、またはファイルをダウンロードしてインポートして利用することを想定して解説されています。しかし私は過去に勉強としてゲームを開発した時に非常にクラス周りで苦労したことがあり、可能であればtypescriptを使用して依存関係や型チェックを入れたいと思っていました。

しかしこれらの導入方法を詳細に書いている記事が少なかったので書くことにしました。ChatGPT Plusなどを利用して導き出しました。typescriptとwebpackを利用して構築します。

ディレクトリ、ファイル概要

構成は以下の通りです。src/index.ts がエントリーファイルで,必要なファイルは src以下に配置します。

.
├── dist
│   └── bundle.js (ビルド生成)
├── index.html
├── package-lock.json
├── package.json
├── src
│   ├── index.ts
│   └── types
│       └── createjs.d.ts
├── tsconfig.json
├── webpack.common.js
├── webpack.dev.js
└── webpack.prod.js

package.json

{
  "name": "createjs sample",
  "version": "1.0.0",
  "description": "",
  "main": "index.js",
  "scripts": {
    "build": "webpack --config webpack.prod.js",
    "start": "webpack serve --config webpack.dev.js",
    "watch": "webpack --watch --config webpack.dev.js"
  },
  "author": "",
  "license": "ISC",
  "dependencies": {
    "@types/easeljs": "^1.0.5",
    "createjs": "^1.0.1"
  },
  "devDependencies": {
    "script-loader": "^0.7.2",
    "ts-loader": "^9.5.1",
    "typescript": "^5.5.4",
    "webpack": "^5.93.0",
    "webpack-cli": "^5.1.4",
    "webpack-dev-server": "^5.0.4"
  }
}

tsconfig.json

{
    "compilerOptions": {
      "target": "ES5",
      "module": "ES6",
      "esModuleInterop": true,
      "skipLibCheck": true,
      "forceConsistentCasingInFileNames": true,
      "outDir": "./dist",
      "rootDir": "./src",
      "baseUrl": ".",
      "paths": {
        "createjs-module": ["node_modules/@types/easeljs"]
      },
      "moduleResolution": "node"
    },
    "include": ["src/**/*.ts", "src/types/**/*.d.ts"],
    "exclude": ["node_modules"]
}

webpack.*.js

// webpack.common.js
const path = require('path');

module.exports = {
  entry: './src/index.ts',
  module: {
    rules: [
      {
        test: /\.ts$/,
        use: 'ts-loader',
        exclude: /node_modules/,
      },
      {
        test: /createjs\.min\.js$/,
        use: 'script-loader'
      },
    ],
  },
  resolve: {
    extensions: ['.ts', '.js'],
  },
  output: {
    filename: 'bundle.js',
    path: path.resolve(__dirname, 'dist'),
  },
};


// webpack.dev.js
const { merge } = require('webpack-merge');
const common = require('./webpack.common.js');

module.exports = merge(common, {
  mode: 'development',
  devtool: 'inline-source-map',
  devServer: {
    static: './dist',
    compress: true,
    port: 9000,
  },
  watch: true,  // ファイル変更を監視
});


// webpack.prod.js
const { merge } = require('webpack-merge');
const common = require('./webpack.common.js');

module.exports = merge(common, {
  mode: 'production',
  optimization: {
    minimize: true,  // コードの圧縮
  },
});

src/types/createjs.d.ts

declare module 'createjs/builds/1.0.0/createjs' {
    export = createjs;
}