vercelのbuil時に環境に応じて、何か特殊なスクリプトを走らせたりしたい場合があるかと思います。例えば、production時にはmigrateを実行するなどです。その場合は、vercelの環境変数が使えます。vercelにはsystem enviornmentがあり、VERCEL_ENVを使うとそれがproducitonなのか、previewなのかdevelopmentなのかを判別できます。そして、それをbuild commandで参照して使うことができます。

vercelでprodcutionの時だけbuildの振る舞いを変更する方法

利便性を高めるためにdataを永続化したい時があります。
今回は、next.jsとrecoilを使っていて、dataを永続化させる方法を紹介します。最初は`recoil-persist`を使っていたのですが、`recoil-persist`を使って、nextjsを使う場合は、ドキュメントに書いているやり方だと `Error: Hydration failed because the initial UI does not match what was rendered on the server.
`のエラーが出てしまいます。

next.js + recoilでデータを永続化する方法

Eslintでformatに関してはreportしてくれますが、typescriptのtypeエラーは出してくれなかったりします。これらはbuild時に出るエラーで、気軽に確認できると開発が楽になります。そこで、typescriptのtype errorを感知する方法を紹介します。すごく簡単で、yarn run tsc --noemit

typescriptのtype errorを確認する方法

ether.jsのBignumberを使っているときに、3桁毎にコンマを表示させたい時があります。そんな時はcommifyを使えば解決できます。

ether.jsのBignumberで3行置きにコンマを表示する方法

next.jsでrecoil.jsを使っていて下記のようなエラーに遭遇した際の対処方法を紹介します。Expectation Violation: Duplicate atom key foobar. This is a FATAL ERROR in production. But it is safe to ignore this warning if it occurred because of hot module replacement.結論から言うと、このエラーはnode.jsの問題であり、無視して構わないものになります。気になる場合は、


Expectation Violation: Duplicate atom keyの対処方法

error TS6059: File is not under rootDir is expected to contain all source files.
The file is in the program because Matched by default include patternのエラーが出たときの対処方法を紹介します。とても簡単でincludeやexcludeを使えば解決できます。


error TS6059: File is not under 'rootDir' is expected to contain all source filesの解決方法

jsで下記のように(+)の記法がありますが、これは、Unary Plusという記法で、単項プラス演算子と言われていて、数値に変換するものになります。なので下記なようなものは以下のような出力になります

Javascriptでの(+)の記法は何？単項プラスです

firebaseでdeployする際に出るエラーの対象方法Error: Failed to get Firebase project. Please make sure the project exists and your account has permission to access it.これは長いことログインしていなかった時に起こります。アクセストークンの期限切れによるエラーです。そのため、下記のようにlogoutして、loginしなおせば解消できます。firebase logout firebase login

firebaseのdeployエラーの対象方法 Error: Failed to get Firebase project

next.jsでpolkadot/extension-dappを使っていて下記のようなエラーが出た場合の対象方法を紹介します。error - ReferenceError: window is not defined polkadot reactこれはpolkadot/extension-dappでは、windowを使いますそのため、 server side renderingでは使えません。next.jsではserver side renderingがされてしまいそのため上記のようなエラーが出てしまいます。そのため、下記のようにdynamic import を使用するか関数内でimportしてあげる必要があります。

error - ReferenceError: window is not defined polkadot react の対象方法

useRefを使ったコードでは、Type error: inputFile.current is possibly null.のようなbuildエラーが出るときがあります。その時の対処方法を紹介します。対処方法は簡単で、HTMLElementの型をつけてあげれば解消できます。

Type error: 'inputFile.current' is possibly 'null'. useRefを使った時のエラーの対象方法

Javascriptのテスト、特にmocha.jsで一部のテストを無視したい時があると思います。
そんな時は、下記のようにdescribeにskipをつけると囲まれたテスト群を無視して、
テストを実行することができます。また、it単位でスキップする場合は、itをxitにすることでskipできます。


mocha.jsでテストを一部skipする方法

hardhatで時間に依存したロジックをテストするやり方を紹介します。
やり方はとても簡単で、下記のようにevm_increaseTimeで時間を進めて、evm_mineするだけです。ただ、それだけだと、他のテストが転けたりするので、時間を巻き戻すことを忘れないように。

hardhatでtimeに依存するロジックをテストするやり方

