gotohayato.com

太陽(ライトモード)

タグ JavaScript の記事

Next.js でのエラー Module not found: Can't resolve 'fs' の対処方法

Next.js で次のようなエラーが出たときの対処方法についてです。 確認時のバージョン Node.js 16.x Next.js 12.x / 11.x 問題 Next.js を実行すると(= next dev や next build を実行すると)次のメッセージを…

Gatsby でパンくずリストを作る方法

Node.js ベースの SSG のひとつ Gatsby でパンくずリストを実装する方法についてかんたんにまとめました。 私は Gatsby で実装しましたが、基本的な考え方は他の SSG でも同じと思いますので他の SSG を使う方にも参考になるかもしれません。 対象バー…

Cypress で特定のテストだけ実行する方法

Node.js のテスティングライブラリ Cypress で特定のテストだけを実行する方法についてです。 確認時のバージョン Node.js v17.3.1 Cypress 9.2.1 ファイル単位で絞り込む方法とファイル内のケース単位で絞り込む方法の 2 つの方法がありま…

Docker Compose の bind mounts から node_modules を除外する方法

Docker Compose において bind mounts から Node.js のパッケージ格納ディレクトリである node_modules を除外する方法についてです。 主な使いどころとしては、開発環境において「 bind mounts を利用したいが node_…

Cypress のテストで Basic 認証をパスする方法

Node.js のテスティングライブラリ Cypress のテストで Basic 認証をパスする方法についてです。 確認時のバージョン 動作確認に使用したバージョンは次のとおりです: Node.js 16.5.0 Cypress 8.0.0 1. とりあえず Basic 認…

Express アプリのテストの書き方

Node.js のフレームワーク Express を使ったウェブアプリケーション開発における自動テストの書き方をかんたんにまとめました。 利用ツール 今回は React ベースのプロジェクトでよく使われる Jest をテストフレームワークとして使います。 Node.js 1…

Google Chat に自動投稿する方法

Google Chat のルームにプログラムで自動投稿する方法についてです。 事前に想像したよりかんたんであっけなかったですが、また次久しぶりにやるときに少し時間がかかるかもしれないので、かんたんに方法をまとめておきます。 Google Chat をプログラムから利用するパター…

Node.js のパッケージをまとめて最新版にアップデートする方法

Node.js のパッケージをまとめて最新版にアップデートする方法についてです。 npm と Yarn を使った方法をそれぞれ説明します。 npm 記事執筆時点の npm の最新版 7.x には、パッケージをまとめて最新版にアップデートする機能は備わっていません。 代わりに …

React でウィンドウサイズが小さいときだけスライドショー表示をする方法

ピンポイントな小ネタですが、 React で「ウィンドウサイズが大きいときは画像をそのまま並べて、ウィンドウサイズが小さいときは画像をスライドショー表示する方法」についてです。 今回はスライドショーの例ですが、この方法は「画面幅によって出力コンポーネントを切り替える方法」として…

React の PropTypes.element と PropTypes.elementType の違い

JavaScript のフレームワーク React で使われる PropTypes.element と PropTypes.elementType の違いについてです。 両者には次の違いがあります。 意味 例 PropTypes.element React エレメント …

axios で reCAPTCHA のレスポンストークンの検証を行う方法

