diff --git a/src/app/_components/domains/Task/TaskEditor/TaskEditor.tsx b/src/app/_components/domains/Task/TaskEditor/TaskEditor.tsx
new file mode 100644
index 0000000..d7f6008
--- /dev/null
+++ b/src/app/_components/domains/Task/TaskEditor/TaskEditor.tsx
@@ -0,0 +1,17 @@
+'use client';
+
+import { FC, useCallback } from 'react';
+import { Editor } from '~/app/_components/uiParts/Editor';
+import { Task } from '~/domains/Task';
+
+type Props = {
+  task?: Task;
+};
+
+export const TaskEditor: FC<Props> = ({ task }) => {
+  const handleEditorChange = useCallback(async (body: string) => {
+    console.log(body);
+  }, []);
+
+  return <Editor body={task?.body} onChange={handleEditorChange} placeholder="タスクの内容を記入しましょう" />;
+};
diff --git a/src/app/_components/domains/Task/TaskEditor/index.ts b/src/app/_components/domains/Task/TaskEditor/index.ts
new file mode 100644
index 0000000..f83b3d0
--- /dev/null
+++ b/src/app/_components/domains/Task/TaskEditor/index.ts
@@ -0,0 +1 @@
+export { TaskEditor } from './TaskEditor';