ThunderMiracle's Blog - Page 7

フロントエンドプロジェクトでもどんどん複雑になりつつ、深いフォルダの構成が当たり前のことになってきました。例えばcreate-react-appを利用する場合、下記のようなフォルダ構成が普通でしょう。

Next.jsのデバッグと言えば、`console.log`を思い出すことが多いでしょう。オフィシャルサイトにデバッグする方法が公開されていますが、クライアント側のデバッグ方法が書いてありません。`Next.js`+`Typescript`の組合せのデバッグ方法もありません。今日クライアント側でNext.jsのデバッグする方法を紹介します。

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

LANを通してMacOS上のウェブアプリケーションにアクセスできるように、ポートの開放する必要があります。今日はこの方法をまとめます。

時々LANを通してWindows上のウェブアプリケーションにアクセスし、テストを行う必要があります。例えば、iOSのSafariにFileReaderのreadAsDataURLの挙動はPC、MacOSと異なり、うまく動かないケースがあります。その場合、iPhoneでWindows上のウェブアプリケーションに直接的にアクセスできたら、デバッグしやすくなるでしょう。

docker daemonをMacOSに起動できるようになる手順を整理します。

Gatsbyを触り始めてからJamstackを知り、Jamstackのメリットをたくさん実感しました。Jamstackプログラムを静的なhtmlに出力でき、進化しつつあるブラウザとJavaScriptに恵まれ、ただの表示だけではなく、ユーザとの交互することもできます。

Vagrantはプロジェクトを参加する全員に同じ開発環境を提供できる上、ホストにも汚染しない仮想技術となります。HomesteadはVagrantの上でさらに一般開発に必要なものを全部組み込んでいる特殊なVagrantとなります。

パフォーマンスはウェブサイトの死活問題となります。表示スピードが早ければ早いほど、離脱率が低くなる傾向があります。もちろんAMPの対応するウェブページを作ったほうが一番ですが、レガシーのウェブサイトをなかなか簡単にAMP化できないのは現実です。なので、パフォーマンスの改善をまずやりましょう。

時々dockerコンテナーに入って調査する必要があります。コンテナーが正しく起動されたら、下記のコマンドで簡単に入れますが、エラーが発生して停止され、もしくは永遠に最起動中になっているコンテナーにどう入ればいいでしょうか？