はじめに
ゆかっしゅです。
2021年に事務職からデザイナー/コーダーにジョブチェンジをし、現在はフロントエンドエンジニアにスキルアップするべく、モダンフロントエンドを学習しています。
ReactやTypeScriptの基礎学習は終了したのに、なかなか0から自分だけでアプリを作れないので手を動かすべく「Reactアプリ100本ノック」 に挑戦してみようと思います。
また、今回からはchatGPTにお題を作ってもらっています。
本家はこちら
Reactアプリ100本ノックルール
- 主要なライブラリやフレームワークはReactである必要がありますが、その他のツールやライブラリ（例: Redux, Next.js, Styled Componentsなど）を組み合わせて使用することは自由
- TypeScriptを利用する
- 要件をみたせばデザインなどは自由
13 Slider
問題
画像のスライダー実装
目的
WEBサイトで利用されることが多いSliderをReact、Next環境で実装してみる
達成条件
- 次へ、前へボタンがある
- ボタンを押すと次の画像に切り替わったり、前の画像に切り替わったりする。
実際に解いてみた
利用技術
React(19.0.0)
TypeScript(5.0)
Next.js(15.3.1)
Tailwindcss(4.0)
swiper(11.2.7)
Vercel
解答時間 2時間
実はスライダーのライブラリとして最初はsplideというというライブラリを使用していたのですが、self is not definedというエラーが発生し苦戦して解決に長時間かかりそうだったのでswiperを使用しました。
ちなみに上記エラーはSSRで作成している時にselfを使用すると見つからないよっていうエラーらしく、SSRを無効かしたりするとエラーは解決するらしいです。（自分はそれがなかなかできなかった）
リンク