Go to Qiita Advent Calendar 2024 Top
LoginSignup
1
0

Delete article

Deleted articles cannot be recovered.

Draft of this article would be also deleted.

Are you sure you want to delete this article?

More than 5 years have passed since last update.

@purejihacker(ぷれじ でんと)

JQuery,JCanvas を TypeScript でエラー無くトランスパイルするまで

Last updated at Posted at 2019-05-25

#jCanvasとJQueryをTypeScriptでトランスパイル
(2019.5.26)
※編集中ですので内容などに誤りがある場合があります。

(2019/06/03追記）
jCannvas も

npm i --save jcanvas @types/jcanvas

することでreferenceタグ不要で利用することができました。
近々記事を修正します。

（以上追記）

jCanvas

環境 バージョン
さくらVPS 512MB SSd 20GB
CentOS 6.10
Node.js v10.15.0
npm 6.9.0
typescript v3.4.5
ライブラリ バージョン リンク
jQuery v3.4.1 [jQuery]https://jquery.com/download/
jCanvas v21.0.1 [Jcanvas] https://projects.calebevans.me/jcanvas/

Canvasへの描画がとても簡単になるjCanvasライブラリ。
JavaScript（＋JQuery）で書いていた時はとてもお世話になりました。
TypeScriptでクラス別に描画処理を行いたい・・・そんな気持ちが強くなりました。

※例

main.html
<!DOCTYPE html>
<html lang="ja">
   <head>
      <title>jQuery and jCanvas </title>
      <link rel="stylesheet" href="./main.css"/>
      <script src="src/jquery-3.4.1.js"></script>
      <script src="src/jcanvas.min.js"></script>
      <script src="main.js"></script>
   </head>
   <body>
      <div id="main">
         <p class="test"></p>
         <canvas id="canv" width="350px" height="300px"></canvas>
      </div>
   </body>
</html>

注意点として、canvas はCSSでwidthやheightを設定すると
伸縮されてうまく表示されません。attr属性でwidthやheightを設定
するか、上記のようにタグに記載すると良いです。

main.js
//main.js
//jCanvas描画起点を中心からではなく左上からにする
$.jCanvas.defaults.fromCenter = false;
$(function () {
    var xx = 100;
    var yy = 100;
    var cc = "#CCAC26";
    $("#test").text("testtest"); //jQuery  
    $("#canv").drawRect({
        fillStyle: cc,
        x: xx, y: yy,
        width: 200,
        height: 100,
        draggable: true 
    });
});

##TypeScriptだとどう書くべきか

Jcanvasを利用するコードをTypeScriptで書きたい！そんな気持ちが
強くなっていろいろ調べたけれどjQueryとJcanvasのd.tsのトランス
パイルが通らないこと数時間。

拾い物のJQuery.d.tsとJcanvas.d.tsをmain.tsの先頭で

main.ts
    ///<reference path="jquery.d.ts"/>
    ///<reference path="jcanvas.d.ts"/>

としてもダメ。調べながら試行錯誤すること半日・・・
そんな私への備忘録がこの記事です。

フォルダ構成例

/var/www/html/main
|--main.css
|--main.html
|--main.ts  //tsc main.ts -m commonjs -t ES6　（１）
|--main.js  //tsc で生成されたjsファイル （２）
|--node_modules //npm install --save @types/jquery で生成される
| |--@types
| | |--jquery
| | | |--JQuery.d.ts
| | | |--JQueryStatic.d.ts
| | | |--LICENSE
| | | |--README.md
| | | |--dist
| | | | |--jquery.slim.d.ts
| | | |--index.d.ts
| | | |--legacy.d.ts
| | | |--misc.d.ts
| | | |--package.json
| | |--sizzle
| | | |--LICENSE
| | | |--README.md
| | | |--index.d.ts
| | | |--package.json
|--package-lock.json　　//npm install --save @types/jquery で生成される
|--src
| |--jcanvas.d.ts  　　 //jCanvas用 jcanvas.d.tsファイル （０）
| |--jcanvas.min.js　　 //jCanvas 本体jsファイル
| |--jquery-3.4.1.js    //jQuery 本体jsファイル

結論としては
####1. jQuery.d.tsはnpm経由で@types/jquery をインストールするだけでいい

/var/www/htmlにて

mkdir tttt
cd tttt
npm install @types/jquery --save

####2.jCanvas.d.ts はエントリーポイントのtsファイルの先頭で

main.ts（１）
  ///<reference path="src/jcanvas.d.ts"/>

とすればいいとわかりました。型定義ファイルの jcanvas.d.tsの編集
にも時間がかかりました・・・

jquery.d.ts（０）
// jcanvas.d.ts
// 2019.5.25 ぷれじ改
// 改変元ファイル様：
// https://github.com/uestla/convex-hull/blob/master/ConvexHull/jcanvas.d.ts
//
// main.ts の先頭にて
// <reference path="src/jcanvas.d.ts" /> を追記すること(トリプルスラッシュ)
// なお、jQuery.d.tsは
// npm install --save @types/jquery を推奨

interface JQuery {
	drawLayers(): JQuery;
	clearCanvas(): JQuery;
	removeLayers(): JQuery;
	drawArc(options: any): JQuery;
	drawLine(options: any): JQuery;
	drawText(options: any): JQuery;
	drawRect(options: any): JQuery; //無かったので追記
  	removeLayer(name: string): JQuery;
	removeLayerGroup(name: string): JQuery;
	setLayer(name: string, options: any): JQuery;
	setLayerGroup(name: string, options: any): JQuery;

	attr(name: string, value: boolean): JQuery;
}

//追記
//$.jCanvas.defaults.fromCenter = false; を通すため
interface JQueryStatic{
	jCanvas:any;
}
main.ts（１）
///<reference path="src/jcanvas.d.ts"/>
//main.ts
//jCanvas描画起点を中心からではなく左上からにする
$.jCanvas.defaults.fromCenter = false;

$(function(){
  var xx = 100;
  var yy = 100;
  var cc = "#CCAC26";

  $("#test").text("testtest"); //jQuery  
  $("#canv").drawRect({  //jCanvas
     fillStyle: cc,
     x: xx, y: yy,
     width: 200,
     height: 100,
     draggable:true  //ドラッグ可能！
  });
});

トランスパイルすると

tsc main.ts -m commonjs -t ES6
main.js（２）
///<reference path="src/jcanvas.d.ts"/>
//main.ts
//jCanvas描画起点を中心からではなく左上からにする
$.jCanvas.defaults.fromCenter = false;
$(function () {
    var xx = 100;
    var yy = 100;
    var cc = "#CCAC26";
    $("#test").text("testtest"); //jQuery  
    $("#canv").drawRect({ //jCanvas
        fillStyle: cc,
        x: xx, y: yy,
        width: 200,
        height: 100,
        draggable: true  //ドラッグ可能！
    });
});

クラスなどを利用してないのでほぼ同じ内容ですね。
しかし、JQueryやJCanvasに関するトランスパイル時のエラーが出ません。
（エラーが出てもjsへの変換はされてるけど・・・これならスッキリ）
ホスト名/main/main.html で問題なく描画されていればＯＫ。

ちなみにjCanvasの力で、描画された黄色っぽい四角形はドラッグで移動できます。
draggable : true; するだけ。jCanvasすごい。

TypeScriptを勉強したての方にとって、d.tsファイルの取扱いは鬼門。
敷居が高くなってしまう一因ではないかと思い筆を執りました。上級者の方から
みれば簡単な設定でも、初心者にとっては一苦労。

他にも、TypeScriptでのライブラリ利用や、複数ファイル間の読み込みなども
理解の難しい点だと思います（というか私が全部ハマったポイント）。

複数ファイルで、TypeScriptでコードを書き、tsc トランスパイル時にエラーを出さない。
これでやっとTypeScriptでのゲーム開発の土俵に立てたような気がしてます。あとはmysqlや
Express,WebSocketなどをTypeScript上で書けるようにしないとなぁ・・・。

ソースコードは下記GitHubにて公開してます。
次は複数のTSファイルをまとめてトランスパイルする際のTIPS記事を書こうと思っています。

[TypeScript+JQuery+jCanvas 複数ファイルのトランスパイル]
https://qiita.com/purejihacker/items/b47f021608fb043f74af

ぷれじ(2019.5.26最終更新)
[GitHub]https://github.com/pureji1980/S_JQuery_and_JCanvas

1
0
0

Register as a new user and use Qiita more conveniently

  1. You get articles that match your needs
  2. You can efficiently read back useful information
  3. You can use dark theme
What you can do with signing up
Sign upLogin
1
0

Delete article

Deleted articles cannot be recovered.

Draft of this article would be also deleted.

Are you sure you want to delete this article?