front-end – Akihiro Kuroiwa's Shop

Pywebviewは、PythonとJavaScriptを連携させたデスクトップアプリケーション開発に役立つフレームワークです。しかし、Pythonプログラマーにとって慣れない「非同期処理」や「Promise」に直面することもあります。本記事では、py-chessboardjsを例に、以下を詳しく解説します：

Promiseとは何か、なぜ必要か
Pythonのメソッド戻り値をJavaScriptの関数に活用する方法
具体例：PGNファイルの読み込み

Promiseとは？

Promiseは、非同期処理の結果を待つためのオブジェクトであり、成功（resolved）または失敗（rejected）の状態を持ちます。

Pythonでは、関数は通常即座に戻り値を返します（同期処理）。
一方、JavaScriptでは処理が非同期になることが多く、処理完了後に値を受け取る必要があります。

Pythonでは処理が終わるのを待って変数等に代入してくれますが、JavaScriptでは待ってくれません。
これを解決するために、PywebviewはPythonのメソッド呼び出し結果をPromiseでラップします。これにより、JavaScript側でthenを使って結果を受け取れるようになります。

Pythonメソッドの戻り値をJavaScriptで利用する

以下は、py-chessboardjsのPGNファイル読み込み機能を使い、Pythonのメソッド結果をJavaScriptで処理する例です。

Python側のコード

PythonでPGNファイルを読み込み、その状態（FEN文字列）を返すメソッドを定義します：

class Api:
    def open_pgn_dialog(self):
        """
        ユーザーにファイルダイアログを表示し、選択したPGNファイルを読み込み、
        そのゲーム状態をFEN文字列で返す。
        """
        file_types = ('PGN File (*.pgn)', 'All files (*.*)')
        file_path = self.window.create_file_dialog(webview.OPEN_DIALOG, file_types=file_types)[0]
        if os.path.exists(file_path):
            self.pgn = open(file_path)
            self.load_games_from_file()
            return self.board.fen()  # 現在のFEN文字列を返す
        return None

JavaScript側のコード

JavaScriptで、このPythonメソッドを呼び出し、結果（FEN文字列）を利用します：

function openPgnDialog() {
    // Python API を呼び出し
    pywebview.api.open_pgn_dialog().then(fen => {
        if (fen) {
            console.log('FEN文字列:', fen);
            // 必要に応じてフロントエンドで処理
            updateBoardWithFen(fen);
        } else {
            console.error('PGNファイルの読み込みに失敗しました。');
        }
    }).catch(error => {
        console.error('エラーが発生しました:', error);
    });
}

// FEN文字列でボードを更新する例（仮）
function updateBoardWithFen(fen) {
    alert('新しいFEN: ' + fen);
}

ポイント:
pywebview.api.open_pgn_dialog()はPromiseを返し、thenで結果を受け取り処理しています。

Promiseの基本的な使い方（Pythonプログラマー向け）

PromiseはPythonの「関数の戻り値」をJavaScriptの非同期処理に適応するための仕組みです。

Pythonの戻り値はPromiseの成功状態（resolved value）として扱われます。
JavaScriptでは、thenを使って成功時の値を受け取ります。

Promiseの流れ

Pythonメソッドが値を返す。
PywebviewがPromiseに変換。
JavaScriptでthenを使い値を処理。

フロントエンドのUIデザイン：Bootstrapを活用

PywebviewはHTML/CSS/JavaScriptフレームワークを使用できるため、py-chessboardjsではBootstrapを活用し、ユーザーにとって使いやすいUIを構築しています。

実装例

以下は、index.htmlのナビゲーションバー部分です（省略のために一部改変）：

<nav class="navbar navbar-expand-sm navbar-dark bg-dark">
    <div class="container-fluid">
        <a class="navbar-brand" href="#">Py-Chessboardjs</a>
        <button class="navbar-toggler" type="button" data-bs-toggle="collapse" data-bs-target="#navbarNavDarkDropdown" aria-controls="navbarNavDarkDropdown" aria-expanded="false" aria-label="Toggle navigation">
            <span class="navbar-toggler-icon"></span>
        </button>
        <div class="collapse navbar-collapse" id="navbarNavDarkDropdown">
            <ul class="navbar-nav">
                <li class="nav-item"><a class="nav-link" href="#">Home</a></li>
                <li class="nav-item"><a class="nav-link" href="#">Settings</a></li>
            </ul>
        </div>
    </div>
