kyohei's blog

profile picture
Written by Kyohei Tsukuda who lives and works in Tokyo 🇯🇵 , building useful things 🔧.
email / facebook / X / GitHub

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 "&lt… 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&#39… 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