도지사 선도 있었고 정치 API로 놀아 보는 with React.js

아무래도, 히로입니다!
도지사 선, 끝났습니다.
저는 도민이 아니므로 상관없습니다만, 꺾어진 분위기(?) 때문에 거기에 편승해 정치 API를 사용해 무엇인가 만들어 보았습니다.

덧붙여서 이번에 만든 물건의 코드는 여기에 있습니다!

이번에 만든 물건

이런 느낌의 물건을 만들었습니다.




간단히 설명하면 Seiji.kpi-net.com의 API 을 사용하여 정치인의 정보를 함께 볼 수 있습니다.
중의원 의원, 참의원 의원 등의 종별을 선택하고, 정당명을 선택하고, 검색하는 버튼을 누르면 해당하고 있는 정치가의 일람과 건수를 열람할 수 있다고 하는 것입니다.

힘든 점

API에 요청을 했을 때, json다운 배열이 돌아오고 있는데 json이 아닌 것 같은 무언가로 객체에 변환하는 것의 괴로운, , , 라고 고민하고 있으면 딱 기사를 만나 도움이 되었습니다. 진짜 굉장한,,,!

JSON 같은 문자열을 객체로 변환하는 JavaScript

덧붙여서 해당 부분의 코드를 발췌

assets/js/container/Result.jsx

...
const data = res.text.replace(/\r?\n/g,"").trim();
const politicians = (new Function("return " + data))();
...

그리고는 언제나 그대로의 느낌으로 실장했습니다. 코드를 보는 것이 빠를지도 모릅니다 ヾ ( ´ε`;) ゝ

소기

소기라기보다는 react-router 의 문서 봐 달라고 쓰고 있습니다만, url 의 파라미터는 this.props.params 로 취득할 수 있습니다.

assets/js/common.js

import React, {Component} from 'react';
import {render} from 'react-dom';
import Main from './container/Main';
import Result from './container/Result';
import {Router, Route, browserHistory} from 'react-router';
import injectTapEventPlugin from 'react-tap-event-plugin';
injectTapEventPlugin();

render(
  <Router history={browserHistory}>
    <Route path='/' component={Main} />
    <Route path='/:type' component={Result} /> //ここのことです。
  </Router>,
  document.getElementById('app')
)

assets/js/container/Result.jsx

typeCheck() {
    switch(this.props.params.type) {
      case '1':
      return '衆議院議員'
      case '2':
      return '参議院議員'
      case '3':
      return '知事'
      case '4':
      return '市長'
      case '5':
      return '区長'
      case '6':
      return '町長'
      case '7':
      return '村長'
      default:
      return '不正な値です'
    }
  }

이번에는 이러한 느낌으로 처리를 분기했습니다.

감상

지난번 , wp-rest-api를 사용한 간단한 샘플을 만들 때 좀 더 API를 사용하여 놀고 싶다고 생각했기 때문에 이번에도 기세로 만들어 보았습니다.

오픈 API로 무언가를 만드는 경험이 별로 없었기 때문에 이번에도 자극적이었습니다. 또 뭔가 만들고 싶습니다.