Home

Nest.js に React.js 版パッケージの Sentry を導入する

January 23, 2022

Sentry には Next.js 用のパッケージがありますが、ここでは React.js 版のパッケージを導入します。

Next.js 用パッケージの説明にもありますが、Next.js 版は @sentry/react と @sentry/node をラッピングしたものです。

...

Mac に Java をインストールして jks（キーストア）を作成するまで

January 20, 2022

（実施した時のメモ）

Java をインストールする #

Homebrew で openjdk をインストールする。

brew install openjdk

インストール中に以下のメッセージが表示される。

For the system Java wrappers to find this JDK, symlink it with
  sudo ln -sfn /usr/local/opt/openjdk/libexec/openjdk.jdk /Library/Java/JavaVirtualMachines/openjdk.jdk

openjdk is keg-only, which means it was not symlinked into /usr/local,
because macOS provides similar software and installing this software in
parallel can cause all kinds of trouble.

If you need to have openjdk first in your PATH, run:
  echo 'export PATH="/usr/local/opt/openjdk/bin:$PATH"' >> ~/.zshrc

For compilers to find openjdk you may need to set:
  export CPPFLAGS="-I/usr/local/opt/openjdk/include"

openjdk は keg-only とのこと。keg-only は Homebrew の用語で「インストール時に自動ではパスを通さないもの」の様子。

...

Google Cloud Transcoder API を使ってみた記録

January 15, 2022

例えば MP4 形式の動画を HLS 形式に変換する場合、AWS ならば Elemental MediaConvert があります。

では、GCP 上にサービスを構築している場合はどうしましょう？

GCP では 2020 年 11 月に Transcoder API というサービスの提供を始めています。これが GCP 版の Elemental MediaConvert にあたるものです。しかしベータ版という扱いだったこともあり、なかなか本格的に使用を開始するには躊躇われる状態でした。

...

Google Analytics for Firebase の設定方法（Web）

January 14, 2022

（正直、公式ドキュメント見れば済む話です。）

https://firebase.google.com/docs/analytics/get-started

有効化する #

以下の手順で有効化します。

Firebase コンソール
  > プロジェクト設定
    > 統合
      > Google Analytics
        > 有効にする
  • 紐づける Google Analytics アカウントを選択するか新規作成します。
  • 紐づけるプロパティを選択するか新規作成します。
  • 「有効化する」ボタンを押下します。

初期化方法を更新する #

先の有効化ボタンを押下すると次の案内が表示されるはずです。

...

Next.js で SSR を無効化する方法（next/dynamic）

January 12, 2022

例えば Next.js でこんなコンポーネントを表示しようとしても、

const Component = () => {
  return <p>This is {window.location.href}</p>;
};

ReferenceError: window is not defined になります。

これを回避するには、useEffect の中で window オブジェクトにアクセスする必要があります。回避と書きましたがこれが正しい対応方法です。

...

Docker Desktop for Mac のファイルシステムが gRPC-FUSE だとボリュームマウントの cached や delegated オプションは不可

January 11, 2022

まず結論からということでタイトルに要約したら長くなりました。

Mac の Docker は遅いということで有名（？）です。私も日頃の開発は Docker Desktop for Mac を通じて行っています。私の環境だと Mac のネイティブの環境での開発と比較するとやはり若干の遅さは感じるものの、ほとんど問題になるレベルではないため特に気にしていませんでした。

...

Firebase Authentication の UID（User ID）は公開してもセキュリティ上問題ない

January 9, 2022

たまに心配される方がいるようなので。

Firebase Authentication の UID は、URL などのユーザに見えるところに表示してもセキュリティ上問題ありません。

UID だけではなにもできないですからね。セキュリティを担保するのは Authentication の認証や、Cloud Firestore や Cloud Storage のセキュリティルールです。

...

React components for overcoming technical debt

January 5, 2022

This article is a translation of a Japanese article I posted earlier.

Original article

Here is how to write React components, which is currently a best practice in my mind.

I believe that the code will convey my intentions, so I will skip the explanation.

What to create #

Component

