JavaScriptとCSSで同じ変数を使用する
アニメーションの時間など、同じ値をJavaScriptとCSSで扱いたいことがあります。 それぞれで変数で管理するでも問...
VanillaJSの記事一覧
JavaScriptのStrictモードを使ってみる
JavaScriptのStrictモード(厳格モード)について簡単に試してみます。...
iframe外からiframe内のスクロール位置を変更する
iframeを使って別ページを読み込んだ際に、そのiframeのスクロール位置をiframe外から制御したいということが...
canvasで画像をwebpに変換する
以前にcanvasの内容を画像に変換する記事を投稿しましたが、変換時のファイル形式でwebpを指定することもできるので、...
JavaScriptの実行タイミングについて
JavaScriptが実行されるタイミングとしては、大きく分けて以下の4種類あります。 直ぐに実行 DOMの読み込み完了...
簡易的なスライダーを実装する
サイト構築時にスライダー処理が必要な際はライブラリを使用することが多いですが、ライブラリを使用するほどでもない軽微なスラ...
フォーム内のbuttonタグで送信されないようにする
formタグ内でフォーム送信ボタンとは別にbuttonタグを配置したい場合に、クリックでフォームを送信しないようにする方...
変数の型や存在するかどうかなどを調べる
JavaScriptで変数の型や存在するかどうかなどを調べるパターンをいくつか試してみます。...
メガメニューのホバー時に表示するタイミングを遅らせる
ヘッダーにホバーで開閉するメガメニューを設置した際、アドレスバーからページ内コンテンツにカーソルを移動したタイミングなど...
input type=”number” の代わりの変換処理を実装する
inputタグのtype=”number”は入力内容を数値のみに制限することができますが、許容しない値だった場合にJav...
for…inとfor…ofを使ってみる
ループ処理を行うfor…inとfor…ofについて、それぞれ簡単に試してみます。...
VanillaJSでslideDownを実装する
jQueryのslideDown()やslideUp()のような挙動を、VanillaJSで実装してみます。...
SSL未対応の環境でClipboard APIが使用できない
Clipboard APIを使った実装を行った際、案件のテスト環境がSSL未対応(http)でうまく動作しないということ...
JavaScriptの配列についてまとめ
以前に配列の使い方についてまとめた記事を投稿しましたが、それ以降も配列関連の記事を投稿したり学んだりしているので、あらた...
JavaScriptでディープコピーをする
以前にJavaScriptで配列を値渡しでコピーする記事を投稿したことがありますが、今回はシャローコピー(Shallow...
JavaScriptで連番の入った配列を生成する
Array.from()メソッドを使って、連番の配列を生成する方法をメモ。...
JavaScriptで文字列からHTMLタグを除去する
JavaScriptで文字列からHTMLタグを除去する際、正規表現を使用しない方法を試してみます。...
JavaScriptのPromise・async・awaitを使ってみる
IEのサポートが終了になったので、JavaScriptのPromise・async・awaitの使い方を改めて試してみま...
URL APIを使ってみる
JavaScriptのURL APIを使って、URL文字列からURLオブジェクトの作成やURLパスの取得などを試してみま...
JavaScriptで履歴に残さないでリダイレクトする
JavaScriptでのリダイレクトで別ページに移動した際、ブラウザバックなどでリダイレクト元に戻らないようにする方法を...