最近使いまわしている設定ファイルの内容を自分用に記録。

前提：Node.js 14 を想定しています。

パッケージインストール #

今回の構成に必要なパッケージをインストールするには以下を実行。

最近使いまわしている設定ファイルの内容を自分用に記録。

パッケージインストール #

今回の構成に必要なパッケージをインストールするには以下を実行。

npm i -D \
  typescript \
  prettier \
  eslint \
  @typescript-eslint/parser \
  @typescript-eslint/eslint-plugin \
  eslint-config-airbnb \
  eslint-config-airbnb-typescript \
  eslint-config-next \
  eslint-config-prettier \
  eslint-plugin-import \
  eslint-plugin-jsx-a11y \
  eslint-plugin-react \
  eslint-plugin-react-hooks

Next.js 関連 #

next.config.js

1. npm の準備をする #

最初に npm の準備をしましょう。

1-1. npm のアカウントを作成する #

パッケージを公開するために npm のアカウントが必要なので作成しましょう。

CSS in JS の代表的なライブラリである styled-components や Emotion では以下のような書き方でスタイルを定義します。

const Button = styled.button`
  padding: 8px;
  background-color: #ff6699;
  color: #ffffff;
`;

const button = css`
  padding: 8px;
  background-color: #ff6699;
  color: #ffffff;
`;

上記に登場する以下ですが、

スクロールしても常に表示されるヘッダーやフッターを作成したい場合、まっさきに思いつくのは position: fixed; を使った実装です。

position: fixed; を指定した要素は他の要素から浮き上がります。その結果、fixed を指定していない他の要素が fixed された要素の裏側に重なるようになります。

オブジェクトのバリューからキーを取得したいというシチュエーションはたまに発生しますね。

例えば、以下のようなオブジェクトがあったとして、

const fruit = {
  apple: 'red',
  grape: 'purple',
  lemon: 'yellow',
};

red と指定して apple を取得したい、みたいに。

かつて自分が使うために作ったものですが、誰かの役にたてばと公開しておきます。

関数（TypeScript / JavaScript） #

TypeScript で記載しています。型定義があるのは引数部分のみですので、JavaScript として使いたい場合は引数部分の型を削除してください。

ケバブケースのデメリットとして、ダブルクリックなどで文字列全体を選択できないという点がよく挙げられますが、VSCode ならば設定を一つ変えるだけで対応できます。

S3 でホスティングしてきた静的サイトを別の場所に移したので、再び実施する時のために手順を残しておく。

詳細な実施方法は調べればいくらでも出てくるし、公式もドキュメントを整えてくれているため、この記事では簡略化して記載する。

既出にも程がある情報ですが、自分が必要になった時にすぐ取り出せるように記事にしておきます。なお、自分の環境が Mac & Android なのでその前提で記載します。

Google 公式の説明を引用しつつ適宜補足します。

基本的に Firebase の権限を管理するには Firebase IAM を利用します。Firebase IAM で可能な粒度よりもさらに細かく設定したい場合は Cloud IAM を利用します。

Google 公式の手引きに従って実施ください、の一言で終わってしまいそうですが、備忘録もかねて記載します。

• 公式ドキュメント
• データのエクスポートをスケジュールする | Firebase Documentation

前提整理 #

バックアップ処理の流れ

以下を参考に package.json 及びワークフロー定義を作成してください。

package.json #

package.json

{
  "scripts": {
    "lint:tsc": "tsc --noEmit",
    "lint:eslint": "eslint src --ext .js,.jsx,.ts,.tsx",
    "lint:prettier": "prettier --check src"
  }
}

• 上記は src ディレクトリ下に検査対象のファイルが配置されている前提としています。
• 検査対象ファイルのディレクトリや拡張子は各自の環境に合わせて適宜変更ください。

GitHub Actions のワークフロー定義 #

.github/workflows/lint.yml

Next.js の Static HTML Export で生成した資産を Amazon S3 にデプロイする方法について。

昔初めて作った上記ワークフローが見つかったので、削除する前に思い出として残しておきます。

引数に応じて戻り値の型は変化しない #

例えば以下の関数と実行結果があるとして、age の型は何になるでしょうか？

const getAge = (shouldString: boolean) => {
  return shouldString ? '20' : 20;
};

const age = getAge(true);

引数に true を渡しているため age が文字列としての '20' であることは明白です。

かつて自分が使うために作ったものですが、もし誰かの役にたてばと公開しておきます。

説明 #

経度緯度で指定された中心地点 A から、引数で指定された距離（x）km の範囲内に、経度緯度で指定された地点 B が含まれれば true を、含まれなければ false を返します。

かつて自分が使うために作ったものですが、もし誰かの役にたてばと公開しておきます。

説明 #

経度緯度で指定された中心地点 A から、引数で指定された距離（x）km を離れた北緯（n）、南緯（s）、東経（e）、西経（w）を返します。

たまにこのコードが欲しくて過去のコードを漁るときがあるためここに載せておきます。

