ここ1~2年くらいで 使えるようになった(主要ブラウザーの最新版 がすべて対応した ) ウェブの新機能について ランダムに喋る!

2024.03.15 福岡フロントエンド勉強会 #1

Transcript

1. ͜͜1ʙ2೥͘Β͍Ͱ ࢖͑ΔΑ͏ʹͳͬͨ ΢Σϒͷ৽ػೳʹ͍ͭͯ ϥϯμϜʹ஻Δ! 2024.03.15 ෱ԬϑϩϯτΤϯυษڧձ #1 ओཁϒϥ΢βʔͷ࠷৽൛ ͕͢΂ͯରԠͨ͠ ( )
2. ͳʹ΋ͳ͍ϖʔδ
3. CSS͕ωετʹରԠ CSS
4. https://developer.mozilla.org/en-US/docs/Web/CSS/CSS_nesting/Using_CSS_nesting 10೥લʹཉ͔ͬͨ͠ɻ
5. Ϗϡʔϙʔτͷछྨ͕૿͑ͨ CSS lvh / svh / dvh [new]
6. lvh ද͕ࣔಈతʹมԽ͢Δϒϥ΢βʔͷUIʢΞυϨεόʔɺπʔϧόʔ౳ʣͷྖ ҬΛؚΉϏϡʔϙʔτߴ͞
7. svh ද͕ࣔಈతʹมԽ͢Δϒϥ΢βʔͷUIʢΞυϨεόʔɺπʔϧόʔ౳ʣͷྖ ҬΛؚ·ͳ͍Ϗϡʔϙʔτߴ͞
8. dvh πʔϧόʔͷදࣔঢ়ଶʹ͋ΘͤͯಈతʹมԽ͢ΔϏϡʔϙʔτߴ͞
9. lvh ද͕ࣔಈతʹมԽ͢Δϒϥ΢βʔͷUIʢΞυϨεόʔɺπʔϧόʔ౳ʣͷྖ ҬΛؚΉϏϡʔϙʔτߴ͞ svh ද͕ࣔಈతʹมԽ͢Δϒϥ΢βʔͷUIʢΞυϨεόʔɺπʔϧόʔ౳ʣͷྖ ҬΛؚ·ͳ͍Ϗϡʔϙʔτߴ͞ dvh πʔϧόʔͷදࣔঢ়ଶʹ͋ΘͤͯಈతʹมԽ͢ΔϏϡʔϙʔτߴ͞ ※ ैདྷͷvh͸ϒϥ΢βʔͷʮσϑΥϧτͷߴ͞ʯͱͳΓɺϒϥ΢βʔͷ࣮૷ґଘʢ͓ͦΒ͘lvhͱಉ͡ʹͳΔʣɻ ※ ΋ͪΖΜlvw, svw, dvw΋͋Δͷ͕ͩɺ্هͷʮද͕ࣔಈతʹมԽ͢Δϒϥ΢βʔͷUIʯʹεΫϩʔϧόʔͷྖҬ ͸ؚ·Εͳ͍ͷͰɺ͋·Γ࣮༻্ͷҙຯ͸ͳ͍Α͏ʹࢥ͏ ·ͱΊ
10. svmin / svmax / lvmin / lvmax / dvmin / dvmax / vmin / vmax [new] Ϗϡʔϙʔτͷॎԣͷ͏ͪେ͖͍஋ or খ͍͞஋ΛऔΕΔ
11. transformػೳଟ͗͢ˠ෼ׂ CSS scale, rotate, translate͕ͦΕͧΕಠཱͨ͠ϓϩύςΟʹͳͬͨɻ ʢskew͸ͳ͔ͥͳ͍ʣ ΞχϝʔγϣϯͰ࢖͏ͱ͖ʹศརɻ
12. top, right, bottom, left ·ͱΊͯࢦఆͰ͖ΔΑ͏ʹͳͬͨ CSS →
13. accent-colorϓϩύςΟͰ ϥδΦϘλϯɾνΣοΫϘο Ϋεͷ৭͕؆୯ʹมߋՄೳʹ CSS CSS Render
14. range syntax CSS → ैདྷͷه๏ͩͱʮmax-widthͱҰக͢Δ৔߹͸Ͳ͚ͬͪͩͬʁʯͱͳΓ͕ͪͩͬͨͷͰɺͦ ͏͍͏؍఺Ͱ΋Θ͔Γ΍͘͢ͳͬͨɻ
15. container queries CSS ΢Οϯυ΢αΠζͰ͸ͳ͘೚ҙͷཁૉͷαΠζʹجͮ͘CSS੾Γସ͕࣮͑ݱՄೳʹɻ https://developer.mozilla.org/en-US/docs/Web/CSS/container-type
16. ʢࢲݟʣ ίϯϙʔωϯτ͕ࣗ਎ͷදࣔྖҬʹԠͯ͡ܝग़߲໨ͷαΠζײΛௐ੔͢Δͱ͍࣮ͬͨ૷ ͕JavaScriptͳ͠Ͱൺֱత؆୯ʹ࣮૷Ͱ͖ΔΑ͏ʹͳͬͨɻ ͨͩίϯςφʔ͸ίϯϙʔωϯτͷϧʔτཁૉʹݶఆ͢ΔͳͲԿΒ͔ͷنଇੑΛ࣋ͨͤ ͳ͍ͱϋΠίϯςΩετ͗͢Δ࣮૷ʹͳͬͯ͠·͏͔΋͠Εͳ͍ɻ
17. :has selector CSS ಛఆͷཁૉΛؚΜͰ͍Δ͜ͱΛ৚݅ʹελΠϧద༻͕Մೳʹ ※্هઆ໌͸ҰྫͰ͋Γɺ:hasηϨΫλʔͷػೳΛ໢ཏతʹઆ໌͍ͯ͠ͳ͍ https://developer.mozilla.org/en-US/docs/Web/CSS/:has imgΛ಺แ͢Δh2ཁૉʹελΠϧΛద༻
18. ʢࢲݟʣ ෳࡶͳCSSηϨΫλʔͷ࢖༻͸ՄಡੑΛ௿Լͤ͞Δɻ :hasͷ࢖༻͕૝ఆ͞ΕΔଟ͘ͷέʔεʹ͓͍ͯ͸ɺ۪௚ʹΫϥε෼͚͢Δ͔ɺReactίϯ ϙʔωϯτ಺ͰJavaScriptʹΑΔग़͠෼͚Λ͓͜ͳͬͨ΄͏͕Մಡੑͷ؍఺Ͱྑ͍ͱࢥ ͏ɻ
19. ഑ྻͷඇഁյૢ࡞ Array.prototype.toSorted(); Array.prototype.toReverted(); Array.prototype.toSpliced(); Array.prototype.with(); ES
21. Promise.withResolvers ES ֎෦͔Β resolve / reject ͠΍͘͢ͳͬͨɻ
22. Object.groupBy() Map.groupBy() ES https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Object/groupBy https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Map/groupBy
24. PopoverAPI HTML HTML͚ͩͰϙοϓΦʔόʔද͕࣮ࣔ૷Ͱ͖Δ More examples: https://mdn.github.io/dom-examples/popover-api/ • popovertargetactionଐੑͰด͡ΔϘλϯ΋࡞ΕΔ • .togglePopover() ͰJavaScript͔Βͷද੍ࣔޚ΋Մೳ • ::backdropٙࣅཁૉͰഎܠΛ҉͘͢Δ͜ͱ΋Մೳ
25. <dialog>ཁૉͱPopover APIͷҧ͍ʢ͋Δ͍͸ซ༻ʣʹ͍ͭͯ೺Ѳ͓ͯ͘͜͠ͱΛਪ঑ https://developer.mozilla.org/en-US/docs/Web/API/Popover_API#concepts_and_usage
26. ͳʹ΋ͳ͍ϖʔδ