JavaScript」タグアーカイブ

GNOME 3.26 gjs

GNOME 3.26 の目玉、gjs が ES6 フル対応になった。
これでで class が使えるぞ、Lang.Class の奇妙なコードとはおさらばじゃ。
んと、その前に。

#!/usr/bin/gjs

// 'gjs a.js 苗ちゃん'

const GLib = imports.gi.GLib;

for (let val of ARGV) {
    print(val);
    //let s = decodeURIComponent(escape(val));
    //print(s);
}

変わっていないや、まあいいか。
ClutterImage のセットが激遅なのもそのまんまだね。
ClutterImage PyGObject/Gjs | PaePoi

それはそれとして新機能だ。
GtkWindow を作ってみよう、やっぱり GUI だよね。

#!/usr/bin/gjs

imports.gi.versions.Gtk = "3.0";

const Gtk = imports.gi.Gtk;

class Test extends Gtk.Window {
    constructor() {
        super();
        this.connect("hide", ()=> {
            Gtk.main_quit();
        });
        this.show_all();
    }
}

Gtk.init(null);
let test = new Test();
Gtk.main();

これでウインドウを作るだけの最小限コードのようだ。

imports は PyGObject と同様にバージョン指定が無いと警告が出るようになった。
アロー関数を使えば Lang.bind を使わずにあの this の糞仕様を回避できる。
他の説明はいらないよね。

次はコード分割してみよう。

#!/usr/bin/gjs

imports.gi.versions.Gtk = "3.0";
imports.searchPath.unshift('.');

const Gtk = imports.gi.Gtk;
const Btn = imports.btn;

class Test extends Gtk.Window {
    constructor() {
        super();
        this.connect("hide", ()=> {
            Gtk.main_quit();
        });
        this.btn = new Btn.Btn("睦ちゃん");
        this.add(this.btn);
        this.show_all();
    }
}

Gtk.init(null);
let test = new Test();
Gtk.main();

var Gtk = imports.gi.Gtk;

class Btn extends Gtk.Button {
    constructor(lb) {
        super({
            label: lb
        });
    }
}

えーーーーー
let も const も定義していないお!
Java と違って同一ソースに複数の class が書けるのでこうすればいいけど。

#!/usr/bin/gjs

imports.gi.versions.Gtk = "3.0";

const Gtk = imports.gi.Gtk;

class Test extends Gtk.Window {
    constructor() {
        super();
        this.connect("hide", ()=> {
            Gtk.main_quit();
        });
        this.btn = new Btn("睦ちゃん");
        this.add(this.btn);
        this.show_all();
    }
}

class Btn extends Gtk.Button {
    constructor(lb) {
        super({
            label: lb
        });
    }
}

Gtk.init(null);
let test = new Test();
Gtk.main();

コードが長くなると…

モジュールとして継承 class は作ってはいけないってことかな?
まだ試したばかりだし他の方法はあるかもしれないけど。
なんか一気にテンションが下がった、PyGObject に戻るかなぁ。。。

surrogate-pair

JavaScript における文字コードと「文字数」の数え方 | blog.jxck.io

そうだった、Python3 ばかり使っていたのでサロゲートペアのことを忘れていた。
GLib が扱う Unicode も Linux,macOS 版 Python3 の文字列も UCS-4 なんだよね。
Windows は捨てたので Windows 版 Python3 は知らん、ってどうでもいいか。

ES6 では for of を使って Python3 と同様な処理ができるようだ。
もちろん Node.js, JavaScriptCore も同様の結果でした。

UTF-16 はこの件があるし UTF-8 との変換も面倒だしetc…
何故いまだに Unicode の主流なんだろうね。
メモリ効率うんぬんならスクリプト言語や仮想マシンの時点で、って話だし。

おっと、一番下を見逃す所だった。

Family: Man, Woman, Girl, Boy Emoji

Emoji にはこんな文字をくっつけた一文字があったのか!
コピペしたら WordPress で投稿できないぞ、つかイッパイあるなぁ。

Emoji Version 2.0 List

Python3 でも駄目だ、バイナリを見れば当然だけど。
こんな文字まで考慮しなきゃいけない時代になってしまったのか。

JavaScript Arrow Function

前回 Gjs の ES6 がって書いたけど。
よく考えたら現在 JavaScriptCore や V8 も試せる環境じゃないか。
現状 (2017.10.10) ではどうなのか実験。

Gjs(SpiderMonkey) は 1.48.7
Node.js(V8) は dnf で入る v6.11.3
JavaScriptCore はワカラン、Fedora 26 の /usr/libexec/webkit2gtk-4.0/jsc
jjs(nashorn) は1.8.0_144、–language=es6 オプションで。

jsc は .bashrc にエイリアスを作って準備してと。
Node.js だけ console.log なのを無理矢理 print となるようにしてと。

とりあえず無名関数とアロー関数での this スコープの違い。

// @ Node.js
if (typeof print === "undefined")
    print = console.log; 

let obj = {
    func: function () {
        this.str = "優木苗";
 
        let funcA = function () {
            print(this.str);
        };
        let funcB = () => {
            print(this.str);
        };
        funcA();
        funcB();
    }
};
obj.func();

jjs はアロー関数に対応していなかった。
他は全部対応済なのね、ふむふむ。
Gjs はワーニングを出してくれる親切仕様、イラネーけど。

次は同一ブロックでの let 変数名の多重定義。

