Frontend Designとは

近年、Webフロントエンドの技術は多岐に渡ります。 JavaScriptやTypeScriptの習得、ReactやVue.jsなどのUIフレームワークの理解、状態管理、Next.jsやNuxtなどのフレームワークの使い方、ブラウザやCDN配信の知見など幅広い技術が求められます。

ライブラリやフレームワークの個々の技術を学ぶことも大切ですが、適切なフロントエンドの設計をするためにはアーキテクチャやデザインパターンなどの包括的な知識や実践力が必要となります。 Frontend Designは、フロントエンド開発におけるアーキテクチャやデザインパターン、パフォーマンスの基礎や最適化パターンを学ぶためのサイトです。

アーキテクチャ

アーキテクチャの章では、フロントエンドで採用されているアーキテクチャの概要を学びます。

各アーキテクチャはそれぞれメリットとデメリットがあり、一つのアーキテクチャが全てのアプリケーションに当てはまるとは限りません。アプリケーションの特性に応じて適切なアーキテクチャの選定ができることが重要です。 CSR、SSR、SSG、ISG、Island Architecture、BFF、Micro-frontendなどの概要を理解し、実現するための周辺技術を紹介します。

設計パターン

設計パターンの章では、フロントエンドを実装する際の設計パターンを学びます。

具体的にはコンポーネントの設計、プロジェクトアーキテクチャ、状態管理の設計を紹介します。 フロントエンドの周辺技術は移り変わりが激しく、またビジネスの変化にいち早く適応することが求められます。 大規模なリファクタリングやライブラリの変更に追随するためには変更を検知する土台と変更に強い設計が必要となります。 変更を検知する仕組みや周辺技術、変更に強いコンポーネントの実装パータンなどを身につけることを目指します。

パフォーマンス

パフォーマンスの章では、フロントエンドのパフォーマンスの最適化を学びます。

具体的にはパフォーマンス指標の理解、リソースの最適化、JavaScriptの最適化、キャッシュ戦略、UXの改善、CDNの活用などを学習します。 Webアプリケーションにおいてフロントエンドのパフォーマンス性は重要な指標となっており、ユーザーに大きな影響を与えます。使用されるサービスやフレームワークなどの具体例を通して、パフォーマンス性の高いアプリケーション開発のスキルを身につけることを目指します。