Hardhatのtestをしているときに、native tokenなどを送付した後のbalanceを確認する時にトランザクションで使用したgas代も考慮しないと正確には、テストができません。または、dappsで使用したgas代をユーザに教えたい時があります。そこで、ある任意のトランザクションを実行した時のトランザクションのgas代をethere.jsを用いて計算する方法を紹介します。

ethere.jsで使用したgas代を計算する方法

npx hardhatでverifyした時に、下記のようなエラーが出た時の対処方法を紹介します。
npx hardhat verify --network goerli 0x121111111 Nothing to compile No need to generate any newer typings.An unexpected error occurred: Error: ENOENT: no such file or directory, open code ENOENT syscall openこれは簡単に対処できて、npx hardhat cleanで解決することができます。

Hardhat verifyでError: ENOENT: no such file or directoryが出た時の対処方法

next.jsを使っていてModule not found: Can't resolve fsが出た時の対処方法を紹介します。とても簡単でnext.config.jsにfallback optionを足してあげれば解決できます。



Module not found: Can't resolve 'fs'の対処方法

eslint error  Promise is not defined  no-undef の対処方法を紹介します。
eslintで下記のようにPromiseが定義されていませんとエラーが出る場合があります。
これの対象方法ですが、eslintのconfigである eslintrc.jsのenvにあるes6をtrueにすることで解消できます。そのため、下記のように記載することで解決できます。

eslint error  'Promise' is not defined  no-undef の対処方法

BigInt literals are not available when targeting lower than ES2020.ts(2737)のエラーが出た時の対処方法を紹介します。これは、10nのようなBigInt literalを使ったとき、かつ、libがes2020以下の時に起こります。そのため、対処方法は簡単で、tsconfig.jsonのlibをes2020以上にしたら大丈夫です。

BigInt literals are not available when targeting lower than ES2020.ts(2737)の対象方法

今の環境とは別に切り離して、typescriptをちょっと動かし、新しいライブラリの動作を試したいみたいな時があるのですが、いつもセットアップすべきものを忘れてしまうので、typescriptの簡単なセットアップ方法をメモ的に残し、紹介したいと思います。


typescriptの簡単なセットアップ方法

polkadot.js apiを使っているときにType error Property data does not exist on type Codecが出た時の解決方法を紹介します。これは、下記のようにapi-argumentをimportしてあげるだけで解決できます。

Type error: Property 'data' does not exist on type 'Codec' の解決方法

Argument of type string is not assignable to parameter of type never TS2345のようなエラーが出た時の解決方法を紹介します。このエラーは代入先の配列との型があっていないことにより生じます。そのため、代入先と代入基との型を合わせてあげれば解決できます。

Argument of type not assignable to parameter of type neverエラーの解決方法

next.jsで、コンポーネントやhooksなどをimportする際に、絶対パスやエイリアスを利用する方法を紹介します。とても、シンプルでtypescriptの場合はtsconfig.jsonでjavascriptを使っている場合は、jsconfig.jsonで次のように、指定するとできます。

nextjsで絶対パスインポートする方法

Next.jsでeslintがデフォルトでサポートされましたが、デフォルトだとpages以下のファイルだけがlint対象となります。そこで、componentsやhooksなどのディレクトリを新たに追加してそれもlint対象にしたい場合は、次にようにnext.config.jsの設定を変えるとできます。

next.js eslintで対象とするディレクトリやファイルを変更する方法

Javascriptのobjectのkeyに変数を使う方法を紹介します。
例えば、下記のようにfruitのobjectを作り、appleという変数名を使って、keyとして登録する時のやり方を紹介します。これは[varibale]: valueという形をとることで実現することができます。
具体的には、下記のように[]の中には変数を入れて、[]: valueのvalueのところに値を入れることで、変数をobjectのkeyとして使うことができます。

Javascriptのobjectのkeyに変数を使う方法

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

ethers.jsでemitされたeventをlistenする方法

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

ethers.jsでINT MAXの値を使う方法

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

chakura-uiでbodyの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.

hardhat-etherscan: arguments errorの対処方法

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

HardhatError: HH700: Artifact for contract not foundが出た時の対処方法

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

nodeのreplで書いたコードを保存する方法

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

visual studio codeの置換のショートカットキー（mac）

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

cypressでのError: ResizeObserver loop limit exceededの対処方法

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でのCompiled with problems:X WARNING  configurationの対応方法

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

BabelでPlugin/Presetのエラーが出たときの対応方法

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

hardhatでdeploy済みのcontractにabiを使って接続しインタラクトする方法

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

React useMemoの使い所と役割

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