// @ Node.js
if (typeof print === "undefined")
    print = console.log; 

let n = 13;
let n = 99;
//n = 66;
print(n);

って、おい SpiderMonkey!
jjs ですらエラー判定するのに、まあ次は対応済と解っているけど。
それにしても Node.js のエラー表示はウゼェ。

次に class を作ってみよう、Gjs はまだ対応していないと解っているけど。

// @ Node.js
if (typeof print === "undefined")
    print = console.log; 

class Test {
    constructor(str) {
        print(str);
    }
}
let test = new Test("むったん");

だよね。
JavaScript の仕様策定は Mozilla がやっているはずなのにな。

GNOME 3.26 Gjs

GNOME 3.26 からの Gjs でついに class が使えるようになるようだ。
Lang.Class, Lang.Bind のあのもどかしさからやっと解放される。

Modern Javascript in GNOME // Speaker Deck

ただ this を親のままにするには無名関数でなくアロー関数を使う必要がある。
スライドを見ていてアレ?と思ったので調べただけですがwww
アロー関数は単なる省略表記だと勘違いしていた。

ES2015(ES6)新構文:アロー関数(Arrow function)|もっこりJavaScript|ANALOGIC(アナロジック)

async/await なんて非同期処理があると今頃知った。
node.js の非同期ってコレを使っているのかな?

async function – JavaScript | MDN

筆者は ES6 をまだまだ全然解っていないと思い知る。

テンプレートリテラル等は 3.24 から使えていたのでお馴染。
同一ブロックで同一名 let 宣言はエラー、って誰もやらないよ。
モジュールでは var にしないと public 宣言にならないってこと?
JavaScript の class は get/set が使えるのか。
ARGV が UNICODE にならないことについては何もふれていないな。
バイナリを直接扱う手段は、ってコレはバインドする側の仕事か。
今現在は試せないので詳しくは解らない。

ネタ切れで止まっているこのブログだけど来月は忙しいかも。
comipoli を作り替えしなきゃだし一部の Tips も書き換えだし。
って Fedora 27 が予定通りリリースされればって話だけーがさ。

GTK+ CapsLock

ちょ、何故今まで気が付かなかったのだ?
CapsLock が掛かっていると自作アプリの Ctrl+o 等が動作しない!

GNOME 標準アプリは問題なく使えるのね。
うん、GTK+ における CapsLock について調べる必要があるな。

てなわけで調べたんだけど。
CapsLock は GTK+ では Ctrl, Shift と同じ装飾キー扱いなのね。
具体的には列挙体で

1:Shift,
2:CapsLock
4:Ctrl
8:Alt

が OR 演算で key-press-event シグナルの GdkEvent に入ってくる。
On にした状態だとずっと押されていると認識するというおまけつき。

つまり CapsLock が On の状態では、えっと。
Ctrl+o は CapsLock+Ctrl+O と認識、装飾キーが 6 で O が大文字。
なるほど、動かなくて当然だ。

CapsLock 状態を別途で調べる。
On であれば装飾キー値 gdk_event_get_state から 2 を引く。
On 又は Shift を押した状態なら gdk_event_get_keyval 値を小文字化。
という流れで CapsLock を完全に無視できるようだ。

#!/usr/bin/gjs

const Gtk = imports.gi.Gtk;
const Gdk = imports.gi.Gdk;
const Lang = imports.lang;

const KeyPressWindow = new Lang.Class({
    Name: 'KeyPressWindow',
    Extends: Gtk.ApplicationWindow,

    _init: function(app) {
        this.parent({
            application: app
        });
        this.connect("key-press-event", Lang.bind(this, function(widget, event) {
            /**
             * CapsLock
             */
            let keymap = Gdk.Keymap.get_default();
            let caps_state = keymap.get_caps_lock_state();
            let caps = caps_state ? "[CapsLock]+" : "";
            /**
             * Modifier
             */
            let [ok, state] = event.get_state();
            let mod = "";
            if (ok) {
                if (caps_state)
                    state -= 2;
                switch(state) {
                case 1:
                    mod = "Shift+";
                    break;
                //case 2:
                //    mod = "CapsLock+";
                //    break;
                case 4:
                    mod = "Ctrl+";
                    break;
                case 5:
                    mod = "Ctrl+Shift+";
                    break;
                case 8:
                    mod = "Alt+";
                    break;
                case 9:
                    mod = "Alt+Shift+";
                    break;
                case 12:
                    mod = "Alt+Ctrl+";
                    break;
                case 13:
                    mod = "Alt+Ctrl+Shift+";
                    break;
                }
                /**
                 * Key
                 */
                let [ok, keyval] = event.get_keyval();
                if (ok) {
                    // CapsLock or Shift
                    if (Gdk.keyval_is_upper(keyval))
                        keyval = Gdk.keyval_to_lower(keyval);
                    //let key = String.fromCharCode(keyval);
                    let key = Gdk.keyval_name(keyval);
                    if (key != null)
                        this.set_title(`${caps}${mod}${key}`);
                }
            }
        }));
        this.show_all();
    }
});

let app = new Gtk.Application();
app.connect("activate", function() {
    new KeyPressWindow(app);
});
app.run(null);

こんな感じ。

GNOME 標準アプリがどうやって認識しているかは調べていないけど。
もっといい手段があるかも、とりあえずは様子見かな。
やっと晴れたし名駅前でスイクンでも(関係無い!