JavaScript

JavaScriptでイベント(クリックやスクロール等)を登録する方法と主要イベントまとめ

JavaScriptでイベントを登録する方法です。jQuery時代は登録している意識があまりなかったかもしれませんが、JavaScriptの場合は意識的に登録しないとイベントとして動かすことができませ…

JavaScriptで親要素・子要素・兄弟要素の取得と追加や削除する方法まとめ

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ライセンスでサ…