## 発生した問題
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におけるコアドメインとは、一言でいうとそのプロダクトで最も売りになる機能のこと。
売りになる部分をかんたんに改修できることで、プロダクトの価値アップのペースが変わってくる。
コアドメインは注意しないと、多機能でプログラムのコードが...
使っている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...
ブラウザでYoutubeやNetflixを見ていると、全画面モードで動画を表示させることが可能です。
上記のような動画サイトではなくて、普通のページを見ているときに、表示しているページを全画面表示したい時があります。
このような場合は、下記の作業...
create-react-appを使ってTypeScriptのReactプロジェクトを、カレントディレクトリ作成するコマンドです。
```language-bash
npx create-react-app . --template typescript
npm start
```
## はじめに
この記事では、craete-react-appのV5で作成したReactプロジェクトに対して、React RouterのV6をインストールして複数URLでページを表示させるための作業を説明します。
## バージョン
この記事は下記バージョンのパッケージで動作...
TOEICのSpeaking Testの対策をNativeCampの教材・レッスンを使って勉強したい場合どうすればよいか悩んでいたのですが、月一回無料の25分カウンセリングを受けてみたら良いアドバイスを貰えました。ですので備忘録代わりに書いておきます。
## Read...
## 前置き
- AWS認定試験の[DBS-C01]`データベース-専門知識`(AWS Certified Database – Specialty)を勉強して合格した。
- 新しく学んだことや、間違えやすい・忘れやすいポイントをメモしながら勉強していて、定期的に振り返るのが良かった。
- せ...
## 背景
PHPStormでは以前はIDEからGitのステージを利用できませんでしたが、PhpStorm 2020.3よりステージ機能をサポートするようになりました。
本記事では、PHPStormで新たにサポートされるようになったGitステージの機能を説明します。
## 作...
