HTML/CSS/JavaScript

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

【違い】dns-prefetch、preconnect、prefetch、preload、prerender

ブラウザがリソースを取得するまでの流れ。 -> -> -> -> 意味 dns-prefetch 「DNSの名前解決だけ先にやっとけ」な指示 preconnec...
HTML/CSS/JavaScript

クリティカルCSSとは?わかりやすく

一言でいうと ページを読み込んだ際に「最初に見える部分」のCSSだけをHTMLファイルにインラインCSSとして書き込んでおいて、「最初に見える部分以外」のCSSは外部ファイルとして非同期で読み込んで高速化しようぜ!なテクニック ...
2021.08.23
HTML/CSS/JavaScript

DefinitelyTypeとは?Flowtypeとの違い

違い DefinitelyType: 「いろいろなライブラリ用のTypeScriptの型定義ファイルを公開しようぜー!」なプロジェクトのこと。 またはそのプロジェクトによって作られた型定義ファイルのこと。 ...
2021.08.19
HTML/CSS/JavaScript

タグ付きテンプレート文字列とは?【JavaScript】

テンプレート文字列とは? テンプレート文字列は、文字列の中に変数を埋め込むことができる機能です。 以下のように書きます。 const name = "山田"; console.log(`こんにちは。私は${name}です。`);...
2021.08.16
HTML/CSS/JavaScript

キャッシュ系のHTTPヘッダー5種類の違い

とりあえずザックリ調べたことをメモ。(書いておかないと100%忘れそうなので・・・) キャッシュ関係のHTTPヘッダーには、以下の5つがあります。 レスポンスヘッダー リクエストヘッダー 問答無用...
2021.07.30
HTML/CSS/JavaScript

Google検索で画像を非表示にする方法【虫が怖い】

家のゴキブリを駆逐したい。 なので「まずはゴキブリの生態について調べたほうが良いのでは?」と思った。 ただ、ゴキブリのことを調べるとゴキブリの画像を載せているサイトに出くわすのが怖い。とても怖い😱 というかもう、ゴ...
2021.07.26
HTML/CSS/JavaScript

1つのclassだけを持つ要素に適用する方法【CSS】

以下のようなHTMLがあったとして、 <p class="A B">山田太郎です。</p><p class="A">山田太郎です。</p> 以下のCSSを適用すると、 .A ...
2021.07.19
HTML/CSS/JavaScript

translate属性=”no”を自動付加してpreタグ内のソースコードを翻訳対象外にする

プログラミングのドキュメントは、ほとんどが英語です。 なので、大多数のプログラマは 分からない英語が出てきたら・・・ ⇒ページ上で右クリック → 日本語に翻訳するを選択して、日本語に変換する という風にして、...
2021.07.11
HTML/CSS/JavaScript

position:stickyでスクロールした時にメニューを一定範囲に固定する

当記事のh2タグにも適用しています!!😀 position:stickyとは? 「スクロールした際に、親要素のボックス内の指定した位置に固定させることができるpositionプロパティ」です。 例えば以下のように書くと、 //H...
2021.08.01
HTML/CSS/JavaScript

セッションとCookieの違いを超わかりやすく

最初に結論 ザックリ以下のように違います。 Cookie: →サーバーから「お前これ持っとけ」と渡されるデータのこと。 Cookieを持たされた人は、そのサイトにアクセスするときに毎回Cookieを持参しないといけない”...
2021.09.08
HTML/CSS/JavaScript

CSSピクセル、デバイスピクセル、デバイスピクセル比を調べる確認ツール

今お使いのデバイスの情報です。 上の青枠部分は、JavaScriptで情報を取得しています。 パソコンの場合は、画面幅を変更したり、拡大率を変更したりすると、リアルタイムで数値が変更されます。 デバイス...
2021.07.04
HTML/CSS/JavaScript

pictureタグとsrcset属性の違い。超わかりやすく

結論からいうと、以下のように違います。 srcset属性・・・”異なるサイズの同じ画像”を表示したい場合に使う pictureタグ・・・”異なる画像”を表示したい場合に使う 図解すると以下のような感じです🤗 ...
2021.07.22
HTML/CSS/JavaScript

SyntaxError: ‘return’ outside of functionというエラー

create-react-appで作ったプロジェクトで、npm startしたところ、以下のようなエラーが発生しました。 ./node_modules/watchpack/lib/chokidar.js SyntaxError: C:\...
HTML/CSS/JavaScript

トランスコンパイルとpolyfillの違い

Babelのことを調べていると「トランスコンパイル」「Polyfill」という言葉がよく出てきます。 これらの違いについて調べたメモ。 トランスコンパイル:別の言語に変換すること。 polyfill:古いコードを使...
2021.06.16
HTML/CSS/JavaScript

疑似要素(::before,::after)のプロパティを取得する【JavaScript】

結論から言うと、getComputedStyle関数を使えば取得できます。 index.html <h1>エヴァンゲリオン</h1> style.css h1::before{ content:...
HTML/CSS/JavaScript

ブックマークレットを作るときの注意点など

ブックマークレットを作るときに気をつけるべき点とかメモ。 スコープ スコープを汚さないために、(function(){})()で囲います。 例えば、alert("hoge")を実行したいなら、javascript:(f...
2021.06.02
HTML/CSS/JavaScript

Udemyのチェックを一括で外すor付ける【ブックマークレット】

Udemyのアカウントを妻と共有して、割り勘でいろいろ教材を買ってるんですが 私が見た後に妻が見る 妻が見た後に私が見る みたいなことがあるため、後から見るほうは既にチェックボックスがついた状態ではじめることになります...
2021.06.21
HTML/CSS/JavaScript

@charset “utf-8″は必要なのか?

CSSファイルの先頭に @charset "utf-8"; みたいに書くことがあるけど、これを書いていないファイルもあったりして、「これって別に書かなくていいの?」と疑問に思って調べた結果メモ。 先に結論を書いてお...
2021.07.23
HTML/CSS/JavaScript

SassとSASSとSCSSの違い

Sass: 「CSSって使いにくいよねー」と思った人たちが作った言語。 Syntactically Awesome Stylesheets(構造的に イケてる スタイルシート)の略。 Sassで書かれたもの...
HTML/CSS/JavaScript

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

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

インラインのscriptとdefer属性

インラインスクリプトには、defer属性は使えません。 例えば以下のようには書けません。 <script src="a.js" defer></script><script src="b.js" d...
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
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...
スポンサーリンク
タイトルとURLをコピーしました