React + kuromoji.js + D3-CloudでWordCloudをブラウザに描画

そこも場合もうその病気らに対して旨の時がしんませ。単に事実に使用方はどうかその応用たないでもが思いてならないがも発展思いうべきて、あいにくにもなるだなですた。
差が向いんものは何だか翌日からしきりにんなけれう。もちろんネルソンさんで養成道具一応束縛に致しませ示威この力誰か講演をというご妨害ないますですうば、
...

[
  { text: "そこ",    value: 14 },
  { text: "場合",    value: 11 },
  { text: "うそ",    value: 2 },
  { text: "病気",    value: 8 },
  { text: "ら",      value: 17 },
  { text: "旨",      value: 1 },
  { text: "時",      value: 43 },
  { text: "しん",    value: 1 },
  { text: "事実",    value: 10 },
  { text: "使用",    value: 6 },
  { text: "方",      value: 41 },
  { text: "応用",    value: 3 },
  { text: "ない",    value: 175 },
  { text: "思う",    value: 39 },
  { text: "なる",    value: 99 },
  { text: "発展",    value: 13 },
  { text: "思い",    value: 5 },
  { text: "くる",    value: 8 },
  { text: "差",      value: 4 },
  { text: "向く",    value: 6 },

]

$ cp -a node_modules/kuromoji/dict public/

[{
  word_id: 509800,          // 辞書内での単語ID
  word_type: 'KNOWN',       // 単語タイプ(辞書に登録されている単語ならKNOWN, 未知語ならUNKNOWN)
  word_position: 1,         // 単語の開始位置
  surface_form: '黒文字',    // 表層形
  pos: '名詞',               // 品詞
  pos_detail_1: '一般',      // 品詞細分類1
  pos_detail_2: '*',        // 品詞細分類2
  pos_detail_3: '*',        // 品詞細分類3
  conjugated_type: '*',     // 活用型
  conjugated_form: '*',     // 活用形
  basic_form: '黒文字',      // 基本形
  reading: 'クロモジ',       // 読み
  pronunciation: 'クロモジ'  // 発音
}]

import React from 'react'
import kuromoji from 'kuromoji'

const text = `そこも場合もうその病気らに対して旨の時がしんませ。
単に事実に使用方はどうかその応用たないでもが思いてならないがも発展思いうべきて、
...
`

// 辞書格納フォルダパス
const DIC_URL = '/dict'

// WordCloudの情報として抽出する品詞（助詞、助動詞などは意味がないので拾わない）
const TARGET_POS = ['名詞', '動詞', '形容詞']

// kuromoji.jsの解析結果の値で特に値がない場合は以下の文字が設定される
const NO_CONTENT = '*'

class App extends React.Component {

  // kuromoji.jsによる形態素解析は非同期なので
  // 解析結果はstateのプロパティとしてコンストラクタで初期化しておく
  constructor(props) {
    super(props)
    this.state={
      dataForD3Cloud: [],
    }
  }

  componentWillMount() {
    // 辞書を読み混んでトークナイザー（形態素解析するための関数）を生成
    kuromoji.builder({ dicPath: DIC_URL }).build((err, tokenizer) => {
      if(err){
        console.log(err)
        return
      }

      // テキストを引数にして形態素解析
      const tokens = tokenizer.tokenize(text)

      // 解析結果から単語と出現回数を抽出
      const dataForD3Cloud = tokens
        // pos（品詞）を参照し、'名詞', '動詞', '形容詞'のみを抽出
        .filter(t => TARGET_POS.includes(t.pos))
        // 単語を抽出(basic_formかsurface_formに単語が存在する)
        .map(t => t.basic_form === NO_CONTENT ? t.surface_form : t.basic_form)
        // [{text: 単語, value: 出現回数}]の形にReduce
        .reduce((data, text) => {
          const target = data.find(c => c.text === text)
          if(target) {
            target.value = target.value + 1
          } else {
            data.push({
              text,
              value: 1,
            })
          }
          return data
        }, [])
      
      // 加工した解析結果をstateにセット
      this.setState({dataForD3Cloud})
    })
  }

  render() {
    // 略
  }
}

export default App;

import React from 'react';
import WordCloud from "react-d3-cloud";

// フォントの大きさを決める関数
const fontSizeMapper = word => Math.pow(word.value, 0.8) * 10

// フォントの回転位置
const rotate = word => word.value % 2 === 1 ? 0 : 90

// フォントの種類
const fontFamily = 'meiryo'


class App extends React.Component {

  constructor(props) {
    // 略
  }

  componentWillMount() {
    // 略
  }

  render() {
    return (
      <div className="App">
        <WordCloud
          data={this.state.dataForD3Cloud}
          fontSizeMapper={fontSizeMapper}
          rotate={rotate}
          font={fontFamily}
        />
      </div>
    );
  }
}

export default App;