フロントエンド学習の次に何をすべきか悩んでいる人へ。Webフロントエンド中級ガイド
はじめに
フロントエンド入門の記事や本を読み進め、TODOリストや自作ブログの試行錯誤がGithubに集積されてきた昨今。次のステップどうしようと考えている人に向けてこんなものをやってみるのはどうですか？と一つの提案する記事になります。参考になれば幸いです。
想定読者(ざっくり)
このあたりの技術を一通り、ふんわりタッチされた方々を想定しています。
提示
テスト(Jest, vitest, React Testing Library, playwright)
多少小耳に挟んだ人も多いかと思います。これらは、Webアプリケーションの動作確認を効率的に行うことを目的に作られたテストツールです。基本的には単体テスト、結合テスト、E2Eテストに分類されます。
-
単体テスト
Jest, vitestを使う最小単位の関数やコンポーネントのテスト。最も結果のフィードバックが早く、実装コストも低い -
結合テスト
React Testing Library等を使い、コンポーネント、hooks を組み合わせて正しく動作するかをテストする。実行速度や実装コストは単体テストとE2Eテストの中間に位置する。 -
E2Eテスト (UIテスト)
playwrightを使うブラウザ上でユーザーと同じユースケースを想定したシステム全体のテスト。
実行時間が最も遅く、実装コストも他のテストと比較すると高いが、ユーザーと近い環境でテストを行うため、信頼性が高い。
JestはMeta（旧Facebook）社が開発したもので、VitestはVite環境との親和性を意識して作られた高速・軽量な新世代のテスティングフレームワークです。主に単体テストとして使われます。React Testing Libraryはコンポーネント、hooks を組み合わせて正しく動作するかをテストします。
さらに、PlaywrightはMicrosoftが開発したもので、UIの挙動まで含めた統合的な確認を可能にします。プロジェクトの内容や目的によって、これらを使い分けることが重要です。しかし、まずはJestやVitestを使って基本的なテストの書き方や考え方を身につけることで結合、E2Eテストへの理解もスムーズになるでしょう。
ツールと効率化(Github Actions, Lefthook)
これらは、開発作業をより効率的かつ安全に進めるために使われるツール群です。
GitHub ActionsはGitHub社が提供するCI/CD（継続的インテグレーション・継続的デリバリー）ツールで、テストの自動実行やデプロイ、コードチェックなどをGitHub上で自動化できます。Github ActionsでなくともCI/CDツールは実務でも使われているので、慣らしとして自分の公開したアプリに使ってみるのもいいのではないでしょうか。
一方、LefthookはロシアのEvil Martiansが開発したGitフック管理ツールで、git commitやgit pushのタイミングでコードフォーマットやリント、テストなどを自動実行することで、開発ミスやスタイルのばらつきを未然に防ぐことができます。PritterやESlint,Biomeなどのリンター、フォーマッターは多少使ったことがある方は、それらと組み合わせてチーム開発で規則を作り、コードレビューの文化を真似てみるのもいいですね。
どちらも目的や仕組みは異なりますが、「人の手作業を減らし、チーム開発や品質管理を円滑にする」という点では共通しています。開発規模やチームの状況に応じて、これらのツールを使いこなせるかどうかが中級者以降の分岐点となるでしょう。
状態管理ライブラリ (Zustand, Jotai)
状態管理ライブラリとは何かを初めての人に伝えるのは少し難しいですが、簡単に言えば、「props を使ったバケツリレーのようなデータ受け渡しをやめて、状態を一箇所でまとめて管理しよう」という考え方のもとに生まれた仕組みです。
正直なところ、小規模なアプリケーションであれば、状態管理ライブラリを無理に導入する必要はありません。それよりも、UIの実装やAPI通信、UXの改善など、他に優先すべきことがあるなら、そちらに時間をかけた方が良いというのが個人的な考えです。
とはいえ、状態管理を学びたい、あるいはチーム開発や中〜大規模アプリに備えたいという方には、まず Zustand や Jotai に触れてみることをおすすめします。Reduxなどの古くからあるライブラリを学ぶのも良いですが、ZustandやJotaiはモダンな設計で学びやすく、導入もシンプルです。両者はどちらもモダンで学習コストが低く、人気がありますが、思想と使い方に明確な違いがあります。
ZustandはReduxに近い感覚で使いたい、グローバル状態を一括でまとめて扱いたいときに向いています。「store型」の状態管理を採用しており、全体の状態を1つの場所（store）で管理し、それを必要に応じて切り出して使うという設計です。加えて非常に人気が高く、ユーザーも多いため、日本語・英語問わずドキュメントや記事が豊富に存在しており、独学でも進めやすいのが魅力です。
JotaiはRecoilに近く、スコープが小さい状態を細かく定義して組み合わせる設計にしたいときに最適です。軽量な状態管理ライブラリで、「atom型」の状態管理を採用しており、状態を小さな単位（atom）に分けて必要な部分だけを更新するというミニマルな思想です。シンプルなAPIとReactとの親和性の高さから、プロトタイピングから本番開発まで幅広く使われています。
簡単にまとめるとZustandは「構造を意識してまとめたいとき」、Jotaiは「機能を分割して柔軟に組み合わせたいとき」に使うと、それぞれの特長が活きてきます。
型の深掘り
TypeScriptに触れると、その型の柔軟性と安全性に驚くことも少なくありません。実際、TypeScriptを導入するだけで多くのエラーを開発初期に防げるため、今ではフロントエンド・バックエンド問わず標準になりつつあります。
TypeScriptの型システムは奥が深く、ユニオン型（A | B）や交差型（A & B）といった基本的な表現力に加え、型ガード（typeof, in, instanceof）を用いた安全な分岐処理、さらにはMapped Typesを用いた型の動的生成など、まるで型にもロジックが書けるような感覚があります。
最近では、zodやtRPCといった型安全なAPI通信のためのツールが普及し、「フロントエンドとバックエンドの型を統一する」ことが実践的になってきています。たとえばzodを使えば、APIから受け取ったデータが「想定通りの構造」かを厳密に検証できます。tRPCでは、サーバー側の型定義をそのままクライアントに適用でき、型のズレによるバグをゼロに近づけることが可能です。
また、Generics（ジェネリクス）を使えば、「引数によって返り値の型が変わるような柔軟な関数や型」を実現でき、型の再利用性・汎用性が大きく向上します。
これからの開発では、「型を使う」から「型を設計する」へと視点を移すことが、次のステップへの鍵になるかもしれませんね。
Next.jsの本格活用 (Middleware, SEO)
ご存知の通りNext.jsはページルーティング、API連携、SEO対策、パフォーマンス最適化などが一気通貫で実現できます。
そして今回紹介するのが、MiddlewareとSEO最適化の活用です。
Next.jsのMiddlewareは、リクエストとレスポンスの間に挟まれて処理を行う機能で、ユーザーがページにアクセスする前にリダイレクトや認証チェック、地域による出し分けなどを行うことができます。
従来はAPIルートやクライアント側で処理していたような認証・A/Bテストなどのロジックを、より早い段階で、サーバー・エッジレベルで処理できる点が大きなメリットです。
一方、SEO（検索エンジン最適化）についても、Next.jsは非常に強力です。<Head>コンポーネントを使ったメタタグの動的設定はもちろん、app/ディレクトリとgenerateMetadata関数を活用すれば、ページごとに最適なメタ情報をサーバーサイドで生成することも可能になります。
最近では「SEOもやった方がいい」ではなく、「SEOを意識していないとユーザーが辿り着かない」状況が当たり前になっています。ただページを作るだけでなく、「誰に、どうやって届けるか」「どこで制御をかけるか」という視点が求められています。Next.jsではそれが、MiddlewareやSEO対応といった機能によって自然と組み込まれていくのです。
WebGL 3Dを使った開発 (Three.js, blender)
Three.jsは、Web上で3D表現を行うために作られたJavaScriptライブラリで、低レベルのWebGL APIをラップし、直感的に扱えるようにしたものです。
Three.jsを使えば、ブラウザ上でリアルタイムに3D空間のレンダリング・ライティング・アニメーション・インタラクションなどを実現することができ、ポートフォリオサイトやプロダクト紹介、ゲームや演出表現など、さまざまな場面で活用されています。
3Dモデルの作成には、Blenderというオープンソースの3Dモデリングツールを使うのが一般的です。
Blenderで作ったモデルを .glb や .gltf 形式でエクスポートすれば、Three.jsでそのまま読み込んで表示させることが可能になります。その他にもLuma AIなどの3Dモデルの生成AIもあるのでそっちを使ってみるのもいいですね。
しかし、Three.jsの学習には3D空間の概念（カメラ、ライト、メッシュ、シェーダー）やパフォーマンス管理の知識も必要になるため、ハードルが高く感じるかもしれません。
ですが、Reactと組み合わせて使える@react-three/fiberや@react-three/dreiなどのライブラリも登場しており、開発者にとっても学びやすく、統合しやすい環境が整いつつあります。
最近では「Webでの3D体験が求められる」場面も増えています。特に、展示系のコンテンツや就活で強みしとして自作のwebアプリを使う場面などでは、2DのUIだけでは差別化が難しくなってきているため、3Dによる表現が一種の強み、差別化要因として機能するようになっています。
その他
もっともっとガツガツやりたい人向けに他の事例も紹介していきます。
-
ライブラリ作成
自分で簡単なライブラリを作ってみるのは、アウトプットとして非常に価値があります。たとえば、毎回似たようなコードを書いていて面倒だと感じている部分や、UIの繰り返し実装を効率化したいといった悩みがあるなら、それを解決するライブラリを自作してみましょう。
たとえ小さなものでも、それをGitHubに公開し、npmに配布できるようにすれば、技術ポートフォリオとしても強力なアピール材料になります。 -
OSSコントリビュート
OSS（オープンソースソフトウェア）へのコントリビュートも、技術力と実践経験を磨くうえで非常に効果的です。
ドキュメントの修正や翻訳、ちょっとしたバグ修正など、小さな貢献から始めることができます。最初は敷居が高く感じるかもしれませんが、実際には初心者歓迎のIssue（"good first issue"）が用意されているプロジェクトも多く、サポート体制も整っています。
有名ライブラリに少しでも貢献できれば、それは技術コミュニティへの参加であり、自分の技術が世界で通用するという実感にもつながりますし、めちゃくちゃ良い差別化、アピールポイントになります。
おすすめの学習教材
テスト
公式ドキュメント
解説動画 Alex Hyeet様 作成
日本語解説動画 プログラミングチュートリアル様 作成
ずんだ現役フロントエンドちゃんねる様作成
Zennおすすめ記事
Koki Nagai様 著
E2Eテスト おすすめ書籍
［入門］Webフロントエンド E2E テスト
(敬称略)渋川よしき，武田大輝，枇榔晃裕，木戸俊輔，藤戸四恩，小澤泰河 著
ツールと効率化
公式ドキュメント
CI/CD解説動画 ずんだ現役フロントエンドちゃんねる様 作成
Zennおすすめ記事、本
FarStep様 著
kiwichan様 著
Github Actions おすすめ書籍
GitHub CI/CD実践ガイド 野村友規様 著
状態管理ライブラリ
公式ドキュメント
Zennおすすめ記事、本
kiwichan様 著
y_ta様 著
型の深掘り
ドキュメント
Next.jsの本格活用
kirkirimai様 著
MSK様 著
加えて、Next.jsの深掘りという面ではZennの歴史上でも屈指の名著であるakfm_sato様著「Next.jsの考え方」を読むことをおすすめします。2024年に公開されたにもかかわらず今もトレンドに乗ってる。すごい。
WebGL 3Dを使った開発 (Three.js, blender)
公式ドキュメント
日本語解説動画 プログラミングチュートリアル様 作成
Zennおすすめ記事
Baba様 著
その他
Kazuho様 著
yasuna様 著
最後に
ここまでお読みいただきありがとうございました。これからもwebプログラミンの情報をまとめた記事を書いていきたいと思っているので、是非読んでいただけたら嬉しいです。
Discussion