はじめに
ゆかっしゅです。
2021年に事務職からデザイナー/コーダーにジョブチェンジをし、現在はフロントエンドエンジニアにスキルアップするべく、モダンフロントエンドを学習しています。
ReactやTypeScriptの基礎学習は終了したのに、なかなか0から自分だけでアプリを作れないので手を動かすべく「Reactアプリ100本ノック」 に挑戦してみようと思います。
Reactアプリ100本ノックルール
- 主要なライブラリやフレームワークはReactである必要がありますが、その他のツールやライブラリ（例: Redux, Next.js, Styled Componentsなど）を組み合わせて使用することは自由
- TypeScriptを利用する
- 要件をみたせばデザインなどは自由
10. Navigation
問題
タブナビゲーションを作成します
目的
タブナビゲーションでコンポーネントを切り替える仕組みを考え、デザイン性のあるインタラクティブなコンポーネントの作成に挑戦します
達成条件
- タブナビゲーションがある
- タブをクリックすると表示している内容が切り替わる
(例えばHomeならHomeコンポーネントの内容を表示する)
実際に解いてみた
利用技術
React(19.0.0)
TypeScript(5.0)
Next.js(15.3.1)
Tailwindcss(4.0)
jotai(2.12.3)
framer-motion(12.10.4)
Vercel
解答時間 1時間半
タブ切り替えのアニメーションにframer-motionを使用しました。便利でとても好きです。
リンク
おわりに
ウェイトが大分軽かったです。昔実務でTab切り替えを調べながらやっていたころが懐かしく思いました。
成長を感じる今日この頃です。