이 글은 Em3 Advent Calendar 2017의 25일째 기사다.
평소 DB, 사베이사이드, 클레안 동쪽의 디자인, 설치, 활용만 맡았는데, 이 글에서 리액트로 개발한 시스템을 소개하고 싶습니다.

만든 물건

설문조사 시스템survey-designer-js을 제작해 회사 내에서 사용했다.또 OSS로 창고에 공개했다.

GitHub

DEMO

또한 클라이언트만 공개되고 서버 측의 설치는 공개되지 않았다.또 Em3사 내에서 사용되는 것은 이 창고에서 나온 것이다.
다음과 같은 기능을 갖추고 있다.

페이지 만들기

페이지에 질문 만들기

다양한 옵션

단일 선택(라디오 버튼)

단일 선택(드롭다운)

수치 작성

텍스트 한 줄

여러 줄 텍스트

표 형식

도도부현

설명문/표지 등

질문 공통 기능

임의 입력 지정

프로젝트의 무작위

항목이 무작위일 경우 고정 지정

사용자의 입력 값을 바탕으로 선택한 디스플레이 제어

사용자의 입력 값에 따라 다른 항목의 입력 값을 제한한다

사용자의 입력 값을 다시 올리는 처리

논리 변수(계산 처리)

JavaScript의 정의

자유 모드 기반 HTML 페이지 디자인 (dev 모드에서만 사용 가능)

사용자가 입력한 값에 따라 분기 조건 만들기

기본 마이그레이션 대상 변경

과도도 그리기(통합되지 않음)

마이그레이션 소스 디스플레이(통합되지 않음)

끝 페이지 만들기

끝 구분 설정(COMPLETE, SCREN)

미리 보기 기능

동작 미리보기

상세 미리보기

브라우저 지원

편집기: IE11 이상, 현대 브라우저
응답 화면: IE9 이상, 현대 브라우저

왜 했어요?

다른 활용할 수 있는 설문 시스템이 있었으면 좋겠지만, 다른 개념이 있는 시스템은 발견되지 않아 직접 만들기로 했다.

엔지니어가 아니어도 대부분의 설문조사를 할 수 있다

설문지 작성을 위한 GUI를 갖추고 있으며 맞춤형 구성

복잡한 건 엔지니어가 처리할 수 있어 못하는 건 거의 없어

조건은 HTML, jQuery 등을 안건별로 맞춤형으로 사용할 수 있음

설문지 변경을 강력히 요구

특징·시간 등

사용자 정의를 위해 HTML 및 jQuery 사용 가능

필수 조건으로 HTML과 jQuery 등을 통해 사안별로 맞춤형 구조가 필요하지만, HTML과 jQuery를 사용하면 리액션을 직접 사용할 수 없다.따라서 화면에 대답하는 페이지 앞의 구성 요소는 React를 uncontrolled component로 렌더링하고 렌더링한 후plain의 자바스크립트로 추가 제어를 합니다.이후 엔지니어는 JavaScript 처리를 추가하거나 HTML을 덮어쓸 수 있습니다.

페이지를 이동하거나 항목을 선택하더라도 설문지를 훼손하지 마십시오.

설문조사를 했다면 페이지의 순서를 바꾸거나 선택의 순서를 바꿀 수도 있다.브랜치 조건 등에서 질문에 대한 참조를 설정하면 이동할 때도 자동으로 따라갑니다.
이것은 질문 번호 등 참조가 있는 값이 아니라 모두 ID 참조로 해결된다.또한 같은 구조를 사용하여 HTML에 나타나는 문자열 변환 메커니즘을 실현할 수 있다.
두 번째 예에서 사용자는 {2-1-1.answer}을 입력했지만 내부는 프로젝트 2-1-1의 ID로 변환되었습니다.
{{2-1-1.answer}} → {{cjbcdi4ct000i3h77sqlldv77.answer}}
이렇게 들면 미리보기에서render에서 다시 뜯기 2-1-1 출력으로 전환할 수 있고 대답할 때 실제 사용자의 대답을 표시할 수 있습니다.

기존 문제의 배치를 유연하게 맞춤형으로 만들고 싶다

이것은 개발자 모드에서만 유효하지만 HTML 자체를 편집할 수 있습니다.이 편집 기능을 사용하면 판면 디자인을 자유롭게 할 수 있다.

이 편집기는 Codemirror를 사용합니다.

JavaScript로 추가 처리

페이지 단위로 JavaScript를 설정합니다.통상 준비되지 않은 기능을 추가할 수 있고, 복잡한 validation과 외부와의 통신 등도 여기에 기재할 수 있다.

데이터의 검증과 프로젝트의 디스플레이 제어가 너무 많아서 설정하기가 매우 힘들다

Excel로 데이터를 입력할 때 같은 데이터를 많이 만드는 것은 간단하지만 웹 시스템으로 입력하면 입력이 번거롭다는 말을 자주 듣는다.이 조사 시스템의 편집기도 같은 일이 발생할 수 있다는 것을 알기 때문에 데이터의 검증과 프로젝트의 디스플레이 제어에 전자 표handsontable를 가져왔다.

하지만 아래 부분은 상당히 힘들다.
첫 번째는 연기 문제다.이것은 React가 속성을 업데이트한 후에 다시 그리기 때문에handsontable의 모든 칸이 업데이트되는 문제입니다.대책으로 다음과 같은 2가지를 취했다.

UI에는 원래handsontable이 표시되지 않습니다.

shoulldComponentUdpate

를 적절하게 설정
두 번째는 사용자의 편의를 위해 고생하는 것이다.

동네에 입력할 수 있는 값의 검증 처리

선택한 항목에 대응하는 편집기 보이기

복사와 붙여넣기를 허용하는 케어

그러니까 기능이 간단하다는 거야...엑셀 대단하다.

엔지니어가 없는 상태에서 표를 맞춤형으로 만들고 싶어요.

질문 형식으로 표 형식이 있지만 UI로 질문을 정의하는 콘셉트로 설문 시스템을 만들기 때문에 HTML을 쓰게 하지 않는다.WYSIWYG 편집기TinyMCE는 표 부분에만 한정되어 사용자 정의가 가능합니다.

엔지니어가 사용하는 편집기의 개발 효율을 높이고 싶다

Codemirror를 사용했기 때문에 이른바 단축키와 자동 충전 기능을 간단하게 편입할 수 있다.다음은 자동 보완 기능을 사용하여 창 요소를 자동으로 보완하는 예이다.

최후

React의 강좌에서 많은 것들이 간단한 설문조사 시스템을 채택했지만 진정으로 만들어진 것은 거의 없다고 생각합니다.MIT 라이선스로 GiitHub에 공개되어 있으니 어떻게든 사용해 보세요.
누가 서버 쪽 좀 만들어줄래요?