雑記
Reactでよく利用するjsの書き方紹介とRechartsの紹介
きーぼう
公開日:2022/02/22
こんにちは、きーぼうです。
Reactの勉強をはじめて数ヶ月になります。
今回は、Reactでよく利用するjsの書き方とReactのチャート描画ライブラリのRechartsを使ってみたのでその内容を紹介します。
目次
Reactでよく利用するjsの書き方
アロー関数
従来の関数
|
1 2 3 4 5 |
function test(value) { return value; } // 実行した結果の出力 console.log(test('従来の関数だよ')); |
アロー関数
|
1 2 3 4 5 |
const test2 = (value) => { return value; }; // 実行した結果の出力 console.log(test2('アロー関数だよ')); |
- アロー関数の注意事項
- 引数が１つの場合は、()を省略できる
12345const test2 = value => {return value;};// 実行した結果の出力console.log(test2('アロー関数だよ')); - 処理を単一行で返却する場合は波カッコとreturnを省略できる
1234const test3 = (value1, value2) => value1 + value2;// 実行した結果の出力console.log(test3(10, 20)); //30
- 引数が１つの場合は、()を省略できる
分割代入
分割代入をしない場合
|
1 2 3 4 5 6 |
const testUser = { name: '佐藤', age: 24, }; const message = `私の名前は${testUser.name}です。年齢は${testUser.age}歳です。`; console.log(message);//私の名前は佐藤です。年齢は24歳です。 |
分割代入
|
1 2 3 4 5 6 7 8 |
const testUser = { name: '佐藤', age: 24, }; //オブジェクトの分割代入 const { name, age } = testUser; const message = `私の名前は${name}です。年齢は${age}歳です。`; console.log(message);//私の名前は佐藤です。年齢は24歳です。 |
スプレッド構文「…」
「…」で内部の要素を順番に展開します。
|
1 2 3 4 5 6 7 |
const arr = [1,2,3]; // 関数 const testSum = (x, y, z) => console.log(x + y + z); // 通常 testSum(arr[0],arr[1],arr[2]);// 6 // スプレッド構文の場合 testSum(...arr);// 6 |
＊もし配列に値が４つ以上ある場合は、最初の３つだけが使用される
Rechartsを使ってみた
使い方は、簡単です。
1.npm install rechartsでRechartsをインストール
2.サンプルから利用したいグラフを選びましょう。
3.見た目の表示を確認して完了
私の開発環境で試してみた画像は以下になります。
Rechartsを使ってみた感想
学習コストもそこまで高くなく、導入も比較的に容易と感じたので、Reactプロジェクトへの導入はありかと思いました。
添付した画像が見づらくて申し訳ないですが、リッチなグラフになってるのでぜひぜひ皆さん試してみてください。
まとめ
簡単ではありますが、Reactでよく利用するjsの書き方とReactのチャート描画ライブラリのRechartsを使ってみた内容を紹介させていただきました。
React習得は大変ですが、１つずつ学んでいけばきっと幸せな未来があると信じて一緒に頑張りましょう！
きーぼう
