簡易progate(html)

はじめに

HTML/CSSを書くときは、一度コードを書いて後ブラウザで実行するという作業が必要です。
一連の流れについて、ウインドウを切り替えるのが煩わしい、という人もいるでしょう。
これを解消してみたいと思いました。

Progateをはじめとしたプログラム学習サイトでは、
コードを入力してボタンを押すと、プログラムが実行されます。
これを再現してみれば、一連の煩わしさが解消されると考えました。

本記事では、Ruby on railsを使用して、
HTMLのコードを書いてスイッチを押すと、その同じ画面にそのコードを元にしたビューが現れるプログラムのコードを紹介します。
非常にシンプルで、１００％当初の目標を実現できているわけではありませんが、
このコードを改良すれば目標達成できるものと思っています。

別ブログにて、書き直したものを公開中です。
https://airesaies.com/2020/09/04/program006/

実行

HTMLは次のように書きます。（Ruby on railsを使用しているので、hamlで書いています。）

.header 左にhtmlコードを入力してボタンを押せば、右にその結果が表示されるぞ
.body
  .body__left
    .body__left__form
      = text_area "object_name",{class: "html"},{id: "html"}
      .btn 追加する
  .body__right
    .body__right__window
      .body__right__window__html

左のフォームで入力して、右側に表示させるため、
bodyの中にleftとrightのクラスを作成します。

cssは下記の通りです。
ここは好みになりますが、bodyにdisplay: flex:を入れて、
leftとrightが横並びになるようにします。

.header{
  height: 20vh;
  background-color: yellow;
  font-size: 32px;
  color: blue;
}


.body{
  display: flex;
  height: 60vh;
  &__left{
    height: 100%;
    width: 50%;
    background-color: red;
    &__form{
      #html{
        height: 40vh;
        width: 30vw;
        margin: 10vh 10vw;
      }
      #css{
        height: 20vh;
        width: 30vw;
        margin: 5vh 10vw;
      }
    }
  }
  &__right{
    height: 100%;
    width: 50%;
    background-color: blue;
    &__window{
      &__html{
        background-color: white;
        height: 40vh;
        width: 30vw;
        margin: 10vh 10vw;
      }
    }
  }
}

最後にJavaScriptです。
ここでは、ボタンをクリックすると、フォームに入力していたコード通りのビューを表示させるようにします。

$(function(){
    $(".btn").on("click",function(){
      let html = $(".html").val();
      $(".body__right__window__html").append(html);
    })
});

この処理は大きく３つに分けられます。

1.ボタンをクリックしてイベントを発火させる
2.フォームに入力してあるテキストを取得する
3.取得したテキストの通り、htmのビューを作成する

1.の部分は$(".btn").on("click",function()で行ってます。
btnクラスをclickすると発火する、という意味になります。

2.の部分はlet html = $("#html").val();で行ってます。
htmlクラスの部分に入力してあるテキストをval()を使って変数htmlに代入しています。

3.の部分は$(".body__right__window__html").append(html);で行ってます。
body__right__window__htmlクラスに、appendメソッドを使って、先ほどのhtmlをコードとして挿入し、非同期でビューが変わるようになっています。