【Reactアプリ100本ノック】14 Graph

はじめに

こんにちは、Watanabe Jin (@Sicut_study)です！

こちらの記事が嬉しいことに多くの方に見ていただきました。
そこでReactが多くの初心者の方に注目されているんだなということを実感させられました。

私の記事では何度も言っている通り

最速で学ぶならとにかく何か作る

というのが大事になってきます。そこで 「Reactアプリ100本ノック」 というのに挑戦していこうかと思います。徐々に難易度を挙げていってどこまでお題を作りきれるかの腕試しでやっていただければと思います。

今回は便利なグラフライブラリを使っていきます。
ライブラリを知ることで作れるものの選択肢が広がります

前回のお題

Reactアプリ100本ノックルール

• 主要なライブラリやフレームワークはReactである必要がありますが、その他のツールやライブラリ（例: Redux, Next.js, Styled Componentsなど）を組み合わせて使用することは自由
• TypeScriptを利用する
• 要件をみたせばデザインなどは自由

14. Graph

問題

グラフの表示を行います

目的

グラフの表示ができるようになることで、可視化ができるようになりアイデアの幅が広がります。また新たなライブラリを試す機会を作ります

今回は架空のブログのPV数を記録する分析ツールを作ります

達成条件

• 日付とPV数を記録できる
• 日付とPV数はバリデーションをつける
• 記録するとグラフに反映される
• グラフはライブラリを何かしら用いて実現すること

実際に解いてみた

利用技術

• Vite
• React
• TypeScript
• TailwindCSS
• Tremor
• react-hook-form

解答時間 : 1時間

今回のテーマはずばり新しいライブラリでアイデアの幅が広がること
ライブラリを使うことを目的にサービスを作ることで学ぶ機会になります

今回は「Tremor」を利用してグラフ描画をしました

ものすごく簡単にグラフが作れてアニメーションまでつけてくれるので、大好きなライブラリです

実装自体は簡単なので、バリデーションにreact-hook-formを使うなど難易度をすこし上げるのもおすすめです

次のお題

Comig Soon...

おわりに

React100本ノックの記事を地道に上げていこうと思いますので、一緒に挑戦したい方は @Sicut_study をフォローいただけるととてもうれしく思います。

ここまで読んでいただけた方はいいねとストックよろしくお願いします。
@Sicut_study をフォローいただけるととてもうれしく思います。

今週もプログラミング頑張りましょう！

おすすめ記事

About Me

Webエンジニア転身して1年間本気で勉強
転職ドラフトで高額オファーを複数獲得
そこでの経験からアウトプットやマインドセットの発信に強みがある
エンジニアをやりながら、起業に挑戦中
アイデア作りやパブリックスピーキングを得意としてる

■ Twitter
https://twitter.com/Sicut_study
■ Youtube
https://www.youtube.com/channel/UCBFrGAJhPuuaoLwUIHBILsA

■ プログラミングコーチングJISOU
https://projisou.jp
■ 登壇依頼などご依頼はこちらから
[e-mail]

参考