Zenn
🔰

JavaScriptでとっても簡単なプログラミング言語を作る

2023/04/05に公開
HTML
JavaScript
tech

今回はJavaScriptでとっても簡単なプログラミング言語を作ります。

考え方

『JavaScriptでとっても簡単なプログラミング言語を作る』というタイトルで驚いた方も多いでしょう（そもそも読んでいる人が少ないでしょう）。でも考え方は簡単です。JavaScriptでクイズを作ったことがありますか？あれと同じ考え方です。『答えがあっていたら正解と表示する』を『Print(Hello,world!)wwと打たれたら、Hello,world!と表示する』というふうに置き換えるだけです。「こんなの記事読む必要ねぇじゃん」と思うかもしれません。それでも紹介します。
GASに埋め込んだもののURLを貼っておきます。Acorn lang

ソースコード

Acorn.html
<!DOCTYPE html>
<html lang="ja">
<head>
  <meta charset="utf-8">
  <title>Acorn lang</title>
</head>
<body>
  <form action="" id="form1">
    <div>Print(Hello,world!)ww  と入力してください </div>
    <input id="textBox1" type="text" value="" />
    <input type="button" value="Exec" onclick="onButtonClick();" />
  </form>
  <div id="output"></div>
  <script language="javascript" type="text/javascript">
        function onButtonClick() {
            var val = document.forms.form1.textBox1.value;
            var target = document.getElementById("output");

            if (val == "Print(Hello,world!)ww") {
                target.innerHTML = "Hello,world!";
            } else {
                target.innerHTML = "err";
            }
        }
  </script>
</body>
</html>

軽ーく解説

名付けてAcorn lang。今回も主役はJavaScriptです。JavaScriptの部分だけ見ていきましょう。

  <script language="javascript" type="text/javascript">
        function onButtonClick() {
            var val = document.forms.form1.textBox1.value;
            var target = document.getElementById("output");

            if (val == "Print(Hello,world!)ww") {
                target.innerHTML = "Hello,world!";
            } else {
                target.innerHTML = "err";
            }
        }
  </script>

ごくごく基本的なif文ですね。実際こんな簡単な仕組みで作れちゃいます。

まとめ

前回の投稿ではhtmlをGASに埋め込みましたが、今回はやめました。私は埋め込むのが好きなので、このコードもGASに埋め込んでます。まだ始めたばかりで、最初の投稿は我が友staff roi　@彼のページ　君にダメ出しされました。全然記事の質があがってないのですが、応援よろしくお願いします。

Discussion