フロントエンド

• 技術のトレンドと開発テクニックの知見を、無料で公開します！

• React で紐解くモダンフロントエンド開発の歴史と進歩
• フロントエンドのトレンドをざっくり知る
• フロントエンド Overview

• SPA/MPAとCSR/SSR/SSGの分類

• システムトラブルに強いWebフロントエンドを作る方法

設計・開発 †

• 大塚流フロントエンド開発の歩き方
• フロントエンジニアが画面設計する上でやった8つのこと

SPA/MPA †

• SPAとは何か？
• SPAはコストが高いのか

• 【MPA vs SPA】フロントエンドアーキテクチャ選定時のTips
• SPAとは？メリット、デメリットを詳しく解説します
• SPA(Single Page Application)とは？従来のWebサイトとの違いやメリット・デメリットを解説

• CSR を使わずに、SSR のみで実装されたアプリは MPA になる
  • クライアントのリクエスト毎に、毎回サーバー側でレンダリングが実行される場合の SSR は、単一ページではなく複数のページをレンダリングすることになるので、この場合は、SPA ではなく MPA（Multi Page Application）と呼ばれる構成手法になる
• 逆に、CSR + SSR で実装されたアプリは SPA になる

レンダリング †

• もう迷わないNext.jsのCSR/SSR/SSG/ISR

SSG (Static Site Generation) †

CSR (Client Side Generation) †

• ビルド時にデータ取得を行わず、ページを描画して保存
• ブラウザで初期描画した後に非同期でデータを取得して、追加のデータを描画

• CSRはSSG,SSR,ISRと組み合わせて利用される

• SPA のアプリケーションを構築するには CSR が必須になる
• 場合によって、CSR + SSR、CSR + SSG など組み合わせて SPA を構築することもある

• 初期描画がそこまで重要ではなく、リアルタイム性が重要なページに適している

SSR (Server Side Rendering) †

ISR (Incremental Static Regeneration) †

• 事前にページを生成して配信しつつ、アクセスに応じてページを再度生成して新しいページを配信
• サーバに保存しているページデータに有効期限を設定しておき、有効期限が切れた状態でアクセスがあった場合は、サーバに保存されているページデータを更新する

組み合わせ †

CSR+SSG †

• SSGで生成した部分（共通部分）はキャッシュさせて配信しつつ、必要な箇所だけCSRを用いてその場でレンダリング可能というメリットがある

• SPAとの違い
  • SPAは、初期表示においてゼロからHTMLを構築していく
  • SSG+CSRは、すでに共通部分がHTMLとして構築されているので初期表示のコストを抑えることができる

• 採用例
  • DEV Community

CSR+SSR †

CSR+ISR †

状態管理 †

• フロントエンド開発で覚えたい「状態管理」とは
• 「状態管理」って何？

• Reactの状態管理ライブラリを比較してベストな選択をしよう！
• Reactの状態管理で悩む全ての人へ【2022年】
• Reactを使用した状態管理のトップ6のベストプラクティス

コンポーネント指向 †

セキュリティ †

• フロントエンドのセキュリティについて調べてみた

要件定義 †

• フロントエンド要件定義

• 対応ブラウザバージョンを考える

開発事例 †

• LINEドクターフロントエンド開発の流れ
• ヤフーショッピングのフロントエンドを支える共通配信技術