javascript

  • Published on
    eslint error Promise is not defined no-undef の対処方法を紹介します。 eslintで下記のようにPromiseが定義されていませんとエラーが出る場合があります。 これの対象方法ですが、eslintのconfigである eslintrc.jsのenvにあるes6をtrueにすることで解消できます。そのため、下記のように記載することで解決できます。
  • Published on
    Javascriptのobjectのkeyに変数を使う方法を紹介します。 例えば、下記のようにfruitのobjectを作り、appleという変数名を使って、keyとして登録する時のやり方を紹介します。これは[varibale]: valueという形をとることで実現することができます。 具体的には、下記のように[]の中には変数を入れて、[]: valueのvalueのところに値を入れることで、変数をobjectのkeyとして使うことができます。
  • 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
    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
    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
    npm ciではciなどでnpm installする場合に使われるもので、 一度環境をクリーンにしてから、installされるものです。yarnにもそれに相当するコマンドがあります。versionごとに少し異なるので、注意が必要です。 yarn2以下の場合には、yarn install --frozen-lockfileでできます。
  • Published on
    node.jsでsvgファイルを読み込む方法を紹介します。ファイルを読み込む方法と変わらないです。 具体的には、`readFileSync`を使うと読み込むことができます。svgのmarkupを表示させるためには、読み込んだファイルを`toString()`でstringに変換する必要があります。
  • 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
    jQueryを使わないでjavascriptだけで複数のcss要素を指定するにはどうしたらよいかを紹介します。jQueryだと`.css`を使って複数のcssを設定できますが、素のjavascript(=バニラjs)だとそうはいきません。`style.cssText`というのを使えばできます
  • Published on
    文字列でfunction(関数)を定義して、javscriptのfunctionとして評価(動作)させる方法を紹介します。 方法はいくつかあり、もっとも簡単なものだとevalに渡してあげるです。 これは出しもが一番最初に考えるものかと思います。ただ、javascriptでは他にもいろいろなやり方があります。
  • Published on
    setIntervalで何らかの処理をさせて、ある条件を満たしたらintervalを終えたい場合があるかと思います。今回は、どうやったら`setInterval`無効化できるのかを紹介したいと思います。 やり方はとても簡単で、`clearInterval`を使えばできます。
  • Published on
    javascriptで今からnヶ月前の日付を取得する際の方法を紹介します。 ポイントはnow.setMonth(now.getMonth() - 3)のようにsetMonthを使うことです。 そうすることで簡単に取得できます。注意点としては、やり方が破壊的なやり方であることです。
  • Published on
    Javascript(ES6)のオブジェクトから変数に代入する分割代入を使った際に、変数名を変更するやり方を紹介します。とても簡単で、`:`を使うだけで実現できます。
  • 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(インスペクター)を使う必要があります。今回はその方法を解説します しかしながら、バックエンド上でデバックを使用としてももちろんそのままではできません。