見出し画像

フロントエンド情報共有会議事録 2022/07/04

tkrakus

こんにちは、ラクス フロントエンドチームの亀ノ上です。
弊社ではエンジニアに関わらず、社員の誰でも参加が可能なフロントエンドニュースの共有会を定期的に開いています。
今までも共有会の内容は議事録として、社内のチャットツールで共有していましたが，noteの運用も始まったのでせっかくなので社外へも共有することになりました。
今回は７月４日に行われたフロントエンド情報共有会の議事録を公開します！

Twitterからのフロントエンドネタ

CSSのenv関数

iOS のホームバー領域分のpadding を設定したいとき、下記のプロパティをセットすると、viewport に干渉しているときのみ paddingがセットされる

padding-bottom: env(safe-area-inset-bottom)

レスポンシブの360px未満対応を終わらせる

JavaScript側で<meta name="viewport" >のcontent属性の値を書き換える

Figmaでウィジェット

社内デザイナーの方でも話題になっていた。

ES2022の正式仕様がリリース

ECMA 公式
解説記事：正式仕様リリース！ JavaScriptの最新仕様ES2022で追加された「全」新機能

  • プライベートなメソッドが宣言できるようになった。

    • TypeScriptでもprivateはあるが、コンパイル後のJavaScriptはパブリックになる。

    • 今後targetをes2022にするだけで使えるようになるかどうか…

  • async functionの外、トップレベルでもawaitが使えるようになる

  • 配列の最後の要素がarray.at(-1)で簡単に取得できるようになった

    • array.at(-2)は配列の後ろから２番目の要素を取得できる。

    • array.at(0)は配列の１番目。配列の最後はarray.at(-1)で若干混乱する。

  • Object.hasOwn()で、指定のプロパティを持っているか簡単にチェックできる。

    • hasOwnProperty()は同じ名前のメソッドを持っていたら上書きの危険がある。

    • そもそも上書きできる状況が良くない…予約語のようなものの取り扱いには注意。

  • staticイニシャライザーができるようになったので、今までクラスの外部に処理を記述していたのをクラス内にかけるようになった。

2022 Developer Survey

2022 Developer Survey(Most popular technologies)

楽楽電子保存にVite試験導入しました

  • Sansanさんの記事をかなり参考にしたので感謝

  • 移行背景

    • webpackの設定が辛い

    • HMR,ビルド時間が遅くなっていく

  • 導入後

    • yarn startは大幅な改善、他は改善。HMRは計測方法がわからないが体感CRA1s、vite0.1sな感じ。

  • 所感

    • viteはドキュメントが充実していて設定しやすく感じた

    • この際もういろんなものを早くしてみたくなる yarn3 or pnpm/storybook/vitest

KDDIの通信障害

解説記事：KDDIの通信障害についてまとめてみた

  • auショップに押しかける人がいたりするなどかなり話題になった。

  • 現場は本当に大変だったろうと思いながら、どうしようもなかったので見守るしかなかった。

REALFORCE R3

REALFORCE R3が発売

  • デバイスへの投資は成果が出るようです。（※個人の感想）

採用情報

イベント情報

この記事が気に入ったらサポートをしてみませんか？