1-1. 開発環境を整える

2025年2月15日 23:32

Webアプリを開発するために、まず 開発環境の準備 を進めましょう！
今回は 個人開発 & コストを抑える ことを意識して、無料で使えるツールを中心に整えていきます。

📌 1. 開発環境に必要なもの

アプリ開発に必要なツールは大きく分けて以下の5つ。
これらをMacにインストールし、実際に使える状態にします。

✅ 1. プログラミング言語（Node.js & Python）
✅ 2. エディター（VSCode）
✅ 3. パッケージ管理ツール（npm & Homebrew）
✅ 4. バージョン管理（Git & GitHub）
✅ 5. APIテストツール（Postman）

🛠 2. 開発環境をセットアップする

① Node.js & npm をインストール

Webアプリ開発では Node.js（JavaScriptを実行する環境）を使います。
また、Node.jsに付属する npm（パッケージ管理ツール） を使って、必要なライブラリをインストールできます。

📥 インストール手順
1. Node.jsの公式サイト にアクセス
2. 「LTS版」 を選んでダウンロード & インストール
3. ターミナルを開き、以下のコマンドでインストールを確認

node -v  # Node.jsのバージョン確認
npm -v   # npmのバージョン確認

② Homebrew をインストール

Homebrew（ホームブルー）は、Macでソフトウェアを簡単に管理できるパッケージマネージャーです。
今後いろいろなツールをインストールするのに使います。

📥 インストール手順
1. ターミナルを開く
2. 以下のコマンドを実行

/bin/bash -c "$(curl -fsSL https://raw.githubusercontent.com/Homebrew/install/HEAD/install.sh)"

3. インストール後、以下のコマンドで確認

brew -v

③ VSCode（エディター）をインストール

コードを書くためのエディターとして、VSCode（Visual Studio Code） を使います。

📥 インストール手順
1. VSCodeの公式サイト にアクセス
2. Mac用のバージョン をダウンロード & インストール
3. VSCodeを起動し、Cmd + Shift + Pを押してコマンドパレットを開く。
4. 検索バーに「Shell Command: Install 'code' command in PATH」と入力し、出てきたオプションをクリックして実行
5. VSCodeを一度閉じ、ターミナルで以下のコマンドを実行してVSCodeが起動するか確認

code .

💡 おすすめ拡張機能（VSCodeを快適にするプラグイン）
• Prettier（コードを自動整形）
• ESLint（コードのエラーチェック）
• Thunder Client（Postmanの代わりにAPIテストができる）

④ Git & GitHub をセットアップ

バージョン管理には Git & GitHub を使います。
GitHubにコードを保存すれば、他のPCからも開発を続けられます。

📥 Gitのインストール
1. ターミナルを開き、以下のコマンドを実行

brew install git

2. インストール後、以下のコマンドで確認

git --version

📌 GitHubアカウントを作成

1. GitHubの公式サイト でアカウント作成
2. SSHキーを設定（ターミナルで以下を実行）

ssh-keygen -t rsa -b 4096 -C "your_email@example.com" #登録したアカウントのメールアドレスを設定
cat ~/.ssh/id_rsa.pub  # これをGitHubに登録

3. 以下のように聞かれるが、そのままEnterを押す

Enter file in which to save the key (/Users/your_username/.ssh/id_rsa):

4. 次に以下のように聞かれるが、何も入力せずEnterを押す
　（もう一度確認用に入力を求められるが、そのままEnterを押す）

Enter passphrase (empty for no passphrase):

5. 以下のコマンドを実行し、SSHキーが正しく作成されたか確認する

ls ~/.ssh

🔗 SSHキーをGitHubに登録

1. SSHキーをコピー
以下のコマンドで公開鍵の内容をコピー

cat ~/.ssh/id_rsa.pub

表示されたキーを すべてコピー する（ssh-rsa AAAAB3... から始まる長い文字列）。

2. GitHubにSSHキーを追加
① GitHubのSSHキー設定ページ にアクセス
②「New SSH Key」をクリック
③ Title に「MacBook SSH Key」など適当な名前を入力
④ Key にコピーした公開鍵を貼り付け
⑤「Add SSH Key」 をクリック

✅ SSHキーの動作確認

3. ターミナルで以下のコマンドを実行

ssh -T git@github.com

4. 接続を続けていいか尋ねられたら、yesをフルで入力しEnter
5. 以下のようなメッセージが表示されたら成功

Hi your_github_username! You've successfully authenticated, but GitHub does not provide shell access.

⑤ Postman（APIテストツール）をインストール

APIを使った開発をするので、APIの動作確認ツール Postman を使います。

📥 インストール手順
1. Postmanの公式サイト にアクセス
2. Mac用のバージョン をダウンロード & インストール

🚀 3. ちゃんと動くか確認しよう！

ここまでのセットアップが完了したら、開発環境がちゃんと動くかテストしてみます。

✅ Node.jsが動作するかチェック

ターミナルで以下を実行し、“Hello, World!” が表示されればOK！

zsh
node -e "console.log('Hello, World!')"

✅ GitHubにリポジトリを作成 & push できるか確認

mkdir myapp && cd myapp  # 新しいディレクトリを作る. "myapp"は新しいプロジェクト名として使用
git init  # Gitの初期化
echo "# MyApp" > README.md
git add .
git commit -m "First commit"
git remote add origin <GitHubのリポジトリURL>　# <GitHubのリポジトリURL>にはコピーしたURLを貼り付ける
git push -u origin main

💡GitHubのリポジトリURLの取得方法
1. ブラウザで GitHub にアクセス
2. 上部の「+」→「New repository」をクリック
3. Repository name に myapp と入力
4. 公開リポジトリなら「Public」、非公開なら「Private」を選択
5. 「Create repository」ボタンをクリック
6. GitHub上に空のリポジトリが作成されるので、そこに表示されている HTTPS or SSHのURL をコピー
例： https://github.com/自分のユーザー名/myapp.git

✅ PostmanでAPIのテスト

1. Postmanを開く
2. 新規タブを開き（「+」ボタン）、「URLを入力するかテキストを貼り付け」欄に「https://jsonplaceholder.typicode.com/posts」を貼り付け
3. GETを選択し、送信を押してリクエストを送る
4. JSONデータが返ってくればOK

🎯 まとめ

これで 開発環境の準備 は完了！
次のステップでは、Webアプリ開発の基本知識 を学びながら、実際に開発に進んでいきます✨

目次に戻る