誰向け?
- 2022 年度内に Web フロントエンドポジションに転職したい自分の整理
- エンジニアとして 4 年目だけど Web アプリの開発経験があんまりなくて詰みかけている
- 友人
- その他、Web フロントエンドのトレンドをざっくり追いたい人
それぞれの技術の詳細は書きませんが、ざっくり気になるポイントを書いてます。
情報源
どんなものが流行っているか、という肌感のチェックに使っている。
フレームワーク＆ライブラリ
React 18
- 17 は特に大きな変更なしだったが、18 では色々な Hooks が追加されりしている
- New Feature の項目を見ると使いこなすとパフォーマンスが上がりそうなので試してみる
- Zenn とかでも解説記事が出回っているので書き方を探っていく
Next.js
- 何度か個人的に作っているが、React で SG や SSR するならこれ
- 全体的に Zero config でよしなにやってやる、という圧が相変わらず強い
- 最近
next/jestPlugin ができたので試してみたい - 開発元の Vercel が Svelte や SWC の作者を雇用していたりと OSS の影響が今後も高そう
Svelte
- ひとまずチュートリアルをやってみたが、極力責任範囲が少ない React よりは実開発向けに機能が考えられている感じ
- Animation がビルトインされているのが面白い。CSS Animation を吐き出すようにしているにしている模様。
ReduxやReact.createContextっぽいグローバルステート管理もビルトインされている模様。- フレームワークの思想は面白いとはいえ癖がある上に採用事例もまだ少ないので日本で使う現場があるかというと微妙。
Prisma
- Node.js 向け ORM だが、CLI の操作や Client がかなり使いやすい。TypeScript に優しい。
- schema 定義ファイルに沿って DB を変更したり、現在の DB から schema 定義ファイルを生成することも可能らしい
ツール
Vite
- フロントエンド開発ツールに No Bundle という風潮を呼び込んだ今一番熱いビルドツール
- かなり軽量でサクサク動く。今後 SSR しない静的なフロントエンド作るならこれが第一候補になると思われる。
- The State of JS でも注目度が高い模様。
- 公式ドキュメントが日本語化されているのもありがたい。
- Vite 本体だけでなく、Vite で実行するテストフレームワークの Vitest や Storybook の Vite 版みたいな Ladle も出始めているので熱そう。
esbuild
- TypeScript で書いたスクリプトをサクッと実行するのに使っている。
- フロントエンドの JS をビルドするのにも使えるらしいが、ちょっとまだできていない
- 型チェックは
tscでやって実行はこれが主流になると思う Vite内部でも使われている。
Playwright
- Microsoft の E2E Testing ツール
- ざっと試してみたが、Chrome, Safari, Firefox のクロスブラウザテストがかなり楽に書ける模様
playwright.config.tsに色々なデバイスやブラウザなどのテストパターンを記述できる- スクリーンショットも当然できるので、エビデンス求められても安心?
Lighthouse
- ざっくり数字見ていい感じ、ぐらいにしか見てないのでちゃんと読める読めて改善するための指標にする
- Lighthouse CI で CI に突っ込めるので試してみたい
インフラ＆その他
GitHub Actions
- CI/CD のパイプラインを初期段階でシュッと作って開発体験を上げてテスト書く習慣を体に馴染ませたい
- 他人が書いたパイプラインを読めるようにもしたい
- CI/CD を前提とした開発をしないとどんどん手作業で複雑化する、というのを体感している
Firebase v9
- v9 で結構 API が変わって TreeShake しやすくなったらしい
- 業務で使うかは微妙だが、Firebase Auth 試したい試していとずっと思っていたので今年中に試す
AWS Amplify, Lambda, S3, Cloudfront
- インフラが苦手なので、少なくともフロントエンド関係のサービスは触れるようにしたい
Serverless Frameworkでデプロイ作業をコード化できるのでそれも試す- サーバーレスアーキテクチャーと常時稼働のサーバーでどんなメリットデメリットがあるのかは言えるようにしたい
まとめ
自分が Web フロントエンドや自動テストの実務経験がほとんどなく、WordPress でゴニョゴニョして手動テストしたのがまともな実務上の開発経験なので、個人勉強である程度モダンな開発の経験値溜めておきたい。
