## エラー内容
storybookで`start-storybook -p 6006 -s public`しようとしたら、ModuleNotFoundErrorが発生した.
```language-bash
$ npm run storybook
ModuleNotFoundError: Module not found: Error: Can't resolve '@Pages/LoginPage' in '.....
## エラーの内容
TypeScriptで、styled-componentsをimportすると、TS7016エラーが発生した。
```language-bash
TS7016: Could not find a declaration file for module 'styled-components'.
'...node_modules/styled-components/dist/styled-co...
docker-composeをつかってLaravel9とPHP8.0の実行環境を構築する手順を説明します。
コンテナはnginxとphp-fpmを使う方法もありますが、今回は本番環境へデプロイを容易に行えることを考慮してapacheをwebサーバにします。
## Laravelをインストール
...
Terraformを使ったAWS環境構築を初めて試したとき時のコマンドを備忘録として書いておきます。
## 作業環境
OS: macOS
terraform: ver1.1.7
## インストール
brewでインストールする
```language-bash
brew install hashicorp/tap/terraf...
AWSのCDKのv2では、`aws_ecs_patterns`というモノが、`aws-cdk-lib`に定義されています。
この`aws_ecs_patterns`を利用すると、以下のような感じでecsでよく利用される構成を簡単に作ることができます。
```language-typescript
import {aws_ecs...
## エラー内容
AWSのリソースをCDK経由で生成しようとしたが、デフォルトVPC情報を取得しようとして下記のコードを書いたがエラーが発生した。(使用言語はTypeScript)
### lib/cdk-stack.ts
```language-ts
export class CdkStack extends Stack...
webpackへDevSErverをインストールして、作成したプログラムを簡単に確認する方法を説明します。
## インストール
```language-bash
npm add webpack-dev-server --dev
```
## webpack.config.jsに追記
webpack.config.jsに下記を追記する...
## 発生した問題
ReactのコンポーネントでtextAlignのスタイルを適用としたところ、エラーが発生した。
```language-js
const App = () => {
const divStyle = {
textAlign: 'right',
}
return (
hello
);...
## 発生したエラー
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...
macOSを使っていてChromeのデベロッパーツールがF12で開かない時、`⌘ + option + i`のショートカットで開くことができます。
下記のコマンドで、macOSにてDNSのキャッシュクリアや、DNSサーバを指定してIPv4のDNSクエリを行う事ができます
## コマンド
- DNSの問い合わせを行う(IPv4)
```language-bash
dig -4 my-domain.example.com
```
- DNSサーバーを指定してD...
macOSで大量のデータを処理しているときにtopコマンドを実行すると、`bird`というコマンドがCPUを大量に使っている場合があります。
この`bird`コマンドはiCloudのバックグラウンドタスクで、作成されたファイルをiCloud上にバックアップするときに走る...
Linuxのseqコマンドを使用することで、規則的に並んだ連番を生成することができます。
seqコマンドは、オプションを説明するよりも実行例を見たほうがわかりやすいので、いくつかの実行例を記載します。
## 1から10まで表示
数字を指定することで...
macOSでは、Automatorというアプリでクイックアクションを作成できます。
間違えて作成してしまったときに、作ったアクアクションを削除したい場合があるのですが、どこに保存されているかが見つけづらかったため調べた結果を書いておきます。
保存...
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...
ブラウザで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でページを表示させるための作業を説明します。
## バージョン
この記事は下記バージョンのパッケージで動作...
## 前置き
- AWS認定試験の[DBS-C01]`データベース-専門知識`(AWS Certified Database – Specialty)を勉強して合格した。
- 新しく学んだことや、間違えやすい・忘れやすいポイントをメモしながら勉強していて、定期的に振り返るのが良かった。
- せ...
## 背景
PHPStormでは以前はIDEからGitのステージを利用できませんでしたが、PhpStorm 2020.3よりステージ機能をサポートするようになりました。
本記事では、PHPStormで新たにサポートされるようになったGitステージの機能を説明します。
## 作...
phpでXDebugの設定をする場合、XDebugに関する設定方法をgoogle検索すると、以下のように設定すると良いといった記事がいくつかヒットします。
```language-ini
[xdebug]
xdebug.remote_enable=1
xdebug.remote_autostart=1
xdebug.remote_host=hos...
macOSで別パーティーションにOSをインストールし直す方法の忘備録です。
## ボリュームの追加
- ディスクユーティリティを開く (cmd + space -> "disk utility.app")
- サイドバーで、APFSボリュームを選択
- APFSボリュームを追加を選択する
...
DMM英会話では大半の教材がブラウザで表示できる形になっています。ですが教材ページのhtmlでの装飾が少し見づらいなと感じることがあります。このため、余計な情報を全部カットしてcsv形式に整形し直してみました。
## 本記事の対象読者
この記事は...
評価目的でAWS Aurora for MySQLのグローバルデータベースを利用したので、気づいたことや注意するべき事をメモする。
## DBサーバの構成
- 1つのグローバルデータベース設定に、複数のクラスタがぶら下がるイメージになる
- 2つのクラスタを作っ...
## 発生した事象
AWSコンソールから未使用(のはず)のセキュリティグループを削除しようとしたら、"ネットワークインターフェイスに紐付いている"とのエラーが出て削除できなかった。
このため、該当のネットワークインターフェースを削除しようとし...
AWSのec2サーバに対して、EC2 Instance Connectで接続できないとき、以下のポイントをチェックすることで問題が解決できるかもしれない。
## セキュリティグループの設定がおかしい
インバウンドでport22ののSSHトラフィックが許可されていない場合...
AmazonLinux2にMySQLクライアントをインストールしたときの手順メモです。
## インストール
```language-bash
# リポジトリを追加
sudo rpm -Uvh https://dev.mysql.com/get/mysql80-community-release-el7-1.noarch.rpm
# パッケージがあるか...
Amazon RDS(not aurora)で、修正プログラム適用が必要な時にダウンタイムを最小にしたいばあいがあります。
この場合は、マルチAZにしておくことでローリングアップデートが行われるため、ダウンタイムが最小化されます。DBにアクセスできないのは別のA...
AWSのCloud9を使用していて、pythonのスクリプトを実行したときにエラーModuleNotFoundError: No module named 'boto3'が発生するときがあります。
```language-bash
$ python scripts/create_table.py
Traceback (most recent call last):
File "...
AWS認定データベース 専門知識(AWS Certified Database – Specialty)(DBS-C01)の受験にあたり、役に立ちそうなハンズオントレーニングの一覧を紹介します。
## AWSのハンズオンチュートリアル
AWSではハンズオンのチュートリアルを公開しています。
...
VSCodeではコマンドラインからエディタを開けるように`code`コマンドを用意しています。
通常はコマンドパレットから`code`コマンドのセットアップが行えるのですが、何らかの事情により手作業でセットアップしたい場合、cliから下記のコマンドを実行す...
この記事では、`React` + `TypeScript`でmuiを使ったページを作り始めるための準備をするための手順を説明します。
muiは以前はMaterialUIと呼ばれていました。
## プロジェクトを作る
```language-bash
npx create-react-app 211107-create-rea...
awsのcdkを使ってS3のバケットを作成した時、`cdk destroy`コマンドでリソースを削除すると下記のエラーが出ることがあります。
```language-bash
$ cdk destory
The bucket you tried to delete is not empty
(Service: Amazon S3; Status Cod...
忘れていたこと、知らなかったことを自分の忘備録としてメモしておきます。
## ２章: データベースの作成と設定
### P21: 文字セット
- コマンド`SHOW CHARACTER SET`で、接続しているMｙSQLで使える文字コードの一覧が確認できる。
### P25: ...
CloudFormationのyamlファイルを使って、AWS上にS3バケットを作成します
## yamlファイル
以下の内容で`CloudFormation.yml`ファイルを作成します。my-backet-nameの部分は、作成したバケット名に置き換えてください。
```language-yaml
Resourc...
例えば、以下のようなクラスがあって、`const MAX_ITEM_PER_USER = 200`として定義されている200の値を、PHPUnitによるテストのときだけ変更したい場合があります。
```language-php
class UserItem
{
const MAX_ITEM_PER_USER = 200;
}
```
...
AWSの認定試験であるSysOpsアドミニストレーターは、2021/07より新しいSOA-C02試験が始まります。
SOA-C02では、これまでの多肢選択式の問題に加えて、ラボ環境による実務試験が追加されます。ラボ環境の試験は、実際にブラウザでAWSコンソールや、cli...
AWSのソリューションアーキテクト試験では、EC2インスタンスタイプの先頭にあるアルファベットとそのタイプの特徴を知っていないと解けない問題が出ることがあります。
そこで、覚えやすくするために、暗記用のキーワードを作りました。AWSからのオフィ...
2021年4月時点でのAWSサービス一覧を表形式にしてみました。
AWS認定試験のクラウドプラクティショナーなどでは、サービスの名称と概要を知っているだけで解ける問題もあるため、単語帳アプリなどに登録してしまい、ざっくりと暗記してしまうのもよいか...
PHPのComposerでは、実行するphpのバージョンを依存関係として指定できます。
現在開発している端末のphpバージョンを依存関係に加えるには、`composer require php`を実行すればよいです。
## 実行例
まずは、現在使っているphpのバージョンを`p...
macOSで、zshのコマンドライン補完を有効にするには、下記の一行を~/.zshrcに追記します。
```language-bash
autoload -Uz compinit && compinit
```
## insecure directoriesエラーが出るとき
compinitのコマンドで、下記のエラーが出ること...
Ankiでは、カードの検索(ブラウザ)画面でフィルターを指定することで、特定の条件に一致するカードのみを抽出することができます。
ここで、特定の条件を*含まない*カードのみをフィルタリングしたい場合は、条件の前にハイフン"-"を入力すれば良いです...
Android版のAnkiであるAnkiDroidでは、ゲーム用のコントローラ(GamePad)を繋いでカードをめくることができます。
Ankiでは回答の選択肢が4つありますが、どのコントローラ上のボタンを押したらどの回答が選択されたことになるのでしょうか?
### ゲー...
PHPStormでjson_encode()やjson_decode()などのjson操作系メソッドを利用すると、下記のようにエラーが出ることがあります。
これは、エラーメッセージにもある通り、composer.jsonに`ext-json`のrequire定義がないにもかかわらず、jsonエクステン...
PHPでGuzzleを使用していると、下記の`cURL error 28`が発生することがあります。
```language-php
cURL error 28: Resolving timed out after 5001 milliseconds
(see https://curl.haxx.se/libcurl/c/libcurl-errors.html)
for http://example.co...
Laravelでは文字列操作のためのヘルパクラスとして、Strクラス(Illuminate\Support\Str)が用意されています。
これのFluent版のメソッドを使うとメソッドチェーンで文字列を加工できるのでコードを簡潔に書くことができます。
```language-php
$str...
PHPにはphpcsというコードチェッカがあります。
実行することで問題があるコードをチェックでき、どのファイルに問題があるかが一目でわかります。
```language-bash
$ docker-compose exec app vendor/bin/phpcs
...
FILE: /var/www/html/app/...
LaravelのStrorageクラスでは、copy()メソッドでファイルをコピーすることができます。ですが、これはコピー元と先が同じdisk定義されている必要があります。
この記事では、異なるdisk間でファイルをコピーする方法を説明します。
## 前提
confi...
Laravelでcomposerを利用したクラスのオートロードがうまくいかない場合、下記のワンライナーでComposerが持っているクラスマップをダンプできます。
```language-bash
% ./artisan tinker
Psy Shell v0.10.5 (PHP 7.3.11 — cli) by Justin Hileman
...
Weblioのマイ単語帳を、意味・例文付きでExcelに取り込む方法です。
## Step1
Chromeで"https://uwl.weblio.jp/word-list"にアクセスし、Weblioのマイ単語帳を表示させます。
## Step2
F12キーを押しChromeのDeveloper Toolを表示さ...
LaravelのFormValidatorでは、validationに失敗すると自動で遷移元のページにリダイレクトされます。
これは、通常の入力フォームでバリデーションを行う場合は、自動的にユーザに再入力を促せるので便利なのですが、この戻り先のページをカスタマイズ...
gitでチーム開発を行っているとき、コメットメッセージに特定のルールが指定されている場合があります。
gitではフック処理というものがあり、commit-msgフックを利用することで、コミットログが特定の条件を満たしていないときにcommit処理を行えない...
## 発生した事象と対応
### 事象
dockerコマンドを実行時、Error response from daemon: Get https://registry-1.docker.io/v2/: Service Unavailable.エラーが出力されdocker imageのダウンロードが行えなかった。
```language-bash
% docker run...
投稿ナビゲーション
