TypeScript Sampleをやってみるその5

More than 1 year has passed since last update.


はじめに

Jquery(ジェイクエリー)はJohn Resigが開発したJavaScriptライブラリです。

JavaScriptの冗長なコードを簡便にするためのライブラリ群です。

もちろんTypeScriptからも利用可能です。

MicrosoftはJqueryを自社のスクリプトの標準としました。

このサンプルではブラウザに星を表示させ、垂直スクロールバーの操作によって星々が遠近感を伴って上下するイベントをJqueryを利用して実現しています。htmlに10行足らずのコーディングで実現している美しいコードの備忘録を投稿します。


前提


サンプル Jquery

ブラウザへJqueryライブラリを利用しスクロール操作に合わせ星々の垂直描画を行うサンプル。


ファイル構成

パス
ファイル名
説明

.
package-lock.json
パッケージ依存関係ロックファイル(json)

.
package.json
パッケージ定義および依存関係ファイル(json)

.
parallax.html
ブラウザparallax出力のhtml

.
parallax.js
parallax.tsのコンパイルにて作成されたJavaScriptファイル

.
parallax.js.map
parallax.tsのコンパイルにて作成されたmaptファイル

.
parallax.ts
parallaxのTypeScriptファイル

.
README.md
このサンプルの説明と使用方法

.
tsconfig.json
TypeScriptのコンパイルコンフィグファイル

※ parallax : パララックス「視差」スクロール操作による視覚的エフェクト


クラス図

TS_019.jpg


実行

cd ./jquery

npm install
tsc

parallax.htmlをエディターで表示Ctrl+F1


結果

bn792-9ouyq.gif

スクロールバー操作に従って、星が移動するように見えます。


ポイント

どうしてこんなにシンプルなコード書けるのか?

その秘密は、node_modules\@types\jquery\index.d.tsにあります。

Jqueryで使用する型やInterfaceの定義ファイルを以下のコマンドでインストールできます。これでJqueryのすべてのメンバーをTypeScriptから利用可能になります。

npm install -D @types/jquery

あたかもTypeScriptのメンバーのようにJqueryのライブラリを利用することできます。

もう一つのインストール方法として、package.jsonに記述してインストールすることも可能です。


package.json抜粋

 "dependencies": {

"jquery": "^3.1.1"
},
"devDependencies": {
"@types/jquery": "^2.0.40",
"typescript": "^2.1.6"
},

上記 package.jsonnpm install コマンドでインストールすると、node_moduleには以下のディレクトリがインストールされます。

@typesディレクトリのサブディレクトリにjqueryがインストールされます。

@typeのみサブディレクトリ表示

node_modules/

├───.bin/
├───@types
│ └───jquery
├───jquery/
└───typescrip/t

Jqueryを利用するには、mode_moduleに以下の二つをインストール


  • @Types/jquery

  • Jquery


ノート

htmlのJqueryの基本構造をメモしておきます。

TS_028.jpg


まとめ

JavaScript1の冗長なコーディングからの脱却を実現したJqueryの開発者がロチェスター工科大学の革新殿堂入りしたのも納得です。これから導かれるブラウジングスクリプトの未来志向は明らかにJavaScriptから進化を意味しています。最終的な完成がTypeScriptになるのかはわかりません。たぶんたった一人の革新的な発想を持つ開発者によってさらなる劇的な革命の予感を禁じえません。

以上、おそまつ