ついこの間Next11がリリースされましたね。 Next11では、デフォルトでWebpack5になりました。(引き続きオプションによってWebpack4が使用できます。) アップデートする際に、webpackに関するエラーが出たので備忘録として記録しておきます。 next.config.js…

最近開発で少し悩んだことがありまして、 JavaScriptで例えばですがチャット機能のようなものを作っていました。 チャットなのでリアルタイムに流れていきますよね。 投稿時はAjaxで、画面を更新せずにサーバーへPOSTし、チャットメッセージが送られるような…

TypescriptやJavaScriptで開発をしていると、async awaitをよく使います。コールバック関数のネストを防ぎ、コードのリーダビリティを保ちながらコードを書くことが出来るため有用なシンタックスです。 awaitの注意点 async functionでは、awaitを使う事がで…

この記事ではTypeScriptを使います。 Reactでよく使う実装にArray.mapでのループがあります。 ループというのは繰り返しのことで一つのReactエレメントを繰り返してリスト表示させることができる機能です。 リストって何？ リストとは配列のことで、順番に要…

NextJsで読み込まれたライブラリは、サーバサイドでもレンダリングできるようになっていますが、稀にSSRに対応していないライブラリがあります。ベースがjQueryになっているようなライブラリだとよくあります。 原因は内部でwindowを呼んでいることで、windo…

ReactはHooksが導入される前から書いていました。同時はconstでコンポーネントを定義するのではなく、class構文で書いていました。今ネットで検索してもclass構文で、stateへのセットもthis.setStateでした。 パフォーマンス改善と利便性のために、construct…

NextJsではWebpackを使用しているため、モジュールがWebpackに対応していないとCritical dependency: the request of a dependency is an expression というエラーが発生します。 NextJsでは、Sequelize や knex などでエラーが発生します。 これを回避する…

前提 この記事ではTypeScriptを使用しています。 17.0.1 のReactを使用しています。 Nextjs 10での動作確認をしています。 はじめに ReactにはReact.FCという型定義があります。 こちらは、React.FunctionComponentが略された型で同じ型です。開発では殆どが…

TL;DR useMemoを使って一切再レンダリングされないコンポーネントを作成する コンポーネント内のDOM更新は dispatchEventを利用する 絶対に再レンダリングさせたくない jQueryなどで直接DOM操作しているライブラリをReactから呼び出して使うと、すこし困った…

代表の高橋です。昔からやっている記憶術について話したいと思います。 自分は小学生の頃からプログラミングをやっているのですが、ノートを取るのが苦手で覚えたいことをメモ帳でまとめておくことが多かったです。 授業中、パソコンでメモできたら絶対頭良…