HTML/CSS/JavaScript

スポンサーリンク
HTML/CSS/JavaScript

puppeteer + jsdomでTableを取得して加工する

puppeteer + jsdomでTableを取得して加工する方法についてのメモです。 例 例として、以下の気象庁のページを使います。 上のぺージを開くと、以下のような画面が開くのですが ここではtableを取得して、赤枠部分だけが表示さ...
HTML/CSS/JavaScript

インラインのscriptとdefer属性

インラインスクリプトには、defer属性は使えません。 例えば以下のようには書けません。 <script src="a.js" defer></script> <script src="b.js" defer></script> <scri...
HTML/CSS/JavaScript

JavaScriptでタイマー経過後に音を鳴らす【ブックマークレット】

「任意の時間が経過したあとに音が鳴るようにするブックマークレットがほしいなぁ」と思って作りました。 以下のリンクをブックマークレットに追加するだけです。 以下、ソースです。 全体: スコープを汚さないために、(function(){})()...
HTML/CSS/JavaScript

puppeteerで任意のJavaScriptコードを実行する

evaluateメソッドを使うと、任意のJSコードを実行できます。 以下は、Googleのトップページを開いた後にalertを表示する例。 const puppeteer = require("puppeteer"); const main...
HTML/CSS/JavaScript

JavaScriptのオブジェクトとJSONの違い

基本的には同じだけど、以下の3点が違う。 JSON 違い JavaScriptのオブジェクト 書けない 末尾にカンマ( , )を書ける? 書ける 使えない キーにダブルクォーテーション以外使える? 使える ある キーを宣言するときにクォーテ...
HTML/CSS/JavaScript

scriptタグのasync/deferの使い分け

htmlの<script>タグってどこに書けばいいんだろう?と思って、調べた結果メモ。 以下の図がわかりやすい。 引用: 1.headタグの中に書く 以下のように書く方法。 <!DOCTYPE html> <html lang="en"> ...
HTML/CSS/JavaScript

async/awaitとreduceの使い方

詰まったのでメモ。 同期 以下のように書くと .reduce((acc, v) => acc + v, 0); //6 「1,2,3という配列の要素を1つずつ順番に足していく」という処理になります。 これは超基本的なので、すんなり理解できる...
HTML/CSS/JavaScript

Dotenvが動かなかった → ファイル名を勘違いしていた

dotenvを使って、envファイルから環境変数を設定しようとした。 以下のようなenvファイルをプロジェクトのルートに作って KEY1=おはようございます KEY2=こんにちは 以下のような.jsファイルを作って実行しても require...
HTML/CSS/JavaScript

Xサーバーでpuppeteerを動かせなかった

我が家は図書館を頻繁に利用するのですが、1つ不満なことがありました。 それは「誰がどの本を予約していて今どの本を借りているのか」を見るために、わざわざ各々のIDとPWでログインしていちいち確認しないといけない点です。 我が家は本を借りまくり...
HTML/CSS/JavaScript

【違い】Promise.allSettled、Promise.all、Promise.any、Promise.race

違いが分からなかったので調べた結果メモ。 Promise.all: →すべてが resolveされるまで続けるが、1つでも rejectされると終了する Promise.allSettled: →すべてがresolveもしくはrejectさ...
HTML/CSS/JavaScript

Promise.allの順番

