SPA（Single Page Application）について　25-26日目　2024/10/31-11/1（お金持ちまでの道のり）

本日はSPA（Single Page Application）についてです。ユーザーがサイト内で移動してもページ全体をリロードせずに、必要な部分だけを動的に更新するのでページ遷移がスムーズになります。今日も頑張りましょう！

SPA（Single Page Application）

SPAとは？

SPA（Single Page Application）は、ユーザーがサイト内で移動してもページ全体をリロードせずに、必要な部分だけを動的に更新するウェブアプリケーションのことです。これにより、ページ遷移がスムーズになり、ユーザーにとってストレスの少ない操作体験を提供できます。

SPAのメリット

1. 高速なページ遷移：ページ全体をリロードせず、必要な部分だけを更新するため、ユーザーにとってスムーズな操作感が得られます。
2. アプリのような体験：画面が一瞬で切り替わるため、アプリを操作しているような体験が提供できます。
3. サーバー負荷の軽減：必要なデータのみを取得するので、サーバーへのリクエストが減り、負荷を抑えることができます。

SPAのデメリット

1. 初回読み込みが重くなる：すべての必要なコードを最初に読み込むため、初回の表示に時間がかかる場合があります。
2. SEO（検索エンジン対策）が難しい：SPAは検索エンジンにインデックスされにくいため、SEO対策に追加の工夫が必要です。
3. ブラウザ履歴管理が複雑：SPAはページ全体をリロードしないため、ブラウザの「戻る」「進む」の動作が難しくなりがちです。

ReactとVue.jsでのSPAの実装方法

Reactの場合

React Routerのインストール（React Routerというライブラリを使ってSPAを構築）

1. まずはダウンロードしたNode.jsを開き、Node.js command promptをクリックします。

2. 保存先を指定します。ここではデスクトップに保存します。以下のコードをコピペしたらエンターキーを押してください。

cd Desktop

3. 下記のコードをコピペしたらサイドエンターキー。これで「my-app」という名前のフォルダがデスクトップに作成され、その中にReactプロジェクトがセットアップされます。my-appは名称変更可能です。

npx create-react-app my-app

4. プロジェクトに移動し、React Routerをインストールします。

・プロジェクトが作成されたら、以下のコマンドでそのフォルダに移動します。

cd my-app

・その後、React Routerをインストールします。

npm install react-router-dom

5. 最後に、以下のコマンドでReactアプリを起動できます。

npm start

Vue.jsの場合

Vue Routerのインストール（Vue Routerという公式ライブラリを使ってSPAを構築）

1. まずはダウンロードしたNode.jsを開き、Node.js command promptをクリックします。

2. Vue CLIのインストール（初回のみ）

npm install -g @vue/cli

3. Vueプロジェクトの作成

vue create my-vue-app

4. プロジェクトのフォルダに移動

cd my-vue-app

5. Vue Routerのインストール

npm install vue-router

6. プロジェクトを起動して確認

npm run serve

本日の感想

AIの学習プランに沿って学習しているけど、このSPAはページ変遷が必要なアプリを作ってからの方が良い気がする。ということで明日はアプリを作ります！