Next.js でのエラー Module not found: Can't resolve 'fs' の対処方法
Next.js で次のようなエラーが出たときの対処方法についてです。 確認時のバージョン Node.js 16.x Next.js 12.x / 11.x 問題 Next.js を実行すると（＝ や を実行すると）次のメッセージを含むエラーが出て処理が途中で止まってしまい…
JavaScript
Gatsby でパンくずリストを作る方法
Node.js ベースの SSG のひとつ Gatsby でパンくずリストを実装する方法についてかんたんにまとめました。 私は Gatsby で実装しましたが、基本的な考え方は他の SSG でも同じと思いますので他の SSG を使う方にも参考になるかもしれません。 対象バージ…
Cypress で特定のテストだけ実行する方法
Node.js のテスティングライブラリ Cypress で特定のテストだけを実行する方法についてです。 確認時のバージョン Node.js Cypress ファイル単位で絞り込む方法とファイル内のケース単位で絞り込む方法の 2 つの方法があります。 ファイルで絞り込む …
Docker Compose の bind mounts から node_modules を除外する方法
Docker Compose において bind mounts から Node.js のパッケージ格納ディレクトリである を除外する方法についてです。 主な使いどころとしては、開発環境において「 bind mounts を利用したいが ディレクトリはビルド時以外は触らない場…
Cypress のテストで Basic 認証をパスする方法
Node.js のテスティングライブラリ Cypress のテストで Basic 認証をパスする方法についてです。 確認時のバージョン 動作確認に使用したバージョンは次のとおりです: Node.js Cypress 1. とりあえず Basic 認証をパスする とりあえず …
Express アプリのテストの書き方
Node.js のフレームワーク Express を使ったウェブアプリケーション開発における自動テストの書き方をかんたんにまとめました。 利用ツール 今回は React ベースのプロジェクトでよく使われる Jest をテストフレームワークとして使います。 Node.js 16 …
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 で使われる と の違いについてです。 両者には次の違いがあります。 意味 例 React エレメント React エレメントタイプ 関係としては がインスタンスで がクラスという捉え方でよいようです。 尚、確…
axios で reCAPTCHA のレスポンストークンの検証を行う方法
JavaScript のライブラリ axios で reCAPTCHA のレスポンストークンの検証を行う方法をかんたんにまとめます。 reCAPTCHA は一般に次の 3 ステップで利用するものですが、今回はこのうちの 3 ステップめのサーバーサイドにおける処理が対象です。 （…
React Context API と useContext() の使い方
フロントエンドフレームワーク React の Context API と の使い方についてまとめました。 ウェブ上で見つかる Context API と についての説明は、読者にクラスコンポーネントの知識があることを前提としているものが多いようですが（私が見たものがたまたま…
JavaScript で File オブジェクトの画像のサイズを取得する方法
JavaScript で オブジェクトとして保持された画像ファイルのサイズ（幅・高さ）を取得する方法についてです。 Node ではなくクライアントサイドの JavaScript でのお話です。 早速結論ですが、 オブジェクトを生成して にそのファイルの中身をセットし、 …
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 の比較（ 2020 年 5 月時点）
この記事は 2020 年時点の古い記事です。現在は状況が大きく異なっているためご注意ください。 最近 React ベースのフレームワークである Next.js と Gatsby を使っています。 ある程度客観的に比較できるだけの知識がたまったと思うので、 Next.js と G…
React の state hook で array を更新しても再描画がされない問題
JavaScript のフレームワーク React に関する小ネタです。 掲題のとおり「 state hook で array を扱っているときに、 array を更新してもコンポーネントの再描画が起こらない」という問題についてです。 今回動作確認に使った React のバージ…
Gatsby で gatsby-theme-blog を使うときの tips
Gatsby 公式のブログ用テーマ を使うときの tips 集です。 追記 2020/07/29: この説明は のバージョン 系に対するものです。 2020 年 7 月にリリースされた にはあてはあまらない部分もありますのでご注意ください。 Gatsby の theme…
JavaScript の formdata イベントのまとめ
JavaScript （以下 JS ）の イベントについて簡単にまとめました。 イベントとは イベントは HTML のフォーム（ ）の送信処理の直前に発火するイベントです。 従来の イベントよりも後のタイミングで発火します。 セットされたイベントハンドラは同期的にディ…
JavaScript で日本語の変換確定とその他のリターンを識別する方法
HTML のテキストフィールドやテキストエリアで、日本語の変換を確定させるためのリターンキー（エンターキー）入力とその他のリターンキー入力とを JavaScript で識別する方法についてです。 早速結論ですが、イベント と を使えば OK です。 イベント は変換処理が…
JavaScript の配列の操作まとめ
JavaScript の配列の基本的な操作方法についてまとめました。 仕事で JavaScript （以下 JS ）でコードを書く機会があるのですが、触る頻度が低いため基本的な処理の仕方を覚えて忘れてまた覚えてを繰り返しています。 特に配列については他の言語でも使い方が似ている…
Modern JS Cheatsheet リポジトリを翻訳しました
ECMAScript の ES6 あたりのポイントがわかりやすくまとめられた GitHub リポジトリ「 Modern JS Cheatsheet 」を日本語に翻訳しました。 翻訳の PR をオリジナルのリポジトリにマージしてもらえたので、以下のページで日本語版を閲覧することが…
ログインが必要なサイトのページをまとめてキャプチャする方法
ログイン（認証）が必要なサイトのページを自動的に一括でキャプチャする方法についてです。 すぐに結論に行きますが、 Selenium や CasperJS （ PhantomJS ）のキャプチャ機能を使えば認証が必要なサイトでもかんたんにキャプチャを取得することが可能です。 Se…
jQuery の matchHeight プラグインの使い方サンプル
jQuery のプラグイン が便利です。 横並びに並んだ要素の高さを自動的にいい感じに合わせてくれます。 jquery.matchHeight.js - a responsive equal heights plugin for jQuery デモはこちら。 jquery.m…
jQuery で対象要素の存在を確かめる方法
jQuery で や といった形で 関数を使ったときに対象要素の存在をチェックしたいケースがあります。 対象要素をチェックするには プロパティを使うのがよさそうです。 参考 javascript - How do you check if a selector matc…
jQuery で特定の要素が表示されているかどうかをチェックする方法
jQuery で特定の要素が現在画面に表示されているかどうかを確認する方法について。 結論としては メソッドに引数 と渡す形がお手軽かつ確実です。 現在の表示状態に応じて処理を切り替えたい場合などに便利です。 参考 javascript - Checking if an e…
JavaScript でページ読み込み時にページをふんわりと表示させる方法
JavaScript を使って HTML ページの読み込み時にページをふんわりとフェードインで表示させる方法をご紹介します。 フェードインで表示させるには、ページの opacity をいったん 0 （透明）にしておいてその後にアニメーションで 1 （不透明）に戻していきます。 …