TL;DR

※전 재료
프로그램의 명명에 헤매면 GitHub로 코드 검색하면 참고가 되는 설

굉장히 편리했기 때문에, 시각적으로 볼 수 있는 WEB 서비스를 작성했습니다!
htps : // 푹신 푹신. 네 tぃfy. 코m/

소스 코드는 이쪽
htps : // 기주 b. 코m/사토키비/호게호게. 이오

만든 것

hogehoge.io
htps : // 허벅지. 네 tぃfy. 코m/



검색하려는 키워드를 여러 개 입력하고 검색하면
결과 테이블과 원형 차트, 그리고 각 키워드의 검색에 걸린 파일의 리스트가 나오게 되어 있습니다.

chartjs로 표시하는 원형 차트의 애니메이션이 굉장히 멋지고 좋아합니다.

사용한 기술

도커

개발 환경의 구축에 이용하고 있습니다.

항상 감사합니다.

Vue.js

이 녀석 덕분에 프런트 엔드 입문 할 수 있었다 (T_T)

Nuxt.js

Vue.js 프레임 워크

Nuxt.js 초보자 가이드 덕분에 조금 입문할 수 있었다.

Vuetify.js

UI 프레임 워크

웹사이트를 좋은 느낌에 멋있게 해 주었다.

chart.js

그래프 작성 담당

이번은 원 그래프였습니다만, 다른 그래프도 다수!

Netlify

이번 배포처

정적 호스팅 사이트!

기본 무료로 항상 고맙게 사용하고 있습니다

메커니즘

사용자 입력을 공백으로 분할

각 키워드를 Github API로 검색!

결과 표시

②의 API에의 검색을 병렬로 실시하고 있기 때문에?인가, 많은 키워드로 검색을 실시하면(자)
가끔 403 오류가 돌아옵니다.

빠진 곳

공백 제거

 var keywords = this.user_input.replace(/\s+/g, ' ').split(' ')

예기치 않게 반각 전각 푹신한 공간을 좋은 느낌으로 나누는 것은 어려웠습니다 ...
정규 표현으로 반각 전각의 공백 모두를 반각 공백 1 개로 치환하고 나서 분할하고 있습니다.

병렬 처리

Promise에 대한 지식이 없으며 조사하는 동안
결국이 코드에 진정되었습니다.

  const result = await Promise.all(
    keywords.map(async (keyword) => {
      return this.$axios.$get('/code?q=' + keyword)
    })
  )

앞으로

option 검색

언어 지정 검색

저장소 제한 검색

oauth 인증

백엔드 개발

검색 결과를 저장하고 싶습니다!

예측 변환과 같은 것으로 잘 검색되는 키워드 순서로 내거나,
함께 검색되는 키워드를 제안할 수 있도록 해 가고 싶다.

결론

변수 이름과 함수 이름을 결정하는 것이 매우 고민하는 유형입니다.
이것으로 hoge 따위 변수명을 붙이지 않게 된다, ,,일까?

참고문헌

프로그램의 명명에 헤매면 GitHub로 코드 검색하면 참고가 되는 설

Nuxt.js를 사용해 개인 개발 해 보았다 ~ 시간표를 원 그래프로 표시하는 서비스를 릴리스 한 이야기 ​​~

Github API