IEにflexboxの対応をしてあげた
今まではchromeでしか検証をしていなかったが、現在委託として入らせていただいている企業では IE対応が必要だったので今後の為にも備忘録として記事に残しておく。
IEのバージョンは 11 で 8 じゃなくてなくてよかった。
親要素のwidthを超えたwidthになる
下記のようなクラスがあったとして、IEではこのスタイルを親とした時、 その子要素のwidthがはみ出してしまうというバグがある。
これは https://github.com/philipwalton/flexbugs#flexbug-2 にも記載があり、
同時に対応方法も書かれている。
私は今回 max-width: 100% を適用することでこの問題を解決することができた。
.ie-bug-1 { display: flex; flex-direction: column; align-items: center; }
justify-content: space-between が効かない
flex-direction: column と justify-content: space-between を使って子要素を簡単に固定化させてヘッダ・フッタを作っていました。
が、IEでは、フッタが固定化されず、上に上がってしまいました。
WEB上では、 &:before/&:after 要素が入ってしまったことが原因との記事が多く見られましたが、私の場合これでは解決できませんでした。
比較的多く時間を使ってしまったので、flex-direction は諦めて flex-grow: 1 という便利機能を使ってフッタまでの高さを長くさせました。
今から考えてみれば min-height を指定していたので下記のバグに相当していたから何じゃないかなと思いました。
ですが、解決方法は heightを指定するか子要素でラップするかだったので、できるだけ構造を変えたくなかった理由から flex-grow: 1
で解決できてよかったです。
Typescriptでmapのkeyに対して型定義を行う
最近はTypescriptで開発する所が専らな気がします。 私も例にもれずTypescriptでReact.jsを書いています。
今回は限られたkeyしか認めないmapオブジェクトを生成するときの処理に詰まったので それを備忘録として残しておきます。
interface Auth = "google.com" | "facebook.com"; interface Props { id: Auth; text: string; } const map: { [key in Auth]: Props } = { "google.com": { id: "google.com" as Auth, text: "Google", }, "facebook.com": { id: "facebook.com" as Auth, text: "Facebook", }, };
上記にコードを実際に載せましたが、大事なのは map変数の定義箇所です。
const map: { [key in Auth]: Props }
これはkeyをAuth型、valueがProps型のmapという定義になります。 valueの定義は特に問題ないと思います。
keyの型の定義だけが特殊で [key in Auth] となっています。 これは [key: Auth] と書くんじゃないかという方が多く見られると思います。 (私もそう思っていました)
でもこれはTypescriptからエラーが出力されるため気をつけるようにしましょう
エラー内容
An index signature parameter type cannot be a union type. Consider using a mapped object type instead.
なぜこの書き方になるのか。 という部分についてですが、調査が足りず分かっていません。 解決方法で申し訳ございませんが、もしお分かりな方はコメント等でご教授いただけますと幸いです。
