All Posts

  • Published on
    dictionaryよりも、ドットアクセスの方がコードの自動補完が効いて扱いやすい、コードが読みやすいなどで、pythonのdictionary型の変数をdot(ドット)でアクセスさせたい時があるかと思います。そこで、pythonのdictionary型の変数をdotでアクセスする方法を紹介します。 やり方は簡単で下記のようにSimpleNamespaceを使えばできます。
  • Published on
    python cloud function/lambdaで複数のアクセスポイントを開発環境で作る方法を紹介します。 今回は、pythonのflaskを前提として紹介します。google cloud functionでは、下記のようにしてエンドポインのサーバを立ち上げることができますが、targetであるfunctionを一つしか設定できません。そのため、複数のendpointを捌くことができません。
  • Published on
    node.jsでは、package.jsonのscriptsに記載すると、npm run script-nameのようにshell scriptを実行できます。しかしながら、poetryにはそのような機能がデフォルトでは備わっていません。 ただ、poethepoetを使えばそれが実現できます。まずは、poetryのプロジェクトディレクト化でインストールします。poetry add poethepoet
  • Published on
    rubyにはbundle gem foodieするとfoodieというプロジェクトのコードの雛形が自動生成されて、開発がとても楽になります。nodejsも同様に、npm initで最低限必要なコードディレクトとコードが生成されます。ただ、pythonにもそのようなツールが2018年頃に作られました。それが、poetryです。poetryでは、virtualenvの管理と、パッケージの管理、コードの雛形を生成してくれます。それでは、poetryでコードの雛形の作成方法を紹介します。
  • Published on
    npmやyarnのpackage.jsonのscriptsにて、任意の引数を取って何かを実行したい場合があります。そのやり方を紹介したいと思います。とても簡単で ${0}と指定するだけです。番号を増やしていく、他の引数も取ることができます。下記のようにscriptsを設定すると yarn print hogeと実行でき、そうするとecho hogeが実行され、hogeがstdoutに出力されます。
  • Published on
    Next.js 13.4を使っていて、どこも悪いところがなさそうなのに Uncaught SyntaxError: Unexpected token < webpack.js が出た時の対象方法を紹介します。正直これ直すのに本当に時間がかかりました。。。 私がやった時の原因はmiddleware.tsにありました。 middleware.tsではpathとuserのログインステータスに応じて、 ログインしていない場合はログインページに飛ばすという処理をしていました。
  • Published on
    vercelのbuil時に環境に応じて、何か特殊なスクリプトを走らせたりしたい場合があるかと思います。例えば、production時にはmigrateを実行するなどです。その場合は、vercelの環境変数が使えます。vercelにはsystem enviornmentがあり、VERCEL_ENVを使うとそれがproducitonなのか、previewなのかdevelopmentなのかを判別できます。そして、それをbuild commandで参照して使うことができます。
  • Published on
    利便性を高めるために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. `のエラーが出てしまいます。
  • Published on
    Eslintでformatに関してはreportしてくれますが、typescriptのtypeエラーは出してくれなかったりします。これらはbuild時に出るエラーで、気軽に確認できると開発が楽になります。そこで、typescriptのtype errorを感知する方法を紹介します。すごく簡単で、yarn run tsc --noemit
  • Published on
    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の問題であり、無視して構わないものになります。気になる場合は、
  • Published on
    jsで下記のように(+)の記法がありますが、これは、Unary Plusという記法で、単項プラス演算子と言われていて、数値に変換するものになります。なので下記なようなものは以下のような出力になります
  • Published on
    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
  • Published on
    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してあげる必要があります。
  • Published on
    Javascriptのテスト、特にmocha.jsで一部のテストを無視したい時があると思います。 そんな時は、下記のようにdescribeにskipをつけると囲まれたテスト群を無視して、 テストを実行することができます。また、it単位でスキップする場合は、itをxitにすることでskipできます。
  • Published on
    hardhatで時間に依存したロジックをテストするやり方を紹介します。 やり方はとても簡単で、下記のようにevm_increaseTimeで時間を進めて、evm_mineするだけです。ただ、それだけだと、他のテストが転けたりするので、時間を巻き戻すことを忘れないように。
  • Published on
    Hardhatのtestをしているときに、native tokenなどを送付した後のbalanceを確認する時にトランザクションで使用したgas代も考慮しないと正確には、テストができません。または、dappsで使用したgas代をユーザに教えたい時があります。そこで、ある任意のトランザクションを実行した時のトランザクションのgas代をethere.jsを用いて計算する方法を紹介します。
  • Published on
    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で解決することができます。
  • Published on
    eslint error Promise is not defined no-undef の対処方法を紹介します。 eslintで下記のようにPromiseが定義されていませんとエラーが出る場合があります。 これの対象方法ですが、eslintのconfigである eslintrc.jsのenvにあるes6をtrueにすることで解消できます。そのため、下記のように記載することで解決できます。
  • Published on
    今の環境とは別に切り離して、typescriptをちょっと動かし、新しいライブラリの動作を試したいみたいな時があるのですが、いつもセットアップすべきものを忘れてしまうので、typescriptの簡単なセットアップ方法をメモ的に残し、紹介したいと思います。
  • Published on
    next.jsで、コンポーネントやhooksなどをimportする際に、絶対パスやエイリアスを利用する方法を紹介します。とても、シンプルでtypescriptの場合はtsconfig.jsonでjavascriptを使っている場合は、jsconfig.jsonで次のように、指定するとできます。
  • Published on
    Next.jsでeslintがデフォルトでサポートされましたが、デフォルトだとpages以下のファイルだけがlint対象となります。そこで、componentsやhooksなどのディレクトリを新たに追加してそれもlint対象にしたい場合は、次にようにnext.config.jsの設定を変えるとできます。
  • Published on
    Javascriptのobjectのkeyに変数を使う方法を紹介します。 例えば、下記のようにfruitのobjectを作り、appleという変数名を使って、keyとして登録する時のやり方を紹介します。これは[varibale]: valueという形をとることで実現することができます。 具体的には、下記のように[]の中には変数を入れて、[]: valueのvalueのところに値を入れることで、変数をobjectのkeyとして使うことができます。
  • 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で複数行の文字列を書く方法を紹介します。一番単純なのは、double quoteで繋げるのが一番簡単です。あるいは、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.というエラーが出てしまいます。その際の解決方法を紹介します。
  • Published on
    Next.jsにsitemapを導入するのはとても簡単で3ステップだけで、インストールして、`next-sitemap.js`のファイルを作成して、あとはpackage.jsonに設定してあげたら動くようになります。
  • Published on
    Reactで画像を遅延ロードする方法はすごく簡単です。 しかもかなり効果があって、実際に利用した際に80%もの帯域幅の減少をすることができました。 スクロール時にのみに画像を表示させることで、帯域幅を減少させる方法もサンプルコードを踏まえて紹介します。
  • Published on
    next.jsのフロントエンドでdebug(デバック)をするのは、コード上で`debugger`を埋め込めば、chromeでdebuggerが動きでバックができるようになります。しかし、バックエンド側はそのままだと動かないので、Node.jsのinspect(インスペクター)を使う必要があります。今回はその方法を解説します しかしながら、バックエンド上でデバックを使用としてももちろんそのままではできません。