React のクラスコンポーネントの bind は何を解決しているのか - 30歳からのプログラミング
クラスコンポーネントでイベントハンドラを設定する際に必要になる、constructorメソッドでのバインド。 そもそもこれはなぜ必要なのか。どのような動作をすることで、どのような問題を解決しているのか。 Hooks が登場したことで今後はクラスコンポーネントを書く機会は減っていくと思うが、これは React 固有の話ではなく JavaScript の言語仕様の話なので、理解しておくに越したことはない。 React のコードは React のv16.10.2で、それ以外のコードは Node.js のv12.12.0で動作確認している。 問題のおさらい bindしないと何が起こるのか。 以下は、ボタンを押すたびにオンオフが切り替わるコンポーネント。 import React from 'react'; class App extends React.Component { constructo
Next.jsのmiddlewareはVercel以外でも問題なく使えるか
Next.jsでv12〜middlewareという機能が使えるようになりました。 middlewareに書いた処理はリクエストが完了する前に実行されます。Cookieの値に応じてルーティングを振り分けたり、Basic認証を導入したり等など、幅広い用途で使えそうです。 VercelとNext.jsの組み合わせが強いのは、VercelにNext.jsをデプロイするとこのmiddleware部分をEdge Functionsで捌いてくれるという点です。つまり、静的なページに対するリクエストに対して、オリジンサーバーに触れことなくmiddlewareを実行できるということです。 Vercel以外のプラットフォームだとどうなのか ドキュメントには以下のような記載があります。 This works out of the box using next start, as well as on Edge
styled-components（CSS in JS）をやめた理由と、不完全なCSS Modulesを愛する方法 - Qiita
styled-components 画像は styled-components ツライっていう顔です。 Angularのようにスタイリングまで面倒を見てくれるUIフレームワークならまだしも、Reactの場合はコンポーネントのスタイリング方法も自身で選択しなければいけません。CSSのスタイリング方法/設計はいくつか存在しますが、どれも一長一短で、やはり銀の弾丸は存在しません。スタイリング方法を選択可能なUIフレームワークは、この混沌とした選択肢の中から価値を見出す必要があるわけです。 僕はBEMによる人力CSS管理（Sass/Less/Stylus）から、 { fontSize: 14 } のようなJSオブジェクト形式のCSS in JS、 styled-components のようなTemplate Stringsを利用したCSS in JS、そしてCSS Modulesまで幅広く公私とも
Next.js の Incremental Static Regeneration を理解する
Next.js 9.4 から Incremental Static Regeneration という機能が実装されました。 段階的な静的サイト生成と訳されていて、SSG のビルドを最適化するものだろうなって認識しか無かったのですが自身のブログを ISR に対応させたので紹介していきます。 Next.js のビルドパターン紹介 Next.js のビルドにはいくつかパターンがあり、pages/ コンポーネントの処理に応じて適した出力をしてくれます。 どのパターンでビルドされてるかはログに書かれており、参考までにブログを yarn build した結果下記のように表示されました。 Page Size First Load JS ┌ ● / (ISR: 1 Seconds) AMP AMP ├ /_app 0 B 58.4 kB ├ ○ /404 0 B 58.4 kB ├ ○ /about AM
1
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
