IE で NodeList をループ処理する
IE では NodeList に forEach メソッドが実装されていないため、querySelectorAll() の返値を forEach で走査できません。IE をサポートする必要がある Web サイトなどを構築するときに NodeList のループ処理を行うときには、ループ可能なオブジェクトに変換してあげる必要があります。
Angular のカプセル化をマネージする
素の Angular で API などから取得したコンテンツを表示する場合には、innerHTML に入れると自動でサニタイズして表示してくれます。この時 innerHTML の内容は元のコンポーネントのカプセルから出ているため、スタイルシートが適用されません。
Next.js で next build した時、出力先フォルダがクリーンされない件
Next.js では設定をしない状態だとビルドの度に新しいビルド ID が割り当てられ、データフォルダにビルド ID 名のフォルダが作成されます。ところが、ビルド時に出力先がクリーンされません。そのため過去のビルド結果が積み重なり、出力先フォルダが肥大化してしまいます。
ページ内リンクのターゲットが固定ヘッダーに重なるのを CSS で対処する
同じページ内へのアンカーリンクでジャンプすると、リンク先のターゲット (#～) がブラウザのビューポートの最上部になるところまでスクロールされます。その時、サイトのヘッダーを最上部に固定しているとその高さ分見えなくなってしまうというありがちな問題に CSS だけで対処する方法です。
remark のバージョンアップで表示が崩れてしまった件
remark 13 がリリースされたので remark 12 からアップデートしたところ、Markdown の table や checkbox が表示されなくなりました。勢いでアップデートしたのが良くなかったです。いろいろ調べて対処したことをまとめました。
Next.js と Emotion でいろいろハマった件 3
Next.js で Emotion を使う場合、JSX Pragma がつけられることで Next.js の <Link> コンポーネントが直下の <a> に href をつけてくれなくなるので、その対応をいくつか考えてみました。また、Next.js や Emotion のバージョンを上げたら起こったことについても書きました。
Emotion で CSS を extend する方法
Emotion でベーススタイルなどを拡張するような書き方について、オブジェクト記法の時にはどうしたら良いのかということにちょっと時間をかけてしまいました。結構なんでも受け入れてくれる感じでしたが、忘れないようにメモしておきます。
Next.js と Emotion でいろいろハマった件 2
Nextjs で export する時に、Emotion の出力結果を <head> にインライン展開する方法についてです。また、PostCSS が効かなかったので、ビルド時に Autoprefixer を実行するように対応してみた内容もまとめました。
Next.js と Emotion でいろいろハマった件 1
個人的に Emotion が好きなのでよく使っていますが、今回初めて Next.js のプロジェクト内で使ってみて色々ハマったのでまとめてメモしておきます。JSX Pragma をつけずに使うにはどうするかと、それに伴う Fragment のインポートや tsc エラーについて書き留めました。