HTML/CSS/JavaScript タグ付きテンプレート文字列とは？【JavaScript】
テンプレート文字列とは？テンプレート文字列は、文字列の中に変数を埋め込むことができる機能です。以下のように書きます。const name = "山田";console.log(`こんにちは。私は${name}です。`);//こんにちは。私は...
HTML/CSS/JavaScript 
読んだ本 「図解即戦力 仮想化&コンテナがこれ1冊でしっかりわかる教科書」を読んだ感想 ⭐⭐
「図解即戦力 仮想化&コンテナがこれ1冊でしっかりわかる教科書」という本を読んだ。結論からいうと、微妙だった。書評読んで思った点： 浅く広い良かった点： AWSのコンテナ関連のサービスを浅く広く知ることが出来た悪かった点： かなり浅く広くし...
読んだ本 「HTML5&CSS3デザイン 現場の新標準ガイド【第2版】」を読んだ感想 ⭐⭐⭐⭐⭐
「HTML5&CSS3デザイン 現場の新標準ガイド【第2版】」という本を読んだ。結論からいうと、素晴らしい本だった。書評今まで読んできたHTML本の中で一番よかった。読んで思った点： 初級者～中級者以上向けの本であって、初心者向けではない。...
読んだ本 「この1冊で全部わかる Web制作と運用の基本」を読んだ感想 ⭐⭐⭐
「この1冊で全部わかる Web制作と運用の基本」という本を読んだ。結論からいうと、「んー、思ってたのと違う･･」って感じだった。書評この本を見つけた当初は、前者だと思っていたのですが実は後者でした。 ×：「エンジニアがWEB制作やサイト運用...
読んだ本 「できるポケット Web制作必携 HTML&CSS全事典」を読んだ感想 ⭐⭐
「できるポケット Web制作必携 HTML&CSS全事典」という本を読んだ。結論からいうと、普通だった。書評図書館で「なんか良い本ないかな～」と散策してたら、偶然この本を見つけたので読んでみた感じです。読んで思った点： 筆者には申し訳ないで...
Wordpress 【Cocoon】ブラウザキャッシュとは？ONにしたときのデメリット
「Cocoon」にあるブラウザキャッシュの有効化という機能は一体何をしているのか？を調べた結果メモ。先に結論結論からいうとブラウザキャッシュの有効化をONにすると 画像 フォント JSファイル CSSファイル PDFファイルなどの有効期限が...
Linux RewriteRuleとRedirectの違い【Apache】
どちらもリダイレクトするのに使うディレクティブですが、機能は全然違います。RedirectRewriteRuleモジュールが必要？不要mod_rewrite.cが必要リダイレクト後のURLは？変わる(HTTPレスポンスで301リダイレクトを...
HTML/CSS/JavaScript キャッシュ系のHTTPヘッダー5種類の違い
とりあえずザックリ調べたことをメモ。（書いておかないと100%忘れそうなので･･･）キャッシュ関係のHTTPヘッダーには、以下の5つがあります。レスポンスヘッダーリクエストヘッダー問答無用でキャッシュを使う系Expires××Pragmaい...
その他 Squooshをコマンドラインで使って複数画像を一括で圧縮する
Googleが画像圧縮ツールを公開しているらしい。その名も「Squoosh」。Squooshとは？詳しく説明は省きますが、ザックリ箇条書きすると以下のような特徴を持ちます。 画像の圧縮・縮小ができる 読み込み可能：画像全般 出力可能：JPE...
HTML/CSS/JavaScript Google検索で画像を非表示にする方法【虫が怖い】
家のゴキブリを駆逐したい。なので「まずはゴキブリの生態について調べたほうが良いのでは？」と思った。ただ、ゴキブリのことを調べるとゴキブリの画像を載せているサイトに出くわすのが怖い。とても怖い😱というかもう、ゴキブリに限らず虫全般が怖い。なの...
HTML/CSS/JavaScript 1つのclassだけを持つ要素に適用する方法【CSS】
以下のようなHTMLがあったとして、<p class="A B">山田太郎です。</p><p class="A">山田太郎です。</p>以下のCSSを適用すると、.A {color: red;}.B {background-color: y...
読んだ本 「プログラムはなぜ動くのか 第3版」を読んだ感想 ⭐⭐⭐⭐
「プログラムはなぜ動くのか 第3版」という本を読んだ。結論からいうと、良本だった。書評学生時代（10年くらい前）にも1度読んでいたのですが最近（2021/5）になって第3版が出たみたいなので「もう一度読んでみるかー！」と思って読んでみました...
HTML/CSS/JavaScript translate属性=”no”を自動付加してpreタグ内のソースコードを翻訳対象外にする
プログラミングのドキュメントは、ほとんどが英語です。なので、大多数のプログラマは 分からない英語が出てきたら･･･⇒ページ上で右クリック → 日本語に翻訳するを選択して、日本語に変換するという風にして、ドキュメントを読み解いていきますよね。...
HTML/CSS/JavaScript position:stickyでスクロールした時にメニューを一定範囲に固定する
当記事のh2タグにも適用しています！！😀position:stickyとは？「スクロールした際に、親要素のボックス内の指定した位置に固定させることができるpositionプロパティ」です。例えば以下のように書くと、//HTML<sectio...
読んだ本 「確かな力が身につくJavaScript 超入門 第2版」を読んだ感想 ⭐⭐⭐⭐
「確かな力が身につくJavaScript 超入門 第2版」という本を読んだ。結論から言うと、脱初心者した自分には不要な本だった。感想「そういえばJavaScriptの入門本って一冊も読んだことないなー」と思って、試しにこの本を読んでみたけど...
HTML/CSS/JavaScript セッションとCookieの違いを超わかりやすく
最初に結論ザックリ以下のように違います。 Cookie：→サーバーから「お前これ持っとけ」と渡されるデータのこと。Cookieを持たされた人は、そのサイトにアクセスするときに毎回Cookieを持参しないといけない”呪い”にかけられる。 セッ...
HTML/CSS/JavaScript CSSピクセル、デバイスピクセル、デバイスピクセル比を調べる確認ツール
今お使いのデバイスの情報です。 上の青枠部分は、JavaScriptで情報を取得しています。 パソコンの場合は、画面幅を変更したり、拡大率を変更したりすると、リアルタイムで数値が変更されます。 デバイスピクセルは、実端末の解像度のことです。...
HTML/CSS/JavaScript pictureタグとsrcset属性の違い。超わかりやすく
結論からいうと、以下のように違います。 srcset属性･･･”異なるサイズの同じ画像”を表示したい場合に使う pictureタグ･･･”異なる画像”を表示したい場合に使う図解すると以下のような感じです🤗srcset属性例えば、スマホ端末に...
React react-transition-groupの使い方メモ
記憶をなくした時のためのメモ。react-transition-groupとは？Reactでアニメーションを管理するためのライブラリです。ただし、react-transition-group自体はアニメーション機能は提供していません。rea...
React 【React】コンポーネントの中で定義したコンポーネントを呼び出す？
以下のようにAコンポーネントの中で定義したBコンポーネントをAコンポーネントから呼び出す場合と、function A() { function B() { return <h1>Bだよ</h1>; }; return ( <div> <h1...
仮想環境 exec形式とshell形式の違い【Docker】
違いについて調べたら、あるサイトにshell形式: コマンド 引数1 引数2..Dockerデフォルトのシェル/bin/shでコマンド実行。つまり、/bin/sh -c "コマンド 引数1 引数2.."として実行される。exec形式: コマ...
仮想環境 「CMD」と「RUN」「ENTRYPOINT」と「runとcreateの引数」【Dockerfile】
Dockerfileの話。以下の4つの違いが分からなかったので調べた結果メモ。 DockerfileのRUN DockerfileのCMD DockerfileのENTRYPOINT runコマンドとcreateコマンドに渡すCMD引数違い...
仮想環境 docker-machineでエラーが発生
この記事を書いている人のPCは、Windows10 の Home Editionです以下のページからdocker-machineをインストール後、docker-machineをcreateしようとしてもエラーが出た。$ docker-mac...
仮想環境 docker buildコマンドとは？ビルドコンテキストとは
学んだことメモ。docker buildコマンドとは？docker buildコマンドは、DockerfileからImageを作成するためのコマンド。基本は以下の形式で書きます。docker build -t imagename . -t ...
HTML/CSS/JavaScript SyntaxError: ‘return’ outside of functionというエラー
create-react-appで作ったプロジェクトで、npm startしたところ、以下のようなエラーが発生しました。./node_modules/watchpack/lib/chokidar.jsSyntaxError: C:\User...
HTML/CSS/JavaScript トランスコンパイルとpolyfillの違い
Babelのことを調べていると「トランスコンパイル」「Polyfill」という言葉がよく出てきます。これらの違いについて調べたメモ。 トランスコンパイル：別の言語に変換すること。 polyfill：古いコードを使って新しいコードを代用するこ...
HTML/CSS/JavaScript 疑似要素（::before,::after）のプロパティを取得する【JavaScript】
結論から言うと、getComputedStyle関数を使えば取得できます。index.html<h1>エヴァンゲリオン</h1>style.cssh1::before{ content:"シン"; color:red;}index.jsco...
HTML/CSS/JavaScript ブックマークレットを作るときの注意点など
ブックマークレットを作るときに気をつけるべき点とかメモ。スコープ スコープを汚さないために、(function(){})()で囲います。 例えば、alert("hoge")を実行したいなら、javascript:(function(){al...
HTML/CSS/JavaScript @charset “utf-8″は必要なのか？
CSSファイルの先頭に@charset "utf-8";みたいに書くことがあるけど、これを書いていないファイルもあったりして、「これって別に書かなくていいの？」と疑問に思って調べた結果メモ。先に結論を書いておくと「書いたほうが良いけど別に書...
React create-react-appでSassを使う手順
create-react-appでSass（.scss）を使う手順を調べた結果メモ。以下、手順です。 npm install sassでSassコンパイラーをインストールする プロジェクト内にある.cssファイルをすべて.scssに書き換え...