【2024年版】Viteプロジェクトの環境変数設定
モダンなフロントエンド開発において、環境変数の適切な管理は開発効率とセキュリティの両面で重要な要素となっています。特にViteを使用したプロジェクトでは、開発環境（development）、検証環境（staging）、本…
JavaScriptJavaScriptJavaScript
JavaScript
JavaScriptReact Testing LibraryとJestを使ってカスタムフックのテストコードを書いてみる
Reactを使って開発をしていると、役割を分割するためにカスタムフックを書く場面があるかと思います。 今回はそのカスタムフックの簡単なテストコードをReact Testing LibraryとJestを使って書いてみます…
JavaScriptJavaScriptで作るマウスホバーで開閉するドロップダウンメニューの作り方
今回はよくグローバルナビなどで使われているドロップダウンメニューをJavaScriptで実装していきます。 jQueryで実装した記事はたくさんありますが、JavaScriptを使って実装した記事は少なかったので、備忘録…
JavaScript【jQuery】スクロールに合わせてヘッダーサイズを変化させる
今回はスクロールに合わせてヘッダーサイズを変化させる実装を紹介します。 前回はヘッダーを単純に固定させる方法を紹介しました。 ヘッダーを固定で表示させたい時、高さが大きいと見える範囲が狭まりユーザーに不便な思いをさせてし…
JavaScriptjQueryで切り替えタブの作り方
今回はページを遷移せず、jQueryでタブの切り替えを行う実装を紹介します！ まずはデモページでこれから作るものを確認します。 デモサイト 【切り替えタブの作り方】HTML編 解説です。（わかる人は読み飛ばしOK） まず…
JavaScriptjQueryを使ったパララックスの作り方
パララックス（parallax）は直訳すると視差という意味です。 スクロールすると同時に次のコンテンツが覆いかぶさるような、不思議な動きをし、奥行きやストーリー性を出してくれる効果があります。 今回はそんなパララックスサ…
JavaScriptサイトを開いた時にロゴがふわっとフェードインする方法
サイトを開いた時に、いきなりトップページが表示されるのではなく、まずはロゴがふわっとフェードインしてからトップページが表示されるサイトがありますよね。 美容サロンや旅館のサイトでよく使われていて、優しく柔らかい印象を与え…
JavaScript【slick】複数枚一気にスライドさせる方法
今回はECサイトなどでよく見かける、複数商品を一気にスライドさせる方法を紹介します。 世の中には様々なスライダーのプラグインがありますが、今回はその中でも最も汎用性が高く、オプション設定も豊富な「slick（スリック）」…
JavaScript右側から出てくるハンバーガーメニューの作り方
画面右上の三本線のアイコンをクリックしたら、右側からシュッとメニューが出てくる作りにします。 まずはデモサイトを見てみましょう。 デモサイト いつもどこから手をつけていいのか迷ってしまうので手順をつけて説明していきます。…
JavaScript画面中央に配置するモーダルウィンドウの作り方
モーダルウィンドウとは、会員登録ボタンを押した時や、画像を押した時、エラーを知らせる時などにポップアップで表示されるものをモーダルウィンドウといいます。 プラグインもありますが、今回はjQueryを使ってモーダルウィンド…
プロフィール