React useCallbackの使い方と使い所

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

React.memoの使い方と使い道を解説

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

Reactでgraphqlのデータを取得する方法

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

vercelとnext.jsでgraphqlのapiサーバをたてる方法

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エラーも無くなります。

error TS7053のエラーが出た時の対処方法 Element implicitly has an 'any' type because expression of type 'string' can't be used to index typeのエラーが出た時の対処方法

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


javascriptでtimestampのデータを日付の型に変更する方法

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

github actionで定期実行(cron)を使う方法

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

githubactionでcypressを使う方法

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



typescriptを使ってfirebase adminでrealtime databaseにデータを保存する方法

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


cypressでサーバサイド(node)を実行する方法

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


cypressでwait/sleepをする方法

'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)

cannot be compiled under '--isolatedModules'が出た時の対処方法

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

package.jsonのscriptを使って複数のコマンドを実行させる方法

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

solidityで複数行の文字列を書く方法

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

npm ciに相当するyarnのコマンド

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


Reactで複数のclassNameにclassを追加する方法

Line: 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のエラーが起きる原因と解消方法の解説

React Hooks must be called in a React function componentの原因と解消方法

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

import should occur before import of ../foo import/orderのエラーが出た時の対処法

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

terminalでvisual codeを起動する方法

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


vscodeでvimのj,k,l,hなどの長押しを機能させる方法

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

hardhatですでにデプロイ済みのcontractに接続する方法

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


node.jsでsvgファイルを読み込む方法

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

ethereumでのトラクションのサイズ制限はあるのか？

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

solidityでetherを受け取るcontractの書き方

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


Rustにもreplは使えるの？

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

solidityで日本語の文字列を使う方法

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

Warning: SPDX license identifier not provided in source file を解決する方法

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

rubyで日付を任意のフォーマットに変換するやり方

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

terminalのコマンドでファイルの中身をクリップボードにコピーする方法

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

Rails belongs_toで関連付けがなくてもvalidationを通るようにする方法

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

React.jsのJSX内でコメントアウトする方法

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


 javascriptでletとvarの違いを簡単に解説

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

javascriptでモバイル端末かどうかを判定する簡単な方法

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

javascriptのfor-ofループでindexを使う方法

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


sed: command i expects ＼ followed by textの対処方法・sedでファイルの中身を変更するやり方

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


valina javascriptで複数のcssを指定する方法

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

Ruby Gemの作り方・公開する方法

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

RubyのYardでドキュメントを生成する方法・使い方

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

RubyのYardで特定のメソッドのドキュメントを生成しない方法 

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

RailsのSelectフォームで入力を必須(required)にする方法

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

Markdownでリンク付きで引用をするときの方法

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

Railsでjpegだと404 not foundになり画像が表示されないときの解消方法

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

gitでローカル上の使っていないブランチを消す方法

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

Next.jsでLinkを使わずにページ遷移する方法

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

Javascriptで0からnの配列を作る方法

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

javascriptで文字列から関数を定義する方法

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

M1 MacでOSのバージョンを確認する方法

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

 Permission denied python3でnumpyをインストールするときに起きたエラーの対象方法

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

nodenv: yarn: command not foundがでたときにyarnを入れる方法

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


nodenvで新しいバージョンがインストール出ないときの対処方法

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

Electronでtensorflowを使ったときの対象方法

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

pandasでread_csvするときに数行を飛ばして読み込む方法

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

pandasで新しいカラムをDataFrameの任意の場所に追加する方法

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

javascriptでclassの要素をaddしたりremoveしたりする方法(vanilla javascript/jQueryなしで)

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

setIntervalを条件に応じて無効にする方法(Javascript)

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

Javascriptで別のページにリダイレクトする方法

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

nヶ月前の日付をjavascriptで取得する方法

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

Next.jsでGoogle Optmizeを使いABテストを実施する方法

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

分割代入で変数名を変える方法 ES6

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

python3でhex(16進数)を文字列に変換する方法

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

python3で文字列をhexに変換する方法

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

useEffect内でawait fetchを使うやり方

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

ComponentDidMountをuseEffectで代用する方法

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


Pandasで特定の値を基にリストを除外する方法

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

Latest

vercelでprodcutionの時だけbuildの振る舞いを変更する方法

next.js + recoilでデータを永続化する方法

typescriptのtype errorを確認する方法

ether.jsのBignumberで3行置きにコンマを表示する方法

Expectation Violation: Duplicate atom keyの対処方法