diff --git a/app/javascript/packs/preview.js b/app/javascript/packs/preview.js
new file mode 100644
index 00000000..ca571682
--- /dev/null
+++ b/app/javascript/packs/preview.js
@@ -0,0 +1,12 @@
+document.getElementById('preview').onchange=function(){
+    const text = document.getElementById("write-area").value
+    const preview = document.getElementById("preview-area")
+    const obj = {text: text};
+    const method = "POST";
+    const body = JSON.stringify(obj);
+    const headers = {
+        'Accept': 'application/json',
+        'Content-Type': 'application/json'
+    };
+    fetch("/documents/api_markdown", {method, headers, body}).then((res)=> res.json()).then((obj) => {preview.innerHTML=obj.text}).catch(console.error);
+}
\ No newline at end of file
diff --git a/app/views/documents/_form.html.erb b/app/views/documents/_form.html.erb
index 1d6188ca..9fd54739 100644
--- a/app/views/documents/_form.html.erb
+++ b/app/views/documents/_form.html.erb
@@ -98,30 +98,6 @@
     <%= form.submit "保存", class: "bg-red-400 p-2 text-white rounded w-full" %>
   </div>
 
-
-  <script>    
-    <%# $('a[data-toggle="tab"]').on('shown.bs.tab', function (e) { %>
-	<%# const text = document.getElementById("write-area").value; %>
-
-	<%# $.post('/documents/api_markdown', {text: text}, function(data){ %>
-	    <%# $(document.getElementById("preview-area")).html(data) %>
-	<%# }); %>
-    <%# }); %>
-  document.getElementById('preview').onchange=function(){
-    const text = document.getElementById("write-area").value
-    const preview = document.getElementById("preview-area")
-
-const obj = {text: text};
-const method = "POST";
-const body = JSON.stringify(obj);
-const headers = {
-  'Accept': 'application/json',
-  'Content-Type': 'application/json'
-};
-<%# fetch("/documents/api_markdown", {method, headers, body}).then((res)=> res.json()).then((obj) => {preview.insertAdjacentHTML("afterbegin", obj.text)}).catch(console.error); %>
-fetch("/documents/api_markdown", {method, headers, body}).then((res)=> res.json()).then((obj) => {preview.innerHTML=obj.text}).catch(console.error);
-<%# fetch("/documents/api_markdown", {method, headers, body}).then((res)=> {console.log(res.json())}).catch(console.error); %>
-  }
-  </script>
+  <%= javascript_pack_tag 'preview' %>
 
 <% end %>
diff --git a/app/views/tasks/_form.html.erb b/app/views/tasks/_form.html.erb
index 945ac0d4..ae31a672 100644
--- a/app/views/tasks/_form.html.erb
+++ b/app/views/tasks/_form.html.erb
@@ -51,12 +51,26 @@
     <%= form.text_field :content, class: "border-2 w-full", placeholder: "タスクの内容を入力してください", required: true %>
   </div>
 
-  <div class="field my-4">
-    <%= form.label :description, "説明", class: "text-xl block font-bold mb-2" %>
-    <%= form.text_area :description, class: "border-2 w-full", rows: 10, placeholder: "タスクの説明を入力してください" %>
+  <div class="tabs">
+    <input id="write" type="radio" name="tab_item" checked>
+    <label class="tab_item" for="write">Write</label>
+    <input id="preview" type="radio" name="tab_item">
+    <label class="tab_item" for="preview">Preview</label>
+    <div class="tab_content" id="write_content">
+      <%= form.text_area :description, class: "border-2 w-full", rows: 10, id: "write-area", placeholder: "内容を入力してください" %>
+    </div>
+    <div class="tab_content" id="preview_content">
+      <div style="height: 300px" class="overflow-y-scroll">
+        <div id="preview-area" class="markdown-body p-12 list-style-none">
+        </div>
+      </div>
+    </div>
   </div>
 
   <div class="actions">
     <%= form.submit "保存", class: "bg-red-400 p-2 text-white rounded w-full" %>
   </div>
+
+  <%= javascript_pack_tag 'preview' %>
+
 <% end %>