B3Sロゴ
menu close

雑記

Reactでよく利用するjsの書き方紹介とRechartsの紹介


きーぼう

公開日:2022/02/22


こんにちは、きーぼうです。
Reactの勉強をはじめて数ヶ月になります。
今回は、Reactでよく利用するjsの書き方とReactのチャート描画ライブラリのRechartsを使ってみたのでその内容を紹介します。

目次

Reactでよく利用するjsの書き方

 

アロー関数

従来の関数

アロー関数

  • アロー関数の注意事項
    • 引数が1つの場合は、()を省略できる
    • 処理を単一行で返却する場合は波カッコとreturnを省略できる

       

分割代入

分割代入をしない場合

分割代入

 

 

スプレッド構文「…」

「…」で内部の要素を順番に展開します。

 

*もし配列に値が4つ以上ある場合は、最初の3つだけが使用される

Rechartsを使ってみた


使い方は、簡単です。
1.npm install rechartsでRechartsをインストール
2.サンプルから利用したいグラフを選びましょう。
3.見た目の表示を確認して完了

私の開発環境で試してみた画像は以下になります。

Rechartsを使ってみた感想


学習コストもそこまで高くなく、導入も比較的に容易と感じたので、Reactプロジェクトへの導入はありかと思いました。
添付した画像が見づらくて申し訳ないですが、リッチなグラフになってるのでぜひぜひ皆さん試してみてください。

まとめ


簡単ではありますが、Reactでよく利用するjsの書き方とReactのチャート描画ライブラリのRechartsを使ってみた内容を紹介させていただきました。
React習得は大変ですが、1つずつ学んでいけばきっと幸せな未来があると信じて一緒に頑張りましょう!
きーぼう