HTML/CSS/JavaScript puppeteer + jsdomでTableを取得して加工する
puppeteer + jsdomでTableを取得して加工する方法についてのメモです。例例として、以下の気象庁のページを使います。 上のぺージを開くと、以下のような画面が開くのですがここではtableを取得して、赤枠部分だけが表示されるよ...
HTML/CSS/JavaScript HTML/CSS/JavaScript インラインのscriptとdefer属性
インラインスクリプトには、defer属性は使えません。例えば以下のようには書けません。<script src="a.js" defer></script><script src="b.js" defer></script><script d...
Git warning: LF will be replaced by CRLF inが出たときの対処法
git addすると以下のような警告が表示された。$ git add .warning: LF will be replaced by CRLF in .gitignore.The file will have its original l...
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>タグってどこに書けばいいんだろう？と思って、調べた結果メモ。以下の図がわかりやすい。引用：１．headタグの中に書く以下のように書く方法。<!DOCTYPE html><html lang="en"> <head>...
Git reset,revertの違い【Git】
よく分かってなかったので自分用にまとめた。 reset：過去のコミットまで戻る revert：過去のコミットを取り消すコミットをするreset大きく分けて以下の3種類がある。 --soft･･･「HEAD」だけ戻す（commitだけ戻す） ...
Git プルリクエストとドラフトプルリクエストの違い
プルリクエスト：→ワイの書いたコード、マージしてくれや！ ドラフトプルリクエスト：→ワイの書いたコード、まだ未完成やけど見てくれや！（この時点ではまだマージできない）んで完成したらReady for reviewを押して完成したのを通知する...
その他 VScodeの拡張機能「Draw.io Integration」で背景色を白色に変更する方法
VScodeの拡張機能「Draw.io Integration」の背景色を変更する方法についてメモ。結論から言うと、右下のTheme:darkみたいに書かれている部分をクリックして変更するだけです。それにしてもこの拡張機能、便利すぎてヤバい...
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("dot...
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 (res...
HTML/CSS/JavaScript オブジェクトの値同士をマージ＋足し算する【JavaScript】
ググっても情報がなかったのでメモしておきます。1．異なるキーがないとき例えば、以下のような同じキーを持つ2つのオブジェクトを足し算＆マージしてconst a = {1: 100,2: 200,3: 300,};const b = {1: 1...
HTML/CSS/JavaScript map,filter,reduce,some,every,foreach,findの違い【JavaScript】
「こういう場合ってどれを使ったら良いんだろう」と毎回迷うのでまとめときます。違いmapすべての要素に対して処理をして、すべての要素を返すreduceすべての要素に対して処理をして、1つの要素を返すsomeすべての要素のうち1つでも条件を満た...
読んだ本 「イラストでわかるDockerとKubernetes」を読んだ感想 ⭐⭐
「イラストでわかるDockerとKubernetes」という本を読んだ。結論からいうと、自分には読むのが早かった。書評ほとんど理解できずに途中で読むのを辞めてしまったので、感想もクソもないのですがとりあえず思った点を箇条書きします。 最初の...
読んだ本 「AWS基礎からのネットワーク&サーバー構築」を読んだ感想 ⭐⭐⭐⭐⭐
「Amazon Web Services 基礎からのネットワーク&サーバー構築」という本を読んだ。結論からいうと、良本だった。書評どんな本か 「AWSを通じてネットワークを学ぼうぜ」な本であり、最終的に「AWSでWordpress＋MySQ...
HTML/CSS/JavaScript viewportとは？device-widthと実際の解像度との違い
HTMLで絶対に使われる以下の意味を知らなかったので、調べた結果メモ。<meta name="viewport" content="width=device-width, initial-scale=1.0" />「そもそもviewport...
読んだ本 「 この一冊で全部わかるWeb技術の基本」を読んだ感想 ⭐⭐⭐
「 この一冊で全部わかるWeb技術の基本」という本を読んだ。結論からいうと、自分（初級者）には微妙な本だったけど初心者には良本だと思った。書評良かった点： Web全般の知識を浅ーーーく広ーーーーく知ることができる ページの半分が図解ページな...
読んだ本 「オブジェクト指向でなぜつくるのか」を読んだ感想 ⭐⭐⭐⭐
オブジェクト指向でなぜ作るのか（第1版）という本を読んだ。結論から言うと、良書だったけど自分には早かった気がした。書評なぜシリーズの本は大体どれも名著らしいけど「オブジェクト指向でなぜ作るのか」はその中でも特に名著らしいので今回読んでみた。...
デザイン 【Figma】Auto layoutとConstrains
Auto layoutとは？名前のとおり、「自動でレイアウトしまっせー」という機能。例えば Rectangleでボタンを作る Textで文字を作る 2つをグループ化してAuto layoutを適用するという風にしてボタンを作ります。そして、...
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.cssdiv{ color:red;}「divの色...
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（これに名前はないっぽいのですが、...
Node.js Node.jsでスクレイピングする方法
Node.jsに限らないことだけど、スクレイピングの手法には大きく分けて CurlコマンドなどのHTTPクライアントソフトでページを取得する方法 ヘッドレスブラウザ経由でページを取得する方法の2種類があります。１．の方法は昔ながらの方法。昔...
HTML/CSS/JavaScript 論理演算子の意味を勘違いしていた【JavaScript】
Reactの公式を見てると、以下のような記述を見かけて混乱した。 {unreadMessages.length > 0 &&<h2>You have {unreadMessages.length} unread messages.</h2>...
Node.js Node.js＋ExpressでCookieの設定・削除のサンプル
復習がてら、Node.js＋Expressで以下のgifのようなサンプルを作りました。それについてメモ。 ページを開いた際、cookieにuserNameが存在していれば、その値を使って名前を表示する 最初は未設定なのでゲストと表示される。...