オンライン英会話のNativeCampでは「講師へお礼を伝える機能」を5/18にリリースしました。
## 生徒側の仕様
生徒側は、レッスン終了後に、講師へお礼として50円(チョコ)、100円(ケーキ)、200円(花)を送ることができます。もちろん何も送らないことも...
## エラーの内容
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...
macOSでホストOSにphp8.1とXdebugをインストールしようとしたらエラーしたので対処した時の手順を書いておきます。
## 環境
- php8.1はbrewでインストール
- macは今回、M1ではなくてIntelのものを使用(2018年のもの)
```language-bash
sw_vers...
## エラー内容
`npm install @graphql-codegen/cli`と`./node_modules/.bin/graphql-codegen init`をした後に、graphql-codegenコマンドを実行しようとしたら、下記のエラーが発生した。
- `Unable to find template plugin matching typescript-opera...
Laravel Lighthouseがでサンプルで提供するスキーマに`DateTime`型があります。`DateTime`型はPHPのクラスと`@scale`を通してマッピングされています。
## スカラ型の定義
スカラ型のマッピングは*.graphqlファイルで、以下のように定義できます。
...
PHPではLaravel Lighthouseを使うことで簡単にGraphQLのサーバを構築することができます。
今回はPHP8.1、Laravel9、Laravel Lighthouse5を使ってGraphQLのQueryを返すことができる簡単なサーバを構築する手順を説明します。
結果は、Eloquentのモデ...
docker-composeをつかってLaravel9とPHP8.0の実行環境を構築する手順を説明します。
コンテナはnginxとphp-fpmを使う方法もありますが、今回は本番環境へデプロイを容易に行えることを考慮してapacheをwebサーバにします。
## Laravelをインストール
...
AWS Amplifyでdocker-composeを使ってバックエンドサーバを利用するときに、`amplify push`でエラーが出たので、その時の対処法を備忘録として書いておきます。
## エラーの内容
`amplify push`すると、下記のエラーが出る
- `No definition av...
AWS Amplifyで、docker-composeを使わずに、Dockerfileだけ用意して単一のDockerコンテナをデプロイする方法を説明します。
(AWSドキュメントの和訳です)
## TL;DR
- `Dockerfile`は、*.gitのルートではなくて、`amplify/backend/api//src/Dockerfi...
grepコマンドでは`-v`オプションで除外する条件を指定できます。
除外したい条件が複数ある場合は、以下のように`-v`と`-e`のオプションを組み合わせて利用します。
## 実行例
入力データ
```language-bash
$ cat input.txt
foo
bar
baz
...
## はじめに
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経由で生成しようとした(lang=typescript)。
デフォルトVPC情報を取得しようとして、下記のコードを書いたがエラーが発生した。
### 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の英検一級の攻略に関する動画を集めました。
英語の学習動画ではなく英語の学習方法の動画なので、これだけ見ても語学力は向上しませんが、どうやって勉強していけばよいかの計画立てをするときに参考になります。
## 心がけ、学習方針
#...
投稿ナビゲーション
