All Posts

smart contractでeventをemitした際に、ethers.jsでeventをlistenして、 何らかのアクションを取りたい時があります。その際のやり方を紹介したいと思います。 たとえば、ERC20のtokenをtransferして、そのeventを購読して、transferされたらそれをconsoleに表示するにはたとえば、下記のようなコードになります。（reactを想定）

approveなどの際によく使われているINT_MAXですが、ethers.jsですでに用意されているので、 これを使えば簡単にできます。具体的に下記のconstantを参照するだけです ethers.constants.MaxUint256

chakura-uiでbackgroundの色を全部の画面に適用する方法を紹介します。 chakura-uiではextendThemeがあるので、それをもとに自分のカスタムした themeを作り、providerを指定する際にカスタムで作ったthemeを指定してあげます。そうすることで、backgroundなども自分の好きなようにカスタマイズすることができます

hardhatとetherscanを使ってcontractをverifyする際に下記のようなエラーが出る場合があります。この対処方法を紹介します。Nothing to compileError in plugin @nomiclabs/hardhat-etherscan: The constructor for contracts/ExampleContract.sol:ExampleContract has 2 parameters but 0 arguments were provided instead.

npx hardhat compileやnpx hardhat run scripts/deploy.jsで下記のエラーが出た時の対応法を紹介します。HardhatError HH700 Artifact for contract ContractExample not found.すでに、contractがあるにもかかわらず、うまくcompileできない場合があります。その場合はキャッシュが残っているのが原因であるので、npx hardhat clean

nodeでreplで試したものをファイルに保存したい時があるかと思います。 そんな時は下記のコマンドをやれば、nodeのreplで書いたコードをファイルに保存できます。 .save filename.js

visual studio codeでファイル内での置換をショートカットで行うときの ショートカットキーの紹介です。macでそれをやると、visual studio codeが閉じてしまいます。 そのため、macでのファイル内での置換のショートカットはoption + cmd + fになります。 また、全体ファイルでの置換はshift + cmd + hになります。

cypressで下記のようなエラーが起きた際の対応方法を紹介します。(uncaught exception) Error: ResizeObserver loop limit exceeded対応方法としては、cypress/support/index.jsに下記のようなコードを記載して、エラーをスキップすること対応ができます。

webpack-dev-serverでサーバを立ち上げたときに、下記のようにエラーが出たので、 その対応方法を紹介します。configurationThe 'mode' option has not been set, webpack will fallback to 'production' for this value.Set 'mode' option to 'development' or 'production' to enable defaults for each environment.You can also set it to 'none' to disable any default behavior. Learn more: https://webpack.js.org/configuration/mode/

webpackでbabelを使う際に下記のようなエラーに遭遇しました。 主なエラーは、 Error: Plugin/Preset files are not allowed to export objects, only functions. になります。これはbabelのバージョンの違い(babel 6とbabel 7)により生じるエラーです。 そのため、新しいbabelに揃えるために、babelの一式のmoduleを消して、その後あたらしいものを入れます。 例えば、こんな感じで消して

hardhatでdeploy済みのcontractにabiを使って接続しインタラクトしたいときのやり方を紹介します。例えば、ある特定の人のwallet addressのUSDCの残高を確認したいとします。 その際には、下記のようにhardhatで記載してあげたら、確認できます。erc20のabiはその辺に落ちているので、例えばこちらから拾います。肝となる部分は、new hre.ethers.Contract(token.contractAddress, erc20, account)

ReactのuseMemoがどういう役割を持っていて、いつどのような状況の時に使うべきかを紹介します。useMemoはその名の通りmemo化をするもので、関数の結果をメモ化する時に使います。重たい処理がありその結果を都度計算したくなく、ある状態が変化した時だけ再計算してつかいた時に使うものです。下記を見てもらえれば、useMemoがどのようなものかわかるかと思います。

ReactのuseCallbackの役割とuseCallbackをいつ使えば良いのかを紹介したいと思います。 主にuseCallbackはuseCallback(fn, deps)で定義され、despが変わらない限り、新しい関数のインスタンス(fn)を作りません。これだけだと、なんのために存在しているかわからないと思います。 useCallbackが主に解決している問題を紹介します。Memo化したコンポーネントが親で作成した関数をpropsとして指定しているばかりに、Memo化したにも関わらず、親が再描画されたときに子コンポーネントも意図せずに再描画されてしまいパフォーマンスが低下する問題があります。これを解決するのがuseCallbackの主な役割です。

