2022年フロントエンド開発者のためのリソース

毎年これをやり続けるかはわからないけど、2020年にこれをやって、その投稿はいい反響を得られたから、タイトルを「フロントエンド開発者のためのリソース 2020」として、それが「フロントエンド開発者のためのリソース 2022」につながるわけだ。うっかり2021年を飛ばしちゃったけどね。厳密にはまだ2021年だけど、許してくれたまえ。更にちょっとした宣伝も交えてね。😎

この記事をスペイン語で読むこともできます Chema Bescósありがとう！

この投稿は完全なリストってわけじゃなくて、2021年に見つけた面白いもののリストで、このリストをもとに2022年も乗り切れると思う。2020年の投稿からの繰り返しがあるかもしれないけど、それでもまだまだ超関連性があるからね。

ほとんどのリソースは無料だけど、一部は有料。egghead.ioのサブスクリプションはめちゃくちゃオススメする。僕自身、ずっといい感じでサブスクしてるからね。

仕事で教育手当があれば使ってみて。あと、多くの公立図書館がLinkedIn Learningみたいな有料リソースへの無料アクセスを提供しているから、特定のコンテンツを購入する前に、地元の図書館をチェックしてみてね。それに、ただただ公立図書館にはでっかい声援を送りたいね。😎

僕は毎日Preactで働いてて、Reactも使ってる。他のライブラリやフレームワークもあるけど、この投稿ではそこから離れるよ。ブラウザー拡張機能のセクションが唯一、フレームワークやライブラリに触れる場所だ。

この投稿は進行中の作業だから、2022年を通じてこのリストはアップデートされると期待してて。

JavaScript

ライブラリやフレームワークから始めようが始めまいが、いずれにしてもフロントエンド開発者としては、JavaScriptをもっと深く理解する必要がある。ここに素晴らしいリソースがあるよ。

• JavaScript 30 – Wes Bos のクラシックなプロジェクト。JSの基本を固めるのに役立つ楽しいプロジェクトだ。

• JavaScript Katas – これは昔見つけたリソースだけど、最近更新されている。実際にKatasをライブストリームでやってみたこともあるよ！

• patterns.dev

• Philip Roberts のJSConf EUでの講演 "What the heck is the event loop anyway?" は、イベントループの素晴らしい説明だ。

• Jake Archibald: In The Loop - JSConf.Asia

• Tasks, microtasks, queues and schedules – Jake Archibaldによる、もっと進んだトピックについてのすごい記事だ。

• Lydia HallieのDEVでのJavaScript Visualizedシリーズ – Lydiaは可視化を通じてコンセプトを説明するのが上手だ。

• Just JavaScript – Dan AbramaovとMaggie Appletonによる。サイトの言葉を借りると:

JavaScriptの精神モデルを発見し再構築しよう。

• このランチアンドラーンではあんまり深くは触れてないけど、JavaScriptのデバッグを始めるためのヒントをいくつか紹介しているよ。

TypeScript

年を追うごとにTypeScriptはどんどん人気が出てる。好きじゃなくても、少なくともそれを知っておくことは良いことだよ。

• Marius Schulz のものは何でも – MariusはTypeScriptに関するめっちゃいいブログ投稿と、Eggheadでの素晴らしいコースがいっぱいある。
• Practical Advanced TypeScript – Rares Mateiのこのコースは最高だった。
• TypeScriptチームの2021 type | treatシリーズ on DEV – TypeScriptチームのOrtaが今年、驚くべきチャレンジをいくつかまとめてくれた。
• TypeScript Playground – TypeScript Playgroundはどんどん良くなっていて、試しに使ってみるのに最高の場所だ。
• Learn TypeScript from the Ground Up with James Henry – James Henryによる素晴らしい無料コース。気に入ったら、彼の上級コースを買ってみてね。

2022年7月アップデート：TypeScript学習リソースについての新しい投稿を作ったから、それもチェックしてみて！

CSS

もうCSSで中央寄せするジョークはパスしよう。もう2020年代だし、今は比較的簡単にできることだからね。学んで自分のCSSスキルを向上させよう。

• Andy BellのModern CSS Reset
• Josh W. ComeauのCSS Reset
• Designing Beautiful Shadows in CSS
• CSS for JavaScript Developers
• Grid by Example
• cssgrid.io
• Modern CSS Solutions
• SmolCSS
• Every Layout
• A Primer On CSS Container Queries
• What the flexbox?!
• An Interactive Guide to Flexbox