関数 #

指定された年月日が実在する日付なのかを判別する関数です。

ダミーデータを作る際、基本的には何らかのライブラリを使うことが多いのではないでしょうか。

私はよく Faker.js を利用しています。

• Marak/faker.js: generate massive amounts of realistic fake data in Node.js and the browser
• https://github.com/marak/Faker.js/

上記以外にも、ダミーデータを弄る必要がある時によく使う自作の便利関数がありますので、今回はそちらをご紹介です。

Android と iOS のそれぞれの環境を考慮して、画面の高さいっぱいに要素を表示させる方法です。

実行環境で高さの解釈が異なる #

100% や 100vh の解釈がそれぞれの環境で異なります。

自分用にメモ。どう書くのだっけと都度微妙にググり作業が発生しているので。

TypeScript #

次の１行を無視： @ts-ignore #

let x = 1;
// @ts-ignore
x = 'a';

FYI: TypeScript: Documentation - TypeScript 2.6 - @ts-ignore

ファイル内すべて無視： @ts-nocheck #

// @ts-nocheck

let x = 1;
x = 'a';
let y = 2;
y = 'b';

FYI: TypeScript: Documentation - TypeScript 3.7 - @ts-nocheck

もう一度同じ作業をすることになった時のために。自分用の備忘録です。

環境準備 #

（Firebase CLI でプロジェクト作成は済んでいるものとしてスタート）

自分用の備忘録です。頻繁に実施するものでもなく、記憶が薄れがちなので。

パッケージをインストール #

ESLint をインストール #

• eslint

npm install --save-dev eslint

ESLint の Parser をインストール #

• @typescript-eslint/parser

npm install --save-dev @typescript-eslint/parser

ESLint の Plugin をインストール #

• @typescript-eslint/eslint-plugin
• eslint-plugin-react
• eslint-plugin-react-hooks
• eslint-plugin-jsx-a11y

npm install --save-dev @typescript-eslint/eslint-plugin eslint-plugin-react eslint-plugin-react-hooks eslint-plugin-jsx-a11y

ESLint の Extend をインストール #

• eslint-config-next
• eslint-config-airbnb
• eslint-config-airbnb-typescript

npm install --save-dev eslint-config-next eslint-config-airbnb eslint-config-airbnb-typescript

Prettier をインストール #

• prettier

npm install --save-dev prettier

ESLint の Extend をインストール（Prettier 用） #

• eslint-config-prettier

npm install --save-dev eslint-config-prettier

型定義ファイルをインストール #

以下あたりがインストールされるはず。

ローカルから SSH などで Lightsail に接続する時に使用するキーペアをインスタンス作成後に変更する時の手順です。

また、手元の秘密鍵を紛失してしまった時も同様の対応となります。

先日、スタイリングした HTML メールを送る場面があったのですが、その時初めて Gmail アプリでは HTML タグがエスケープされることを知りました。

HTML タグを使用したメールは Gmail では送れない #

HTML タグを使用した本文を送ると…

最近は HOW TO 記事を多く投稿していましたので、たまにはどうでも良い感想記事でも投稿。（この記事に Lightsail に WordPress を構築する手順の説明はありません。）

そういえば使ったことのなかった Lightsail #

先日、WordPress のサイトを構築する機会がありました。

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

Original article

firestore.rules in the Firebase project generated by the Firebase CLI is the file that defines the security rules.

The initial contents are as follows.

rules_version = '2';
service cloud.firestore {
  match /databases/{database}/documents {
    match /{document=**} {
      allow read, write: if false;
    }
  }
}

All the security rules will be written in this file, but it’s not hard to imagine that the content of this file will become so large that you will get tired of it one day.

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

Original article

After init of the Firebase CLI, the files related to Cloud Functions will be as follows (In the case of TypeScript).

└ functions/
   ├ (ohter files)
   ├ lib/
   └ src/
     └ index.ts

All you have to do is write the trigger function in index.ts

However, if you create a lot of triggers, you will definitely be tempted to split the files, right?

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

Original article

One of the Firestore data types is the Timestamp type. This is a proprietary type of Firestore.

Timestamp has a toDate() method that can be called to convert data to Date type of JavaScript. After getting data on the client side, it is a common practice to call toDate() first when using the data.

If all Timestamps in a document can be treated as Date type on the client side, it is useful to make a function that execute toDate() on all Timestamp fields of the getting document.

Firebase CLI で生成された Firebase プロジェクト内の firestore.rules がセキュリティルールを定義するファイルです。

初期状態の内容は以下です。

rules_version = '2';
service cloud.firestore {
  match /databases/{database}/documents {
    match /{document=**} {
      allow read, write: if false;
    }
  }
}

セキュリティルールはすべてこのファイルに書いていくことになりますが、そんなことをしているとこのファイルの内容が膨大な量になってしまい、いつの日か嫌気が差すであろうことは想像に難くありませんよね。