## はじめに
PHPでのXDebugによるデバッグ環境構築は、セットアップの手数が多く慣れていないと苦戦してしまうことが多いです。
いつも試行錯誤しながら何となく動作させていたのですが、苦手意識を無くすため時間をとってステップを追って仕組みを...
M1のmacでnodeのnode-sassを使おうとした時に、`OS X Unsupported architecture (arm64)`のエラーが出た時に対処した時の手順を備忘録として書いておきます。
## 発生したエラー
`npm run`すると、node-sassでエラーになる
```language-bash
$ n...
macOSで`python2`を使えるようにしたくて、brew経由でpython2.xの環境を用意した時の忘備録です。
## 手順
### pyenvのインストール
brewでインストールして、`PATH`の設定を`.zshrc`に追加する。
```language-bash
brew install pyenv
echo...
Laravel Mixでjsをpackしている時にsource mapを使えるようにしたい時は、`webpack.mix.js`を修正します。
## 修正方法
```language-js
mix.js('resources/js/app.js', 'public/js')
.sourceMaps(); // これを追加
```
source mapの...
Webpackなどを使っている時に、ChromeのDveloper Toolからパックされる前のソースの形式でデバッグする方法の備忘録。
- ChromeのDeveloperToolを起動する
- Sourcesタブを開く
- Pageタブが選択されていることを確認
- ツリーから`top`/`webpack://...
ウィルスチェックソフトのESETをインストールしたmacOSでネットワークが繋がらなくなったことがあり、どうしようもなくなったが何とか復旧できた時の備忘録です。
(この方法でなぜうまくいくか分かってないので、参考程度にしてください)
## 起きた...
この記事では、macOSのブラウザ版Slackでは通知オンが出るけど、アプリ版のSlackだと通知音が出ないときにチェックすることを説明します。
## 原因
原因の１つとして、macOSの設定で通知を許可していない場合があります。
## 対応
macOSの通知...
Terraformを使ったAWS環境構築を初めて試したとき時のコマンドを備忘録として書いておきます。
## 作業環境
OS: macOS
terraform: ver1.1.7
## インストール
brewでインストールする
```language-bash
brew install hashicorp/tap/terraf...
## 発生した事象
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...
AWSのCDKのv2では、`aws_ecs_patterns`というモノが、`aws-cdk-lib`に定義されています。
この`aws_ecs_patterns`を利用すると、以下のような感じでecsでよく利用される構成を簡単に作ることができます。
```language-typescript
import {aws_ecs...
golangのcliプログラムを作成時、時間がかかる処理を行なっているときに、処理中であることを示すアニメーションを出したい場合がある。
下記のコードでローディング中のくるくる回るスピナーのアニメーションを表示できる。
```language-go
func m...
## エラー内容
AWSのリソースをCDK経由で生成しようとしたが、デフォルトVPC情報を取得しようとして下記のコードを書いたがエラーが発生した。(使用言語はTypeScript)
### lib/cdk-stack.ts
```language-ts
export class CdkStack extends Stack...
複数行で構成されている英文テキストのファイルを、センテンス単位(=ピリオド区切り)で、独立した行に変換する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 (
"...
webpackへDevSErverをインストールして、作成したプログラムを簡単に確認する方法を説明します。
## インストール
```language-bash
npm add webpack-dev-server --dev
```
## webpack.config.jsに追記
webpack.config.jsに下記を追記する...
JSTQBの勉強をしているとK1はK2などの、"Kレベル"というものが出てきます。
これは、各単元に対する知識の要求レベルで、下記のカテゴリになっています。
## K1:
- remember, recognize, recall
- 覚える、認識する、思い出す
## K2
- un...
## 発生した問題
ReactのコンポーネントでtextAlignのスタイルを適用としたところ、エラーが発生した。
```language-js
const App = () => {
const divStyle = {
textAlign: 'right',
}
return (
hello
);...
jQueryのappend()でhtmlの文字列を指定してDOM組み立てしていたレガシーコードを、jQueryを使わない形に変換する方法です。
## 変更前コード
`id='message'`で存在しているhtmlタグの子要素にspanを追加しているコードです。
```language-js
$('...
この記事では、JSTQB認定テスト技術者資格のFoundation Levelを確実に合格するための攻略方法を説明します。
(JSTQB: Japan Software Testing Qualifications Board)
## 試験の申込日を確認にする
JSTQBの資格を取得する上で最初にすることは、...
## 発生したエラー
React + TypeScriptの環境で、MUIをしようとしたところ、import文で`'@mui/...'`をインポートするところで`TS2792`エラーが発生した。
- プログラム
```language-typescript
import Button from '@mui/material/Button';
```...
TypeScriptを使ってReactのコードを書いているときに、onKeyPressイベントに対するイベントオブジェクトの型指定方法です。
この例では、Inputタグに対するキーボードイベントを処理したいので、`React.KeyboardEvent`の型指定を行っています。
```lan...
ankiのカードで画像を利用しているときに、レイアウト指定で画像の高さを変更したい場合があります。
styleは`.card img`で指定すればよいのですが、以下のような設定を行うことはできません。
```language-css
.card img {
width: 120%;
...
フラッシュカードアプリのAnki(Android版はAnkiDroid)は、カードをhtmlで表示します。
ユーザが指定するのはhtmlのbody内のみですが、Anki側が提供しているhtml全体を調べたところ、以下のような形になっていました。
## Mac版Anki: htmlの全体
...
Enhance main windowプラグインの説明ドキュメントを日本語訳しましたので公開しておきます。
基本的には原文に忠実に訳していますが、直訳すると分かりづらい部分は意訳したり表現を変えたりしています。
このドキュメントは2020/08時点のものをベー...
ankiのプラグインである"Enhance main window"の設定ファイル、初期値を書いておきます。（この初期値は2022/01に確認しました)
```language-json
{
"book symbol": "{",
"cap value": null,
"color empty": "red",
"color empty de...
## 発生したエラー
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ファイルの１行目に`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が何かざっくりとは理解できているが、詳細はあまり分かってい...
macOSを使っていてChromeのデベロッパーツールがF12で開かない時、`⌘ + option + i`のショートカットで開くことができます。
赤い銀行・青い銀行・緑の銀行は、日本の三大メガバンクのことで下記の銀行を意味します。由来は、ブランドロゴの色です。
|色|銀行名|
|---|---|
|赤い銀行|三菱UFJ銀行|
|青い銀行|みずほ銀行|
|緑の銀行|三井住友銀行|
セキリュティ関連の資格勉強をしていると、`サイバーセキュリティ経営ガイドライン v2.0`の`２．経営者が認識すべき３原則`が問題の論点になることがあります。
で、経済産業省が出している原文を読んでみたのですが、これがとても読みづらい...。
な...
Reactのプロジェクトを`create-react-app`で作成すると、`npm start`させた時に自動でブラウザが起動します。macOSの場合だと、複数のブラウザをインストールしているときは、Chromeが優先されます。
通常の開発であれば自動起動するのは便利なのですが...
下記のコマンドで、macOSにてDNSのキャッシュクリアや、DNSサーバを指定してIPv4のDNSクエリを行う事ができます
## コマンド
- DNSの問い合わせを行う(IPv4)
```language-bash
dig -4 my-domain.example.com
```
- DNSサーバーを指定してD...
書籍の自炊でjpgファイルを加工するときにImageMagickを使っています。
この時、使うと便利なImageMagickのコマンドを紹介します。
## 自炊に役立つImageMagickコマンド
### コントラストを改善する
特定ファイルのみコントラストを改善
``...
書籍の自炊で、スキャンとImageMagickでの加工をした時の作業メモです。
## 方針
- 文字中心の書籍で内容が読めさえすれば良いので、サイズの削減を優先で前処理する。
## スキャン設定
Printer: Cannon MF240 Series
### Scan Options
...
Googleスプレッドシートで、PHPの`implode()`のように複数の値を特定の文字列でつなげたいときは、`TEXTJOIN()`関数を利用します。
## 実行例
以下のような形で文字列を連結できます。
## TEXTJOIN関数の説明
### パラメータ
```...
macOSで大量のデータを処理しているときにtopコマンドを実行すると、`bird`というコマンドがCPUを大量に使っている場合があります。
この`bird`コマンドはiCloudのバックグラウンドタスクで、作成されたファイルをiCloud上にバックアップするときに走る...
YouTubeの英検一級の攻略に関する動画を集めました。
英語の学習動画ではなく英語の学習方法の動画なので、これだけ見ても語学力は向上しませんが、どうやって勉強していけばよいかの計画立てをするときに参考になります。
## 心がけ、学習方針
#...
Googleスプレッドシートで、セル式で数字をゼロ埋めしたい場合があります。
数値に対する書式設定ではなく、ゼロ埋めした文字列が欲しい場合は、`TEXT()`関数を使えば良いです。
## 使い方
以下のように、`TEXT(数値, 表示形式)`の形で指定しま...
Linuxのseqコマンドを使用することで、規則的に並んだ連番を生成することができます。
seqコマンドは、オプションを説明するよりも実行例を見たほうがわかりやすいので、いくつかの実行例を記載します。
## 1から10まで表示
数字を指定することで...
macOSでは、Automatorというアプリでクイックアクションを作成できます。
間違えて作成してしまったときに、作ったアクアクションを削除したい場合があるのですが、どこに保存されているかが見つけづらかったため調べた結果を書いておきます。
保存...
ImageMagickでは`-deskew`オプションで画像の自動傾き補正できます。
deskewオプションについてネットの記事を調べてみると、大抵の場合は以下のように`40%`になっているのですがこれはなぜでしょうか?
```language-bash
convert -deskew 40% input...
## はじめに
紙の書籍をスキャナで自炊(pdf化)したい場合、事前に書籍を裁断する必要があります。裁断機を持っていれば綺麗に切ることができるのですが、裁断機は場所を取りますし金額的にもかさんでしまいます。
そこで今回は、オルファのロータリ...
## はじめに
この記事では、ImageMagickを使って、macOSで複数のpngファイルを一括でjpgファイルに変換する方法を説明します。
## ImageMagickのインストール
ImageMagickのコマンドはmacOSだと下記のコマンドでインストールできます。
Linu...
AWS認定の試験を`ピアソンVue`で受験したときに、領収書を発行依頼する方法を説明します。
(PSIで受験した場合は、手順が異なるようなので注意してください)
## まとめ
結論を先に書くと、以下のような感じでした。
- ピアソンVueでの受験だと...
LocalStackのDockerコンテナを使って、DynamoDBのテーブルを作成した時の作業した時の記録です。
テーブルは`aws cli`を使って作成します。
## docker-compose.yamlの作成
下記の内容でdocker-composeのファイルを用意します。
```language-ya...
JavaScriptのスプレッド構文は、下記の目的で利用できる。
- 配列の連結
- イミュータブルな配列の実現
- 残余引数(rest parameter)による配列の分離
## 配列に対するスプレッド構文
```language-javascript
% node
Welcome to Node.js v16...
DDDにおけるコアドメインとは、一言でいうとそのプロダクトで最も売りになる機能のこと。
売りになる部分をかんたんに改修できることで、プロダクトの価値アップのペースが変わってくる。
コアドメインは注意しないと、多機能でプログラムのコードが...
投稿ナビゲーション