The above consists of the following files. pages/index.tsx is the entry point component.

├ pages/
│ ├ index.tsx
│ ├ Heading.tsx
│ ├ EvenOdd.tsx
│ ├ IncrementButton.tsx
│ └ ResetButton.tsx
└ types/
  └ index.ts

Common type definitions #

types/index.ts

...

技術的負債に打ち勝つReactコンポーネント

January 4, 2022

補足

先日同様のテーマで別の記事を投稿していますが、先の記事を実際に作成したのはかなり昔のことで（作成から投稿までラグがありました）、現在は本記事の書き方が私のなかでの推奨となっています。

...

Gatsby のプロジェクトを作成するまでの色々な方法

January 3, 2022

補足

本記事で使用している Gatsby はバージョン 4 です。他のバージョンでは当てはまらない内容があるかもしれません。

このブログのジェネレーターについて Hugo から Gatsby への移行を試みました。Gatsby のプロジェクトを作成するまでに複数の方法が考えられ、調べてみるとところにより三者三様な手順となっていたため、備忘録代わりに整理・記録しておきます。

...

Flutter を Install する（macOS）

December 31, 2021

公式にわかりやすい手順があります。（以下は macOS のページです。）

https://docs.flutter.dev/get-started/install/macos

ただし、上記手順では直接インストールしているものを、どうせなら Homebrew 経由でインストールしたかったり、あとは個々人の環境によって当然ながらすでにインストールされているものが違ったりしますので、わたしの場合のインストール手順ということでこの記事に記録しておきます。

...

JavaScriptで実証するモンティ・ホール問題

December 24, 2021

はい！みなさんお待ちかね、プログラミングで遊んでみようのコーナーです！

今回は記念すべき第一回！そして第二回目の予定は無いのでなんと今回が最終回です！

...

When using "async await", it might be better to simply "catch" rather than "try catch".

December 22, 2021

This article is a translation of a Japanese article I posted earlier.

Original article

For example, suppose we have the following function. This returns a promise that will either be resolved or rejected after 1 second. Which one it will be is randomly determined with a probability of 50%.

const mayReject = () => {
  return new Promise((resolve, reject) => {
    const shouldReject = Math.random() >= 0.5;
    const settle = shouldReject ? reject : resolve;
    const message = shouldReject ? 'rejected' : 'resolved';
    setTimeout(() => settle(message), 1000);
  });
};

Error handling of async await is generally done by try catch, so for example, when you call the above function, you can write the following.

...

ISACA：CISA の CPE を取得する - 2021年版

December 20, 2021

CISA 資格保持者の年末恒例行事といえば CPE 取得ですね。（計画性ないの私だけ？）

備忘録として CPE 取得から登録の流れについて手順を整理します。

確か CISA を取得した 2019 年頃にも同じような記事を書いた記憶がありますが、手順が変わっている可能性もあるため 2021 年バージョンとして改めて記載します。

...

ESLintで「Parsing error: "parserOptions.project" has been set for @typescript-eslint/parser.」のエラーが出たら

December 17, 2021

この記事を見ているということは、こんなエラーが出ましたか？

Parsing error: "parserOptions.project" has been set for @typescript-eslint/parser.
The file does not match your project config: babel.config.js.
The file must be included in at least one of the projects provided.

原因と対応方法 #

以下の GitHub のコメントが参考になります。

...

ドメインレジストラを引っ越そうと思ったけれど結局諦めた話

December 16, 2021

お名前.com から別のドメインレジストラに変えようと思ったけれど結局使い続けることになりました、というぼやきです。

お名前.com の UI （レスポンス遅い、販売促進の誘導が邪魔） が好きになれなくてドメインレジストラの引っ越しを検討していました。有力候補は以下の３つでした。

...

AWS Lightsail に WordPress を構築して HTTPS 化する手順

December 15, 2021

久しぶりに Lightsail に WordPress を構築する機会があったものの、すっかり手順を忘れてしまっていたので。（本記事で説明不足な点は、途中途中で記載する参考リンクをご参照ください。こんな記事よりもずっと役に立ちます。）

...