React.memoはReactでDOMをレンダーのパフォーマンスを最適化する際に使われます。 すなわち、React.memoを適切に使うことで、viewの描画速度を早めることでき、 ユーザの利便性や体験を向上させることができます。ただし、正しく使わないと最適化できないので、React.memoの正しい使い方を例を交えて紹介したいと思います。例えば、下記のように好きな食べ物を表示するコンポーネント(FavaoriteFood)があり...

今回は、ReactからGraphQLのAPIサーバからデータと取ってきて表示する方法を紹介します。 簡単に理解そして、実装するために、App.jsを変更したらできるようにしています。 動きを理解したら、それぞれファイルを分けてみてください。では、まずはcreate react appでreactのappを作ります。

graphqlのapiを作って、vercelで提供する方法を紹介します。また例ではわかりやすいように、果物を返すAPIとしています。では、まずtypescriptが使えるnext.jsを作ります。npx create-next-app graphql-api --ts次に、yarn add graphql apollo-server-micro micro-cors micro

error TS7053: Element implicitly has an 'any' type because expression of type 'string' can't be used to index typeのエラーが出た時の対処方法を紹介します。解決方法はobjectに型を定義してあげることです。[key: string]: stringとすることでkeyに入る部分はstring型であることを明示します。 そうすることで、indexとして使われる際にはstring型を許容するようになり、buildエラーも無くなります。

javascriptのunix timestampのデータを日付の形に変更する方法を紹介します。とても簡単で、new Date()を使うだけです。

githubactionでなんらかの処理を定期的に実行するやり方を紹介します。 やり方としてはとても簡単でonでscheduleに値を入れるだけです

githubactionでcypressを使う方法を紹介します。やり方はとても簡単で単純なものだとgithubactionで下記を.github/workflows/cypress-run.ymlに設定するだけです。 ファイルは必ず`.github/workflows/`の下にないと動かないでそこだけ気をつけましょう。

typescriptとfirebase adminを使って、realtime databaseにデータを保存するやり方を紹介します。firebase adminをimportします。また、adminの場合がservice accountが必要になりますが、firebaseからダウンロードしたservice accountの中身をそのままコピーして、.envのファイルに記載してしまいます。これは、herokuやその他のPass系のサービスを使った際にenvの設定の仕方が楽になるためこうしています。

cypressでnodeのコマンドを実行したい場面があるかと思います。cypressはクライアント側で動くプログラムなので、そのままだとnodeで動かすコードは実行できませんが、pluginを使うと実行することができます。pluginの作り方は簡単で、まず、下記のようにnodeを実行するコマンドを作ります。cypress/plugins/index.js

cypressでwaitやsleepをする方法を紹介します。かなり簡単で下記のようにするだけですcy.wait(5000) //5秒まつ

'example.ts' cannot be compiled under '--isolatedModules' because it is considered a global script file. Add an import, export, or an empty 'export {}' statement to make it a module.ts(1208)

package.jsonでdeployをする前に、buildしたいのような場合があると思います。 そのような時に、terminalでわざわざ下記のように2回実行するのは手間かと思います。 そこで、このような場合にコマンドを一つにまとめる方法を紹介します。単純にpreやpostを使うと前後で依存するものをコマンドの前後のタイミングで実行することができます。 例えば、next.jsとfirebaseを使っているとして、buildして、deployのコマンドをしたら、 デプロイができるとします。

solidityで複数行の文字列を書く方法を紹介します。一番単純なのは、""で繋げるのが一番簡単です。あるいは、abi.encodePackedを使って、下記のように連結することもできます。

npm ciではciなどでnpm installする場合に使われるもので、 一度環境をクリーンにしてから、installされるものです。yarnにもそれに相当するコマンドがあります。versionごとに少し異なるので、注意が必要です。 yarn2以下の場合には、yarn install --frozen-lockfileでできます。

Reactで複数のクラスをclassNameに追加する方法を紹介します。 複数のクラスを追加する方法はとても単純で、template literalsを使うだけです

