JavaScript

webpackでバンドルしたnodejsのファイル（人間が読めない）にエラーが発生した場合、ソースコードの場所（人間が読めるソースコード）を特定する必要があるでしょう。わかったらすごく簡単と知りながら結局時間がかかりましたので、方法を記録します。

HEIFの普及率を考えると、現時点アップロードさせない方が一番いいと思います。まず`input`にfile typeで制御しましょう。しかし、これだけでは拡張子が間違ったパターンを防げません。万全の対策として、アップロードされたファイルが本物のイメージファイルのことをチェックする必要があります。チェックする方法が２つあります。クライアント側でイメージファイルをリサイズしようとしたら、`Image` objectに読み込めるかどうかでチェックすればいいでしょう。それ以外の場合は、まめにファイルヘッダーの数バイトを読み込んで、Image Type Patternでチェックしたほうが早いでしょう。

スマホが日進月歩の時代になりました。写真1枚で簡単に10Mbを超えるでしょう。サーバへ送信する前に、クライアント側でアップロードされたイメージをリサイズできれば、サーバに対する負荷を軽減できるし、アップロードスピードの向上するためユーザビリティ質にもつながります。なので、クライアントでのイメージリサイズは現代ウェブアプリケーションの必須機能ともいえるでしょう。

Gatsbyをバージョンアップした後developモード起動できない問題

フロントエンドのJavaScript学習資料