5374.jp의 Nuxt.js 버전을 만들었습니다!

5374.jp의 Nuxt.js판, 그 이름도 「5374nuxt」를 개발했습니다!
htps : // 기주 b. 코 m / 코데 후 r 가나자와 오 rg / 5374 xt

저는 대학에서 '정보 디자인'이라는 강의를 갖고 있습니다. 자바스크립트와 데이터의 시각화, 그리고 오픈 데이터에 대한 강의입니다.

5374.jp는 강의에서의 라스보스적 위치 지정! 지금까지 학습한 내용을 이용하여, 각 지역의 쓰레기의 날 데이터로부터 5374.jp 형식의 데이터를 작성해, 최종적으로는 독자 개조한 5374.jp를 작성한다고 하는 것. 오픈 데이터를 이해하고 JavaScript를 학습하는 목적입니다. 2014년부터 5374.jp를 강의에 도입해 올해로 7년째!

7년이 지나면 기술 주위의 상황은 상당히 바뀝니다. 5374.jp의 주요 기술은 jQuery. jQuery는 훌륭한 라이브러리이지만 점점 더 많은 역할을 끝내고 있습니다. 저도 강의에서 사용하는 라이브러리를 jQuery에서 바꾸고 싶어하기 시작했습니다. 거기서, Code for Kanazawa의 후쿠시마씨에게 상담해, Code for Kanazawa & Code for Shiogama의 공동 프로젝트로서 Vue.js & Nuxt.js를 이용한 「5374nuxt」를 시작한 대로입니다.

아직, 타타키대 레벨의 완성도라고 생각합니다. 여러분 꼭 issue나 풀릭, 그리고 코미터로서도 협력해 주시면 고맙습니다!

무엇보다 「어떤 기능이 추가되었습니까?」라고 질문해도, 기능이나 비주얼은 아무것도 추가되지 않았습니다 w 실시간으로 반영되기 때문에 디버깅도 하기 쉬워지고 있다는 Nuxt.js만이 가능한 장점입니다.

jQuery를 TypeScript & Vue.js & Nuxt.js로 변경하고 있으므로, 여러가지 제작에도 변경은 나와 있습니다.

오리지날의 5374.jp는 HTML은 index.html만으로, JavaScript는 설정 이외는 모두 script.js라고 하는 파일에 정리하고 있습니다. 5374nuxt에서는, 모처럼 Nuxt.js이므로 컴퍼넌트를 분할, JavaScript의 기술도 대응하는 장소에 분할해, 공통하는 클래스 정의를 script.ts라고 하는 파일로 했습니다.

소스의 가독성도 가능한 한 올리려고 노력하고 있습니다! 앞으로 여러분으로부터 피드백도 얻으면서 개선해 나가고 싶다고.

아직도 지금부터. 여러분 앞으로도 꼭 기대해 주세요! 네바기바!