JavaScript のライブラリ axios で reCAPTCHA のレスポンストークンの検証を行う方法をかんたんにまとめます。 reCAPTCHA は一般に次の 3 ステップで利用するものですが、今回はこのうちの 3 ステップめのサーバーサイドにおける処理が対象です。 (…

React Context API と useContext() の使い方

フロントエンドフレームワーク React の Context API と useContext() の使い方についてまとめました。 ウェブ上で見つかる Context API と useContext() についての説明は、読者にクラスコンポーネントの知識があることを前…

JavaScript で File オブジェクトの画像のサイズを取得する方法

JavaScript で File オブジェクトとして保持された画像ファイルのサイズ(幅・高さ)を取得する方法についてです。 Node ではなくクライアントサイドの JavaScript でのお話です。 早速結論ですが、 Image オブジェクトを生成して src …

Next.js を使った Jamstack なブログの始め方

今回は Next.js を使って Jamstack なブログを作る方法を紹介します。 ゴール 本チュートリアルでは最終的に以下の構成のブログサイトを作ります。 ページ構成 「フロントページ」「投稿一覧ページ」「投稿詳細ページ」の 3 つだけのシンプルな構成です。 投稿の管理方法…

Gatsby 公式のプラグイン・テーマまとめ

React ベースの静的サイトジェネレータ( SSG )である Gatsby が公式に提供するプラグインとテーマについてまとめました。 正確には、公式の monorepo リポジトリ ↓ で管理されているプラグインとテーマを一覧にしました。 記事執筆時点で monorepo…

Gatsby で Google Analytics Reporting API を使って人気の投稿一覧を作成する方法

今回は静的サイトジェネレーターの Gatsby を使ったプロジェクトにおいて Google Analytics Reporting API v4 を使って投稿一覧を作成する方法を紹介します。 前提 今回は 2020 年時点で最新の Reporting API v4 を使います。…

Next.js と Gatsby の比較

最近 React ベースのフレームワークである Next.js と Gatsby を使っています。 ある程度客観的に比較できるだけの知識がたまったと思うので、 Next.js と Gatsby の比較情報をまとめてみました。 これからどちらを使うか・学ぶか迷っている方のご参考に…

React の state hook で array を更新しても再描画がされない問題

JavaScript のフレームワーク React に関する小ネタです。 掲題のとおり「 state hook で array を扱っているときに、 array を更新してもコンポーネントの再描画が起こらない」という問題についてです。 今回動作確認に使った React のバージ…

Gatsby で gatsby-theme-blog を使うときの tips

Gatsby 公式のブログ用テーマ gatsby-theme-blog を使うときの tips 集です。 追記 2020/07/29: この説明は gatsby-theme-blog のバージョン 1.x 系に対するものです。 2020 年 7 月にリリースされた …

JavaScript の formdata イベントのまとめ

JavaScript (以下 JS )の formdata イベントについて簡単にまとめました。 formdata イベントとは formdata イベントは HTML のフォーム( <form> )の送信処理の直前に発火するイベントです。 従来の submit …

JavaScript で日本語の変換確定とその他のリターンを識別する方法

HTML のテキストフィールドやテキストエリアで、日本語の変換を確定させるためのリターンキー(エンターキー)入力とその他のリターンキー入力とを JavaScript で識別する方法についてです。 早速結論ですが、イベント compositionstart と compos…

JavaScript の配列の操作まとめ

JavaScript の配列の基本的な操作方法についてまとめました。 仕事の一環で JavaScript (以下 JS )のコードを書く機会があるのですが、なかなか頻度・量が少ないため、組み込み型の基本的な操作方法を覚えては忘れ、覚えては忘れを繰り返しています。 配列については…

Modern JS Cheatsheet リポジトリを翻訳しました

ECMAScript の ES6 あたりのポイントがわかりやすくまとめられた GitHub リポジトリ「 Modern JS Cheatsheet 」を日本語に翻訳しました。 翻訳の PR をオリジナルのリポジトリにマージしてもらえたので、以下のページで日本語版を閲覧することが…

ログインが必要なサイトのページをまとめてキャプチャする方法

ログイン(認証)が必要なサイトのページを自動的に一括でキャプチャする方法についてです。 すぐに結論に行きますが、 Selenium や CasperJS ( PhantomJS )のキャプチャ機能を使えば認証が必要なサイトでもかんたんにキャプチャを取得することが可能です。 Se…

jQuery の matchHeight プラグインの使い方サンプル

jQuery のプラグイン matchHeight が便利です。 横並びに並んだ要素の高さを自動的にいい感じに合わせてくれます。 jquery.matchHeight.js - a responsive equal heights plugin for jQuery デモは…

jQuery で対象要素の存在を確かめる方法

jQuery で $('#some-id') や $('.some-class') といった形で $() 関数を使ったときに対象要素の存在をチェックしたいケースがあります。 対象要素をチェックするには length プロパティを使うのがよさそうです。 参考 ja…

jQuery で特定の要素が表示されているかどうかをチェックする方法

jQuery で特定の要素が現在画面に表示されているかどうかを確認する方法について。 結論としては is() メソッドに引数 :visible と渡す形がお手軽かつ確実です。 現在の表示状態に応じて処理を切り替えたい場合などに便利です。 参考 javascript - …

JavaScript でページ読み込み時にページをふんわりと表示させる方法

JavaScript を使って HTML ページの読み込み時にページをふんわりとフェードインで表示させる方法をご紹介します。 フェードインで表示させるには、ページの opacity をいったん 0 (透明)にしておいてその後にアニメーションで 1 (不透明)に戻していきます。 …

© 2022 gotohayato.com
サイトについてタグアーカイブメッセージを送る