Webpackなどを使っている時に、ChromeのDveloper Toolからパックされる前のソースの形式でデバッグする方法の備忘録。
- ChromeのDeveloperToolを起動する
- Sourcesタブを開く
- Pageタブが選択されていることを確認
- ツリーから`top`/`webpack://...
ウィルスチェックソフトのESETをインストールしたmacOSでネットワークが繋がらなくなったことがあり、どうしようもなくなったが何とか復旧できた時の備忘録です。
(この方法でなぜうまくいくか分かってないので、参考程度にしてください)
## 起きた...
この記事では、macOSのブラウザ版Slackでは通知オンが出るけど、アプリ版のSlackだと通知音が出ないときにチェックすることを説明します。
## 原因
原因の1つとして、macOSの設定で通知を許可していない場合があります。
## 対応
macOSの通知...
## 発生した事象
macOSでVSCodeを使っていて、キーボードを長押ししてもキーリピートができない(=同じ文字を連続して入力できない)。
キーボードの"a"を長押しすると以下のようなバブルのポップアップメニューが出てくる。
## 理由
macOS...
## エラーの内容
node.jsのコードでfetch()関数を呼ぼうとしたら
## プログラム
### sample.js
```language-js
fetch(`http://example.com/`);
```
### package.json
typeにmoduleの定義を追記している。
```language-json
{
......
YouTubeを見ていたらファミコン(FC)版のDQ3プログラマーの方が、格闘場でズルして大量ゴールドGETしようとしてた。
...けどオーバーフローのせいで失敗していて、その結果が気になったのでちょっと計算してみました。
https://www.youtube.com/watch?v...
golangのcliプログラムを作成時、時間がかかる処理を行なっているときに、処理中であることを示すアニメーションを出したい場合がある。
下記のコードでローディング中のくるくる回るスピナーのアニメーションを表示できる。
```language-go
func m...
複数行で構成されている英文テキストのファイルを、センテンス単位(=ピリオド区切り)で、独立した行に変換するGoのプログラムです
## 入力テキスト例
```language-x
Alice was beginning to get very tired of sitting by her sister on the bank, ...
下記のコードで、Slackにメッセージを送信できることを確認しました。
urlの変数はSlack側で生成したものを指定してください。
Golangに慣れていないので、Goっぽくない書き方があるかもしれません。
```language-go
package main
import (
"...
JSTQBの勉強をしているとK1はK2などの、"Kレベル"というものが出てきます。
これは、各単元に対する知識の要求レベルで、下記のカテゴリになっています。
## K1:
- remember, recognize, recall
- 覚える、認識する、思い出す
## K2
- un...
jQueryのappend()でhtmlの文字列を指定してDOM組み立てしていたレガシーコードを、jQueryを使わない形に変換する方法です。
## 変更前コード
`id='message'`で存在しているhtmlタグの子要素にspanを追加しているコードです。
```language-js
$('...
この記事では、JSTQB認定テスト技術者資格のFoundation Levelを確実に合格するための攻略方法を説明します。
(JSTQB: Japan Software Testing Qualifications Board)
## 試験の申込日を確認にする
JSTQBの資格を取得する上で最初にすることは、...
## 発生したエラー
TypeScriptで、オブジェクト型の変数に対してlengthを取得しようとすると、`TS2339`エラーが発生する。
- コード(react)
```language-js
type UsersType {
...
};
const [user, setUser] = React.useState();
if (us...
macOSでjpgやpngなどの画像ファイルを、コマンドラインから180度回転させたい場合、ImageMagikの`convert`コマンドを使うと便利です。
```language-bash
convert input.jpg -rotate 180 out.jpg
```
90度や、270度回転したい場合は下記のコマンド...
JavaScriptのimport形式として有名なものに、CommonJS形式とES2015形式があります。
## CommonJS形式
node.jsで作られた形式
### export
```language-js
module.exports.foo = function() {
...
}
```
### import
```language-j...
書籍の自炊で、スキャンとImageMagickでの加工をした時の作業メモです。
## 方針
レッスンの教材として利用する。カラーでサイズを抑えつつ、文字が潰れないようにする。素材は全部で208ページ。
## スキャン設定
Printer: Cannon MF240 Serie...
新語: carbon pawprint
意味: ペットを飼育することで大気中に放出されるCO2の排出量
## carbon pawprintの掲載例
## [7 steps to reduce your pet’s carbon pawprints](https://www.agriapet.co.uk/hub-agria-blog/2021/november/7-steps-to...
## ordeal: 試練、厳しい体験
### 意味
> a very unpleasant and painful or difficult experience
> a terrible or painful experience that continues for a period of time
判決を与えて、厳しい試練を与えるという意味
### 語源
```
or...
## 発生したエラー
Reactでtsxファイルをimportしようとしたら、webpackのビルドで下記のエラーが発生した。
```language-bash
Module not found: Error: Can't resolve './foo' in '.../src'
resolve './foo' in '.../src'
using description fi...
エルゴトロンLXのスタッキングアームは長身(=ロングボール)と長身ではないものがあります。それぞれを比較した情報が少なかったのでまとめました。
## スペック
主なスペックは下記のとおりです。
### 長身のほう
- 品名: [LXスタッキング...
Reactに関する書籍・web記事を見ていると、場合よってはjsx/tsxファイルの1行目に`import React from 'react'`を書かなければならないという記述があります。
一方で、"この記述は古いバージョンの時の話で最近はそうではない"という記載もあります。
...
## エラーの内容
以下のimportを含むtsxファイルをVSCodeで開くと下記のエラーが表示された。
tsxファイルの記述
```language-tsx
import ReactDOM from 'react-dom';
```
エラーメッセージ
```language-bash
Could not find a declaratio...
## 発生したエラー
webpackでTypeScriptのプログラムをビルとしようとしたところ、`'tsconfig.json' is empty`のエラーが発生した。
```language-bash
$ npx webpack --config ./webpack.config.dev.js
asset main.js 1.58 KiB [emitted] (name:...
## 発生した事象
Reactのプログラムを`yarn run webpack`で作成したところ、ビルドは通ったがブラウザで表示するとコンソールに下記のエラーが出力された。
(仕組みを理解するために`create-react-app`を使わずに、手作業でwebpackの環境構築してい...
この記事では、javascriptのモジュールバンドラである`webpack`の環境を、手作業で構築するための手順を説明します。
## 対象読者
この記事の対象読者は下記のとおりです。
- webpackが何かざっくりとは理解できているが、詳細はあまり分かってい...
赤い銀行・青い銀行・緑の銀行は、日本の三大メガバンクのことで下記の銀行を意味します。由来は、ブランドロゴの色です。
|色|銀行名|
|---|---|
|赤い銀行|三菱UFJ銀行|
|青い銀行|みずほ銀行|
|緑の銀行|三井住友銀行|
セキリュティ関連の資格勉強をしていると、`サイバーセキュリティ経営ガイドライン v2.0`の`2.経営者が認識すべき3原則`が問題の論点になることがあります。
で、経済産業省が出している原文を読んでみたのですが、これがとても読みづらい...。
な...
Reactのプロジェクトを`create-react-app`で作成すると、`npm start`させた時に自動でブラウザが起動します。macOSの場合だと、複数のブラウザをインストールしているときは、Chromeが優先されます。
通常の開発であれば自動起動するのは便利なのですが...
書籍の自炊でjpgファイルを加工するときにImageMagickを使っています。
この時、使うと便利なImageMagickのコマンドを紹介します。
## 自炊に役立つImageMagickコマンド
### コントラストを改善する
特定ファイルのみコントラストを改善
``...
書籍の自炊で、スキャンとImageMagickでの加工をした時の作業メモです。
## 方針
- 文字中心の書籍で内容が読めさえすれば良いので、サイズの削減を優先で前処理する。
## スキャン設定
Printer: Cannon MF240 Series
### Scan Options
...
Googleスプレッドシートで、PHPの`implode()`のように複数の値を特定の文字列でつなげたいときは、`TEXTJOIN()`関数を利用します。
## 実行例
以下のような形で文字列を連結できます。
## TEXTJOIN関数の説明
### パラメータ
```...
YouTubeの英検一級の攻略に関する動画を集めました。
英語の学習動画ではなく英語の学習方法の動画なので、これだけ見ても語学力は向上しませんが、どうやって勉強していけばよいかの計画立てをするときに参考になります。
## 心がけ、学習方針
#...
Googleスプレッドシートで、セル式で数字をゼロ埋めしたい場合があります。
数値に対する書式設定ではなく、ゼロ埋めした文字列が欲しい場合は、`TEXT()`関数を使えば良いです。
## 使い方
以下のように、`TEXT(数値, 表示形式)`の形で指定しま...
ImageMagickでは`-deskew`オプションで画像の自動傾き補正できます。
deskewオプションについてネットの記事を調べてみると、大抵の場合は以下のように`40%`になっているのですがこれはなぜでしょうか?
```language-bash
convert -deskew 40% input...
## はじめに
紙の書籍をスキャナで自炊(pdf化)したい場合、事前に書籍を裁断する必要があります。裁断機を持っていれば綺麗に切ることができるのですが、裁断機は場所を取りますし金額的にもかさんでしまいます。
そこで今回は、オルファのロータリ...
## はじめに
この記事では、ImageMagickを使って、macOSで複数のpngファイルを一括でjpgファイルに変換する方法を説明します。
## ImageMagickのインストール
ImageMagickのコマンドはmacOSだと下記のコマンドでインストールできます。
Linu...
DDDにおけるコアドメインとは、一言でいうとそのプロダクトで最も売りになる機能のこと。
売りになる部分をかんたんに改修できることで、プロダクトの価値アップのペースが変わってくる。
コアドメインは注意しないと、多機能でプログラムのコードが...
使っているMacBook Airのスペックを忘備録として書いておく。
MacBook Air (Retina, 13-inch, 2020)
## Hardware
```
Model Name: MacBook Air
Model Identifier: MacBookAir9,1
Processor Name: Quad-Core Intel Core i7
Processo...
TOEICのSpeaking Testの対策をNativeCampの教材・レッスンを使って勉強したい場合どうすればよいか悩んでいたのですが、月一回無料の25分カウンセリングを受けてみたら良いアドバイスを貰えました。ですので備忘録代わりに書いておきます。
## Read...
PHPStormのDockerコンテナを使用した開発でXDebug3を使えるようにするための設定手順です。
### Dockerfile
`php:7.4-apache`のイメージを利用したDockerfileを作成する。
`docker-php-ext-enable xdebug`を実行することで、xdebugが有効化されて...
macOSでSpotlightのインデックスをターミナルから再構築したい場合は、以下のコマンドを実行します
```language-bash
sudo mdutil -E /
```
## mdutilのヘルプ
```language-x
名称
mdutil -- Spotlight が使用するメタデータのストア...
macOSに標準で入っているzip、unzipを使って、cliでファイルの暗号化と復号化を行う方法を説明します。
## 手順
foo.txtというファイルを暗号化することを想定します。
複数ファイル存在する場合は、あらかじめ`tar`コマンドなどで1ファイルにまと...
```language-bash
phpstan analyze -c ./phpstan.neon --memory-limit=1G
```
## max_user_connectionsの確認方法
RDS MySQLで、max_user_connectionsは下記のSQLで確認できる。
```
select @@max_connections;
```
## max_user_connectionsでカウントされるコネクションの数
RDSでは、利用者によるコネクションに加え...
1Gbpsの回線で一日にどれだけデータ転送できるかについて、理論上の上限値を知りたい場合、下記の計算式で算出できます。
## 計算式
前提知識
- 1日は86,400秒 (86400 = 24 * 3600)
- 1バイトは8ビット
- 1000ギガ(1000G)は1テラ(1T)
計算...
AWSではAWSの機能を気軽に体験できるようたくさんのチュートリアルを無料で公開しています。検索画面はあるのですが一覧が把握しづらかったので、表形式にしました。
## AWSチュートリアル一覧 (2022年1月 時点)
|カテゴリ|時間|タイトル|概要|...
PHPではphpcsを使うことでコードがPSR-12などのコーディング規約に従っているかを機械的にチェックすることができます。
通常はエラーのメッセージを見ながらコードを修正すればよいのですが、自動処理を行うなどの都合で、エラーが出力された理由が特...
LaravelでRedisのconfig情報をプログラムから取得する方法です。
## 環境
- Laravel6.x
- redisクライアントはphpredisを利用
```language-php
'redis' => [
'client' => env('REDIS_CLIENT', 'predis'),
// Rest of Redis configura...
コマンドラインのcurlコマンドでは、プロトコル部の指定を"telnet"にすることで、簡易的なtelnetクライアント相当の作業が行えます。
下記の例はcurlコマンドでRedis(port=6379)に接続したときの実行例です。
```language-bash
$ curl telnet://loc...
翔泳社のオンラインショップであるSEshopでは、定期的に電子書籍が半額となる50%オフセールを行っています。
今回はこのセールがいつタイミングで行われているか確認してみました。
## キャンペーンの実施周期
一覧で見るとわかりやすいのですが...
## 発生した事象
webpackにeslintの設定を行って、`yarn run webpack`を実行したら下記のエラーが出る。
```language-bash
$ yarn run webpack
yarn run v1.22.17
$ .../node_modules/.bin/webpack
asset main.js 1.8 KiB [compared for emit] (...
パス単一級の熟語をみていると、失敗する・うまく行かないと行った意味での熟語で、fizzle out / fall flat / fall throughが出てきます。それぞれのニュアンスの違いがわからなかったので辞書で調べてみました。
## fizzle out
- end weakly, especia...
## レスポンスステータスが正しいこと
```language-php
use Illuminate\Http\Response;
$response = $this->getAjax($path);
$response->assertStatus(Response::HTTP_OK);
```
## Jsonの構造が一致していること
```language-php
$respo...
以下の書き方で、特定のコマンドを実行した結果をmakefileの変数として格納できます。ターゲットの中では`$(変数名)`の形式で変数を参照できます。
## Makefile
```language-make
DATE_YESTERDAY := $(shell date +"%Y/%m/%d" --date '1 days ago')...
Makefileの先頭に下記のターゲット(help)を作成しておくと、`make`コマンドを実行するだけでコマンドの一覧が表示されます。
## 追加するターゲット
```language-make
help:
@grep "^[a-zA-Z\-]*:" Makefile | grep -v "grep" | sed -e 's/^/make...
Laravel 8.xでは、Laravel sailによるdocker環境が準備されており、`./vendor/bin/sail up`コマンドを実行するだけでMySQLやRedisを含めた開発環境が構築できます。
ですが、このコマンドはホストOSのポート80や3306が空いていることが前提になっている...
Reactのプロジェクトを、create-react-appで作成したとき`npm run build`でビルドすると、ビルド結果が./buildディレクトリに作成されます。
このビルド結果はドメインのルート(`https://example.com`など)に展開されることを想定されいます。
この...
JSTQB認定テスト技術者資格では、試験を申し込むときにSCRの掲載に関する質問があります。
このSCRとは何でしょうか?
## 申し込み時の確認項目
テストの申し込みでは、SCRについて下記の4つの確認があります。この質問は、"いいえ"を選択しても受験...
## 勉強に使用したテキスト
下記の書籍一冊だけでOKです。この書籍は毎年改定されており、書籍を購入すると過去問とその解説もpdfでダウンロードできます。
- [情報処理教科書 データベーススペシャリスト](https://www.amazon.co.jp/dp/B08DXDYDL1/...
データベーススペシャリストの問題で出てくる、3層スキーマについて調べてみた。
## 正式名称
ANSI/SPARC3 3層スキーマアーキテクチャ
## 3つの要素は何?
外部スキーマ、概念スキーマ、内部スキーマの3つ。
外部がユーザよりで、内部が実...
投稿ナビゲーション