こんな感じで文字列を検索したい時に使える関数をご紹介します。

const names = [
  'ほしの ユタカ',
  'つきもと マコト',
  'かざま リュウイチ',
  'さくま マナブ',
  'こん ウェンガ',
];

const res1 = search(names, 'ユタカ'); // 'ほしの ユタカ' が返ってきて欲しい。
const res2 = search(names, 'きもと'); // 'つきもと マコト' が返ってきて欲しい。

補足

Android の Chrome ブラウザに存在する機能の「タップして検索（Touch to Search）」が出て欲しくない時は、

user-select: none;

しましょう。

user-select - CSS: カスケーディングスタイルシート | MDN

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

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

（実施した時のメモ）

Java をインストールする #

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

• openjdk — Homebrew Formulae
• https://formulae.brew.sh/formula/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 の用語で「インストール時に自動ではパスを通さないもの」の様子。

（公式ドキュメントを見るのが早いです。）

• クロスオリジン リソース シェアリング（CORS）の構成 | Cloud Storage | Google Cloud
• ウェブでファイルをダウンロードする | CORS の構成 | Firebase

設定する #

ローカルにファイルを作って設定コマンドを叩くだけ。（ファイル名はなんでも良いです。）

あるとき、Cloud Storage に動画がアップロードされことを起点に Cloud Functions のトリガーを動かし、そのトリガーで FFmpeg を利用してサムネイルを作りつつ、GCP の Transcoder API を呼び出して HLS 形式に動画を変換させる、という処理を作っていました。

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

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

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

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

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

有効化する #

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

Firebase コンソール
  > プロジェクト設定
    > 統合
      > Google Analytics
        > 有効にする

• 紐づける Google Analytics アカウントを選択するか新規作成します。
• 紐づけるプロパティを選択するか新規作成します。
• 「有効化する」ボタンを押下します。

初期化方法を更新する #

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

例えばあなたの Firebase プロジェクトに、画像を格納するバケットと、動画を格納するバケットがあるとした場合、各設定ファイルは以下のようになるはずです。

firebaserc

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

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

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

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

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

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

私の Mac では何かアプリを開こうとするとこれが表示されます（以下は Google Chrome を開こうとした時）。

１、２秒もあれば入力できますし、そこまで気にしてはいなかったのですが、今回お掃除しましたのでその記録。

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

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

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

完全に個人的なメモ。たまに捻ったことをやろうとした時に無駄に時間を使ってしまったので。

一度 ignore 対象となったファイルを ignore から外すことは無理です。

以下の /ignored-directory/unignored.md は ignore されたままです。! は効きません。

Prefix と Suffix の間は #

const name = 'hello-dev-function';

hello の部分は Prefix、function の部分は Suffinx。

では間の部分の dev はなんて呼べば良いのでしょう。

答えは Infix です。

あまりプログラミング関係ないですね。普通の英語の話です。

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 #

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

補足

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

補足

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

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

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

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

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

補足

本記事は以下の記事を参考にしています。

• 経年劣化に耐える ReactComponent の書き方 - Qiita
• Hooks 時代の設計の話 #agrinoteinside - Speaker Deck

Parent / Child / Button の３つのコンポーネントからなるページを作成するとします。Parent コンポーネントが Child と Button の２つを内包している状態です。

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

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

働かずにお金を手に入れたかったので、Stripe Payment Links で寄付を募ってみました。

Stripe Payment Links #

Stripe は多種類の決済サービスを提供していますが、2021 年 5 月に Stripe Payment Links という新しいサービスが公開されました。

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.

例えば以下の関数があるとします。これは １秒後にリゾルブまたはリジェクトされるプロミスを返す関数です。どちらになるかは 2 分の 1 でランダムに決まります。

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

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

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

以下の本より冒頭部分を自己整理。

O’Reilly Japan - プログラミング TypeScript

コンパイルプロセス #

TypeScript に入る前に JavaScript のコンパイルプロセスは以下。通常のプログラミング言語と同様。

いつも通り docker-compose up したらある日突然掲題のエラーが出るように。

Docker 関連のファイルを何か更新したわけでもないのになぜ？

いまのところまだ理由は特定できていないですが、とりあえずのワークアラウンドを記載します。

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

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 のコメントが参考になります。

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

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

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