javascript

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

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

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

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

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を消して、その後あたらしいものを入れます。 例えば、こんな感じで消して

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を作ります。

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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.というエラーが出てしまいます。その際の解決方法を紹介します。

React Nativeで`yarn run start`や`yarn run ios`などでエミュレーターを起動して、 下記のようにReact Native version mismatchというエラーが出たときの対象方法を紹介します。

next.jsでexport（SSG）して、hostingしていざサービスを使ってみると、 リンクからたどる際は普通に動くのに、リロードするとなぜか404になる。。。 そんな時の対処方を紹介します。

Next.jsにsitemapを導入するのはとても簡単で3ステップだけで、インストールして、`next-sitemap.js`のファイルを作成して、あとはpackage.jsonに設定してあげたら動くようになります。

Next.jsにGoogle Analyticsを導入する方法。react-gaを導入しなくてもかなり簡単に設定できます。

eslint errorが出て、それを自動で直したい時は、`eslint --fix`を使えば良いです。それをpackage.jsonに追加して、`yarn run lint`や、`npm run lint`を行いたい場合は、下記のようにpackage.jsonに追加してみてください。

ReactMarkdownを使っていてそのcodeに対して、シンタックスハイライト（syntax-highlight）を適用する際に手こずったので、備忘録として残します。使うライブラリは、react-syntax-highlighter です。

Reactで画像を遅延ロードする方法はすごく簡単です。 しかもかなり効果があって、実際に利用した際に80%もの帯域幅の減少をすることができました。 スクロール時にのみに画像を表示させることで、帯域幅を減少させる方法もサンプルコードを踏まえて紹介します。

next.jsのフロントエンドでdebug(デバック)をするのは、コード上で`debugger`を埋め込めば、chromeでdebuggerが動きでバックができるようになります。しかし、バックエンド側はそのままだと動かないので、Node.jsのinspect(インスペクター)を使う必要があります。今回はその方法を解説します しかしながら、バックエンド上でデバックを使用としてももちろんそのままではできません。

node replでasync awaitを使う方法はとても簡単で、 たった一行追加するだけで使うことができます。