JavaScript

JavaScriptの非同期について理解する!【Promise、async / await】

JavaScriptを勉強していくと突き当たる壁として非同期処理の理解があるかと思います。わたしもぶち当たり → 分からかないから放置していると、またぶち当たり、を繰り返していくうちに覚えていきました…

GatsbyJSで生成したサイトにAlgoliaでサイト内検索を実装する方法

Algoliaを使ってGatsbyJSで生成したサイト内の検索を実装する方法です。 GatsbyJSで生成されたサイトは静的なHTMLサイトとなるので、動的なサイト内検索などを行うことができません。 …

超シンプルなコードからReactの動きとJSX、Babelの関係を理解しよう

ReactはFacebook社が開発したjavaScripのフレームワークです。WordPressのGutenbergで使われている技術として個人的には馴染みがあります。 公式は以下です。丁寧すぎるく…

スクロールが特定のエリアに入ったかどうかを検知するjQuery

スクロール時に特定のエリアに入ったかどうかを検知するためのjQueryの書き方です。 背景色とのコントラスト比で色を追従するアイテムの色を変更したい場合や、特定のエリアのみ表示するようなアイテムを作る…

スマホのみ電話番号をリンクにするJavaScript

スマホのみ電話番号をリンクにするJavaScriptの書き方の紹介です。PCページに電話リンクがあると邪魔になるケースのほうが多いと思います。 電話リンクを付けていても、PC時(スマホ以外)では無効化…

【jQuery】fixedで固定したフローティングアイテムをフッターの上で止める方法

フローティングアイテムをフッターの上で止める方法です。フッターと色が被ったりしてフッター上で止めるという実装もたまにやりたくなります。 jQueryを使ってフッターの高さやスクロールの位置をゴリゴリと…

要素をクリックした時の処理をjQueryで制御する方法【on / off】

ある要素をクリックされた時の挙動をjQueryで制御することはよくあります。1枚のLPページから、コーポレートサイトまで、サイトの形態は関係なく、ページ上で(遷移なしに)動的に動かしたい場合によく登場…

画像をポップアップ風に拡大表示できるライトボックスのJavaScriptライブラリ

画像を手軽にポップアップで拡大表示させることができるjavaScriptのライブラリを紹介します。一般的にこのような仕組みのことを「ライトボックス」と読んだりします。 この記事ではMITライセンスでサ…

パララックスには色んな種類がある!3パターンの実装例を紹介

パララックスって言葉は聞いたことあるけど、具体的にどういう動きすればパララックスなのか分からないって方は意外といるかもしれません。 ちょっとの前のわたしはセクションが重なる紙芝居風の動きをするのがパラ…

ヘッダー固定でページ内リンクをページ遷移で指定した時のズレを解消するJavaScript

ヘッダー固定にしていると頻発する問題として、「ページ内リンク先の位置がズレる!」があると思います。ズレるというか、ほとんどの場合は固定したヘッダーに隠れますね。 同じページ内でのページ内リンクだったら…