github copilot を使ってコメントから簡単なスクリプトを作成してもらいました。
その上でいくつか気づきがあったのでメモしておきます。
生成するスクリプト
以下のようにボタンをタップさせて次の画面を表示させる簡単な画面があり、これに二重送信を防止するため、タップやクリックされたらボタンを非活性にする制御を javascript で入れることを考えています。
erb
<div class="container">
ボタンをタップして下さい。<br>
<br>
<button id="nextButton">
結果を確認する
</button>
</div>
ちなみに想定しているのはこんな感じのスクリプトです。
理想
<script>
document.querySelector('#nextButton').addEventListener('click', event => {
event.target.disabled = true
})
</script>
試行錯誤
今回は以下のように script タグにコメントだけ書いて github copilot に残りのコードを書いてもらうことにします。
<script>
// ボタンをタップしたら、ボタンを非活性にする
</script>
ちなみに上記で生成されるのがこちら
<script>
// ボタンをタップしたら、ボタンを非活性にする
$('#nextButton').on('click', function() {
$(this).addClass('disabled');
});
</script>
割といい線のスクリプトを提示してもらいましたが今回は jQuery を使ってないのと、css クラスではなく disabled 属性を指定してほしいのでもう少しコメント変えて指定していきます。
<script>
// ボタンをタップしたら、二重タップ防止のためにボタンを非活性にする
$('#nextButton').on('click', function() {
$(this).addClass('disabled');
});
</script>
<script>
// ボタンをタップしたら、二重タップ防止のために addEventListener を用いてボタンを非活性にする
$('#nextButton').on('click', function() {
$(this).get(0).addEventListener('click', function() {
return false;
});
});
</script>
<script>
// ボタンをタップしたら、二重タップ防止のために addEventListener と querySelector を用いてボタンを非活性にする
$('#nextButton').on('click', function() {
document.querySelector('#nextButton').addEventListener('click', function() {
return false;
});
});
</script>
<script>
// 二重タップ防止のために、ボタンがタップされたら addEventListener と querySelector を用いてボタンを非活性にする
document.querySelector('#nextButton').addEventListener('click', function() {
return false;
});
</script>
<script>
// 二重タップ防止のために、ボタンがタップされたら addEventListener と querySelector を用いて、2回目のタップができないようボタンを非活性にする
document.querySelector('#nextButton').addEventListener('click', function() {
document.querySelector('#nextButton').addEventListener('click', function() {
return false;
});
});
</script>
<script>
// 二重タップ防止のために、ボタンがタップされたら addEventListener と querySelector を用いて、disabled 属性を付与する
document.querySelector('#nextButton').addEventListener('click', function() {
document.querySelector('#nextButton').setAttribute('disabled', true);
});
</script>
<script>
// 二重タップ防止のために、ボタンがタップされたら disabled にする
document.querySelector('#nextButton').addEventListener('click', function() {
document.querySelector('#nextButton').disabled = true;
});
</script>
色々コメントの順番や具体的な関数名等をこねくり回してそれっぽいコードになりましたがこの辺で切り上げました。
試してみた感想として、
- コメントの内容がほぼ同じでも順序によって生成されるコードが変わってくる
- javascript の場合は jQuery を使用する頻度が高いっぽい
なのでどちらにしても AI にとっての適切なコメントをある程度推敲することが重要そうだと感じました。
なお上記には書いてないですが、コードの行間に以下のようなコードを入れる提案もしてくれるためコードを補足してもらう使い方も使いこなせるようになると良さそうです。
event.target.innerHTML = '処理中...';