「フロントエンドの基礎知識がある」って何を知ってたら言えるの？

わからん。解釈の切り口を変えるか、統計的に処理するかどっちかだ

J.S.ミルの名言思い出した
「教養ある人とは、Everythingについてひととおり知っていて、Somethingについてあまねく知っている人のことである」
今はたぶんフロントエンドで「Everythingについてひととおり知っていて」はどうすれば達成できるのかを知りたいんだと思う。

ブラウザ、DNS、ホスティング...

SEO, Responsiveは抜けてたな

WebpackよりもViteやesbuildのほうが優先度高く設定されている。

あーこういうのもあるな

やっぱいいなroadmap.sh

おいおい他のも覗いたらDesign Systemのロードマップなんてものもあるぞ
やっぱどこかで勉強の有限化を行わないといけないな
https://roadmap.sh/design-system/

ツールの使い方に詳しくなっているだけな感じがする。もちろんそれも大事なんだけど。

フロントエンドの歴史を知ればいいのかな
どういう課題があって、どういうツールが解決してきたか。それを一通り言えればいい気がする。詳細な使い方は必要になってから知ればいい。JQueryは歴史的に重要なんだろうけど自分は一生勉強しないと思うし。

これとかめっちゃ良さそう
https://www.nri-digital.jp/tech/20220216-8262/

この切り口は良さそうだからフロントエンドの歴史を知りたい！っていう別のスクラップ立てよう

HTML/CSS/JavaScript/React/TypeScriptの基礎知識を前提とする。

第一章

ポケモンAPIをクライアント側で叩いて好きな6体を表示するだけのアプリ。6体の指定はハードコーディングする。

学ぶこと

• Web API（REST）
• HTTP（サーバーとクライアントの区別）
• 宣言的UI
• Tailwind CSS。CSS in JSやCSS Moduleとの違いや、それぞれのメリデメなどの整理。
• Suspence

第二章

第一章で作ったやつのSSR、SSG版をそれぞれ作ってVercelにデプロイする。クライアント側でやることを減らしてパフォーマンスを改善するという基本的な方針を理解する。

学ぶこと

• Next.js, Vercel
• SSR, SSG
• CDN, Cache
• Server Component

第三章

認証機能をつけてアカウントごとに6体を選べるようにする。「だったらSSGが最強じゃん！」ってなったあとにSSGでできないことを学ぶためにアプリをインタラクティブにする。バックエンドはFirebaseで作る。

学ぶこと

• 認証（JWT?）
• Firebase, Firestore（NoSQL）, Cloud Functions?
• Form
• Global State

第四章

わざと3章までのUIをイマイチにして、それを改善していく。モデルを意識させるために、1つのアカウントで複数のパーティを作れるようにして、ユーザープロフィールを編集できるようにする。

学ぶこと

• オブジェクト指向UI
• 画像のアップロード
• 画像最適化
• Storybook
• Container/Presenter Pattern
• UI libraryのどれか（執筆しやすいTailwindを使いたいのでdaisyとか？）

第五章

次からプラットフォーム型のアプリになっていくので、アプリが大きくなる前に開発体制を整える。

学ぶこと

• ESLint（Next.jsのデフォルトから更に盛り込んでいく）（Prettierだけは最初からやっておく。無いと辛いので。）
• Testの種類と使い所
• CI/CD（GitHub Actions, Vercel）
• Error Tracking

第六章

好きなパーティを作って公開できるプラットフォームにする。あえてRESTのつらみが生じるようなUIにしてGraphQLに変える。ユーザーの交流を想定してアプリっぽいことをいろいろ盛り込む。

学ぶこと

• GraphQL
• SEO（というかOGPの設定など）
• Dynamic OG Image
• PWA
• ......