はじめに

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

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

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

実行

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:10vh10vw;}#css{height:20vh;width:30vw;margin:5vh10vw;}}}&__right{height:100%;width:50%;background-color:blue;&__window{&__html{background-color:white;height:40vh;width:30vw;margin:10vh10vw;}}}}

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

$(function(){$(".btn").on("click",function(){lethtml=$(".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をコードとして挿入し、非同期でビューが変わるようになっています。