自分用のメモ。 呼び出される順 const a = new Promise(function (resolve, reject) { console.log("a"); }); const b = new Promise(function ...
HTML/CSS/JavaScript

オブジェクトの値同士をマージ+足し算する【JavaScript】

ググっても情報がなかったのでメモしておきます。 1.異なるキーがないとき 例えば、以下のような同じキーを持つ2つのオブジェクトを足し算&マージして const a = { 1: 100, 2: 200, 3: 300, }; const b...
HTML/CSS/JavaScript

map,filter,reduce,some,every,foreach,findの違い【JavaScript】

「こういう場合ってどれを使ったら良いんだろう」と毎回迷うので まとめときます。 違い map すべての要素に対して処理をして、すべての要素を返す reduce すべての要素に対して処理をして、1つの要素を返す some すべての要素のうち1...
HTML/CSS/JavaScript

viewportとは?device-widthと実際の解像度との違い

HTMLで絶対に使われる以下の意味を知らなかったので、調べた結果メモ。 <meta name="viewport" content="width=device-width, initial-scale=1.0" /> 「そもそもviewpo...
HTML/CSS/JavaScript

implements/interface/type/extendsの違い【TypeScript】

自分用のメモ。 interface:オブジェクト、クラス、関数の型のみを宣言する type:どんな型でも宣言する extends:継承する implements:実装する interfaceとtypeはすごく似てるので正直どちらを使っても良...
HTML/CSS/JavaScript

aタグのcolorが親要素から継承されない

例えば以下のようなHTMLとCSSがある場合、 index.html <div> <a href="google.com">google</a> <p>yahoo</p> <div> style.css div{   color:red; ...
HTML/CSS/JavaScript

Jamstackとは?超わかりやすく

Jamstackについて調べた結果メモ。 初心者向けに書きます。 Jamstackとは 「JavaScript+API+Markupを使ってサイトとかを管理しようぜー」なこと。 頭文字を取って「Jam」。 例えば、Wordpressでサイト...
HTML/CSS/JavaScript

Jamstack・WordPress・静的化WordPressのメリット・デメリット

静的サイトジェネレーターには JavaScript+API+Markup(これがJamstack。APIの部分はWordpressを想定するものとする) JavaScript+Markdown+Markup(これに名前はないっぽいのですが、...
HTML/CSS/JavaScript

論理演算子の意味を勘違いしていた【JavaScript】

Reactの公式を見てると、以下のような記述を見かけて混乱した。 {unreadMessages.length > 0 && <h2> You have {unreadMessages.length} unread messages. </...
HTML/CSS/JavaScript

【JavaScript】ディープコピーとシャローコピーの違い

調べたことメモ。 違い ディープコピー:オブジェクトの中のオブジェクトまで丸ごとコピーする シャローコピー:オブジェクトの中の中のオブジェクトは参照コピーする シャローは「浅い」、 ディープは「深い」という意味。 シャローコピーとは? 実例...
HTML/CSS/JavaScript

高階関数とコールバック関数と引数について整理【JavaScript】

毎回「これってどうなってるんだっけ?」となるので 頭の整理のためにまとめます。 高階関数とは? 高階関数は、以下の両方もしくはどちらかに該当する関数のこと。 関数を返す 関数を引数にとる たとえば以下の場合、後者に該当するので、mainが高...
HTML/CSS/JavaScript

同一生成元ポリシーはなぜ必要なのか?

同一生成元ポリシーとは? 同一生成元ポリシーは、「異なるオリジンのリソースへのアクセスには制約をかけましょうねー」のこと。 例えば、「a.comからb.comのリソースを持ってくるのとか止めましょうねー」な感じ。 参考:同一オリジンポリシー...
HTML/CSS/JavaScript

【PC/Chrome】Youtube Liveでスーパーチャットのみを表示する【通常のコメントを消す】

PCのChrome上で、Youtube Liveのアーカイブを再生する際に 通常のチャットを非表示にしてスーパーチャットのみを表示する方法についてメモ。 ▲ビフォー、アフター 手順としては以下のとおりです。 Chromeの拡張機能「styl...
HTML/CSS/JavaScript

【Windows】Chromeでローカルのフォントが読み込めなかった

Chromeで表示されるフォントをすべて「notoフォント」にしようと思って Chromeの拡張機能である「Stylus」に以下のようなコードを打ち込んだけど、なぜかnotoフォントで表示されない。 /*--------------- sa...
HTML/CSS/JavaScript

WordPressで○秒毎に画像を自動で切り替える【 jQuery】

以下のように Wordoress + jQueryで○秒毎に画像を自動で切り替える方法についてメモ。 (Chromeのコンソール機能で確認すると、分かりやすいと思います↓。) 1.Wordpressの記事上でJavaScriptを動かす環境...
HTML/CSS/JavaScript

CSSのcontentプロパティで絵文字や4バイト漢字を使う

CSSテキストで 4バイト絵文字(例:😀) 4バイト漢字 (例:𩸽【ほっけ】) などのUnicode文字を使う方法メモ。 1.直接書く 例えば、style.cssに書く場合、 style.cssの文字コードが「UTF-8」な場合は直接Uni...
HTML/CSS/JavaScript

WEBサイトのフォントは指定しない方がユーザーファーストだよね

多くのウェブサイトでは font-family: "Hiragino Kaku Gothic ProN","Hiragino Sans",Meiryo,sans-serif; という感じで、「うちのサイトはこのフォントで見ろ!」と厳密に指定...
スポンサーリンク