Closed26

とある会社で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:

https://panda-program.com/posts/bengo4com-library-frontend

【3日目】

アドカレ3日目は、
Vue 3のリリースに対して、実プロダクトをどのようにアップデート(マイグレート)していこうとしているのかがまとまった記事です:ok_woman:

将来的にXXXでも(Nuxt3が出れば)対応していくことになると思うので、目を通しておいていただくのは良いかもです:ok_woman:(基本ESLintのマイグレーションプラグイン入れて、ざっとリストアップ&自動改修 + どうにもならない部分を手で置き換え。って形になると思いますが:thinking_face:)

https://devblog.thebase.in/entry/2020/12/02/160000

【4日目】

アドカレ4日目は
CLSに関して、実数値も合わせてよくまとまっていて良い記事をシェアです:ok_woman:
来年の5月から検索順位に反映されて来るCore Web Vitalsの数値ですが、繁忙期を過ごすとあっという間に時間は過ぎちゃいますし、ぜひ一度目を通しておいていただくのは良いかもです:ok_woman:

https://techblog.yahoo.co.jp/entry/2020120330052925/

【5 / 6日目】

アドカレ5、6日目の記事は
下記2本です!個人的にやっぱDenoの進化は楽しみだなぁと思ってる次第です:ok_woman:

【7日目】

アドカレ7日目の記事はゆめみさんのアドカレからいい記事2本見つけたので贅沢2本シェアです:ok_woman:
・存在は知っているものの、使い所が理解しづらい TSの:typescript: Utility Typeのいいまとめ

https://qiita.com/Yametaro/items/010a20cd5f75a34ca233
・ハイブリッドアプリフレームワークでのハマりどころがよくまとまっていたもの
https://qiita.com/aktuehr/items/55bdcadb00a74b87ebb9

【8日目】

アドカレ8日目の記事は、メルペイの自動テスト環境についての記事をシェアです!
たぶんこのレベルの自動化を実現してるの国内だとほとんどなくて国内トップクラスな感じだと思います:ok_woman:
日本のWeb界隈でもかなりハイレベルな事をやっているので、いきなりこのレベルをXXXで実現するのは難しいですが考え方の概観の理解や、マイルストーンや目標を立てるときの参考にはめっちゃなる内容だったのでぜひ読んでみてください:ok_woman:

https://engineering.mercari.com/blog/entry/20201207-cypress-testrail-frontend-e2e-automation/

【9日目】

アドカレ9日目の記事はProgateのアドカレから、スマホのカメラとJS OCRライブラリを使ってゴニョゴニョする記事です!
使い所は結構ちっちゃくてアレなのですが、だいぶと技術的に面白いことをやっててテクい記事だなと思ったのでシェアです:ok_woman:

https://tech.prog-8.com/entry/2020/12/10/090000

【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

https://qiita.com/happylifetaka/items/ceb33af6d37c07b09ecc

【11 / 12 日目】

アドカレ11日目、12日目の記事は、
①ゆめみというフロントエンドに強みがある制作会社の技術キャッチアップ方法や社内へのナレッジ化、外部発信方法など、組織としてフロントエンドチームを強くするためにできることについてまとまった記事
②Puppeteerを使って、データ収集や動作テストの自動化をする記事(実コード付き)
の2記事をシェアです!
それぞれの記事を参考にうまく利用して、XXXのフロントエンド界隈の生産性を上げていけると良きですね:ok_woman:

https://note.com/clown0082/n/n03ea802d5cab
https://qiita.com/east_takumi/items/bebbf9f85b05b5c2e025

【13日目】

アドカレ13日目の記事は、
XXX各サービスでかなり重要になってくる、画像形式(WebP)についての記事をシェアです!
iOS 14からSafariでもWebP対応がされるようになり、利用できる範囲がかなり拡大した感があるWebPについて、非常にわかりやすくよくまとまっている記事だったので、ぜひご一読ください!
そしてWebP対応して爆速&高画質サイトを実現しましょう:muscle:

https://engineering.mercari.com/blog/entry/20201211-image-optim-webp/

【15日目】

アドカレ15日目の記事はめちゃモダンな感じでY!社がリニューアルしたときの記録が事細かに(何を考えてて、ある技術はどんな特徴があるのかとかよくまとまってる)書かれた記事をシェアです!
Next.jsでゼロコンフィグなフロントエンドへ この辺はNuxt.jsでも同じことが言えるし、 GraphQLのエラーハンドリングには少しクセがある このへんはXXXさんと悩んだところがあったりと、Next.jsをベースに書かれていますが全体的にわかり味が深い記事でした:ok_woman:w
Next.js + NestJS + GraphQLは2021年は結構人気な技術になっていくのかなぁとか個人的に思ってたりします:ok_woman:

https://techblog.yahoo.co.jp/entry/2020121530052952/

もう一本、めちゃテクい記事も見つけたのでシェアです:ok_woman:
Chrome拡張でWebRTCのAPIをプロキシして、好きなBGMを挟んだ音声・動画データをGoogle Meetに流すというだいぶTechなことをやってるところがすごいです:ok_woman:
個人的に、Web(ブラウザ)の世界ってこんな感じで、動画や音声の操作やNFCやLチカ、バイナリ操作とかまで、色んなことができる世界をGoogleの強いエンジニアがブラウザでWrapして、JSのAPIとして持ってきて提供してくれるのが好きだったりしますw
JSが使えればデバイスも表現方法も画面の中のUIに限らずなんでもできる世界…!:sparkles:

https://qiita.com/massie_g/items/ada257ecf05b27d1ec28

【16日目】

アドカレ16日目の記事は贅沢2本立てで、それぞれフロントエンド組織的な話と、IEと戦う人々の救いになりそうなテストツールのお話です!
① リモート下でもフロントエンド組織を醸成するために、リモートモブプロをやってみた記録です。
注意点がどうこうって言うよりも、実践してみてこういう感覚はよくあるもの。という認識を作れれば良いな〜と思いました:ok_woman:

https://devblog.thebase.in/entry/2020/12/16/120000
② TestCafeを使ってIEのVRT(ビジュアルリグレッションテスト)を実行する環境を構築した記録です。
reg-suit は来年どっかのタイミングでXXXに導入できればなぁとか思って情報収集や共有してたやつなので、良い説明が入っていたりと良記事です:ok_woman:
https://www.m3tech.blog/entry/ie-test-by-testcafe

【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:(あと、後半に書かれてた 効率化、最適化... の部分はちょっと共感しましたw)

https://qiita.com/takagimeow/items/11b9e7f7c1052ada6995

https://design.dena.com/engineering/pococha-lp-tech-stack

【18 / 19 / 20日目】

アドカレ18〜20日目の記事は下記3本です!
① オオカミ少年状態にならないための、フロントエンドエラーログ出力の調整方法。
どこの会社でもあるあるだと思う、「ああ、ほっといても大丈夫なエラーだ。」ってならないように仕組み的に解決する方法がまとまってて良記事でした:ok_woman:
フロントエンドエラーログの調整のニーズは今後どんどん増えていくと思います:ok_woman:

https://qiita.com/komtaki/items/ca35d3e0aee73708a540

② Canvasを使わずにReactとDOMでゲームを作った記事
どんな感じで設計するのか?とかが読んでて頭の体操になって面白かったです:+1:

https://blog.nabeliwo.com/2020/12/how-to-made-game-by-react/

③ VueのComposition APIの使い方と、それらのテストの仕方がまとまってて良記事でした。
いずれXXXでも関わるようになると思うので、知っておくと良いと思います:ok_woman:

https://tech.gamewith.co.jp/entry/2020/12/20/173143

【21日目】

アドカレ21日目の記事はこちらです!

① これからCoreWebVitalsなどで重要になっていく、パフォーマンス計測をLightHouse + Serverlessアーキテクチャで実装した(結構参考にできそうなコード多め)記事です。
この辺の環境は一応ベトナム側でXXXというのを作ってくれていますが、日本国内やXXXなどで必要なときに作ることができるかなと思ったのでシェアです!!:ok_woman:

https://qiita.com/kentaro_m/items/bf1e2f16edd16dfcf735

② やっぱ 1000ch さん優秀なひとやぁ…と思いながら読んでた記事です:ok_woman:
フロントエンドに限らず、組織まで改善する方法を考えているあたり、見習っていきたいなと思いました:ok_woman:

https://engineering.mercari.com/blog/entry/20201222-merpay-frontend/

【22日目】

アドカレ22日目の記事はこちらです!
個人的に最近興味があるWebAuthnについての記事で、
利用者におけるユーザビリティを生体認証・PW認証・SMS認証の比較を論文調で割とガチな調査を行った結果とその考察がまとまってて、最初面食らったのですが面白い記事でした:ok_woman:
こういう情報を無料で公開してくれるのはありがたいですね:thinking_face:
WebAuthnを使ってユーザビリティ改善をしよう!という理由になります:ok_woman:

https://techblog.yahoo.co.jp/entry/2020122330052970/

【23日目】

昨日、フロントエンドランチ会があってアドカレ23日目の記事を共有できていなかったので、1日遅刻ですが、まずこちらをシェアです!
ランチで話していた、Next.jsとその他様々なバックエンドNode.jsの環境(Next.js × Fastify × frourio × Prisma)をRailsのようにサクッと構築してユーザーモデルの作成とログイン機能の実装をやってみた!という記事です:ok_woman:

年末年始のお休みの間に、Node.jsをお試ししてみる手順書として良さそうです:ok_woman:

https://zenn.dev/su8ru/articles/try-prisma-frourio-login

【24日目 ※最終日】

そして、24日目(カレンダー的には25日が最終なはずなので多分どっかで計算ミスった:thinking_face:)の記事は、上記で言及されている frourio ライブラリ作者の松田さんの新作ライブラリの紹介記事をシェアです!
Next/Nuxtのルーティングに型情報を付与してくれて、爆速開発が更に捗りそうなライブラリで、個人的にファイルパスとかはどうしてもペインになりがちだなって思っていたので、それが解決されるのはめちゃ良いなと思いました!:ok_woman:

https://zenn.dev/solufa/articles/renewed-pathpida
このスクラップは2020/12/25にクローズされました
ログインするとコメントできます