HTML

長期的にWeb開発をやっていくなら、意味のあるマークアップを身につける必要があるよ。<div /> スープを提供する順番はパスしてね。

• いつもの MDN
• HTMHell – HTMLのひどい例とその修正方法を紹介する素晴らしいサイト
• HTML要素の周期表 – クラシックな周期表に楽しいスピンを加えたもの
• これはHTMLだけじゃないから、別のセクションを作るべきかもしれないけど。🙃すごいサイトを作るための基本原則についてチェックして、buildexcellentwebsit.es を見てね。

アクセシビリティ

アクセシビリティはめっちゃ重要で、正直言って、フロントエンド開発者として一歩抜きん出るなら、ここでスキルを上げるといい動きだよ。

• WebAIMのコントラストチェッカー – 色のコントラストを簡単にチェックする方法
• ButtonBuddy – アクセス可能なボタンを作るための楽しいインタラクティブな作成ツール
• Inclusive Components – アクセス可能なコンポーネントを作る方法についての素晴らしいサイト
• Forem Developer documentation on accessibility – 偏見があるかもしれないけど、僕は僕たちのa11yドキュメントが好きだ
• Marcy Suttonは素晴らしいa11yツールのリストを持っていて、彼女のコースサイトtestingaccessibility.comにある
• web.devの Learn Accessbility
• アクセシビリティについてプルリクエストをチェックするときに考えている5つのこと – フロントエンド関係のプルリクエストをレビューする際に探すべきことの素晴らしいチェックリスト

アニメーション

アニメーションはユーザーエクスペリエンスを高める素晴らしい方法だけど、覚えておくべきは、ただアニメーションを加えるためにアニメーションを加えちゃダメだってこと。この分野での素晴らしい人々の作品をチェックしてみて。

• Jhey Thompkinsの作品は何でも
• Cassie Evansの作品は何でも
• 偏見があるかもしれないけど、僕の同僚の@coffeecraftcode はアニメーションの魔術師だよ。彼女の codepenプロフィール と LinkedInコースをチェックしてみて。何回も一緒にアニメーションについて学んだから、彼女が本物だって100%保証できる。
• Tatiana Macによるprefers-reduced-motion: アニメーションのないアプローチを最初に考える – これはアニメーションに関連するアクセシビリティの下に置くべきだけど、もうちょっと目立たせるためにここに置くよ

Jamstack

• Jamstack Explorers
• jamstack.org
• Incremental Static Regeneration
• Distributed Persistent Rendering
• Jamstackでのレンダリングについての理解

ブラウザ拡張機能

• WAVE – "ブラウザ内で直接アクセシビリティ問題を評価する"
• axe – "アクセシビリティの一般的な問題を識別し解決するのに役立つウェブアプリケーションをテストする"
• Accessibility Insights for Web – "ウェブアプリケーションやサイトでアクセシビリティの問題を見つけて修正するのを助ける"
• Reactを使っている場合: React DevTools (Chromiumベースのブラウザ | Firefox)
• Preactを使っている場合: Preact DevTools
• VisBug – オープンソースのウェブデザインデバッグツール

テスト

テストは大きな話題だし、ここでは表面を掻い摘んでるだけだけど、何をテストすべきかを知ることはめちゃくちゃ大事だ。最終的には、「これを出荷してもいい感じがするか？」と自分自身に問いかけてみて。

• 個人的にはCypressが好きで、Forem（dev.toを支えるソフトウェア）でも使ってる。時間がたつにつれて、ドキュメントを作り上げていってるけど、エンドツーエンドのテストに潜り込むなら、僕たちのリソースは素晴らしいと思うよ。Writing Cypress Testsをチェックしてみて。
• Testing Libraryのツール群。React、Svelte、単なるHTML/CSS/JSのコンポーネントテストやエンドツーエンドのテストだろうと、Testing Libraryがカバーしてくれるよ。

クラウドIDE/本格的な開発環境

• Gitpod
• vscode.dev
• CodeSpaces（アクセスできるなら）
• [Stackblitz](https://stackblitz
  
  こちらの記事はdev.toの良い記事を日本人向けに翻訳しています。
  https://dev.to/nickytonline/frontend-developer-resources-2022-4cp2