ウェブサイト更新ガイド

このガイドでは、ウェブサイトの内容を更新する方法を具体的に説明します。HTML、CSS、Reactの知識がなくても、基本的な更新作業ができるように解説しています。

更新の基本手順

ウェブサイトの更新作業は、基本的に以下の手順で行います：

1. Gitリポジトリの最新状態を取得
2. 必要なファイルを編集
3. 変更内容の確認
4. 変更をコミット
5. 変更をリモートリポジトリにプッシュ

1. テキスト内容の更新

テキストの変更は比較的簡単に行えます。主に.tsxファイル内のテキスト部分を編集します。

例：研究室紹介テキストの変更

1. ファイルを開く

   • src/components/Introduction.tsxをテキストエディタで開きます。

2. テキストを探す

   • 変更したいテキストを探します。例えば：

   <p className="text-gray-600 mb-4">
     金研究室では、情報システムの開発と応用研究を行っています。
   </p>
   

3. テキストを編集

   • HTMLタグ（<p>, <h2>など）や属性（className="..."など）は変更せず、テキスト部分だけを編集します。

4. 保存して確認

   • 開発サーバーが起動している状態（npm run dev）で変更を保存すると、ブラウザ上で変更が即座に反映されます。

2. 画像の更新・追加

新しい画像を追加する

1. 画像ファイルの準備

   • 追加したい画像を用意します（JPG、PNG、SVGなどの形式）。

2. publicフォルダに配置

   • 画像ファイルをpublicフォルダに配置します。

   # 例：新しい画像をpublicフォルダにコピー
   cp 新しい画像のパス/new-image.jpg public/
   

3. コード内で参照

   • 画像を表示したいコンポーネントファイルで以下のように参照します：

     <img src="/new-image.jpg" alt="画像の説明" className="..." />
     

   • 注意：URLの先頭に/を付けると、ルートパス（publicフォルダ）からの相対パスになります。

既存の画像を置き換える

1. 同じファイル名で新しい画像を用意

   • 置き換えたい既存の画像と同じファイル名で新しい画像を用意します。

2. publicフォルダの画像を置き換え

   # 例：existing-image.jpgを新しいファイルで置き換え
   cp 新しい画像のパス/existing-image.jpg public/
   

3. リンクの更新

ナビゲーションリンクや外部リンクを更新する場合は、該当するコンポーネントファイルを編集します。

内部リンクの編集

1. ナビゲーションリンクの編集
   • src/components/Navbar.tsxを開いて、リンク部分を探します： ```jsx

   過去の研究 </Link> ```

   • to="..."の値を変更すると、リンク先が変わります。

外部リンクの編集

1. 外部リンクの追加・編集
   • 外部リンクは通常の<a>タグで実装されています：

     <a
     href="https://www.example.com"
     target="_blank"
     rel="noopener noreferrer"
     className="..."
     >
     外部サイト
     </a>
     

   • href="..."の値を変更して、リンク先を更新します。

4. 新しいページの追加

新しいページを追加するには、いくつかのステップが必要です。

手順

1. 新しいページコンポーネントを作成

   • src/pagesフォルダに新しいファイルを作成します（例：NewPage.tsx）。
   • 既存のページをコピーして修正すると簡単です。

   import { useState } from "react";
   import Navbar from "../components/Navbar";
   
   export default function NewPage() {
     return (
       <div className="min-h-screen bg-gray-50">
         <Navbar />
         <div className="container mx-auto px-4 py-8">
           <h1 className="text-3xl font-bold mb-6">新しいページのタイトル</h1>
           <p className="text-gray-700">
             ここに新しいページの内容を記述します。
           </p>
         </div>
       </div>
     );
   }
   

2. ルートを追加

   • src/App.tsxを開き、Routesコンポーネント内に新しいルートを追加します：

   <Routes>
     <Route path="/" element={<HomePage />} />
     <Route path="/past-research" element={<PastResearch />} />
     {/* 新しいルートを追加 */}
     <Route path="/new-page" element={<NewPage />} />
   </Routes>
   