Line 7:29: React Hook "useState" cannot be called inside a callback. React Hooks must be called in a React function component or a custom React Hook function react-hooks/rules-of-hooksのエラーが起きる原因と解消方法の解説

Line 39:1: foo import should occur before import of ../hoge import/orderのようなエラーが出た時の対処方法を紹介します。これはそのままの意味で、`foo`というコンポーネントのimportは`../hoge`のコンポーネントの前でimportしてねという意味です。importの順番を変えてあげれば解消できます！

visual studio codeをterminalから起動する方法を紹介します。まず、terminalから起動できるようにvisual studioで`command + shift + p`を押します。次に、図のように`Shell`をタイプして、`Shell Command : Install code in PATH`を選択します。

vscodeでvimを使う場合に、デフォルトの設定だとh,j,k,lを長押しすると、 holdされて通常のvimのように動作しません。そこで、長押した際にholdされずにスムーズに動かす際には、以下のように設定を変えて、visual studio codeを再起動する必要があります。

hardhatで、デプロイしたcontract(コントラクト)に繋いで、メソッド呼びただし等をする方法を紹介します。とても簡単でまずは`hardhat-ethres`を`require`して、 その後に`ethers.getContractFactory`でfactoryを作り、 あとは、`attach`でデプロイしたcontractに繋げるだけです。

node.jsでsvgファイルを読み込む方法を紹介します。ファイルを読み込む方法と変わらないです。 具体的には、`readFileSync`を使うと読み込むことができます。svgのmarkupを表示させるためには、読み込んだファイルを`toString()`でstringに変換する必要があります。

ethereumでのスマートコントラクト自体のファイルサイズ上限、各トランザクションでのファイル上限を紹介します。ethereumでのsmart contract自体のファイルサイズの上限は24kbです。 対して、トランザクションの上限は各トランザクション毎に32kbです。

スマートコントラクト(solidity)でether(ETH)を受け取るコントラクトの書き方を紹介します。 実はとても簡単で、`recieve`と`fallback`を定義してあげるだけで送ることができます。

