Webアプリケーションの種類：シンプルな言葉とミーム

🤓 この記事は何についてですか？

「SPA」、「SSR」、「PWA」などの言葉をよく聞きますが、それらはすべてホグワーツの呪文のように聞こえますか？それなら、この記事はあなたにぴったりです。どのようなWebアプリケーションがあるのか、それらの違いは何か、どれが速いのか、どれが流行っているのか、どれが単に動作しているのかを分析します。ミーム、表、例をご用意しました！

/

🧱基本技術：あらゆるウェブの基礎

すべてのWebアプリケーションは、以下を使用して作成されます。

• HTML — ページの骨組みを作る

• CSS — 美しく仕上げます

• JavaScript — 復活させ、交流する

しかし 具体的にどのように アプリケーションの構成は大きく異なる場合があります。そして、ここからアプローチを選択する魔法が始まります。

🌐 主なタイプのWebアプリケーション

🏘️ マルチページアプリケーション（MPA）

簡単なケース：完成したページのセット

コンピューター上のファイルフォルダーのように、about.htmlを開くと、会社に関する情報が表示されます。

長所：

• シンプルさ

• キャッシュの容易さ

短所：

• ページ間を移動すると、すべてがリロードされます🐢

適した時期： ランディングページ、名刺、シンプルなサイト。

より複雑なもの：サーバーがページを生成する

サイトにアクセスすると、サーバーは次のようになります。

「ちょっと待ってください。今すぐページをまとめますね。」

たとえば、フォーラムやオンラインストアのようにです。

• サーバーがデータを要求しています

• HTMLを収集

• ユーザーに提供します

長所：

• 常に最新のデータ

• JavaScriptが少ないほど、弱いデバイスでも高速に動作します

短所：

• サーバーへの負荷

• 瞬間的な移行ではない

📌 興味深い事実：

ユーザーがリンクをクリックすると、ブラウザは次のようになります。「再起動しています！」あなたが次のプロフィールページを開きたいだけでも🙃

🪄 シングルページアプリケーション（SPA）

すべての魔法はJavaScriptにあります。サイトにアクセスすれば、もう再起動する必要はありません。

長所：

• インスタントジャンプ

• ネイティブアプリケーションのような体験

短所：

• すべてはJavaScriptに依存します

• 最初の表示に時間がかかる場合があります

🔧例： Trello、Googleドキュメント、Twitter（一部）

🔄クライアントサイドレンダリング（CSR）

ブラウザはたくさんのJSを読み込み、その後に「ああ、私はサイトです！」と表示します。

短所： インターネットが遅い場合、JavaScriptの読み込み中にユーザーは白い画面を見ています。 🕳️

🧠サーバー側レンダリング（SSR）

最初にサーバーが完成したページを返し、次にJavaScriptが接続されます。

理想的な状態：

• SEO

• ページの最初の表示を高速化

📦使用：Next.js、Nuxt、SvelteKit

🛠️ 静的生成（SSG）

ブログサイトを想像してみてください。記事はMarkdownで書かれ、HTMLで事前に生成され、サーバーに保存されます。

ツール： Astro, Eleventy, Hugo, Gatsby

長所：

• 超高速読み込み

• ホストするだけです（GitHub Pagesでも可能です）

短所：

• データはサイトの新しいビルドでのみ更新されます

📝 文書、ポートフォリオ、ランディングページに適しています。

🚀 PWA — プログレッシブウェブアプリケーション

PWAは、あなたのサイトがモバイルアプリを装っているようなものです。

• オフラインで動作します

• プッシュ通知

• 携帯電話にインストールされます

✨ GoogleとTwitterはPWAのアイデアを積極的に推進しています。

📱 アプリストアなしで、ネイティブUXを備えたアプリを作成する必要がある場合。

🧠 結論

簡単なガイドは次のとおりです。

💬 ミームを要約しましょう。

開発者：「SSR、SSG、PWAを使用してSPAを作成しました。」 クライアント：「印刷できますか？」