環境セットアップ¶

YELL for ALLのホームページ開発に参加するための環境設定手順を解説します。
プログラミングやGitを初めて使う方でも分かるよう、ひとつひとつ補足しながら説明します。

ステップ1：ソフトウェアのインストール¶

まずは必要なアプリケーションをパソコンに入れましょう。

1-1. VSCode（コードエディタ）¶

コードを書いたり読んだりするためのアプリです。
→ https://code.visualstudio.com/Download

手順

上記URLを開き、Windows 用のインストーラー（.exe）をダウンロード
ダウンロードしたファイルをダブルクリックして実行
「同意する」→「次へ」を選んでいき、インストール完了

おすすめ設定

インストール中に「PATHへの追加」というチェックボックスが出たら 必ずチェックを入れてください。コマンドプロンプトから code コマンドで起動できるようになります。

1-2. Git（バージョン管理ツール）¶

Gitはファイルの変更履歴を管理するアプリです。
チームで開発するときに「誰がいつ何を変えたか」を追跡したり、変更を元に戻したりするのに使います。

→ https://git-scm.com/download/win

手順

Git for Windows x64 Setup をダウンロード
インストーラーを実行し、すべてデフォルトのまま「Next」を押し続けてインストール完了

インストール確認

インストール後、コマンドプロンプトを開いて下記を入力してください。バージョン番号が表示されれば成功です。

git --version

1-3. GitHub（ソースコードのホスティングサービス）¶

GitHubはGitで管理したファイルをインターネット上に保存・共有するサービスです。
すでにアカウント登録済みのため、特別な作業は不要です。

リポジトリへの招待

代表からリポジトリへの招待メールが届きます。登録したメールアドレスを確認して招待を承認してください。

ステップ2：GitHubとSSH接続を設定する¶

SSH接続とは？¶

GitHubとパソコンを安全に通信させるための仕組みです。
「秘密鍵（自分だけが持つ）」と「公開鍵（GitHubに登録する）」のペアを使って認証します。
鍵と鍵穴の関係をイメージすると分かりやすいです。

2-1. SSH鍵を生成する¶

Windowsの検索バー（タスクバー左下）に「コマンドプロンプト」と入力して開きます
以下のコマンドを入力して Enter を押します（自分のアドレス の部分は GitHubに登録したメールアドレス に書き換えてください）

ssh-keygen -t ed25519 -C "自分のアドレス"

いくつか質問が表示されますが、すべて そのまま Enter を押して進めてください

これでパソコン内に「秘密鍵」と「公開鍵」のペアが作成されました。

2-2. 公開鍵をコピーする¶

下記のコマンドを入力すると、公開鍵の内容が表示されます。

type %USERPROFILE%\.ssh\id_ed25519.pub

Windowsでのコマンド

cat コマンドはLinux/Mac向けのため、Windowsでは代わりに type を使います。

表示された ssh-ed25519 AAAA... から始まる長い文字列が公開鍵です。
マウスでドラッグして選択し、右クリック →「コピー」でコピーしてください。

2-3. 公開鍵をGitHubに登録する¶

ブラウザでGitHubを開き、以下の順番で画面を進めます。

右上のアイコン → Settings
左メニューの SSH and GPG keys
New SSH key ボタンをクリック
以下を入力して Add SSH key をクリック

項目	内容
Title	任意の名前（例：`My Windows PC`）
Key type	`Authentication Key`（デフォルトのまま）
Key	先ほどコピーした公開鍵を貼り付け

2-4. 接続を確認する¶

コマンドプロンプトで以下を入力します。

ssh -T git@github.com

成功のサイン

Hi, ユーザー名! You've successfully authenticated... のようなメッセージが表示されれば接続成功です！

警告メッセージが出た場合

Are you sure you want to continue connecting (yes/no)? と表示されたら yes と入力して Enter を押してください。

ステップ3：リポジトリをクローンする¶

「クローン」とは、GitHubにあるプロジェクト（リポジトリ）のファイルを自分のパソコンにコピーすることです。

3-1. リポジトリをクローンする¶

コマンドプロンプトで以下を入力します。

git clone https://github.com/YELL-for-ALL/HomePage.git

保存場所について

コマンドを実行したフォルダの中に HomePage というフォルダが作成されます。
どこに保存したいか決めてから実行しましょう（例：cd Desktop でデスクトップに移動してから実行）。

クローンが完了すると、HomePage フォルダにプロジェクトのファイルが入っています。
VSCodeでそのフォルダを開いて確認してみましょう。

3-2. 最新の状態に更新する¶

他のメンバーが更新した内容を自分のパソコンに反映させるには git pull を使います。

まず、クローンしたフォルダの中に移動します。

cd HomePage

次に、最新の変更を取得します。

git pull origin develop

developブランチとは

develop は開発用のブランチ（作業ライン）です。本番用の main と分けて開発を進めています。

ファイルが更新されたら成功です！

ステップ4：開発環境のセットアップ（Node.js）¶

ホームページはNode.jsというツールを使って動かします。

4-1. Node.js をインストールする¶

→ https://nodejs.org/ja/download

LTS（推奨版） のWindows用インストーラーをダウンロード

LTSとは

Long Term Support（長期サポート）版のことで、安定して動作します。初心者はLTS版を選びましょう。

インストーラーを実行し、デフォルトの設定のまま「Next」でインストール
インストール後、コマンドプロンプトを一度閉じて開き直し、以下のコマンドでバージョンを確認

node --version
npm --version

どちらもバージョン番号が表示されれば成功です。

4-2. 必要なパッケージをインストールする¶

クローンしたフォルダの中に移動してから、以下のコマンドを実行します。

cd HomePage
npm install

npm installとは

プロジェクトに必要なライブラリ（部品）を一括でダウンロードするコマンドです。
package.json というファイルに書かれた必要なパッケージを自動的に取得します。

インストールが完了すると node_modules というフォルダが作成されます。

4-3. 開発サーバーを起動する¶

以下のコマンドでローカル（自分のパソコン内）にサーバーを起動して、ホームページの動作確認ができます。

npm run dev

成功のサイン

Local: http://localhost:XXXX のようなURLが表示されたら起動成功です。
ブラウザでそのURLを開くとホームページが表示されます。

開発サーバーを止めるには、コマンドプロンプトで Ctrl + C を押してください。

まとめ¶

ステップ	内容	完了確認
ステップ1	VSCode・Git・GitHubの準備	`git --version` でバージョンが表示される
ステップ2	SSH接続の設定	`ssh -T git@github.com` で挨拶が返ってくる
ステップ3	リポジトリのクローン	`HomePageフォルダ` が作成されVSCodeで開ける
ステップ4	Node.js・npmのセットアップ	`npm run dev` でブラウザにHPが表示される

不明な点があれば代表（菅原）に気軽に連絡してください！