[katakata.js] 입력 중 같은 이펙트를 붙이는 node module를 만들어 공개했다.

예전부터 하고 싶었던 node module의 공개를 마침내 완수했기 때문에 기념으로 발표하고 싶다.

작성 과정에 있어서는 하기 기사가 매우 참고가 되었습니다.
앞으로 모듈을 개발하고 공개하고 싶은 분은 1을, generator/iterator의 이해를 깊게하고 싶은 분은 2를 읽는 것이 좋습니다.

3분 안에 가능한 npm 모듈

자바스크립트의 발전기를 극대화!

.. 그런데, 이번 타자기 스타일의 효과를주는 간단한 라이브러리를 썼다.

샘플 gif


샘플 on browser

코드는 여기

그 밖에도 generator의 구조도 이해하고 싶었던 곳이었기 때문에, generator를 사용한 모듈이 완성되었다(그 때문에, 사용하려면 몇개의 loader, plugin등이 필요하게 된다.)

할 수 있는 일

이 라이브러리에서는 다음을 수행 할 수 있습니다.

타이핑 중과 같은 효과가있는 한 문자 씩 표시

편집중의 워드에는 편집중과 같은 효과를 붙이기 위해서, class를 주어진다

github에 준 style을 사용하면 처음부터 그렇게 느껴진다. 라고 생각한다.

여러 줄 OK

단어 구분 기호를 원하는 문자로 지정할 수 있습니다

타이핑 속도를 좋아하도록 조정할 수 있습니다

선행 사례와 개발 경위

npm에서 「typewrite」로 검색해 히트한 것을 바라보았지만, 이것이 제일 가까웠다.

yobacca/typewrite:
A flexible typewriter simulator written in plain Javascript, well tested using Mocha, Chai, Karma and Istanbul.
htps : // 기주 b. 코 m / 요바카 / type w

한편, 이쪽은 일본어 특유의 편집중의 이펙트가 없고(구미이므로 당연), 그것을 일찌기 블로그로 실장했을 때에 개인적 만족도가 높았기 때문에, 이번 라이브러리로서 작성·잘라내기로 했다.

다음은 개인 메모이므로 TODO까지 날아 주셔서 문제 없습니다.

노력한 점

외형으로는 일본어 특유의 편집중의 배경·밑줄과, 입력중의 오른쪽 사이드 명멸 바에 오이타력을 나눈 느낌이 있다.

코드의 내용으로서는 generator의 구조를 이해하는데 약간 손질했지만, 어느 정도 될 수 있었다.

또, node module의 적절한 개발 플로우가 완전하게 탐구로, 지견 있는 분에게 상담해 보고 싶다.

마침내 향후 TODO

샘플 코드로 최소한의 코드를 정리하고 싶습니다
generator의 좋은 쓰는 법을 아직 모르기 때문에 가시가 실리팩터하고 싶다.
어쩌면 종속성이있는 라이브러리를 제시하는 방법이 잘못되었기 때문에 빨리 조사하고 대응하고 싶습니다.

js에서의 테스트 경험이 대부분이라고 말할 수 없기 때문에, 이것을 소재에 여러가지 시험해보고 싶다.

지금 한다면 어느 테스트 프레임워크가 좋은가 등 코멘트·어드바이스 받을 수 있으면 매우 기쁩니다.

전파되도록 테스트 코드의 세련을 계속하고 싶다.
이상!