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

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

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

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

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

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

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

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

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

reset,revertの違い【Git】

よく分かってなかったので自分用にまとめた。 reset:過去のコミットまで戻る revert:過去のコミットを取り消すコミットをする reset 大きく分けて以下の3種類がある。 --soft・・・「H...
2021.05.04
Git

プルリクエストとドラフトプルリクエストの違い

プルリクエスト: →ワイの書いたコード、マージしてくれや! ドラフトプルリクエスト: →ワイの書いたコード、まだ未完成やけど見てくれや!(この時点ではまだマージできない) んで完成したらReady f...
2021.07.02
その他

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つずつ順番に足していく」という処理になります。 これは超基本的...
2021.07.03
HTML/CSS/JavaScript

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

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

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

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

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

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

Promise.allの順番

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

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

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

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

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

「イラストでわかるDockerとKubernetes」を読んだ感想 ⭐⭐

「イラストでわかるDockerとKubernetes」という本を読んだ。 結論からいうと、自分には読むのが早かった。 書評 ほとんど理解できずに途中で読むのを辞めてしまったので、感想もクソもないのですが とりあえず思...
2021.08.22
読んだ本

「AWS基礎からのネットワーク&サーバー構築」を読んだ感想 ⭐⭐⭐⭐⭐

「Amazon Web Services 基礎からのネットワーク&サーバー構築」という本を読んだ。 結論からいうと、良本だった。 書評 どんな本か 「AWSを通じてネットワークを学ぼうぜ」な本であり、最終...
2021.09.02
HTML/CSS/JavaScript

コールバック地獄、Promise、async/awaitの例

自分用のメモ。(エラー処理は省略してます) コールバック地獄な書き方。  Promiseを使った書き方。 async/awaitを使った書き方。 コールバック地獄 Promise ...
HTML/CSS/JavaScript

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

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

「 この一冊で全部わかるWeb技術の基本」を読んだ感想 ⭐⭐⭐

「 この一冊で全部わかるWeb技術の基本」という本を読んだ。 結論からいうと、自分(初級者)には微妙な本だったけど初心者には良本だと思った。 書評 良かった点: Web全般の知識を浅ーーーく広ーーーーく知ることが...
2021.08.22
読んだ本

「オブジェクト指向でなぜつくるのか」を読んだ感想 ⭐⭐⭐⭐

オブジェクト指向でなぜ作るのか(第1版)という本を読んだ。 結論から言うと、良書だったけど自分には早かった気がした。 書評 なぜシリーズの本は大体どれも名著らしいけど 「オブジェクト指向でなぜ作るのか」はその中でも特...
2021.08.22
デザイン

【Figma】Auto layoutとConstrains

Auto layoutとは? 名前のとおり、「自動でレイアウトしまっせー」という機能。 例えば Rectangleでボタンを作る Textで文字を作る 2つをグループ化してAuto layoutを適用する ...
2021.07.02
HTML/CSS/JavaScript

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

自分用のメモ。 interface:オブジェクト、クラス、関数の型のみを宣言する type:どんな型でも宣言する extends:継承する implements:実装する interfaceとtyp...
HTML/CSS/JavaScript

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

例えば以下のようなHTMLとCSSがある場合、 index.html <div><a href="google.com">google</a><p>yahoo&...
2021.04.14
HTML/CSS/JavaScript

Jamstackとは?超わかりやすく

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

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

静的ジェネレーターには JavaScript+API+Markup(これがJamstack) JavaScript+Markdown+Markup(これに名前はないっぽいのですが、この記事では便宜上Jmmstack呼びます)...
2021.03.14
Node.js

Node.jsでスクレイピングする方法

Node.jsに限らないことだけど、スクレイピングの手法には大きく分けて CurlコマンドなどのHTTPクライアントソフトでページを取得する方法 ヘッドレスブラウザ経由でページを取得する方法 の2種類があります。 ...
2021.06.28
HTML/CSS/JavaScript

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

Reactの公式を見てると、以下のような記述を見かけて混乱した。 {unreadMessages.length > 0 &&<h2> You have {unreadMessages.leng...
2021.03.12
Node.js

Node.js+ExpressでCookieの設定・削除のサンプル

復習がてら、Node.js+Expressで 以下のgifのようなサンプルを作りました。それについてメモ。 ページを開いた際、cookieにuserNameが存在していれば、その値を使って名前を表...
2021.03.06
読んだ本

「React.js & Next.js 超入門」を読んだ感想 ⭐⭐⭐⭐

「React.js & Next.js 超入門」という本を読んだ。 結論からいうと、良本だった。 書評 フロントエンド側のフレームワークも1つくらい触っておきたいな―と思ってて そんな中、自分の尊敬している人...
2021.08.22
仮想環境

【図解】VScodeのRemote Container拡張機能とは?わかりやすく

VScodeのRemote Container拡張機能を使ってみて「すごく便利だなー」と思ったんですが 知っておくべき前提知識が多くて混乱したので、頭の整理のために色々メモしておきます。 Remote Container拡張機能とは...
2021.08.12
スポンサーリンク
タイトルとURLをコピーしました