3. ナビゲーションリンクを追加

   • src/components/Navbar.tsxを開き、新しいページへのリンクを追加します：

   <Link to="/new-page" className="...">
     新しいページ
   </Link>
   

5. コンテンツの配置と整形

Reactコンポーネントでは、コンテンツの配置やスタイリングにTailwind CSSを使用しています。

よく使うTailwind CSSクラス

• 余白: m-4（マージン）、p-4（パディング）、mt-4（上マージン）、pb-4（下パディング）など
• フォント: text-sm（小）、text-lg（大）、text-xl（特大）、font-bold（太字）など
• 色: text-gray-700（テキスト色）、bg-blue-500（背景色）など
• レイアウト: flex（フレックスボックス）、grid（グリッド）、justify-center（中央揃え）など

例えば、テキストを中央揃えにしたい場合は：

<p className="text-center text-gray-600">中央揃えのテキスト</p>

6. 更新内容の保存とデプロイ

変更をGitでコミット

変更内容をGitリポジトリに保存（コミット）します：

# 変更されたファイルを確認
git status

# 変更をステージング
git add .

# 変更をコミット
git commit -m "変更内容の説明"

# リモートリポジトリに変更をプッシュ
git push

プルリクエスト（PR）の作成

変更内容を本番環境に反映させるには、プルリクエスト（PR）を作成する必要があります。

PRの作成手順

1. 新しいブランチを作成

   # メインブランチの最新状態を取得
   git checkout main
   git pull
   
   # 新しいブランチを作成して切り替え
   git checkout -b feature/変更内容の説明
   

2. 変更をコミットしてプッシュ

   git add .
   git commit -m "変更内容の説明"
   git push -u origin feature/変更内容の説明
   

3. GitHubでPRを作成

   • GitHubのリポジトリページで「Pull requests」タブをクリック
   • 「New pull request」ボタンをクリック
   • ベースブランチ（通常はmain）と作成したブランチを選択
   • 「Create pull request」をクリック

4. PRの説明を記入

   • タイトル：変更内容を簡潔に説明
   • 説明文：以下の項目を記入
     • 変更の目的
     • 変更内容の詳細
     • 動作確認の結果
     • レビューしてほしいポイント

レビューの受け方

PRが作成されると、自動的に以下のチェックが実行されます：

1. コードのフォーマットチェック

   • Prettierによるコードの整形チェック
   • フォーマットエラーがある場合は修正が必要

2. 型チェック

   • TypeScriptの型チェック
   • 型エラーがある場合は修正が必要

3. ビルドテスト

   • プロジェクトが正しくビルドできるか確認
   • ビルドエラーがある場合は修正が必要

レビューコメントへの対応

1. レビューコメントの確認

   • PRの「Files changed」タブでコメントを確認
   • 受け取ったコメントに対して、修正や意見を述べる

2. 修正の適用

   • レビューコメントに基づいて修正
   • 修正後、変更をコミットしてプッシュ

   git add .
   git commit -m "レビューコメントの修正"
   git push
   

3. レビューの承認待ち

   • すべてのレビューコメントに対応
   • レビュアーからの承認を待つ

ビルドとデプロイ

デプロイ方法については、デプロイ方法のガイドを参照してください。

トラブルシューティング

変更が反映されない場合

1. 開発サーバーが起動しているか確認

   • npm run devコマンドでサーバーが起動していることを確認してください。

2. ブラウザのキャッシュをクリア

   • ブラウザの更新ボタンをShiftキーを押しながらクリックするか、Ctrl+F5（Windows）またはCmd+Shift+R（Mac）を押してキャッシュをクリアしてリロードしてください。

3. ファイルが正しく保存されているか確認

   • エディタで変更したファイルが正しく保存されているか確認してください。

次のステップ

更新方法を理解したら、デプロイ方法に進み、本番環境へのデプロイ方法について学びましょう。