スクロールを一時禁止
このような感じで
onKeypadOpen:() => {
$(document).on("touchmove.noScroll", function(e:JQuery.Event) {
e.preventDefault();
})
},
onKeypadClose:() => {
$(document).off("touchmove.noScroll");
},
文法の幾つか
1. interfaceを使ってメソッド拡張まがいなことができる。
2. objectの定義に{key?:string, key2?:number}等と?をつけると省略化になる。
3. thisの用法が違う。
JQueryプラグインを使う
Jquery plugin
(function ($) {
$.fn.hoge = function () {
return $("p").click(function () {
console.log("test!");
$(this).text("hello!");
});
};
})(jQuery);
これをjqueryとともにhtml側で読み込んでおく。
タイプスクリプトから読み込むには インターフェースを定義して、JQueryのメソッドに追加するファイルを用意しておく。
interface Hoge {
hoge:() => JQuery<HTMLElement>;
}
interface JQuery extends Hoge {
}
これで使える。
$("p").hoge();
使用例
html
<link rel="stylesheet" type="text/css" href="./jQuery.NumPad-master/jquery.numpad.css"> <script type="text/javascript" src="./jquery.min.js"></script> <script type="text/javascript" src="./jQuery.NumPad-master/jquery.numpad.js"></script> <script type="text/javascript" src="./usejq.js"> </script>
型定義 jQuert.Numpad.d.ts
interface NumPadPlugin {
numpad:(option:{
textDone?:string,
onChange?:(event:Event, value:string) => void
}) => JQuery<HTMLElement>;
}
interface JQuery extends NumPadPlugin {
}
呼び出し
$(".inputCell").numpad(
{
textDone:"Done?",
onChange:(event, value) => {
console.log(event);
console.log(value);
}
}
)
jquery等を使う。
Webアプリ環境
- npm パッケージマネージャ
- TypeScript 型付きのjavascrpt
- WebPack TypeScriptやHTMLのパーツ化のために使用
- Babel (今回使わなかった。) JSのバージョン吸収
npm
プロジェクトでパッケージ管理をスタートしたい場合
npm init
ではじめられる。 -yをつけておけば初期設定はすべてyesで飛ばせる。 これでpackage.jsonが作成される。
インストールしたいものを
npm install hoge
でインストールする。 インストールしたものはpackage.jsonに記録される。
- 本番環境と開発環境でインストールをわけれる。（開発環境の場合は--save-dev をつける等)
- globalにインストールしたい場合 -gをつける。
package.jsonの例
{
"name": "jsapp",
"version": "1.0.0",
"description": "",
"main": "index.js",
"scripts": {
"build": "webpack",
"watch": "webpack -w"
},
"keywords": [],
"author": "",
"license": "ISC",
"dependencies": {
"@types/dom-inputevent": "^1.0.1",
"html-loader": "^0.5.5",
"ts-loader": "^4.3.0",
"typescript": "^2.8.3",
"webpack": "^4.8.3",
"webpack-cli": "^2.1.3"
}
}
scriptsのbuildにwebpackを設定しているので
npm run build
でwebpackを実行するとdistフォルダにコンパイルしたものが吐き出される。
- "@types/dom-inputevent" typesciptでdomのinputeventの型定義情報
- "html-loader" htmlをjsで読み込むのに使用
- "ts-loader" typescriptをjavascriptにコンパイルするのに使用
- "typescript" typescriptを使用する
- webpack, webpack-cli ts-loader, html-loader等を使うために使用
WebPack
設定はwebpack.config.js
インストール
npm install webpack webpack-cli --save-dev
実行
distフォルダ(設定で変更可能)に webpack.config.jsで設定しておいた処理を通してできたものが吐き出される。
実行はnpmのスクリプトに設定しておく
"scripts": {
"build": "webpack"
"watch": "webpack -w"
}
設定
webpack.config.js
module.exports = {
// or production
mode: 'development',
entry: {
main:'./src/main.ts',
menu:'./src/menu.ts'},
module: {
rules: [
{
test: /\.ts$/,
use: 'ts-loader'
},
{
test: /\.html$/,
loader: 'html-loader'
}
]
},
// for import
resolve: {
extensions: [
'.ts'
]
}
};
- entry ビルドを開始するエントリーポイントのjs
- output 出力
- module test:に指定された拡張子のものは use:に指定されたローダーで変換をかけること。
参考
html-loader
htmlをjsに読み込むために使用 設定はwebpack.config.jsの例を参照
使用例
let html = require('./hoge.html');
これでhtmlが文字列で取得できる。
TypeScript
インストール
npmで適宜インストール typescriptの他にwebpackで使用するために ts-loaderもインストールがいる。
設定ファイル
ルートにtsconfig.jsonをおく。
{
"compilerOptions": {
"sourceMap": true,
"target": "es5",
"module": "es2015" // 出力モジュール名
}
}
型名
必要に応じてtypescriptの型の定義情報をnpmでインストールする。
@types 型定義ファイル
例 @types/dom-inputevent
npm install --save @types/dom-inputevent
Jquery
typescript用に型情報@types/jquery をinstall。
html側でjqueryはimportしておくこと。
使用例
$("#listBox").mouseover(function() {
$(this).fadeOut("slow");
});
Jquery plugin
(function ($) {
$.fn.hoge = function () {
return $("p").click(function () {
console.log("test!");
$(this).text("hello!");
});
};
})(jQuery);
これをjqueryとともにhtml側で読み込んでおく。
タイプスクリプトから読み込むには インターフェースを定義して、JQueryのメソッドに追加するファイルを用意しておく。
interface Hoge {
hoge:() => JQuery<HTMLElement>;
}
interface JQuery extends Hoge {
}
これで使える。
$("p").hoge();
サンプル
Vue.jsのサンプルを打ち込んでみた。
簡単につかえるようだ。
<div> <div id="app-2"> <span v-bind:title="message"> Hover your mouse over me for a few seconds to see my dynamically bound title! </span> </div> <div id="app-3"> <span v-if="seen">Now you see me</span> </div> <div id="app-4"> <ol> <li v-for="todo in todos"> {{ todo.text }} </li> </ol> </div> <div id="app-5"> <p>{{ message2 }}</p> <button v-on:click="reverseMessage">Reverse Message</button> </div> <div id="app-6"> <p>{{ message }}</p> <input v-model="message"> </div> <div id="app-7"> <ol> <!-- Now we provide each todo-item with the todo object it's representing, so that its content can be dynamic. We also need to provide each component with a "key", which will be explained later. --> <todo-item v-for="item in groceryList" v-bind:todo="item" v-bind:key="item.id"> </todo-item> </ol> </div> </div> <script src="./vue.js"></script> <script> var app2 = new Vue({ el: '#app-2', data: { message: 'You loaded this page on ' + new Date().toLocaleString() } }) var app3 = new Vue({ el: '#app-3', data: { seen: true } }) var app4 = new Vue({ el: '#app-4', data: { todos: [ { text: 'Learn JavaScript' }, { text: 'Learn Vue' }, { text: 'Build something awesome' } ] } }) var app5 = new Vue({ el: '#app-5', data: { message2: 'Hello Vue.js!' }, methods: { reverseMessage: function () { this.message2 = this.message2.split('').reverse().join('') } } }) var app6 = new Vue({ el: '#app-6', data: { message: 'Hello Vue!' } }) Vue.component('todo-item', { props: ['todo'], template: '<li>{{ todo.text }}</li>' }) var app7 = new Vue({ el: '#app-7', data: { groceryList: [ { id: 0, text: 'Vegetables' }, { id: 1, text: 'Cheese' }, { id: 2, text: 'Whatever else humans are supposed to eat' } ] } }) </script>
html埋め込み
webpackのhtml-loaderを使ってhtmlをjavascriptで読み込んだ使う。
html-loaderのインストール。 npm install html-loader
webpack.config.jsを設定
module.exports = {
entry: './app.js',
output: {
path: __dirname + "/dist",
filename: "bundle.js";
},
module: {
loaders: [
{ test: /\.html$/, loader: 'html-loader' },//← これ
]
},
};
jsでhtmlを読み込んで挿入する。
declare function require(x: string): any;
let html = require('./keyboard.html');
let div = document.getElementById("keyboard") as HTMLDivElement;
div.innerHTML = html;
感想
1. InputEventは型定義を読み込んだ。
npm install @types/dom-inputevent
2. 定義されてないものはinputEvent["inputType"]で取れた。
3. 定義していないプロパティも input["oldValue"] = input.value;で代入できた。
4. childNodesはArray.prototype.forEach.callを使う必要があった。
5. webpack.config.jsは複数entryは entry: {
main:'./src/main.ts',
menu:'./src/menu.ts'},みたいに指定すればできた。
6. ビルドする必要があるのは若干面倒かも。
typescript環境
TypeScript
インストール
typescript また、webpackで使用するために ts-loader もインストール
設定ファイル
ルートにtsconfig.json
{
"compilerOptions": {
"sourceMap": true,
"target": "es5",
"module": "es2015" // 出力モジュール名
}
}
webpackへの設定
webpack.config.jsを以下のように設定する
module.exports = {
// or production
mode: 'development',
entry: './src/main.ts',
module: {
rules: [
{
test: /\.ts$/,
use: 'ts-loader'
}
]
},
// for import
resolve: {
extensions: [
'.ts'
]
}
};
ビルド
npm run build
webpackの使い方
WebPack
読み込んで使う。エントリーポイント
//spc/index.js import bar from './bar'; bar();
読み込まれる側
//src/bar.js
export default function bar() {
//
}
これを設定するにはwebpack.config.jsを作る。
const path = require('path');
module.exports = {
entry: './src/index.js',
output: {
path: path.resolve(__dirname, 'dist'),
filename: 'bundle.js'
}
};
htmlで読み込む
<-- page.html --> <!doctype html> <html> <head> ... </head> <body> ... <script src="dist/main.js"></script> </body> </html>
変換する。
npx webpack
インストール
npm install webpack webpack-cli --save-dev
実行
npx webpack
distフォルダが作成され main.jsが作られる。これをhtmlで読み込む。
実行はnpmのスクリプトに設定しておく
"scripts": {
"build": "webpack"
"watch": "webpack -w"
}
設定
webpack.config.js
module.exports = {
entry: `./src/index.js`,
output: {
path: `${__dirname}/dist`,
filename: 'main.js'
},
module: {
rules: {
{ test: /\.txt$/, use: 'hoge-loader' }
}
}
};
- entry ビルドを開始するエントリーポイントのjs
- output 出力
- module test:に指定された拡張子のものは use:に指定されたローダーで変換をかけること。
技
基本
npm
パッケージ管理スタート
npm init これでpackage.jsonが作成される。
ローカルインストールは /node_modules 内にインストールされる。 -gをつけるとグローバルインストール。
アンインストールは uninstall
パッケージのアップデートは update
パッケージのリストは list
npm scripts
"scripts": {
"キー": "シェル",
"キー2": "シェル"
}
キーの予約語
意味合い
- start
- restart
- stop
- test
これらは npm start等で実行できる。
フック
- publish npm publishの後
- install npm installの後
- uninstall npm uninstallの後
- update npm updateの後
予約されていないキーの実行
npm run-sctipt キー npm run キー
キーにプレフィックスつける
- pre
- post
フックのプレフィックス
- prepublish
- preinstall
- postuninstall
- preupdate
実行
- npm-run-all
- run-p A B 並列実行
- run-s A B 直列実行
コンフィグ設定
configフィールドに設定
"config": {
"port": "8080"
}
次のようにも設定できる
npm config set myapp:port 80
npm_package_config_portのように取り出せる。
DependenciesとdevDependencies
本番環境か開発環境か インストール時に-Dもしくは --save-devとするとPackageJSONにはdevDependenciesとして記録される。
uninstall時にpackega.jsonの本番環境から削除するなら--saveもしくは-S、開発環境から削除するなら--save-devもしくは -D
packege.jsonで一括インストール npm install
本番環境のみインストール npm install --production
