ランサーズ(Lancers)エンジニアブログ > フロントエンド > フロントエンド定例 > Windows環境のnpm script HTMLサイズの注意 個人のGitHub Pages作り始め フロントエンド定例 2022/8/19

Windows環境のnpm script HTMLサイズの注意 個人のGitHub Pages作り始め フロントエンド定例 2022/8/19

igarashisho|2022年08月19日
フロントエンド

こんにちは、フロントエンドチームの @syo_igarashi です。
今週のフロントエンド定例の内容を記載します。

フロントエンド定例について、以前の記事(ランサーズのフロントエンドチームが取り組んでいること)でお伝えしたのですが、毎週金曜日に開催しており、実際の業務で取り組んでいることや気になった技術情報等をシェアしあう会になっています。

以下、今週の内容です。

Windows環境のnpm script

Windowsではシングルコーテーションによる構文解析ができないのでエスケープ、ダブルクォテーションで囲む必要があります。

npm script経由にNodeJSの構文を実行する際にnode -e “~~~”と使ったりする際も

  "hoge": "node -e \"~~~\""

というようにダブルクォテーションにエスケープ入れることでWindow環境でも動作するようになります。

HTMLサイズの注意

CSSをインライン化した際に起こった問題として初回に読み込むHTMLのサイズが大きくなりすぎてTwitterのOGP画像が表示されないという問題がありました。サイズ制限としてTwitter公式にも記載されています。

https://developer.twitter.com/en/docs/twitter-for-websites/cards/guides/troubleshooting-cards#responselarge

その他の問題として初回のHTMLサイズが大きいため初回でブロッキングされるとページが表示されない原因にもなるので注意しないといけないと思いました。

個人のGitHub Pages作り始め

https://github.com/igara/igara.github.io

サイト
https://igara.github.io

SSGでブログを展開するようなものを構成中です。

https://igara.github.io/blogs

時間の都合上細かいネタなど次回に記載します。
複数スタイルのテーマ(ダークモード)適応とか
プロジェクト構成とか

 

次回の更新予定は、9/2(金)になります!

前回の定例内容はこちらから確認可能ですのでご興味いただければ下記のリンクから閲覧いただければと思います。

https://engineer.blog.lancers.jp/?s=フロントエンド定例