</nav>

結果、レスポンシブなナビゲーションバーが表示され、簡単にカスタマイズできます。

まとめ

Promiseは、PythonとJavaScriptの動作の違いを吸収するために必要な仕組みです。今回の例では、py-chessboardjsを使いながら以下を学びました：

PythonメソッドをJavaScriptから呼び出し、戻り値をPromiseで扱う方法。
Bootstrapを利用したスタイリッシュなフロントエンドデザイン。

これらを応用すれば、直感的で高性能なアプリケーションを構築できます。

アロー関数を使う理由

今回、ChatGPTとClaudeに記事を書いてもらう際にpy-chessboardjsのコードを標準の書き方に修正してもらい、その理由を解説してもらいました。以下はその内容です。
JavaScriptの=>はアロー関数（arrow function）を意味し、関数を簡潔に書くための記法です。従来のfunctionキーワードを使った関数定義と同じ動作をしますが、以下のような利点があります。

簡潔な記法:
- 従来のfunctionキーワードを省略できます。
- 例えば、以下のようなコードが簡略化されます：
```
// 通常の関数
function add(a, b) {
 return a + b;
}

// アロー関数
const add = (a, b) => a + b;
```

thisの挙動が直感的:

アロー関数は親スコープのthisをそのまま使用します。一方、従来のfunctionは呼び出し方によってthisが変わるため、意図しない挙動を防げます。

例：

function Example() {
 this.value = 42;

 // 通常の関数（意図したthisではない可能性あり）
 setTimeout(function() {
     console.log(this.value); // undefined（thisはグローバルを指す）
 }, 1000);

 // アロー関数（意図したthisを保持）
 setTimeout(() => {
     console.log(this.value); // 42
 }, 1000);
}
new Example();

Promiseチェーンでの一般的な書き方:
- Promiseチェーン（thenやcatch）内で、アロー関数を使うのが一般的です。
- シンプルなコールバック処理に適しています：
```
// 通常の関数
pywebview.api.get_data().then(function(result) {
 console.log(result);
});

// アロー関数
pywebview.api.get_data().then(result => {
 console.log(result);
});
```

アロー関数が好まれるケース

短い関数（関数リテラル）: アロー関数は、数行で完結する関数リテラルに適しています。
コールバック関数: 非同期処理（setTimeoutやPromiseなど）で使うと直感的です。

アロー関数を避けるべきケース

アロー関数はthisの挙動が予測しにくいケースがあります。

thisを明示的に保持する必要がある場合: メソッド内やイベントリスナーなど、thisの挙動が重要な場合は、従来の関数式を使用する方が安全です。

thisの再定義が必要な場合: アロー関数ではthisを新たに定義できません。そのため、例えばイベントリスナーの削除が必要な場合は避けるべきです。

// イベントリスナーの登録
button.addEventListener('click', () => console.log('clicked'));

// イベントリスナーの削除（動作しない）
button.removeEventListener('click', () => console.log('clicked')); // 別の関数として扱われる

アロー関数は実際にはthisを明示的に保持するのに適していません。むしろ、アロー関数はthisを現在のスコープから継承するため、メソッドやイベントリスナーでは注意が必要です。

アロー関数はthisの挙動が独特で、以下のような特徴があります：

アロー関数は、定義された場所のthisコンテキストを継承します。
自身のthisを持たず、外側のスコープのthisをそのまま使用します。
メソッドやイベントリスナーでは、通常の関数式の方がthisの参照が明確です。

結論

=>（アロー関数）を使った理由:
本記事ではPromiseチェーンでの一般的な記法を重視し、可読性と簡潔さのためにアロー関数を使用しました。特に短いコールバック関数を記述する場合、アロー関数が現代的で簡潔な書き方として推奨されるケースが多いです。
ただし、もし従来のfunctionキーワードに慣れている場合、どちらを使うかは個人のスタイルやプロジェクトのコーディング規約に依存します。

タグ: front-end

PywebviewでPythonとJavaScriptを連携：Promiseの役割と具体例