単一処理

前ページで解凍したディレクトリ内を見てみましょう

解凍したディレクトリ
|-- distWork
|-- src
|   |-- js
|   |  `-- modules
|   |      `-- index.js
|   `-- page
|      `-- index.html
|-- Gruntfile.js
`-- package.json

index.html

<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
<title>
sample
</title>
<script id="fs-js" src="http://localhost:8000/js/fairysupport.min.js" data-page-root="http://localhost:8000/page"></script>
</head>
<body>
    <div><button data-name="sample">sample</button></div>
</body>
</html>

index.js

export class Index {

    constructor() {
    }

    sample_click(event) {
        alert("Hello fairysupport");
    }

}

index.htmlの内容
<script id="fs-js" src="http://localhost:8000/js/fairysupport.min.js" data-page-root="http://localhost:8000/page"></script>でフレームワークを読み込みます
fairysupport.min.jsはdistWork/jsの中に入っています
前ページで実行したnpm run watch_localは、srcディレクトリからdistWorkを自動生成するコマンドを、srcディレクトリに変更があるたびに実行する命令です
前ページで実行したnpm run serverは、distWorkディレクトリを公開ディレクトリとしてポート8000でhttpサーバを起動する命令です
どちらもpackage.jsonに定義されています。これらビルドの詳細に関しては、また別ページで説明します
フレームワークを読み込むscriptタグにid="fs-js"を書くのはこのフレームワークの規則です
フレームワークを読み込むscriptタグにdata-page-root属性を書くのはこのフレームワークの規則です
data-page-root属性値はこのフレームワークを使うwebページのrootを書きます
今回サンプルとしてHTMLファイルを使いますが、拡張子はhtmlでなくてもこのフレームワークは動きます。また拡張子無しでもこのフレームワークは動きます
したがって、今までこのフレームワークを使っていないシステムであっても、data-page-root属性値を正しく設定することによって、途中からこのフレームワーク導入することができます
<div><button data-name="sample">sample</button></div>
buttonタグにdata-name属性が定義されています。これについては下のindex.jsの内容で解説します

index.jsの内容
webページと同じ名前で拡張子jsにするのはこのフレームワークの規則です
js/modules配下に作成するのはこのフレームワークの規則です
例えば、http://localhost:8000/page/sub/index.htmlでこのフレームワークを使用したい場合、
data-page-root="http://localhost:8000/page"ならば、src/page/sub/index.htmlとsrc/js/modules/sub/index.jsを作成することになります
export classにするのはこのフレームワークの規則です
クラス名をjsファイル名の先頭大文字キャメルケースにするのはこのフレームワークの規則です
もしファイル名がabc-def.jsならば、export class AbcDefになります
もしファイル名がabc_def.jsでも、export class AbcDefになります
<button data-name="sample">sample</button>がクリックされるとsample_clickメソッドが実行されます
このフレームワークは、data-name属性が設定されたタグでイベントが発生するとjsファイルのメソッドが実行されるようにつくられています
メソッドの引数にはイベントオブジェクトが渡されます
_の左側をdata-name属性値にするのはこのフレームワークの規則です
_の右側をイベント名にするのはこのフレームワークの規則です

フレームワークの動き
このフレームワークは設定でなく規則に基づいて動きます
現在のURLとdata-page-root属性値から対応するjsファイルをmodulesディレクトリからimportします
modulesディレクトリはfairysupport.min.jsと同階層に存在しなければなりません
fairysupport.min.jsはnpm run watch_localによってdistWork/js直下に自動的に生成されます
src/js/modulesディレクトリはnpm run watch_localによってdistWork/jsに移されます
したがって、開発者はmodulesディレクトリをsrc/js直下に作成しなければなりません
このフレームワークはmodulesディレクトリ配下のwebページに対応するjsをimportすると、webページ内のdata-name属性値を持つタグとjsクラスのメソッドを結びつけます
[data-name属性値_イベント名]という名前のメソッドを用意しておけば、このフレームワークが自動的にwebページ内のdata-name属性値を持つタグと結びつけます

複数処理

index.jsにメソッドを増やして、data-nameにカンマ区切りで追記してみましょう

index.js

export class Index {

    constructor() {
    }

    sample_click(event) {
        alert("Hello fairysupport");
    }

    second_click(event) {
        alert("second");
    }

}

index.html

<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
<title>
sample
</title>
<script id="fs-js" src="http://localhost:8000/js/fairysupport.min.js" data-page-root="http://localhost:8000/page"></script>
</head>
<body>
    <div><button data-name="sample,second">sample</button></div>
</body>
</html>

second_clickメソッドを増やしました
data-name属性に,secondを追記しました
npm run watch_local、npm run serverを起動して動作確認してみましょう
Hello fairysupportとsecondのalertが出力されるはずです

sample_clickの戻り値をfalseにしてみる

index.js

export class Index {

    constructor() {
    }

    sample_click(event) {
        alert("Hello fairysupport");
        return false;
    }

    second_click(event) {
        alert("second");
    }

}

data-name属性にカンマ区切りで複数メソッドを結びつけた場合
前に実行されたメソッドがfalseを返した場合、後のメソッドが実行されなくなります

前処理、後処理

sample_click、second_clickと2つメソッドを定義しましたが、共通の前処理と後処理を定義できます

index.js

export class Index {

    constructor() {
    }

    beforeEvent(event) {
        console.log("beforeEvent");
        console.log(event);
    }
    
    afterEvent(event, result) {
        console.log("afterEvent");
        console.log(event);
        console.log(result);
    }

    sample_click(event) {
        alert("Hello fairysupport");
    }

    second_click(event) {
        alert("second");
    }

}

beforeEventを作成しました。引数はイベントオブジェクトが渡されます
beforeEventはイベントの共通前処理となります
beforeEventというメソッド名にするのはこのフレームワークの規則です
afterEventを作成しました。第一引数はイベントオブジェクト、第二引数はsample_clickやsecond_clickの戻り値です
afterEventはイベントの共通後処理となります
afterEventというメソッド名にするのはこのフレームワークの規則です

index.jsは普通のJavaScriptなので、共通処理を親クラスに定義しておくこともできます

src/js/base/parentController.js

export class ParentController {

    constructor() {
    }

    beforeEvent(event) {
        console.log("beforeEvent");
        console.log(event);
    }
    
    afterEvent(event, result) {
        console.log("afterEvent");
        console.log(event);
        console.log(result);
    }

}

index.js

import {ParentController} from "../base/parentController.js";

export class Index extends ParentController {

    constructor() {
        super();
    }

    sample_click(event) {
        alert("Hello fairysupport");
    }

    second_click(event) {
        alert("second");
    }

}

結びつけられる時の前処理、後処理

data-name属性を持つタグとこのクラスのメソッドが結びつけられるときの前処理と後処理を定義できます

index.js

export class Index {

    constructor() {
    }

    beforeName(data) {
        console.log("beforeName");
        console.log(data);
    }
    afterName(data) {
        console.log("afterName");
        console.log(data);
    }

    sample_click(event) {
        alert("Hello fairysupport");
    }

    second_click(event) {
        alert("second");
    }

}

beforeNameを作成しました。引数はname:data-name属性値、event:イベント名、value:data-name属性を持つタグのDOMを要素に持つオブジェクトが渡されます
beforeNameは結びつけられる時の前処理となります
beforeNameというメソッド名にするのはこのフレームワークの規則です
afterNameを作成しました。引数はname:data-name属性値、event:イベント名、value:data-name属性を持つタグのDOMを要素に持つオブジェクトが渡されます
afterNameは結びつけられる時の後処理となります
afterNameというメソッド名にするのはこのフレームワークの規則です

結びつけが解除される時の前処理、後処理

data-name属性を持つタグとこのクラスのメソッドの結びつけが解除される時の前処理と後処理を定義できます

index.html

<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
<title>
sample
</title>
<script id="fs-js" src="http://localhost:8000/js/fairysupport.min.js" data-page-root="http://localhost:8000/page"></script>
</head>
<body>
    <div><button id="sample" data-name="sample,second">sample</button></div>
    <div><button data-name="remove">remove</button></div>
</body>
</html>

index.js

export class Index {

    constructor() {
    }

    beforeRemoveName(data) {
        console.log("beforeRemoveName");
        console.log(data);
    }
    afterRemoveName(data) {
        console.log("afterRemoveName");
        console.log(data);
    }

    sample_click(event) {
        alert("Hello fairysupport");
    }

    second_click(event) {
        alert("second");
    }

    remove_click(event) {
        delete document.getElementById('sample').dataset.name;
    }

}

beforeRemoveNameを作成しました。引数はname:data-name属性値、event:イベント名、value:結びつけが解除されるDOMを要素に持つオブジェクトが渡されます
beforeRemoveNameは結びつけが解除される時の前処理となります
beforeRemoveNameというメソッド名にするのはこのフレームワークの規則です
afterRemoveNameを作成しました。引数はname:data-name属性値、event:イベント名、value:data-name結びつけが解除されるDOMを要素に持つオブジェクトが渡されます
afterRemoveNameは結びつけが解除される時の後処理となります
afterRemoveNameというメソッド名にするのはこのフレームワークの規則です
removeボタンをクリックすると結びつけが解除され、sampleボタンをクリックしても反応が無くなります

エラー処理

例外がthrowされたときに実行されるメソッドを定義できます

index.html

<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
<title>
sample
</title>
<script id="fs-js" src="http://localhost:8000/js/fairysupport.min.js" data-page-root="http://localhost:8000/page"></script>
</head>
<body>
    <div><button id="sample" data-name="sample">sample</button></div>
</body>
</html>

index.js

export class Index {

    constructor() {
    }

    sample_click(event) {
        throw "error";
    }

    errorHandle(event, exception) {
        console.log("errorHandle");
        console.log(event);
        console.log(exception);
    }
    
}

errorHandleを作成しました。引数はイベントオブジェクト、throwされた例外が渡されます
errorHandleというメソッド名にするのはこのフレームワークの規則です

終了処理

処理が成功しても例外がthrowされても実行されるメソッドを定義できます

index.html

<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
<title>
sample
</title>
<script id="fs-js" src="http://localhost:8000/js/fairysupport.min.js" data-page-root="http://localhost:8000/page"></script>
</head>
<body>
    <div><button data-name="sample">sample</button></div>
    <div><button data-name="sample2">sample2</button></div>
</body>
</html>

index.js

export class Index {

    constructor() {
    }

    sample_click(event) {
        return "sample";
    }

    sample2_click(event) {
        throw "sample2";
    }

    errorHandle(event, exception) {
        console.log("errorHandle");
        console.log(event);
        console.log(exception);
    }
    
    finalHandle(event, returnValue) {
        console.log("finalHandle");
        console.log(event);
        console.log(returnValue);
    }
}

finalHandleを作成しました。引数はイベントオブジェクト、処理されたメソッドの戻り値が渡されます
finalHandleというメソッド名にするのはこのフレームワークの規則です

moduleの取得

$f.getModuleController()でどこからでもmoduleのインスタンスを取得することができます

次ページmoduleのプロパティと画面上の要素の紐づけ

目次