はじめに
前回(「LIPS Schemeを使ってみました3)に引き続きLips使ってみましたの記事です。
今回はLipsによるHTML要素(またはDOM)の操作具合を見てみました。
三目並べがちょうどいい感じの課題になると思い挑戦してみました。
本記事では、その時に学習した2点の基本的なDOMコーディングを紹介します。(ゲームロジックは含みません)
- DOM Elementの作成とデータ取得
- クリックイベント関数の登録
LipsはJavaScriptの機能が使えるので、まずJavaScriptでコードを書いてLipsに翻訳するという手順で取り組みました。ほぼ直訳的に表現できました。
本記事では説明文よりはJavaScriptコードを比較する方が直感的に分かり易いかと思い、JavaScriptとLipsコードを対訳的を貼り付けました。
HTMLの内容
下はゲーム盤を表示するHTMLです。ボード盤の表示はCSS Gridを使いました。
<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="UTF-8">
<script src="https://cdn.jsdelivr.net/npm/lips@beta/dist/lips.min.js"></script>
<style>
#board {
display: grid;
grid-template-columns: 100px 100px 100px;/*100pxの列トラックを3列表示させる*/
}
.cell {
border: 1px solid;
text-align: center;
}
</style>
</head>
<body>
<div id="board"> <!-- ここにCSS Gridのセルを3 x 3で追加する --> </div>
<script>
// ---- JavaScriptコードを埋める(参考用) ---
//create_cells_js() // ボード作成を呼ぶ
</script>
<script type="text/x-scheme" bootstrap>
;; --- Lipsコードを埋める ---
;(create-cells) ;ボード作成を呼ぶ
</script>
</body>
</html>
ボードの初期処理 (CSS Gridカラム追加)
Lipsコード << ボード作成処理 >>
(define (create-cells)
(let ((board (document.getElementById "board")))
(do ((i 0 (+ i 1)))
((> i 8) )
(let ((cell (document.createElement "div")))
(set! cell.className "cell")
(set! cell.textContent i)
;(cell.addEventListener "click" (lambda () (handle-click i)))
(board.appendChild cell)
)
)
)
)
JavaScriptコード << ボード作成処理 >>
function create_cells_js() {
const board = document.getElementById('board');
for (let i = 0; i < 9; i++) {
const cell = document.createElement('div');
cell.className = 'cell';
cell.textContent = i;
//cell.addEventListener('click', () => handle_click(i, cell));
board.appendChild(cell);
}
}
下図は上のschemeコードをHTMLのscheme用scriptタグに埋めてかつ、(create-cell)関数コールのコメントを外してブラウザ(Chrome)で表示したスクリーンショットです。
クリックイベント
イベントの登録操作はcreate-cellのコメントアウトしてある部分です。
イベント処理はタグ内のテキストをalertで表示しているだけです。
イベント登録は(set! cell.onclick (lambda () (handle-click i)))のように、属性を変更する形式でも書けます。
Lipsコード << イベント処理 >>
(define (handle-click index)
(alert (string-append (number->string index) "番目のセルをクリックしました。" ))
)
JavaScriptコード << イベント処理 >>
function handle_click(index, cell) {
alert(index + "番目のセルをクリックしました。");
}
下図は上のschemeコードをHTMLのscheme用scriptタグに埋めてかつ、リスナー登録処理のコメントアウトを外してブラウザ(Chrome)で表示したスクリーンショットです。
おわりに
今回もAI先生(主にCopilot)に教えを乞いながらの学習でしたが
Lipsを使ってのDOM操作関連の回答は残念な状態でした。
Common LispとLips以外のSchemeとの違いがまだ明確に把握していないようでした。
Lipsの情報が少ないのかもしれません。?
参考