【感想】今週読んで印象に残った記事(20220207週)
2022-02-13Content
- はじめに
-
- 企業のテックブログの更新をまとめた RSS フィードを作りました!(GitHub Actions)
- モダンフロント開発に必須の知識(ES2015~ES2022 まとめ + 高階関数)
- プロダクト開発でドキュメントを書かないとどうなるか
- 何問解ける?TypeScript クイズ!
- kintone フロントエンドリアーキテクチャプロジェクトで大切にしていること
- アマゾンのページ表示速度を劇的に改善した 6 つの実践テクニック【SEO 情報まとめ】
- テスト・パフォーマンス・アクセシビリティ・セキュリティの 4 大品質に取り組むメルペイのフロントエンドチーム
- 「引っ越しするけど会社から歩いて 10 分圏内ってどこまで?」を調べるサービスをつくりました
- まとめ
はじめに
おはようございます!こんにちは!こんばんは!
のふのふ(@rpf_nob)と申します!!都内のスタートアップでフロントエンドエンジニアとして働いています。
2022/02/07 週の今週読んで印象に残った記事のまとめと所感です。
記事と所感
企業のテックブログの更新をまとめた RSS フィードを作りました!(GitHub Actions)
最近会社の Slack に企業のテックブログの feed チャンネルを作ったばかりだったので印象に残りました。
とりあえず有名どころを設定したけど、あまり多く投稿されても邪魔なだけなので、良さげな企業のやつがあれば追加したいと思います。
モダンフロント開発に必須の知識(ES2015~ES2022 まとめ + 高階関数)
とても良いまとめ。
2019 年からしか JavaScript 使っていないので、時系列順に勉強できるのはありがたい。
ES2022 のはまだあまりキャッチアップしてなかったので、よく読んでおきたい。.at()は結構ありがたいですね。
プロダクト開発でドキュメントを書かないとどうなるか
会社だとあったりなかったり更新されてなかったりで結局聞いている部分が多いのでこの記事が印象に残りました。
自分は後発組なので、仕様理解であったり開発環境構築だったりするところが一番詰まる部分なので、今後人が増えたり変わったりすることを考えてもドキュメントは整備したいと思います。
どうすればドキュメントがかけるようになるか
- トップダウンでドキュメントが必須だと明確にチームに伝える
- 開発する上で書く必要のあるドキュメントの種類を明確にする
- SSOT(Single Source Of Truth)を意識してドキュメントを更新し続ける
- チャットの履歴を一定期間しか残さない
issue のやりとりのままで要件がドキュメントとしてまとまっていないことも多いので、この辺りのことは自身でも心がけたり他のメンバーを巻き込んだりして改善していきたいと思いました。
何問解ける?TypeScript クイズ!
最後の[Q6] async/awaitだけ外れてしまった。
Promise(非同期)周りが弱い・・・
kintone フロントエンドリアーキテクチャプロジェクトで大切にしていること
アプリケーションを分割をする際には、アプリケーションのアーキテクチャを変えるだけでは不十分で組織やチームの体制も一緒に変える必要がある
サービスの規模が大きくなってきたら、こういったアーキテクチャやチーム体制について考える必要があるので参考になる。チームトポロジーという書籍は先日やめてしまった業務委託の方が最近読んでるって言ってたので、ちょっと読んでみたいと思いました。
全てのページが React によって表示されている
こういうのを見ると本当に Vue ではなく React を選択した 2 年前の自分を褒めたい。。。
アマゾンのページ表示速度を劇的に改善した 6 つの実践テクニック【SEO 情報まとめ】
- 米アマゾンでは、ページの表示が 100 ミリ秒遅くなるごとに売上が 1%減少すると言われている。
- ファーストビュー(スクロールせずに最初から表示される画面領域)のコンテンツをすべて先に読み込む。結果、500 ミリ秒速くなり売上が 5%増加した。
- すべてをサーバーサイドレンダリング(SSR)する。
- 重要なパフォーマンス指標を計測する。
- 重大な変更はすべて A/B テストする。
- 使っていないポリフィルを削除する。
- ブラウザに合わせた JavaScript のバンドルを使う。
会社の業務だと直接売上に直結しないのもありますが、パフォーマンスをそれほど意識していないです。なのでこの辺りの知見が乏しいので大変参考になります。
テスト・パフォーマンス・アクセシビリティ・セキュリティの 4 大品質に取り組むメルペイのフロントエンドチーム
テストについてはカバレッジや成功率を見ている
パフォーマンスについては、次の 4 つを計測している
- LCP(Largest Contentful Paint / 最大視覚コンテンツの表示時間)
- CLS(Cumulative Layout Shift / 累積レイアウトシフト数)
- TBT(Toral Blocking Time / 合計ブロック時間)
- TTI(Time to Interactive / 操作可能になるまでの時間)
アクセシビリティについては、WCAG standard という国際的な基準に基づいた指標を KPI として見ている
セキュリティについてですが、GitHub リポジトリに GiItHub Apps でホワイトソーススキャンを入れている
個人的に弱い部分なので参考になりました。
「引っ越しするけど会社から歩いて 10 分圏内ってどこまで?」を調べるサービスをつくりました
43 万円 😲
個人開発でこれだけお金かけるのはなかなかできないので、本当にすごいと思います。
やりたいことを実現させるのもすごいので見習いたいです。
まとめ
2022/02/07 週の今週読んで印象に残った記事のまとめと所感でした。
気になる記事があったら読んでみてください〜😀
↓↓↓ 前回はこちら ↓↓↓
最後まで読んでいただきありがとうございます!! この記事が良かったと思ったら SHARE していただけると泣いて喜びます 🤣