プログラミングの問題を考えている時に、実際にそれの解答を試すために、ブラウザのデバッグコンソールを立ち上げて打ち込んでいるのだけれど、なんか面倒い！
きっと、このブログを読んでくれている人が、その問題にチャレンジするときは、もっと「めんどくさ〜！！！」と思っているに違いありません。
というワケで、その場でJavascriptのコードが書けて、確かめられる「Javascript直接書ける君（仮）」というダッサダサの名前のツールを作ってみようと思います。
もちろん、セキュリティも考慮してあるモノにするので、違った開発視点での参考にもしてもらえると思いますよ。
タグに書かれたJavascriptを実行
プログラムを書いて、それを反映するには、formタグが適しているので、改行も入力できる、textareaタグを使うのが一般的です。
textarea方式
ソースコード
<textarea class="input"></textarea>
<style>
.input{
width:100%;
height:150px;
border:1px solid black;
border-radius:5px;
padding:10px;
}
</style>
contentEditable方式
HTML5では、フォーム系のタグ以外でも文字の入力が可能になっています。（知ってますか？）
ソースコード
<div class="input" contentEditable="true"></div>
<style>
div.input:empty::before{
content : "* DIVタグ";
font-size:0.8em;
color:#999;
}
div.input{
overflow:auto;
}
</style>
cssの擬似要素を組み合わせると、placeholderっぽくもできてしまいます。
どっちがいいんだい？
別にどっちを使ってもいいと思います。（なんじゃそりゃ）
入力フォームの不正アクセスなどを防止したい場合は、contentEditableは効果があるかもしれませんね。
Javascript直接書ける君（デモ）
答えに「2つの変数の和」を返す問題のサンプル。
変数:Aと変数Bの和（合計）を返す関数、「addition」を完成させてください。（A,Bは、それぞれ乱数値が入ります）
ソースコード
html
<textarea class="input" name="sample_1">function addition(A,B){
return
}</textarea><button type="button" name="sample_1">解凍</button>
css
button{
padding:5px 20px;
border:0;
background-color:black;
color:white;
border-radius:5px;
cursor:pointer;
}
button:hover{
opacity:0.5;
}
javascript
function clicl_sample_1(){
const text = document.querySelector(`textarea[name="sample_1"]`).value
const A = Math.floor(Math.random() * 10)
const B = Math.floor(Math.random() * 10)
const res = Function("A,B", `
try{
${text}
return addition(A,B)
}
catch(e){
return "プログラムにミスがあります。"
}
`)(A,B)
if(A+B === res){
alert(`正解 : A:${A},B:${B},結果:${res}`)
}
else{
alert(`間違い : A:${A},B:${B},結果:${res}`)
}
}
document.querySelector(`button[name="sample_1"]`).addEventListener("click", clicl_sample_1)
あとがき
eval()関数を使わずに、Functionを使った判定にすることで、表示しているページとは切り離した、仮想環境でのプログラム実行をするようにしています。
もちろん、try~catchで、ある程度のプログラムエラーは拾うようにしていますが、
構文間違いなどの場合は、JSエラーが出て、プログラムが止まってしまいます。
プログラム文字列の構文チェッカー機能などをつけるとできるようになるかもしれませんが、ちょっと難易度が上がるので、その辺は別機会に考えたいと思います。
とにかく、この仕組みを使って、今後プログラミング謎解きやクイズを量産していき、ブログに掲載したいと思います。
0 件のコメント:
コメントを投稿