December 13, 2021
最近使いまわしている設定ファイルの内容を自分用に記録。
パッケージインストール
#
今回の構成に必要なパッケージをインストールするには以下を実行。
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
...
December 12, 2021
1. npm の準備をする
#
最初に npm の準備をしましょう。
1-1. npm のアカウントを作成する
#
パッケージを公開するために npm のアカウントが必要なので作成しましょう。
...
December 11, 2021
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;
`;
上記に登場する以下ですが、
...
December 6, 2021
スクロールしても常に表示されるヘッダーやフッターを作成したい場合、まっさきに思いつくのは position: fixed; を使った実装です。
position: fixed; を指定した要素は他の要素から浮き上がります。その結果、fixed を指定していない他の要素が fixed された要素の裏側に重なるようになります。
...
December 5, 2021
オブジェクトのバリューからキーを取得したいというシチュエーションはたまに発生しますね。
例えば、以下のようなオブジェクトがあったとして、
const fruit = {
apple: 'red',
grape: 'purple',
lemon: 'yellow',
};
red と指定して apple を取得したい、みたいに。
...
December 4, 2021
かつて自分が使うために作ったものですが、誰かの役にたてばと公開しておきます。
関数（TypeScript / JavaScript）
#
TypeScript で記載しています。型定義があるのは引数部分のみですので、JavaScript として使いたい場合は引数部分の型を削除してください。
...
December 3, 2021
ケバブケースのデメリットとして、ダブルクリックなどで文字列全体を選択できないという点がよく挙げられますが、VSCode ならば設定を一つ変えるだけで対応できます。
...
December 2, 2021
S3 でホスティングしてきた静的サイトを別の場所に移したので、再び実施する時のために手順を残しておく。
詳細な実施方法は調べればいくらでも出てくるし、公式もドキュメントを整えてくれているため、この記事では簡略化して記載する。
...
December 1, 2021
既出にも程がある情報ですが、自分が必要になった時にすぐ取り出せるように記事にしておきます。なお、自分の環境が Mac & Android なのでその前提で記載します。
...
November 28, 2021
Google 公式の説明を引用しつつ適宜補足します。
基本的に Firebase の権限を管理するには Firebase IAM を利用します。Firebase IAM で可能な粒度よりもさらに細かく設定したい場合は Cloud IAM を利用します。
...
November 27, 2021
Google 公式の手引きに従って実施ください、の一言で終わってしまいそうですが、備忘録もかねて記載します。
前提整理
#
バックアップ処理の流れ
...
November 20, 2021
以下を参考に 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
...
November 13, 2021
Next.js の Static HTML Export で生成した資産を Amazon S3 にデプロイする方法について。
昔初めて作った上記ワークフローが見つかったので、削除する前に思い出として残しておきます。
...
November 10, 2021
引数に応じて戻り値の型は変化しない
#
例えば以下の関数と実行結果があるとして、age の型は何になるでしょうか？
const getAge = (shouldString: boolean) => {
return shouldString ? '20' : 20;
};
const age = getAge(true);
引数に true を渡しているため age が文字列としての '20' であることは明白です。
...
November 6, 2021
かつて自分が使うために作ったものですが、もし誰かの役にたてばと公開しておきます。
説明
#
経度緯度で指定された中心地点 A から、引数で指定された距離（x）km の範囲内に、経度緯度で指定された地点 B が含まれれば true を、含まれなければ false を返します。
...
November 5, 2021
かつて自分が使うために作ったものですが、もし誰かの役にたてばと公開しておきます。
説明
#
経度緯度で指定された中心地点 A から、引数で指定された距離（x）km を離れた北緯（n）、南緯（s）、東経（e）、西経（w）を返します。
...
November 4, 2021
たまにこのコードが欲しくて過去のコードを漁るときがあるためここに載せておきます。
関数
#
指定された年月日が実在する日付なのかを判別する関数です。
...
November 3, 2021
ダミーデータを作る際、基本的には何らかのライブラリを使うことが多いのではないでしょうか。
私はよく Faker.js を利用しています。
上記以外にも、ダミーデータを弄る必要がある時によく使う自作の便利関数がありますので、今回はそちらをご紹介です。
...
November 2, 2021
Android と iOS のそれぞれの環境を考慮して、画面の高さいっぱいに要素を表示させる方法です。
実行環境で高さの解釈が異なる
#
100% や 100vh の解釈がそれぞれの環境で異なります。
...
November 1, 2021
自分用にメモ。どう書くのだっけと都度微妙にググり作業が発生しているので。
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
...
October 24, 2021
もう一度同じ作業をすることになった時のために。自分用の備忘録です。
環境準備
#
（Firebase CLI でプロジェクト作成は済んでいるものとしてスタート）
...
October 17, 2021
自分用の備忘録です。頻繁に実施するものでもなく、記憶が薄れがちなので。
パッケージをインストール
#
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 をインストール
#
npm install --save-dev prettier
ESLint の Extend をインストール（Prettier 用）
#
npm install --save-dev eslint-config-prettier
型定義ファイルをインストール
#
以下あたりがインストールされるはず。
...
October 10, 2021
ローカルから SSH などで Lightsail に接続する時に使用するキーペアをインスタンス作成後に変更する時の手順です。
また、手元の秘密鍵を紛失してしまった時も同様の対応となります。
...
October 2, 2021
先日、スタイリングした HTML メールを送る場面があったのですが、その時初めて Gmail アプリでは HTML タグがエスケープされることを知りました。
HTML タグを使用したメールは Gmail では送れない
#
HTML タグを使用した本文を送ると…
...
October 1, 2021
最近は HOW TO 記事を多く投稿していましたので、たまにはどうでも良い感想記事でも投稿。（この記事に Lightsail に WordPress を構築する手順の説明はありません。）
そういえば使ったことのなかった Lightsail
#
先日、WordPress のサイトを構築する機会がありました。
...
September 26, 2021
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.
...
September 25, 2021
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?
...
September 24, 2021
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.
...
September 18, 2021
Firebase CLI で生成された Firebase プロジェクト内の firestore.rules がセキュリティルールを定義するファイルです。
初期状態の内容は以下です。
rules_version = '2';
service cloud.firestore {
match /databases/{database}/documents {
match /{document=**} {
allow read, write: if false;
}
}
}
セキュリティルールはすべてこのファイルに書いていくことになりますが、そんなことをしているとこのファイルの内容が膨大な量になってしまい、いつの日か嫌気が差すであろうことは想像に難くありませんよね。
...
September 17, 2021
Firebase CLI の init 後の初期状態では Cloud Functions 関連のファイルは以下となっているはずです。（TypeScript の場合）
└ functions/
├ その他ファイルたち
├ lib/
└ src/
└ index.ts
あとは index.ts にトリガー関数を書いていけばそれで完成ではありますが、トリガーの数をそれなりに作成する場合は、ファイルを分割したい気持ちに駆られることは間違いないですよね。
...