gotohayato.com

月(ダークモード)
太陽(ライトモード)

タグ JavaScript の記事

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

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

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

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

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

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

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

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

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 年…

JavaScript の formdata イベントのまとめ

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

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

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

JavaScript の配列の操作まとめ

JavaScript の配列の基本的な操作方法についてまとめました。 仕事の一環で JavaScript (以下 JS…

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

ECMAScript の ES6 あたりのポイントがわかりやすくまとめられた GitHub リポジトリ「 Modern JS Cheatsheet 」を日本語に翻訳しました。 翻訳の PR…

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

ログイン(認証)が必要なサイトのページを自動的に一括でキャプチャする方法についてです。 すぐに結論に行きますが、 Selenium や CasperJS ( PhantomJS…

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

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

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

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

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

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

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

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


後藤隼人
ウェブサイト制作・ウェブアプリ開発やマーケティングをしています。
GitHub
© 2020 gotohayato.com
サイトについてタグアーカイブメッセージを送る