モダンフロントエンドの境界線(2024年春)

あなたのモダンフロントエンドはどこから？

モダンフロントエンドとは、最新の技術とトレンドを取り入れた開発手法を指します。しかし、「モダン」とは一体どこから始まるのでしょう？Reactを使っていたら？クラウド上にHostingしていたら？最新のNextJSじゃないとダメ？人によって意見が分かれると思います。この記事では、2024年春時点で、どういう点を満たしていれば「モダン」なフロントエンドと言えるのか、自分なりにまとめています。

AltJS：TypeScriptによる静的型付け

JavaScriptの柔軟性は開発者に多くの自由を与えますが、その自由が時にバグや予期しない動作を引き起こすこともあります。これに対して、TypeScript（TS）は静的型付けを導入することで、コードの信頼性とメンテナンス性を大幅に向上させる言語として、AltJSの地位を確立しています。

10年前、2014年頃の記事を見ると、AltJSの言語としてはまだ様々な選択肢があったように思えます。
https://dev.classmethod.jp/articles/review-coffeesctipt-and-typescript/

TypeScriptはJavaScriptのスーパーセットであり、既存のJavaScriptコードに型付けを追加することで、タイプエラーをコンパイル時に検出します。これにより、開発者は早期に問題を発見し、修正することができます。さらに、強力な型推論、エディタの補完機能、拡張性など、開発者体験を大幅に向上させています。これにより、開発組織のチーム化やソースコードの品質向上が促進され、時代のニーズにマッチした開発が可能となります。

このような特徴から、TypeScriptはモダンフロントエンド開発において必須の言語と言えるでしょう。

SPAフレームワーク：React優勢

シングルページアプリケーション（SPA）は、ユーザー体験の向上とパフォーマンスの最適化を目指すアプリケーションアーキテクチャです。SPAの実装にはVueやAngularなどさまざまなフレームワークが存在しますが、現在においてはTypeScriptとの相性やチーム開発とマッチし、Reactが依然として優勢を誇っています。

Reactもモダンフロントエンドとして必須と言えそうです。

最近の流行

File-Based Routing

最近のトレンドとして注目されているのが、File-Based Routingです。File-Based Routing（ファイルベースルーティング）は、ファイルシステムのディレクトリ構造に基づいてアプリケーションのルートを自動的に生成する手法です。これにより、手動でルート定義を行う必要がなくなり、直感的で簡潔なルーティング設定が可能になります。

File-Based Routingの利点：

• 直感的なルーティング設定：ルート定義がファイルシステムの構造に直接対応するため、URLとファイルパスの対応関係が明確になる。新しいページを追加する際には、対応するファイルを適切なディレクトリに作成するだけでルートが生成される。
• 開発効率の向上：ルーティング設定を手動で行う必要がないため、コード量が減り、開発効率が向上する。ルーティングに関するコードが自動生成されるため、エラーのリスクが低減する。
• プロジェクトのスケーラビリティ：大規模プロジェクトでも、ルーティング設定がファイルシステムの構造に基づいているため、管理が楽。チームメンバー間での理解と協力が容易になり、新しいメンバーがプロジェクトに参加する際のオンボーディングもスムーズ。

React製のFile-Based Routingとしては、次の選択肢があります。

• NextJS(page router)
• NextJS(app router)
• React Router
• TanStack Router

Remixについては、以下の記事よりReact Router v7に統合されるようです。
https://remix.run/blog/merging-remix-and-react-router

File-Based Routingも、より大規模なチーム開発に適した技術だと言えます。

Server Actions

Server Actionsは、サーバーサイドでの非同期関数を活用する機能で、クライアントサイドから呼び出し可能なAPIを提供します。この機能は、データのフェッチやミューテーションを効率的に処理し、ユーザー体験を向上させるために設計されています。対応するReact製フレームワークとしては、NextJSとRemixがあげられます。
Server Actionsについては、システムの要件によって適切に利用するため、モダンフロントエンドの必須要件とは言えないと思います。

最後に

変化が激しいと言われるフロントエンド界隈ですが、より大規模に、よりハイパフォーマンスに、より簡潔に、そしてフロントエンドの責務の肥大化という方向に向かっています。最新の技術を取り入れつつ、開発効率とユーザー体験を最大化することが求められます。

Q:あなたのモダンフロントエンドはどこから？
A:私はFile-Based Routingから！