[번외편] HTML을 문자열로 조립하지 마세요.

이건 사실'유지보수성 높은 소프트웨어 개발의 Tips 컬렉션'에 싣고 싶었어요.
나는 사회에서 가장 좋은 방법이 전혀 없다고 생각해서 번외편을 선택했다.
https://zenn.dev/riku/books/36d9873ee1c0e6

문제의식

HTML을 문자열로 조립하다니.

HTML이 문자열로 조립된 것은 이것을 가리킨다.

연산자 등을 사용하여string에서 HTML을 조립

언어 또는 라이브러리별 템플릿 기능 사용

JSP

Node.js의 EJS

HTML 및 PHP 태그 혼합 사용

Go의]/template

이런 거 안 쓰는 게 좋을 것 같아서요.

+ 연산자로 조립하지 말아야 하는 이유

XSS 대책

XSS는 상당히 위험합니다.

전선이 더러워졌다

그 언어의 들여쓰기 규칙과 HTML의 들여쓰기 상황 간섭 코드가 더러워졌다.

내보낸 HTML이 더러워요.

태그 등을 닫는 것을 잊어버리면 내보낸 HTML이 더러워집니다.
또 대다수 경우 줄을 바꾸는 통일감이 사라진다.

템플릿 기능을 사용하지 않는 이유

XSS 대책

이것도 XSS일 가능성이 있어.
반대로 Go의]/template는 자동으로 피합니다
그것 때문에 2중으로 탈출했다는 미생잔류.

프로그래밍 가능한 거 아니에요.

우선 조립 과정에서 텍스트가 print되기 때문에 처리 호출 순서에 제약을 받는다.
또 다양한 콘텐츠 속에서 공통의 프레임을 반복해서 사용하는 것은 힘들다.

<共通枠組み> コンテンツA </共通枠組み>

<共通枠組み> コンテンツB </共通枠組み>

잘 안 보여요.

제 주관입니다. HTML 템플릿 엔진이 제공하는 HTML과 비슷한 For와 If의 구조는 매우 힘들어 보이고 스트레스가 많습니다.

{{if .Empty}}
  <p>未登録</p>
{{else}}
<ul>
  {{range .Member}} <li> {{.Name}} </li> {{end}}
</ul>
{{end}}

나는 이것이 그다지 친절하지 않다고 생각한다.
이거 누가 좋아하겠어요?

내보낸 HTML이 더러워요.

오그라들지 않는 문제.

대책

방침.

일반적으로 각 언어에는 XML 라이브러리와 HTML 라이브러리가 있습니다.
그걸로 HTML을 조립하는 게 좋을 것 같아요.
이 경우 XSS 걱정은 거의 없습니다.
또 표지 닫기 등을 잊어버리는 경우는 원칙적으로 발생하지 않는다.
프로그램의 순서만 있으면 실행 순서의 제한이 없다.
차라리 서브 요소의 제작을 함수로 간단하게 정리할 수 있기 때문에 코드의 전망이 더욱 밝을 것이다.
또한 하위 요소를 매개 변수로 하는 함수만 만들면 경계선의 유니버설화를 간단하게 실현할 수 있다.

예제

function main() {
    const doc = document.createElement("html");
    doc.append(createBody());
    console.log(doc.outerHTML);
}

function createBody() {
    const body = document.createElement("body");
    const liList = [];
    for (let i = 0 ; i < 10 ; i ++) {
        liList.push(createLi(i));
    }
    body.append(createUl(liList));
    return body;
}

function createUl(liList) {
    const ul = document.createElement('ul');
    for(const li of liList) ul.append(li);
    return ul;
}

function createLi(i) {
    const li = document.createElement('li');
    li.textContent = i;
    return li;
}

이러다 줄 바꿈도 움츠러들지도 않아
대체로 프리티 출력 방법을 쉽게 찾을 수 있으니 그것도 사용해 보자.

추천하다

다만, 이 방법은 좀 지루하게 느껴질 수도 있다.
(실제로 규모가 클수록 구성 요소의 공통화는 개의치 않는다.)
그럼에도 불구하고 더 간단하게 쓰고 싶은 사람을 위해
내가 가장 추천하는 것은 TSX다.
TSX는 현재 가장 사용하기 쉬운 템플릿 엔진이라고 생각합니다.
TSX는 HTML을 문자열로 구성하는 것이 아닙니다.
DOM 트리의 순수 함수를 반환하는 편리한 구문입니다.
따라서 해결책의 기본 지침에 어긋나지 않는다.
TSX로 적어서 renderTostring만 하면 돼요.
노드 이외의 언어로 쓰기 서버를 사용해도 운영 환경을 간단하게 준비할 수 있다.
AWS의 람바다와 GCP의 클라우드 펀션 등을 이용할 수 있기 때문이다.
비즈니스 로직도 Go/Java 등으로 쓰고 TSX로 HTML을 조립할 수 있다.