もともとruby、python、javascriptなどのインタプリタ言語を主に使っているため、 Rustでもreplが使いたかったので調べたらありました。Rustでもreplが使えるライブラリ[evcxr](https://github.com/google/evcxr)があります。使うためには、下記のようにしてインストールする必要があります。

solidityで日本語のようなunicodeの文字列を使う方法を紹介します。 とても簡単で`unicode`を使うとできます。

solidityを使っていて下記のwarningを消す方法とそもそも何でているのかを説明します。 Warning: SPDX license identifier not provided in source file. Before publishing, consider adding a comment containing SPDX-License-Identifier SPDX-License to each source file. Use SPDX-License-Identifier UNLICENSED for non-open-source code Please see

rubyでの日付の取得はDate型とDateTime型を使ってできます。 それぞれで取得した日付を任意のフォーマットに変換する方法を紹介します。とても簡単で両方ともstrftimeを使えば実現できます。 今日の日付を〇〇年〇月〇日とする方法は下記のようになります。today.strftime(Y年m月d日)

terminalのコマンドを使ってファイルの中身をクリップボードにコピーする方方法を紹介します。やり方は二種類あります。一つは、インプットリダイレクト`>`を使ったをやり方で、2つ目は`|`パイプを使ったやりかたです。

Railsのactive recordにおいて、 belongs_toを使い関連付け（アソーシエション）をオプショナルで張りたいという場合があるかと思います。rails5からは、デフォルトでアソーシエションが張られるようになているので、関連付けをオプショナルにするには、明示的に指定して上げる必要があります。やり方は簡単で`optional`を使うとできます。

React.jsでコメントアウトする方法を紹介します。 特にReactのJSXにてコメントアウトする方法を紹介します。とても簡単で、下記のように{/* */}で囲むとその中の部分をコメントアウトをすることができます

javascriptのletとvarいつどっちを使えばよいのかわからないなどあるかと思います。そこで、letとvarの違いを簡単に説明しようと思います。 そもそもletはES6で導入された記法で、下に記述してあるとおり、 大きな違いは、スコープの範囲がブロックの中だけにあるのが`let`で、 定義したらグローバルにアクセス可能なものが`var`になります。

cssのメディアクエリ（media query）のようにjavascriptでモバイルあるいはスマートフォンかを判別して、何らかの処理をしたい場合の簡単な方法を紹介します。実はIE10からサポートされていて、media queryを使って判別する方法があります。

javascriptのfor ofでindexを使う方法を紹介します。 2つのやり方があって、一つは単純に自分でカウントする方法です。もう一つのやり方はentriesを使うやり方です。

sedでファイルの中身を変更するやり方を紹介します。macで、sed -i "s/patter/replacement/" example.txt とやってもエラーが出てしまいます。 他のUnix系のコマンドなら上記で、いけるのですがMacだと少しコマンドを変えないといけません。具体的には、sed -i "" "s/patter/replacement/" example.txtに記述すると動くようになります。

jQueryを使わないでjavascriptだけで複数のcss要素を指定するにはどうしたらよいかを紹介します。jQueryだと`.css`を使って複数のcssを設定できますが、素のjavascript(=バニラjs)だとそうはいきません。`style.cssText`というのを使えばできます

Ruby Gemの作り方から公開する方法までを紹介します。 RubyGemを作りにあたり、以下の6ステップで作成と公開までを簡単に紹介します。

RubyのYardでドキュメントを生成する方法と使い方を簡単に紹介します。 そもそも、yardというのはrubyの各メソッドやクラスに対してコメントを書きそれをもとに、 API（技術的な）ドキュメントを生成するもので、使い方は簡単です。

RubyのYardでドキュメントを生成する際に、あるメソッドはドキュメントに表示しなくても良い時があるかともいます。そのときに、特定のメソッドだけをドキュメントを生成しない方法 を紹介します。簡単で、`# @!visibility private`を使うことでそれが実現できます。

railsのselect formで入力を必須(required)にする方法を紹介します。selectと他のinputヘルパーは少し違うので、以外とはまるひとは多いのではないかと思います。Select Formで入力を必須にするには、引数の渡す場所が肝心で、3番めに`required: true`を渡してあげると実現できます

Markdownでリンク付きで他者の発言などを引用する際の方法を紹介します。 簡単でciteを使ってあげればできます。

Railsの`image_tag`で画像をjpegで表示すると、localでは表示されるんですが 本番環境では404 not foundとなって画像が表示されないときの解消方法を紹介します。 これは驚きでsprocketsが勝手に拡張子を変えてしまうために起きているエラーです。

ローカル上で未使用のブランチを消すgitのコマンドを紹介したいと思います。 とても簡単で、`git branch --merged | grep -E -v "(master|develop|main)" | xargs git branch -d`とすると削除することが可能です。

Next.jsで`a`タグや`Link`を使わずに、Next.jsでページ遷移する方法を紹介します。 とても簡単で`useRouter`を使って、`push`するだけでページ遷移ができてしまいます。

Javascriptで0からnの配列を作り方を紹介します。やり方はとても簡単でArrayを使ったら実現できます。

文字列でfunction（関数）を定義して、javscriptのfunctionとして評価（動作）させる方法を紹介します。 方法はいくつかあり、もっとも簡単なものだとevalに渡してあげるです。 これは出しもが一番最初に考えるものかと思います。ただ、javascriptでは他にもいろいろなやり方があります。

M1 Macを使っていると今使っている、OSのアーキテクチャが x86_64なのかarm64なのかかなり大事になってきます。ターミナルでどっちのosをつかっているかの確認方法を紹介します。

python3 -m pip install numpy.とpython3でnumpyをinstallしようとしたときに以下のエラーが出たので対処法を紹介します。ERROR: Could not install packages due to an EnvironmentError: [Errno 13] Permission denied: というエラーが出たときは権限の問題なので、権限あるユーザで実行したらおしまいです。

nodenvで新しいバージョンをインストールしたときに、 `yarn`のコマンドがないよと言われたときの対処法を紹介します。nodenv: yarn: command not found The `yarn' command exists in these Node versions: なっときはnpm経由でyarnを入れてあげるのが早いです。

nodenvで新しいnodeのバージョンをインストールしようとしたときに、 下記のように怒られてインストールできませんでした。`nodenv install 16.5.0 node-build: definition not found: 16.5.0 See all available versions with `nodenv install --list'.`その時の対処方法を紹介します。

Electronでtensorflowを使っていて、 Please run command 'npm rebuild @tensorflow/tfjs-node --build-addon-from-source' to rebuild the native addon module.がでたときの対象方法

pandasであるファイルを読み込むときに、何行か飛ばして読み込みたいときがあります。 それをどうやったら実現できるかを紹介します。 実はとても簡単です。pandasでは、read_csvをするときにskiprowsという引数が使えます。それを使えばファイルを読み込む際に任意の行数分を飛ばして読み込むことができます。

pandasの既存のDataFrameにあるカラムを特定の場所に追加したいときの方法を紹介します。 やり方は簡単で`df.insert(挿入位置, 挿入するカラムの名前, データ)`を指定するとできます。

jQueryを使わないで、素のjavascript(vanilla js)でclass要素を追加したり、削除する方法を紹介します。 jQueryに慣れている方も多いと思いますが、vanilla jsでももちろんclass要素の追加、削除はできます。

setIntervalで何らかの処理をさせて、ある条件を満たしたらintervalを終えたい場合があるかと思います。今回は、どうやったら`setInterval`無効化できるのかを紹介したいと思います。 やり方はとても簡単で、`clearInterval`を使えばできます。

Javascriptで別のページにリダイレクトさせるのはとても簡単にできます。 hrefに直接値を入れる方法と、replaceを使う方法があります。それぞれの違いも説明します。

javascriptで今からnヶ月前の日付を取得する際の方法を紹介します。 ポイントはnow.setMonth(now.getMonth() - 3)のようにsetMonthを使うことです。 そうすることで簡単に取得できます。注意点としては、やり方が破壊的なやり方であることです。

Next.jsでGoogle Optmizeを使いABテストをする方法を紹介します。 Next.jsではプリレンダリングの機能によりABテストを実装に苦労します。 ただ、実は簡単でdataLayer.pushをuseEffectで使い、GoogleOptmizeのアクティベーションの設定を変えることで実現することが可能です。

Javascript(ES6)のオブジェクトから変数に代入する分割代入を使った際に、変数名を変更するやり方を紹介します。とても簡単で、`:`を使うだけで実現できます。

python3で16進数化されたバイト文字列を文字列に変換する方法を紹介します。 変換自体はとても簡単で`bytes.fromhex`を使うことができます。

python3で文字列をhex（16進数）に変換する方法は簡単で、 python3の場合は、16進数(hex)変換は,`binascii`のモジュールを使って実現できます。 その際に、まず`str`型から`bytes`型に変換する必要があり、 最後に、`hexlify`で16進数化することで変換ができます。

React.jsの`useEffect`内で`async`,`await`を使った関数を実行する方法を紹介します。 やり方は簡単で`async`で定義した関数をuseEffectの中で呼び出してあげるだけです。

React.jsで`componentDidMount`を`UseEffect`で代用する方法を紹介します。`componentDidMount`を`UseEffetct`で代用する方法はとても簡単です。`useEffect(() => { }, [])`とするだけで代用ができます。ポイントは`[]`の部分です。これをuseEffectの第二引数に渡すことで、更新時には更新されずに無限ループのようにひたすら更新し続けられるというのを避けることができます。

pandasで任意の複数の値を基にデータを除外したい、 そなん時にどうしたら良いのかを紹介します。 やり方はとても簡単でdataframeのisinとmaskの機能を使えば実現できます。

pythonで文字列の日付から、datetime型に変換するやり方を紹介します。 やり方はとても簡単で、`strptime`を使うだけです。`strptime`を使う際は文字列での日付と、 フォーマットを指定する必要があります。

pythonで日付を一日足したり、引いたりするやり方を紹介します。 やり方はとても簡単で`datetime`の`timedelta `を使えばできます。 具体的には、from datetime import datetime, timedelta

外部のライブラリをCDN経由で使っている場合に、 ESLintでerror 'Vue' is not defined no-undefのようなエラーに遭遇した際の対処方法を紹介します。とても簡単で、/*global ...*/のように明示的にエラーになっているモジュールを定義してあげれば良いのです。

Vue.jsのCreatedとMounted。どっちを使うのが適切かなど悩むことが多いと思います。 そこで、Vueのライフサイクルでの観点から違いを説明し、 適切な利用シーンを見ることで、大きな違いを解説したいと思います。結論としては、createdではvirtualDOMにアクセス・変更できないのに対してmountedはすでにvirtualDOMがdataと一緒に描画された後なので、アクセス・変更することが可能になっています。

Vue.jsでasync/awaitを使って、APIからデータをFetchしてそれをdataにセットする方法を紹介します。 とても簡単で3ステップで実現することができます。

Uncaught TypeError: firebase.database is not a functionのエラーが起きた時の対処方法を紹介します。 とても簡単で、firebase-database.jsをインクルードしたら良いのです。CDNとNPM（yarn）を使ったやり方を紹介します。

PUTとPATCHの違いを簡単に説明します。PUTは全てのリソースを変更する際に利用するのに対して、 PATCHは一部のリソース変更に用いられます。これらを具体的な例を用いて紹介します。

An error occurred while installing mysql2 (0.5.3), and Bundler cannot continue. Make sure that `gem install mysql2 -v '0.5.3' --source 'https://rubygems.org/'` succeeds before bundling.こんなエラーが起きた時の対処法をお教えします。

Next.jsのnext-sitemapを使ってsitemapを出力する際に特定のURLを除外する方法を紹介します。 除外する際はexcludeというオプションを指定することで実現することができます。

Firebase Hostingでの301redirects（リダイレクト）のやり方を紹介します。 リダイレクトでは可変的なリクエストに対処できるセグメントという考え方や、正規表現を使って可変的なリクエストに応えるリダイレクトを設定可能です。

本来なら301でリダイレクト処理すべきですが、バックエンドで処理できなくて、フロント側でしか リダイレクト処理しできない場合は、metaタグのrefreshタグを使うしかありません。そのやり方がを紹介します。

rails6にてUncaught ReferenceError: jQuery is not definedというエラーが出た時の対処方法をお伝えします。

JavascriptのObjectをJSONに変える方法を紹介します。 JSON.stringifyを使えば簡単にできます。 また配列のobjectも同じようにできます。

Next.jsで静的なページ(static)なのにまるでapiのようにjsonを返すやり方があります。 それはgetServerSidePropsを使って簡単に実現できます。その実現方法を紹介します。

rubyで日時(DateTime, Date, Time)を国際規格のiso8601形式にする必要がある場合があります。 そこで、rubyのDateTime型をiso8601形式に変換する方法をstrftimeを用いた場合と、用いない場合の両方を説明していきます。

RubyやRailsでString型をDatetime型に変換したいやり方を紹介します。 DateTime.parseやto_datetimeを使うことで、簡単に実装できます。

Rubyの配列があったときにdelete_atで一つずつは消すことは可能かと思います。 ただ複数の配列を消す簡単な方法がありません。 ただ、それを補うメソッドがあるので、どのように実現できるかを紹介したいと思います。

Webpacker::Manifest::MissingEntryErrorというエラーが起き、詳しく見ると Invalid configuration object. Webpack has been initialised using a configuration object that does not match the API schema. というエラーが起きている時の対処方法を紹介します。

An error occurred while installing mimemagic (0.3.10), and Bundler cannot continue. というエラーが起きてminemagicのインストールができない。そんなことに困っていませんか、 どうしたらそれを回避できるのか紹介します。

javascriptでオブジェクトの配列がある時に何らかの基準や要素でソートをするやり方を解説します。 そのためには、そもそも何を基準にjsが順番に並べ替えているかの基準（仕組み）を知る必要があるので、そこを簡単に説明します。

pythonを使って、webのページをスクレイピングして何かのデータを簡単に取得するためには、 BeautifulSoupが便利です。そこで、BeautifulSoupを使ってpythonでwebスクレイピングする方法を紹介します。

Next.jsでこのページはbuild時、export時に除外したいという場面があるかと思います。 それがそもそもできるのか？そしてやるならどうするのかを紹介したいと思います。

Syntax error: Adjacent JSX elements must be wrapped in an enclosing tag. Did you want a JSX fragment <>...</>?というエラーが起きた時の対処方法。すごく簡単に対応できます。

react carouselを使おうとしても、Next.jsではそのままでは使えません。 公式ドキュメントの方法だと、Error: Element type is invalid: expected a string (for built-in components) or a class/function (for composite components) but got: undefined.というエラーが出てしまいます。その際の解決方法を紹介します。