snsでバズっているワードをタグクラウドで出したくてjqueryとかで色々探していたのですがjqueryプラグイン
同士の競り合いを起こしたり古いバージョンのjqueryが必要だったりとやたらと面倒だったのでnpmの
react-tagcloudというプラグインの力を少しお借りしました。
名前の通りreact向けにタグクラウドを生成してくれるnpmのパッケージで、規約（決まったコード）が少ない
ので比較的自由度が高く少しのアレンジでタグクラウドをカスタマイズすることができます。
</pre>
--------render------
const values = ["like vegetable", "like meet", "like fish"];
const data = [];
for(i=0; i < values.length; i++){
data[i] = { value: values[i], count: 5 };
};
--------return-------
<TagCloud minSize={5}
maxSize={35}
tags={data}
onClick={tag => this.tagClick(`'${tag.value}'`)} />
<pre>
これは配列に格納した値を順にTagCloudのプロパティに設定するだけのコードです。
（自作ですがconosle.logで最終的に値を取れたので載せておきます）
render内でdata[i] = { value: values[i], count: 5 };と二つのオプションがありますが、valueは
タグにしたい文字列、countはタグの大きさを指定しています。20でもかなり大きいので10前後にして
おいたほうが見栄えがいいかもです。
次にTagCloud内の説明になりますが、tags={data}で上でぶん回した配列の値を指定しています。
onClickの書き方がちょっと特殊で処理内に`’${tag.value}’`と書いてありますが
これは格納してあったタグの値つまり”like vegetable”, “like meet”, “like fish”を指定しており、処理も
値別に分けることができます。
簡単な説明ですが以上になります。
このコード量でタグクラウドの基本的な動きを抑えられるので、ブラウザで化けなければ採用できるかもです。
タグクラウドのプラグインの中でも一番わかりやすくて余計なことが書いていないので、同じような
機能を探している人におすすめのプラグインです。
