Open16
Next.js / React Hooks学習帳
![hndr](https://res.cloudinary.com/zenn/image/fetch/s--dxoG2YGT--/c_limit%2Cf_auto%2Cfl_progressive%2Cq_auto%2Cw_70/https://storage.googleapis.com/zenn-user-upload/avatar/ee597938c3.jpeg)
library
react-scroll
navigationでページ内smoothScrollなどを作るときに有用
swiper.js
スライダーの有名ライブラリ。各種FW対応しておりReactコンポーネント化されているものを利用できる。
react-responsive
レスポンシブ対応のブレイクポイントをHooksを使って設定できる。
swiper.jsと組み合わせてブレイクポイント毎に画面表示枚数を変更するなどの対応が可能
TailwindCSSのBreakpoint
https://tailwindcss.com/docs/responsive-design#overview
![hndr](https://res.cloudinary.com/zenn/image/fetch/s--dxoG2YGT--/c_limit%2Cf_auto%2Cfl_progressive%2Cq_auto%2Cw_70/https://storage.googleapis.com/zenn-user-upload/avatar/ee597938c3.jpeg)
SVG
tsx内にSVGを書いた場合にconsoleでエラーが出るため kebab-case
を camelCase
に書き換える必要がある
![hndr](https://res.cloudinary.com/zenn/image/fetch/s--dxoG2YGT--/c_limit%2Cf_auto%2Cfl_progressive%2Cq_auto%2Cw_70/https://storage.googleapis.com/zenn-user-upload/avatar/ee597938c3.jpeg)
VSCode
![hndr](https://res.cloudinary.com/zenn/image/fetch/s--dxoG2YGT--/c_limit%2Cf_auto%2Cfl_progressive%2Cq_auto%2Cw_70/https://storage.googleapis.com/zenn-user-upload/avatar/ee597938c3.jpeg)
TailwindCSS
![hndr](https://res.cloudinary.com/zenn/image/fetch/s--dxoG2YGT--/c_limit%2Cf_auto%2Cfl_progressive%2Cq_auto%2Cw_70/https://storage.googleapis.com/zenn-user-upload/avatar/ee597938c3.jpeg)
Stylelint
![hndr](https://res.cloudinary.com/zenn/image/fetch/s--dxoG2YGT--/c_limit%2Cf_auto%2Cfl_progressive%2Cq_auto%2Cw_70/https://storage.googleapis.com/zenn-user-upload/avatar/ee597938c3.jpeg)
OGP
![hndr](https://res.cloudinary.com/zenn/image/fetch/s--dxoG2YGT--/c_limit%2Cf_auto%2Cfl_progressive%2Cq_auto%2Cw_70/https://storage.googleapis.com/zenn-user-upload/avatar/ee597938c3.jpeg)
lottie
カスタムアニメーション作成でAfterEffectsを使わない場合アニメーションは限られるがlottiefiles経由で作れる。
react-lottie
react向けのlottieライブラリ。(3年ぐらいメンテされてない)
lottie-react
lottie-react-web
![hndr](https://res.cloudinary.com/zenn/image/fetch/s--dxoG2YGT--/c_limit%2Cf_auto%2Cfl_progressive%2Cq_auto%2Cw_70/https://storage.googleapis.com/zenn-user-upload/avatar/ee597938c3.jpeg)
SSG
![hndr](https://res.cloudinary.com/zenn/image/fetch/s--dxoG2YGT--/c_limit%2Cf_auto%2Cfl_progressive%2Cq_auto%2Cw_70/https://storage.googleapis.com/zenn-user-upload/avatar/ee597938c3.jpeg)
microcms
![hndr](https://res.cloudinary.com/zenn/image/fetch/s--dxoG2YGT--/c_limit%2Cf_auto%2Cfl_progressive%2Cq_auto%2Cw_70/https://storage.googleapis.com/zenn-user-upload/avatar/ee597938c3.jpeg)
環境変数
![hndr](https://res.cloudinary.com/zenn/image/fetch/s--dxoG2YGT--/c_limit%2Cf_auto%2Cfl_progressive%2Cq_auto%2Cw_70/https://storage.googleapis.com/zenn-user-upload/avatar/ee597938c3.jpeg)
SWR
![hndr](https://res.cloudinary.com/zenn/image/fetch/s--dxoG2YGT--/c_limit%2Cf_auto%2Cfl_progressive%2Cq_auto%2Cw_70/https://storage.googleapis.com/zenn-user-upload/avatar/ee597938c3.jpeg)
getStaticProps
![hndr](https://res.cloudinary.com/zenn/image/fetch/s--dxoG2YGT--/c_limit%2Cf_auto%2Cfl_progressive%2Cq_auto%2Cw_70/https://storage.googleapis.com/zenn-user-upload/avatar/ee597938c3.jpeg)
ConditionalWrapper
![hndr](https://res.cloudinary.com/zenn/image/fetch/s--dxoG2YGT--/c_limit%2Cf_auto%2Cfl_progressive%2Cq_auto%2Cw_70/https://storage.googleapis.com/zenn-user-upload/avatar/ee597938c3.jpeg)
context API
![hndr](https://res.cloudinary.com/zenn/image/fetch/s--dxoG2YGT--/c_limit%2Cf_auto%2Cfl_progressive%2Cq_auto%2Cw_70/https://storage.googleapis.com/zenn-user-upload/avatar/ee597938c3.jpeg)
React.FC
![hndr](https://res.cloudinary.com/zenn/image/fetch/s--dxoG2YGT--/c_limit%2Cf_auto%2Cfl_progressive%2Cq_auto%2Cw_70/https://storage.googleapis.com/zenn-user-upload/avatar/ee597938c3.jpeg)
タグ変換
const Value = (value || "").split(/(\n)/).map((item, index) => {
return <>{item.match(/\n/) ? <br /> : item}</>;
});