Blog
TypeScriptでTruffleの環境を作成する
February 16, 2021 - 1077 words - 6 mins
ちょっと久しぶりに Ethereum(Dapp)の勉強をしているので、いろいろナレッジを書き残していきたい。
こちらの TypeChain を参考にしています 👀
https://github.com/ethereum-ts/TypeChain
前提条件
Truffle v5.1.66 (core: 5.1.66)
Solidity - 0.6.2 (solc-js)
Node v14.15.3…
read more
og画像をvercel上で生成してみる
September 12, 2020 - 1615 words - 9 mins
ブログの記事などで OG 画像を動的に作りたい場合、サーバーサイドを持つサービスなら、 ImageMagick や node-canvas を使い構築することができますが、サーバーサイドを持たない静的なサイトの場合、 vercel 等の Serverless Functions を使い、画像を生成するマイクロサービスを作成し運用することができます。
og-image について
og-image は…
read more
async-semaについて
September 10, 2020 - 590 words - 3 mins
Java や C++などではマルチスレッドプログラミングではセマフォを使った実装はよくありますが、JavaScript では以下のようなケースでセマフォを利用したくなることがあります
XHR で一度にデータを沢山読み込みたいが呼び出し先に API のリクエスト制限があったり、サーバに負荷をかけたくない場合に一定の数だけリクエストする場合
（node.js で)ファイルや DB のデータに非同期で…
read more
Next.jsにてContextとhookで多言語対応する
August 18, 2020 - 1970 words - 10 mins
Next.js(React)で多言語対応をしたい場合、isaachinman/next-i18nextなどのライブラリはありますが、ちょっと多機能すぎて、ブラックボックスな部分が多いと感じたので、簡単に自作してみることにしました。
準備
とりあえず Next.js の環境を用意します。
$ npx create-next-app demo --use-npm --example "<…
read more
Reactで安全にリンクを出力する
August 15, 2020 - 505 words - 3 mins
React で入力されたテキストに URL が含まれている場合に、出力する側でその URL を判定し、自動的に a タグを適応したい。
利用するライブラリは以下の 2 つ
Anchorme
js-xss
ライブラリ
Anchorme
テキストに含まれている URL ライクな文字列を自動的に a タグに変換してくれる。
import anchorme from 'anchorme'…
read more
TypeScriptのビルド中にJavaScript heap out of memoryのエラーが出た
August 12, 2020 - 588 words - 3 mins
AWS の EC2 のインスタンスが小さいせいか、あるタイミングから tsc コマンドを実行した際に以下のエラーが発生するようになった。
[stdout]
[stdout]
[stdout]<--- JS stacktrace --->
[stdout]
[stdout]==== JS stack trace ======================================…
read more
React + TypeScript等ではまったこと
August 01, 2019 - 204 words - 2 mins
TypeScript で React の開発をしているときにハマった箇所のメモ。
React のイベントの Props 定義
クリックイベントはReact.MouseEvent、選択リスト/テキストのインプットはReact.ChangeEventが型になる。
export interface IMyComponentProps {
prop1: string;
prop2: (event:…
read more
TypeScriptのインデックスシグネチャについて
July 29, 2019 - 306 words - 2 mins
JavaScript から移行して TypeScript を書いていると、オブジェクトの扱いで以下のようなエラーが発生することがある。
Element implicitly has an 'any' type because type '{}' has no index signature.
（型 '{}' にはインデックス シグネチャがないため、要…
read more
Gatsby.jsで年ごと、月ごとで記事一覧を表示したい
July 12, 2019 - 1104 words - 6 mins
Gatsby.js でブログなどを書いていると wordpress などにある月別、年別のアーカイブページがないことに気がついたので、自作で作ってみました。
要約すると
月別など期間でフィルターするクエリを学ぶ
/2019/ , /2019/01/ などの月別、年別のアーカイブページを作成する
ページ内のクエリで月別、年別で取得するフィルターして記事を取得する
年ごと、月ごとでフィルタするクエ…
read more
Amplifyのデプロイ通知をSlackに通知する(Slack App編)
July 11, 2019 - 369 words - 2 mins
パネル
前回の記事でレガシーになっている Slack の Incoming Webhooks での通知方法を書いたので、
今回はそれを新しい方の Slack App で実行する方法を書きたいと思います。
といってもやり方は簡単で、
Slack App を作成、自分の Slack 環境にインストール
Incoming Webhook の URL が新たに発行されるのでそれに置き換える
若干のメッセ…
read more