とある会社で2020年のアドカレをフロントエンド目線でキュレーションし続けた記録
がっちゃんご挨拶
はじめまして！ がっちゃん です！
今年、初めての取り組みとして、とある会社のSlackチャンネルで毎朝アドベントカレンダーの中からフロントエンド目線で気になる記事をキュレーションする取り組みを実施してみました。
このスクラップはそれをまとめるために作成したもので、キュレーション完了後にCloseする予定です！
注意点
- 圧倒的主観で選んだ記事です
- 自分が関わっている会社のフロントエンド界隈をより良くするために参考になりそうという目線で選んでいるので皆さまの環境に合わないものも混ざっている可能性があります
- 一部社名や社内情報が絡んでいる書き方をしている部分があるのでそこは黒塗りさせていただいています
- 日付の数え方どっかでミスって日数ずれてたりしますがご了承ください🙏
クロールしていた対象（TwitterとQiitaで見つけたアドカレを途中で少しずつ追加）
https://devblog.thebase.in/advent-calendar-2020
https://qiita.com/advent-calendar/2020/bengo4com
https://qiita.com/advent-calendar/2020/sakura
https://qiita.com/advent-calendar/2020/m3
https://qiita.com/advent-calendar/2020/yahoojapan
https://qiita.com/advent-calendar/2020/smarthr
https://qiita.com/advent-calendar/2020/lapras
https://qiita.com/advent-calendar/2020/dena
https://qiita.com/advent-calendar/2020/icare
https://qiita.com/advent-calendar/2020/yumemi
https://qiita.com/advent-calendar/2020/gamewith
https://qiita.com/advent-calendar/2020/campfire
https://twitter.com/search?q=%E3%82%A2%E3%83%89%E3%83%99%E3%83%B3%E3%83%88%E3%82%AB%E3%83%AC%E3%83%B3%E3%83%80%E3%83%BC%20qiita&src=recent_search_click&f=live
https://engineering.mercari.com/blog/entry/20201120-merpay-advent-calendar-2020/
https://engineering.mercari.com/blog/entry/20201119-mercari-adventcalendar-2020/
https://qiita.com/advent-calendar/2020/progate
https://qiita.com/advent-calendar/2020/pol
https://qiita.com/advent-calendar/2020/javascript
https://qiita.com/advent-calendar/2020/typescript
これを全部コピーして、Chrome拡張のPasty(https://chrome.google.com/webstore/detail/pasty/hdjihnnclpjhfdbbinmgoiehhoehhlgf?hl=ja)で一括でひらいて毎朝新聞みたいにざっと眺めるのをやっていました。
やってみた感想
- この企画をやったことで、共有するために強制的に内容を確認して読むので積み記事にならずに知識の増えるスピードがいつもより高かった
- 企業アドカレを多めにしたおかげで、フロントに限らない記事タイトルも目に入るので、そこから別の知識を得ることができた（それを別のSlackチャンネルに流したりもしてた）
- 結論、 やってめっちゃよかった！
がっちゃん【2日目】
アドカレ2日目は、
React(Next.js) + TypeScript + レイヤードアーキテクチャとStoryBookで、ｶﾘｯｶﾘにフロントエンドを固く（型く）、モダンにしたアーキテクチャを採用した記事をシェアです:ok_woman:
記事内のInteractor/Mapperパターンは、XXXの設計だとRepositoryに全部まとめちゃってますが、これはこれで一理あるアーキテクチャだなぁと思って読んでました:eyes:（とはいえ、施策実装の初速を落とさず、なおかつ継続開発がしやすいようにするならRepositoryFactoryぐらいがちょうどよいと思っている人間
Vue SPAやjQueryでゆるふわにアプリケーションを作る方法と、これぐらいカリカリに固くしたアーキテクチャどちらも知ってると、アプリケーションにちょうどよいアーキテクチャはどれぐらいなのか？の判断をしやすくなると思うので、ぜひ一度読んでいただけると良いと思いました！:ok_woman:
がっちゃん【3日目】
アドカレ3日目は、
Vue 3のリリースに対して、実プロダクトをどのようにアップデート（マイグレート）していこうとしているのかがまとまった記事です:ok_woman:
将来的にXXXでも（Nuxt3が出れば）対応していくことになると思うので、目を通しておいていただくのは良いかもです:ok_woman:（基本ESLintのマイグレーションプラグイン入れて、ざっとリストアップ&自動改修 + どうにもならない部分を手で置き換え。って形になると思いますが:thinking_face:）
がっちゃん【4日目】
アドカレ4日目は
CLSに関して、実数値も合わせてよくまとまっていて良い記事をシェアです:ok_woman:
来年の5月から検索順位に反映されて来るCore Web Vitalsの数値ですが、繁忙期を過ごすとあっという間に時間は過ぎちゃいますし、ぜひ一度目を通しておいていただくのは良いかもです:ok_woman:
がっちゃん【5 / 6日目】
アドカレ5、6日目の記事は
下記2本です！個人的にやっぱDenoの進化は楽しみだなぁと思ってる次第です:ok_woman:
- Denoで爆速Lint！： https://zenn.dev/magurotuna/articles/66618f26475702
- 意外とよく使うけど地味にめんどくさい画像アップロード方法 (React + Firebase版)： https://zenn.dev/tiwu_dev/articles/72f8d7de22b164
がっちゃんあとはこの辺、アドカレ直接関連するやつではないのですが良記事・良本だったのでシェアです:ok_woman:
がっちゃん【7日目】
アドカレ7日目の記事はゆめみさんのアドカレからいい記事2本見つけたので贅沢2本シェアです:ok_woman:
・存在は知っているものの、使い所が理解しづらい TSの:typescript: Utility Typeのいいまとめ
・ハイブリッドアプリフレームワークでのハマりどころがよくまとまっていたもの
がっちゃんまたアドカレとは直接関わらないのですが、
過去記事でフロントエンドのTDDがステップ・バイ・ステップでしっかり書かれてる良記事を見つけたのでシェアです:ok_woman:
がっちゃん【8日目】
アドカレ8日目の記事は、メルペイの自動テスト環境についての記事をシェアです！
たぶんこのレベルの自動化を実現してるの国内だとほとんどなくて国内トップクラスな感じだと思います:ok_woman:
日本のWeb界隈でもかなりハイレベルな事をやっているので、いきなりこのレベルをXXXで実現するのは難しいですが考え方の概観の理解や、マイルストーンや目標を立てるときの参考にはめっちゃなる内容だったのでぜひ読んでみてください:ok_woman:
がっちゃん【9日目】
アドカレ9日目の記事はProgateのアドカレから、スマホのカメラとJS OCRライブラリを使ってゴニョゴニョする記事です！
使い所は結構ちっちゃくてアレなのですが、だいぶと技術的に面白いことをやっててテクい記事だなと思ったのでシェアです:ok_woman:
がっちゃん【10日目】
アドカレ10日目の記事は弁護士ドットコムのアドカレから、VueUse( https://github.com/antfu/vueuse )というユーティリティライブラリについて日本語でまとめてくれた記事をシェアです！:ok_woman::skin-tone-2:
もともとこのライブラリのことは知らなかったのですが、Vue2でもVue3でも使えるみたいなのでComposition API的なインターフェイスになれるためと、いろんなBrowser APIをラップしてくれるライブラリとして、使い所あったら入れてみるのは良いかもです:ok_woman:
ちなみに、Reactの場合は react-use というライブラリがあるみたいでう:ok_woman::skin-tone-2: https://github.com/streamich/react-use
がっちゃん【11 / 12 日目】
アドカレ11日目、12日目の記事は、
①ゆめみというフロントエンドに強みがある制作会社の技術キャッチアップ方法や社内へのナレッジ化、外部発信方法など、組織としてフロントエンドチームを強くするためにできることについてまとまった記事
②Puppeteerを使って、データ収集や動作テストの自動化をする記事（実コード付き）
の2記事をシェアです！
それぞれの記事を参考にうまく利用して、XXXのフロントエンド界隈の生産性を上げていけると良きですね:ok_woman:
がっちゃんあと、過去のアドカレから良い記事を見つけたのでシェアです:ok_woman:
地味に知らなくて、こうすればよかったのか！となるものや、見落としがちな部分がよくまとまった記事でした:ok_woman:
がっちゃん【13日目】
アドカレ13日目の記事は、
XXX各サービスでかなり重要になってくる、画像形式（WebP）についての記事をシェアです！
iOS 14からSafariでもWebP対応がされるようになり、利用できる範囲がかなり拡大した感があるWebPについて、非常にわかりやすくよくまとまっている記事だったので、ぜひご一読ください！
そしてWebP対応して爆速&高画質サイトを実現しましょう:muscle:
がっちゃん【15日目】
アドカレ15日目の記事はめちゃモダンな感じでY!社がリニューアルしたときの記録が事細かに（何を考えてて、ある技術はどんな特徴があるのかとかよくまとまってる）書かれた記事をシェアです！
Next.jsでゼロコンフィグなフロントエンドへ この辺はNuxt.jsでも同じことが言えるし、 GraphQLのエラーハンドリングには少しクセがある このへんはXXXさんと悩んだところがあったりと、Next.jsをベースに書かれていますが全体的にわかり味が深い記事でした:ok_woman:ｗ
Next.js + NestJS + GraphQLは2021年は結構人気な技術になっていくのかなぁとか個人的に思ってたりします:ok_woman:
がっちゃんもう一本、めちゃテクい記事も見つけたのでシェアです:ok_woman:
Chrome拡張でWebRTCのAPIをプロキシして、好きなBGMを挟んだ音声・動画データをGoogle Meetに流すというだいぶTechなことをやってるところがすごいです:ok_woman:
個人的に、Web（ブラウザ）の世界ってこんな感じで、動画や音声の操作やNFCやLチカ、バイナリ操作とかまで、色んなことができる世界をGoogleの強いエンジニアがブラウザでWrapして、JSのAPIとして持ってきて提供してくれるのが好きだったりしますｗ
JSが使えればデバイスも表現方法も画面の中のUIに限らずなんでもできる世界…！:sparkles:
がっちゃん【16日目】
アドカレ16日目の記事は贅沢2本立てで、それぞれフロントエンド組織的な話と、IEと戦う人々の救いになりそうなテストツールのお話です！
① リモート下でもフロントエンド組織を醸成するために、リモートモブプロをやってみた記録です。
注意点がどうこうって言うよりも、実践してみてこういう感覚はよくあるもの。という認識を作れれば良いな〜と思いました:ok_woman:
② TestCafeを使ってIEのVRT（ビジュアルリグレッションテスト）を実行する環境を構築した記録です。
reg-suit は来年どっかのタイミングでXXXに導入できればなぁとか思って情報収集や共有してたやつなので、良い説明が入っていたりと良記事です:ok_woman:
がっちゃん【17日目】
アドカレ17日目の記事は下記2本です！
①React NativeでアプリだけじゃなくてWebとPWA作れるようになったぜって話
今年の4月頃に調べてたのでReact Native(on Expo)でネイティブアプリ作れるのと、一部Webが作れるようになり始めてたは知ってましたが今はもうExpoでWebページ + ネイティブアプリ、何ならPWAまで作れるようになってるのは嬉しいなと思ったので、ちょっと個人的に触ってみようと思いました:ok_woman:
②普通にマークアップしないでLPを作っていて、それをどうやって爆速で実現してるのかという話
Figma押しな人間なのもあるのですが、デザインツールにAPIが生えてて、カスタマイズできるというのはほんとに強いなぁと思ったりした記事でした。
S3とFigmaでLPを作るの、ちょっと面白そうです:+1:（あと、後半に書かれてた 効率化、最適化... の部分はちょっと共感しましたｗ）
①
②
がっちゃんあとちょっとこれは、その通りだなって思ったのでシェアしておきますｗ
がっちゃん【18 / 19 / 20日目】
アドカレ18〜20日目の記事は下記3本です！
① オオカミ少年状態にならないための、フロントエンドエラーログ出力の調整方法。
どこの会社でもあるあるだと思う、「ああ、ほっといても大丈夫なエラーだ。」ってならないように仕組み的に解決する方法がまとまってて良記事でした:ok_woman:
フロントエンドエラーログの調整のニーズは今後どんどん増えていくと思います:ok_woman:
② Canvasを使わずにReactとDOMでゲームを作った記事
どんな感じで設計するのか？とかが読んでて頭の体操になって面白かったです:+1:
③ VueのComposition APIの使い方と、それらのテストの仕方がまとまってて良記事でした。
いずれXXXでも関わるようになると思うので、知っておくと良いと思います:ok_woman:
がっちゃん【21日目】
アドカレ21日目の記事はこちらです！
① これからCoreWebVitalsなどで重要になっていく、パフォーマンス計測をLightHouse + Serverlessアーキテクチャで実装した（結構参考にできそうなコード多め）記事です。
この辺の環境は一応ベトナム側でXXXというのを作ってくれていますが、日本国内やXXXなどで必要なときに作ることができるかなと思ったのでシェアです！！:ok_woman:
② やっぱ 1000ch さん優秀なひとやぁ…と思いながら読んでた記事です:ok_woman:
フロントエンドに限らず、組織まで改善する方法を考えているあたり、見習っていきたいなと思いました:ok_woman:
がっちゃん【22日目】
アドカレ22日目の記事はこちらです！
個人的に最近興味があるWebAuthnについての記事で、
利用者におけるユーザビリティを生体認証・PW認証・SMS認証の比較を論文調で割とガチな調査を行った結果とその考察がまとまってて、最初面食らったのですが面白い記事でした:ok_woman:
こういう情報を無料で公開してくれるのはありがたいですね:thinking_face:
WebAuthnを使ってユーザビリティ改善をしよう！という理由になります:ok_woman:
がっちゃん【23日目】
昨日、フロントエンドランチ会があってアドカレ23日目の記事を共有できていなかったので、1日遅刻ですが、まずこちらをシェアです！
ランチで話していた、Next.jsとその他様々なバックエンドNode.jsの環境（Next.js × Fastify × frourio × Prisma）をRailsのようにサクッと構築してユーザーモデルの作成とログイン機能の実装をやってみた！という記事です:ok_woman:
年末年始のお休みの間に、Node.jsをお試ししてみる手順書として良さそうです:ok_woman:
がっちゃん【24日目 ※最終日】
そして、24日目（カレンダー的には25日が最終なはずなので多分どっかで計算ミスった:thinking_face:）の記事は、上記で言及されている frourio ライブラリ作者の松田さんの新作ライブラリの紹介記事をシェアです！
Next/Nuxtのルーティングに型情報を付与してくれて、爆速開発が更に捗りそうなライブラリで、個人的にファイルパスとかはどうしてもペインになりがちだなって思っていたので、それが解決されるのはめちゃ良いなと思いました！:ok_woman: