React RouterのuseNavigateとは
今回の記事では、React におけるルーティングについて解説していきます。 React 本体にはルーティング機能が組み込まれていないため、どのようにページ遷移や URL の管理を行うのか疑問に思う方もいると思います。 そこで今回は、Reac... useNavigateとは useNavigateはReact Routerのフックで、Reactの関数コンポーネント内でページ遷移を制御するために使われます。 useNavigateを呼び出すと、ページ遷移を行うための関数（navigate関数）が返されます。 このnavigate関数に移動先のパスを渡すことで、アプリケーション内でのページ遷移を実行することができます。 基本的な使い方 useNavigateの基本的な使い方を説明します。 import { useNavigate } from 'react-router-dom'; funct
【CSS】まだホバー時のスタイルを :hover だけで指定してるの？
はじめに結論から ホバースタイルは、 :hover だけで指定するのではなく、次のように指定しましょう！ @media (hover: hover) { /* リンクの場合 */ a:any-link:hover { } /* ボタンの場合 */ button:enabled:hover { } /* 特定できない場合 */ .button:where(:any-link, :enabled, summary):hover { } } ポイント 1 マウスのときだけホバースタイルを当てる :hover 擬似クラスで指定したスタイルは、タッチデバイスの場合フォーカス状態で適用されてしまいます。 つまり、タッチしたあとのスタイルがずっとホバースタイルのままになってしまいます。 これは意図と合わないため、マウスで操作しているかどうかを区別してスタイルを当てる必要があります。 マウス（正確には、ホ
CSSアニメーションの実装もこれで簡単！ さまざまなプロパティの値をトゥイーンさせるスクリプト -ScrollBtween
Webページ上のあらゆるDOM要素に対して、CSSアニメーションを実装できるスクリプトを紹介します。 実装は簡単です、CSSのプロパティの値を「#fff to #000」「0 to 100」のように記述して、#fffから#000にトゥイーンさせ、0から100にトゥイーンさせます。 スクロールで背景色を変化させたり、ぼやけた画像をくっきりと表示したり、スクロール位置に基づくプログレスバーやパララックスも簡単に実装できます。 ScrollBtween ScrollBtween -GitHub ScrollBtweenの特徴 ScrollBtweenのデモ ScrollBtweenの使い方 ScrollBtweenの特徴 ScrollBtweenは、Webページのドキュメント（任意のDOM要素）をスクロール位置に関連してCSSのさまざまなプロパティの値を変化（トゥイーン）させるスクリプトです。ネ
URLクラスを使って、クエリストリングを簡単に扱う | バシャログ。
みなさん。こんにちは。 久しぶりの投稿となります。 今回はとある案件でURLにクエリストリングを付与したり削除したりという機能を開発していた時、URLのクエリ部分をオブジェクトにしたり、そのオブジェクトをクエリストリングに戻したりという処理がすごく面倒だったので、 クエリストリングの操作が楽になるライブラリを探していた所、JavaScript(ES6以降)標準で入っているURLクラスで簡単にいったので記事にしてみました。 今回は、チェックボックスにチェックがついたらnewKeyというパラメーターがURLに追加されるようにしようと思います。 デモ 画面収録 2021-04-14 16.56.24.mov HTML <!DOCTYPE html> <html lang="ja"> <head> <meta charset="UTF-8"> <title>URLSearchParamsを使ってみ
【JavaScript】insertAdjacentHTMLでHTML要素を追加する【挿入位置指定】
text 「text」にはHTMLやXMLとして挿入することができる文字列を指定します。 下記はinsertAdjacentHTMLのpositionに各値を指定して実行した際の挿入場所を表したものです。コメントの位置に「text」に記述したHTML要素が挿入されます。 <!-- beforebegin --> <div> <!-- afterbegin --> intotheprogram <!-- beforeend --> </div> <!-- afterend --> insertAdjacentHTMLでHTML要素を追加する では、実際に各「position」にHTML要素を追加してみます。下記のHTML要素に対して、段落のタグを追加します。 <div id="box"> <h1>Title</h1> </div> 各「position」を指定した際の実行結果も記載しておりま
配列を征する者はJSを制す。JavaScriptのスマートな配列操作テクニック - ICS MEDIA
JavaScriptでコードを記述する際、配列の各要素について処理をするケースは頻出します。開発の現場で配列操作の処理を見ていると、次のようなケースがよくあります。 配列の非破壊の望まれる場面が増えているが、元の配列を破壊操作している filter()やevery()など配列のメソッドで書けるところを、forEach()メソッドやfor ... of文を使ってコードを記載し、冗長になっている 記述しても効果のないArray.from()を使用している コード的には問題なく、アプリケーションは意図的に動作しているかもしれません。しかし、冗長な記述は可読性が低下し、予期せぬバグを誘発する可能性があるでしょう。 本記事では、配列操作でよく見かける冗長な記述を、簡潔な記述で置き換える方法について解説します。 本記事で紹介するJavaScriptの配列操作のチートシートを用意したので、まとめて読みた
PlainDraggable - SVG/DOMのドラッグ&ドロップライブラリ MOONGIFT
Webアプリケーションが多機能になるにつれて、ローカルアプリケーションライクな操作が求められるようになっています。例えばドラッグ&ドロップはローカルアプリケーションであれば良くある操作と言えます。 そんなドラッグ&ドロップをスムーズに行えるライブラリがPlainDraggableです。 PlainDraggableの使い方 ベジュ曲線的なデモです。 グリッドを効かせたドラッグを行うデモです。 スナップする時に、スムーズに動くこともできます。 特定のDOM内には入らないように指定できます。 応用すると、二つのノード、それぞれが入れない場所を指定できます。 ソートにも使えます。 PlainDraggableはDOMだけでなく、SVGに対しても利用できます。ドロー系のアプリケーションであったり、簡易的なゲームなどでも使えそうです。ソートでも使えるので、様々な場面で利用できそうです。 PlainD
JavaScriptのArrayを知る。大きな目標への小さな一歩 〜Array.prototype.splice編〜 | 株式会社LIG(リグ)｜DX支援・システム開発・Web制作
JavaScriptのArrayを知る。大きな目標への小さな一歩 〜Array.prototype.splice編〜 こんにちは、フロントエンドエンジニアのザワです。 突然ですが…… 気持ち、切り替えられていますか？ 私は季節の変わり目に新しい自分を迎える準備として断捨離を行います。そして、気分を一新するために新しい洋服を購入します。頭の先から足の先まで。 要するに、帽子や靴などを含む身にまとうものすべてを新しくします。すると、手っ取り早くテンションを上げられるので、最近3年くらいはこのスタンスでいます。あげぽよです。ただし、異常に気に入るアイテムがあった場合、次の年に同じものが手に入るとは限らないのでタンスの奥にしまうこともあります。 「断捨離ってないじゃないか！」 「例外のルールがあるなんてエンジニアとして失格じゃないか？」 そんな声が聞こえてきますが、厳密なルールというのは崩れると弱
JavaScriptの配列の使い方まとめ。要素の追加,結合,取得,削除。 - Qiita
はじめに ここではJavaScriptの配列である、Arrayの基本的な使い方をまとめました。主な内容としては、要素の追加、結合、取得、削除となります。 JavaScriptの最新情報などの技術系のみをつぶやくTwitterをはじめました。 Twitter: @takeharumikami RSSはこちら RSS: http://qiita.com/takeharu/feed Feedly: フォロー
ライブラリを使わない素のJavaScriptでDOM操作 - Qiita
jQueryやその他ライブラリを使わない、素のJavaScriptでのDOM操作関連をまとめてみました。 要素の検索 //id指定 document.getElementById('id'); //class指定 document.getElementsByClassName('class'); //タグ指定 document.getElementsByTagName('div'); //cssセレクタで指定 document.querySelector('#main .posts h1'); //最初の一つを取得 document.querySelectorAll('a'); //すべて取得 //親要素 element.parentNode; //子要素 element.firstElementChild; //最初の子要素 element.lastElementChild; //最後の
CSS変数を制御するJavaScriptスニペット
Result CSS変数を更新するJSスニペットです。べんり。 ※本コードは非依存のバニラJSです let root = document.documentElement; root.addEventListener("mousemove", e => { root.style.setProperty('--mouse-x', e.clientX + "px"); root.style.setProperty('--mouse-y', e.clientY + "px"); });css.mover { width: 50px; height: 50px; background: red; position: absolute; left: var(--mouse-x); top: var(--mouse-y); }html<div class="mover"></div>viaUpdati
ちょっとしたデータまとめにも便利！ Googleスプレッドシートで「GAS（Google Apps Script）」をつかってみよう | 株式会社LIG(リグ)｜DX支援・システム開発・Web制作
こんにちは、フロントエンドエンジニアのハルです。 最近、スプレッドシートでデータをまとめることにハマっています。特に、GASという便利なスクリプト言語を書くのがとても面白くて……。今回はそのGASについて、触り程度ですがご紹介したいと思います。 GAS(Google Apps Script)とは Javascriptベースのスクリプト言語で、Googleのサーバーでスクリプトを実行することができます。 Jvascriptを使える方なら、問題なく扱うことができるはず。このGASを使用すれば、Googleのスプレッドシート・ドキュメント・Gmailなどと容易に連携することが可能になります。今回はスプレッドシートの操作を行う方法を紹介しますが、「なんでもできそう」という気持ちになってもらえると思います。 ダイアログボックスをポップアップさせてみる 最初なので、まずはファイルを作成するところから紹
Google Apps Scriptを使ってメールの未読を一掃してみた
Google Apps Script(以下GAS)はGoogleドライブの各種データを自動的に処理する時に使えるサービスです。サーバーを用意する必要もなく、JavaScriptでコードを書くだけで実行できるため、かなり便利に使えます。今回は下のブログの記事を参考に、GASを使ってGmailの未読メールを全て既読にするというコードを実行してみます。 Google Apps ScriptでGmailの大量の未読を一掃する - ふくらみ http://fukurami.hatenablog.com/entry/2017/10/01/030917 受信トレイを見てみると、「8461」件の未読メールが溜まっているのが分かります。公式の方法でもこの未読メールを全て既読にすることはできますが、今回はGASを使用して行います。 まずは右上のメニューボタンから「ドライブ」を選択します。 左上にある「新規」を
スクロールのイベントをIntersectionObserverで快適に実装する最新の軽量JavaScriptライブラリ -Scrollama
Intersection Observerを利用したWebページが増えてきました。 IntersectionObserversは、ターゲット要素がブラウザのビューポートと呼ばれるページの表示領域と重なる（または交差する「Intersection」）量を計算するもので、主要なブラウザに実装されています。 どんなことができるかというと、コンテンツのスクロールに応じてサイドバーをぴたっと配置したり、ヘルプや広告を表示したり、まだ表示されていないコンテンツや画像を先読みさせたりできます。これらを実装するには面倒なJavaScriptが必要でしたが、今では非常に簡単に実装できます。 IntersectionObserverを使用して、スクロールに応じたさまざまなイベントを実装する最新の軽量JavaScriptライブラリを紹介します。 Scrollama -GitHub Intersection Ob
1
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
