Qiita Teams that are logged in
You are not logged in to any team

Log in to Qiita Team
Community
OrganizationAdvent CalendarQiitadon (β)
Service
Qiita JobsQiita ZineQiita Blog
Help us understand the problem. What is going on with this article?

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になるのかはわかりません。たぶんたった一人の革新的な発想を持つ開発者によってさらなる劇的な革命の予感を禁じえません。

以上、おそまつ

Why not register and get more from Qiita?
  1. We will deliver articles that match you
    By following users and tags, you can catch up information on technical fields that you are interested in as a whole
  2. you can read useful information later efficiently
    By "stocking" the articles you like, you can search right away