All Posts

  • Published on
    smart contractでeventをemitした際に、ethers.jsでeventをlistenして、 何らかのアクションを取りたい時があります。その際のやり方を紹介したいと思います。 たとえば、ERC20のtokenをtransferして、そのeventを購読して、transferされたらそれをconsoleに表示するにはたとえば、下記のようなコードになります。(reactを想定)
  • Published on
    approveなどの際によく使われているINT_MAXですが、ethers.jsですでに用意されているので、 これを使えば簡単にできます。具体的に下記のconstantを参照するだけです ethers.constants.MaxUint256
  • Published on
    chakura-uiでbackgroundの色を全部の画面に適用する方法を紹介します。 chakura-uiではextendThemeがあるので、それをもとに自分のカスタムした themeを作り、providerを指定する際にカスタムで作ったthemeを指定してあげます。そうすることで、backgroundなども自分の好きなようにカスタマイズすることができます
  • Published on
    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.
  • Published on
    npx hardhat compileやnpx hardhat run scripts/deploy.jsで下記のエラーが出た時の対応法を紹介します。HardhatError HH700 Artifact for contract ContractExample not found.すでに、contractがあるにもかかわらず、うまくcompileできない場合があります。その場合はキャッシュが残っているのが原因であるので、npx hardhat clean
  • Published on
    nodeでreplで試したものをファイルに保存したい時があるかと思います。 そんな時は下記のコマンドをやれば、nodeのreplで書いたコードをファイルに保存できます。 .save filename.js
  • Published on
    visual studio codeでファイル内での置換をショートカットで行うときの ショートカットキーの紹介です。macでそれをやると、visual studio codeが閉じてしまいます。 そのため、macでのファイル内での置換のショートカットはoption + cmd + fになります。 また、全体ファイルでの置換はshift + cmd + hになります。
  • Published on
    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/
  • Published on
    webpackでbabelを使う際に下記のようなエラーに遭遇しました。 主なエラーは、 Error: Plugin/Preset files are not allowed to export objects, only functions. になります。これはbabelのバージョンの違い(babel 6とbabel 7)により生じるエラーです。 そのため、新しいbabelに揃えるために、babelの一式のmoduleを消して、その後あたらしいものを入れます。 例えば、こんな感じで消して
  • Published on
    hardhatでdeploy済みのcontractにabiを使って接続しインタラクトしたいときのやり方を紹介します。例えば、ある特定の人のwallet addressのUSDCの残高を確認したいとします。 その際には、下記のようにhardhatで記載してあげたら、確認できます。erc20のabiはその辺に落ちているので、例えばこちらから拾います。肝となる部分は、new hre.ethers.Contract(token.contractAddress, erc20, account)
  • Published on
    ReactのuseMemoがどういう役割を持っていて、いつどのような状況の時に使うべきかを紹介します。useMemoはその名の通りmemo化をするもので、関数の結果をメモ化する時に使います。重たい処理がありその結果を都度計算したくなく、ある状態が変化した時だけ再計算してつかいた時に使うものです。下記を見てもらえれば、useMemoがどのようなものかわかるかと思います。
  • Published on
    ReactのuseCallbackの役割とuseCallbackをいつ使えば良いのかを紹介したいと思います。 主にuseCallbackはuseCallback(fn, deps)で定義され、despが変わらない限り、新しい関数のインスタンス(fn)を作りません。これだけだと、なんのために存在しているかわからないと思います。 useCallbackが主に解決している問題を紹介します。Memo化したコンポーネントが親で作成した関数をpropsとして指定しているばかりに、Memo化したにも関わらず、親が再描画されたときに子コンポーネントも意図せずに再描画されてしまいパフォーマンスが低下する問題があります。これを解決するのがuseCallbackの主な役割です。
  • Published on
    React.memoはReactでDOMをレンダーのパフォーマンスを最適化する際に使われます。 すなわち、React.memoを適切に使うことで、viewの描画速度を早めることでき、 ユーザの利便性や体験を向上させることができます。ただし、正しく使わないと最適化できないので、React.memoの正しい使い方を例を交えて紹介したいと思います。例えば、下記のように好きな食べ物を表示するコンポーネント(FavaoriteFood)があり...
  • Published on
    今回は、ReactからGraphQLのAPIサーバからデータと取ってきて表示する方法を紹介します。 簡単に理解そして、実装するために、App.jsを変更したらできるようにしています。 動きを理解したら、それぞれファイルを分けてみてください。では、まずはcreate react appでreactのappを作ります。
  • Published on
    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エラーも無くなります。
  • Published on
    githubactionでcypressを使う方法を紹介します。やり方はとても簡単で単純なものだとgithubactionで下記を.github/workflows/cypress-run.ymlに設定するだけです。 ファイルは必ず`.github/workflows/`の下にないと動かないでそこだけ気をつけましょう。
  • Published on
    typescriptとfirebase adminを使って、realtime databaseにデータを保存するやり方を紹介します。firebase adminをimportします。また、adminの場合がservice accountが必要になりますが、firebaseからダウンロードしたservice accountの中身をそのままコピーして、.envのファイルに記載してしまいます。これは、herokuやその他のPass系のサービスを使った際にenvの設定の仕方が楽になるためこうしています。
  • Published on
    cypressでnodeのコマンドを実行したい場面があるかと思います。cypressはクライアント側で動くプログラムなので、そのままだとnodeで動かすコードは実行できませんが、pluginを使うと実行することができます。pluginの作り方は簡単で、まず、下記のようにnodeを実行するコマンドを作ります。cypress/plugins/index.js
  • Published on
    package.jsonでdeployをする前に、buildしたいのような場合があると思います。 そのような時に、terminalでわざわざ下記のように2回実行するのは手間かと思います。 そこで、このような場合にコマンドを一つにまとめる方法を紹介します。単純にpreやpostを使うと前後で依存するものをコマンドの前後のタイミングで実行することができます。 例えば、next.jsとfirebaseを使っているとして、buildして、deployのコマンドをしたら、 デプロイができるとします。
  • Published on
    solidityで複数行の文字列を書く方法を紹介します。一番単純なのは、""で繋げるのが一番簡単です。あるいは、abi.encodePackedを使って、下記のように連結することもできます。
  • Published on
    npm ciではciなどでnpm installする場合に使われるもので、 一度環境をクリーンにしてから、installされるものです。yarnにもそれに相当するコマンドがあります。versionごとに少し異なるので、注意が必要です。 yarn2以下の場合には、yarn install --frozen-lockfileでできます。
  • Published on
    visual studio codeをterminalから起動する方法を紹介します。まず、terminalから起動できるようにvisual studioで`command + shift + p`を押します。次に、図のように`Shell`をタイプして、`Shell Command : Install code in PATH`を選択します。
  • Published on
    vscodeでvimを使う場合に、デフォルトの設定だとh,j,k,lを長押しすると、 holdされて通常のvimのように動作しません。そこで、長押した際にholdされずにスムーズに動かす際には、以下のように設定を変えて、visual studio codeを再起動する必要があります。
  • Published on
    hardhatで、デプロイしたcontract(コントラクト)に繋いで、メソッド呼びただし等をする方法を紹介します。とても簡単でまずは`hardhat-ethres`を`require`して、 その後に`ethers.getContractFactory`でfactoryを作り、 あとは、`attach`でデプロイしたcontractに繋げるだけです。
  • Published on
    node.jsでsvgファイルを読み込む方法を紹介します。ファイルを読み込む方法と変わらないです。 具体的には、`readFileSync`を使うと読み込むことができます。svgのmarkupを表示させるためには、読み込んだファイルを`toString()`でstringに変換する必要があります。
  • Published on
    ethereumでのスマートコントラクト自体のファイルサイズ上限、各トランザクションでのファイル上限を紹介します。ethereumでのsmart contract自体のファイルサイズの上限は24kbです。 対して、トランザクションの上限は各トランザクション毎に32kbです。
  • Published on
    スマートコントラクト(solidity)でether(ETH)を受け取るコントラクトの書き方を紹介します。 実はとても簡単で、`recieve`と`fallback`を定義してあげるだけで送ることができます。
  • Published on
    もともとruby、python、javascriptなどのインタプリタ言語を主に使っているため、 Rustでもreplが使いたかったので調べたらありました。Rustでもreplが使えるライブラリ[evcxr](https://github.com/google/evcxr)があります。使うためには、下記のようにしてインストールする必要があります。
  • Published on
    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
  • Published on
    rubyでの日付の取得はDate型とDateTime型を使ってできます。 それぞれで取得した日付を任意のフォーマットに変換する方法を紹介します。とても簡単で両方ともstrftimeを使えば実現できます。 今日の日付を〇〇年〇月〇日とする方法は下記のようになります。today.strftime(Y年m月d日)
  • Published on
    Railsのactive recordにおいて、 belongs_toを使い関連付け(アソーシエション)をオプショナルで張りたいという場合があるかと思います。rails5からは、デフォルトでアソーシエションが張られるようになているので、関連付けをオプショナルにするには、明示的に指定して上げる必要があります。やり方は簡単で`optional`を使うとできます。
  • Published on
    React.jsでコメントアウトする方法を紹介します。 特にReactのJSXにてコメントアウトする方法を紹介します。とても簡単で、下記のように{/* */}で囲むとその中の部分をコメントアウトをすることができます
  • Published on
    javascriptのletとvarいつどっちを使えばよいのかわからないなどあるかと思います。そこで、letとvarの違いを簡単に説明しようと思います。 そもそもletはES6で導入された記法で、下に記述してあるとおり、 大きな違いは、スコープの範囲がブロックの中だけにあるのが`let`で、 定義したらグローバルにアクセス可能なものが`var`になります。
  • Published on
    cssのメディアクエリ(media query)のようにjavascriptでモバイルあるいはスマートフォンかを判別して、何らかの処理をしたい場合の簡単な方法を紹介します。実はIE10からサポートされていて、media queryを使って判別する方法があります。
  • Published on
    javascriptのfor ofでindexを使う方法を紹介します。 2つのやり方があって、一つは単純に自分でカウントする方法です。もう一つのやり方はentriesを使うやり方です。
  • Published on
    sedでファイルの中身を変更するやり方を紹介します。macで、sed -i "s/patter/replacement/" example.txt とやってもエラーが出てしまいます。 他のUnix系のコマンドなら上記で、いけるのですがMacだと少しコマンドを変えないといけません。具体的には、sed -i "" "s/patter/replacement/" example.txtに記述すると動くようになります。
  • Published on
    jQueryを使わないでjavascriptだけで複数のcss要素を指定するにはどうしたらよいかを紹介します。jQueryだと`.css`を使って複数のcssを設定できますが、素のjavascript(=バニラjs)だとそうはいきません。`style.cssText`というのを使えばできます
  • Published on
    Ruby Gemの作り方から公開する方法までを紹介します。 RubyGemを作りにあたり、以下の6ステップで作成と公開までを簡単に紹介します。
  • Published on
    RubyのYardでドキュメントを生成する方法と使い方を簡単に紹介します。 そもそも、yardというのはrubyの各メソッドやクラスに対してコメントを書きそれをもとに、 API(技術的な)ドキュメントを生成するもので、使い方は簡単です。
  • Published on
    RubyのYardでドキュメントを生成する際に、あるメソッドはドキュメントに表示しなくても良い時があるかともいます。そのときに、特定のメソッドだけをドキュメントを生成しない方法 を紹介します。簡単で、`# @!visibility private`を使うことでそれが実現できます。
  • Published on
    railsのselect formで入力を必須(required)にする方法を紹介します。selectと他のinputヘルパーは少し違うので、以外とはまるひとは多いのではないかと思います。Select Formで入力を必須にするには、引数の渡す場所が肝心で、3番めに`required: true`を渡してあげると実現できます
  • Published on
    文字列でfunction(関数)を定義して、javscriptのfunctionとして評価(動作)させる方法を紹介します。 方法はいくつかあり、もっとも簡単なものだとevalに渡してあげるです。 これは出しもが一番最初に考えるものかと思います。ただ、javascriptでは他にもいろいろなやり方があります。
  • Published on
    M1 Macを使っていると今使っている、OSのアーキテクチャが x86_64なのかarm64なのかかなり大事になってきます。ターミナルでどっちのosをつかっているかの確認方法を紹介します。
  • Published on
    nodenvで新しいバージョンをインストールしたときに、 `yarn`のコマンドがないよと言われたときの対処法を紹介します。nodenv: yarn: command not found The `yarn' command exists in these Node versions: なっときはnpm経由でyarnを入れてあげるのが早いです。
  • Published on
    pandasであるファイルを読み込むときに、何行か飛ばして読み込みたいときがあります。 それをどうやったら実現できるかを紹介します。 実はとても簡単です。pandasでは、read_csvをするときにskiprowsという引数が使えます。それを使えばファイルを読み込む際に任意の行数分を飛ばして読み込むことができます。
  • Published on
    setIntervalで何らかの処理をさせて、ある条件を満たしたらintervalを終えたい場合があるかと思います。今回は、どうやったら`setInterval`無効化できるのかを紹介したいと思います。 やり方はとても簡単で、`clearInterval`を使えばできます。
  • Published on
    javascriptで今からnヶ月前の日付を取得する際の方法を紹介します。 ポイントはnow.setMonth(now.getMonth() - 3)のようにsetMonthを使うことです。 そうすることで簡単に取得できます。注意点としては、やり方が破壊的なやり方であることです。
  • Published on
    Next.jsでGoogle Optmizeを使いABテストをする方法を紹介します。 Next.jsではプリレンダリングの機能によりABテストを実装に苦労します。 ただ、実は簡単でdataLayer.pushをuseEffectで使い、GoogleOptmizeのアクティベーションの設定を変えることで実現することが可能です。
  • Published on
    Javascript(ES6)のオブジェクトから変数に代入する分割代入を使った際に、変数名を変更するやり方を紹介します。とても簡単で、`:`を使うだけで実現できます。
  • Published on
    python3で文字列をhex(16進数)に変換する方法は簡単で、 python3の場合は、16進数(hex)変換は,`binascii`のモジュールを使って実現できます。 その際に、まず`str`型から`bytes`型に変換する必要があり、 最後に、`hexlify`で16進数化することで変換ができます。
  • Published on
    React.jsの`useEffect`内で`async`,`await`を使った関数を実行する方法を紹介します。 やり方は簡単で`async`で定義した関数をuseEffectの中で呼び出してあげるだけです。
  • Published on
    React.jsで`componentDidMount`を`UseEffect`で代用する方法を紹介します。`componentDidMount`を`UseEffetct`で代用する方法はとても簡単です。`useEffect(() => { }, [])`とするだけで代用ができます。ポイントは`[]`の部分です。これをuseEffectの第二引数に渡すことで、更新時には更新されずに無限ループのようにひたすら更新し続けられるというのを避けることができます。
  • Published on
    pythonで文字列の日付から、datetime型に変換するやり方を紹介します。 やり方はとても簡単で、`strptime`を使うだけです。`strptime`を使う際は文字列での日付と、 フォーマットを指定する必要があります。
  • Published on
    pythonで日付を一日足したり、引いたりするやり方を紹介します。 やり方はとても簡単で`datetime`の`timedelta `を使えばできます。 具体的には、from datetime import datetime, timedelta
  • Published on
    外部のライブラリをCDN経由で使っている場合に、 ESLintでerror 'Vue' is not defined no-undefのようなエラーに遭遇した際の対処方法を紹介します。とても簡単で、/*global ...*/のように明示的にエラーになっているモジュールを定義してあげれば良いのです。
  • Published on
    Vue.jsのCreatedとMounted。どっちを使うのが適切かなど悩むことが多いと思います。 そこで、Vueのライフサイクルでの観点から違いを説明し、 適切な利用シーンを見ることで、大きな違いを解説したいと思います。結論としては、createdではvirtualDOMにアクセス・変更できないのに対してmountedはすでにvirtualDOMがdataと一緒に描画された後なので、アクセス・変更することが可能になっています。
  • Published on
    PUTとPATCHの違いを簡単に説明します。PUTは全てのリソースを変更する際に利用するのに対して、 PATCHは一部のリソース変更に用いられます。これらを具体的な例を用いて紹介します。
  • Published on
    Firebase Hostingでの301redirects(リダイレクト)のやり方を紹介します。 リダイレクトでは可変的なリクエストに対処できるセグメントという考え方や、正規表現を使って可変的なリクエストに応えるリダイレクトを設定可能です。
  • Published on
    rubyで日時(DateTime, Date, Time)を国際規格のiso8601形式にする必要がある場合があります。 そこで、rubyのDateTime型をiso8601形式に変換する方法をstrftimeを用いた場合と、用いない場合の両方を説明していきます。
  • Published on
    Rubyの配列があったときにdelete_atで一つずつは消すことは可能かと思います。 ただ複数の配列を消す簡単な方法がありません。 ただ、それを補うメソッドがあるので、どのように実現できるかを紹介したいと思います。
  • Published on
    Webpacker::Manifest::MissingEntryErrorというエラーが起き、詳しく見ると Invalid configuration object. Webpack has been initialised using a configuration object that does not match the API schema. というエラーが起きている時の対処方法を紹介します。
  • Published on
    An error occurred while installing mimemagic (0.3.10), and Bundler cannot continue. というエラーが起きてminemagicのインストールができない。そんなことに困っていませんか、 どうしたらそれを回避できるのか紹介します。
  • Published on
    javascriptでオブジェクトの配列がある時に何らかの基準や要素でソートをするやり方を解説します。 そのためには、そもそも何を基準にjsが順番に並べ替えているかの基準(仕組み)を知る必要があるので、そこを簡単に説明します。
  • Published on
    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.というエラーが出てしまいます。その際の解決方法を紹介します。