【初心者向け】Webアプリを作ろう STEP1：必要なソフトのインストール（Mac版）
「Webアプリって自分でも作れるの？」と思ったことはありませんか？
答えはYesです。必要なのはMacとやる気だけ。この連載では、プログラミング初心者の方がWebアプリを実際に作りながら、仕組みを理解できるよう段階的に解説します。
まずはSTEP1として、これから使うすべてのツールをMacにインストールしましょう。
この連載について
| STEP | 内容 | ゴール |
|---|---|---|
| STEP1（本記事） | ソフトのインストール | 開発環境を整える |
| STEP2 | フロントエンド（HTML/CSS/JS） | ブラウザに画面を表示する |
| STEP3 | バックエンド（Python） | ブラウザからサーバーを呼び出す |
| STEP4 | データベース（PostgreSQL） | データを保存・取得して表示する |
インストールするもの一覧
| ソフト | 用途 | 対象STEP |
|---|---|---|
| Homebrew | Macのパッケージ管理ツール（他のインストールに必要） | 全STEP |
| Cursor | コードエディタ（コードを書くアプリ） | 全STEP |
| Git | ソースコード管理ツール | 全STEP |
| Node.js | JavaScriptの実行環境 | STEP2 |
| Python | バックエンドの実行環境 | STEP3 |
| PostgreSQL | データベース | STEP4 |
ターミナルの開き方
この記事ではターミナルをよく使います。まず開き方を確認しておきましょう。
Cmd + Space でSpotlightを開き、「ターミナル」と入力してEnterを押します。
黒い画面が開けばOKです。コマンドを入力してEnterを押すことで操作します。
1. Homebrew
HomebrewはMac用のパッケージ管理ツールで、コマンド一発で様々なソフトをインストールできます。Git・Node.js・PostgreSQLのインストールに使うため、最初に入れておきます。
インストール手順
ターミナルで以下のコマンドをコピー＆ペーストして実行します。
/bin/bash -c "$(curl -fsSL https://raw.githubusercontent.com/Homebrew/install/HEAD/install.sh)"
途中でパスワード（Macのログインパスワード）を求められます。入力してもカーソルは動きませんが、正しく入力されているので気にせずEnterを押してください。
確認方法
brew --version
Homebrew 4.x.x ← このような表示が出ればOK
Apple Silicon Mac（M1/M2/M3/M4チップ）の場合 インストール完了後に「Next steps」という案内が表示され、以下のコマンドを実行するよう促されます。画面の指示に従って実行してください。
echo 'eval "$(/opt/homebrew/bin/brew shellenv)"' >> ~/.zprofile eval "$(/opt/homebrew/bin/brew shellenv)"
2. Cursor
CursorはAIアシスタントが内蔵されたコードエディタです。コードを書きながらAIに質問したり、コードを自動生成してもらったりできるため、初心者にも非常に使いやすいエディタです。
インストール手順
- Cursor公式サイト を開く
- 「Download for Mac」をクリック
- ダウンロードされた
.dmgファイルを開く Cursor.appを アプリケーション フォルダにドラッグ＆ドロップ
確認方法
LaunchpadまたはアプリケーションフォルダからCursorを起動します。エディタの画面が表示されればOKです。初回起動時にアカウント登録（無料プランあり）を求められます。
AIアシスタントの使い方
Cursorの最大の特徴はAIチャット機能です。
Cmd + LでAIチャットを開く- コードについてわからないことを日本語で質問できる
- エラーメッセージを貼り付けると解決策を提案してくれる
初心者のうちはわからないことをどんどんAIに聞きながら進めましょう。
おすすめ拡張機能
Cursorを開いたら、左のアイコンバーから「拡張機能（四角いアイコン）」を選び、以下を検索してインストールしておきましょう。
- Japanese Language Pack — Cursorを日本語にする
- Prettier — コードを自動で整形する
- Python — PythonをCursorで書くために必要
3. Git
Gitはソースコードの変更履歴を記録・管理するツールです。「いつ・誰が・どこを変えたか」を追跡でき、誤って変更したときも以前の状態に戻せます。開発現場では必須のツールです。
インストール手順
MacにはGitが最初から入っている場合がありますが、Homebrewで最新版を入れておきましょう。
brew install git
確認方法
git --version
git version 2.44.0 ← このような表示が出ればOK
初期設定
Gitを初めて使う場合、名前とメールアドレスを登録しておきましょう。
git config --global user.name "あなたの名前"
git config --global user.email "your@email.com"
4. Node.js
Node.jsはJavaScriptをブラウザの外（Mac上）で動かすための仕組みです。STEP2で使います。
インストール手順
Homebrewでインストールします。
brew install node
確認方法
node -v
v22.0.0 ← このような表示が出ればOK
5. Python
PythonはSTEP3で使うバックエンドのプログラミング言語です。シンプルな文法で初心者にも学びやすい言語です。
MacにはPythonが最初から入っていることがありますが、バージョンが古い場合があります。Homebrewで最新版を入れましょう。
インストール手順
brew install python
確認方法
python3 --version
Python 3.12.0 ← このような表示が出ればOK
6. PostgreSQL
PostgreSQLはSTEP4で使うデータベースです。データを保存・管理するために使います。
インストール手順
brew install postgresql@16
インストール後、PostgreSQLを起動します。
brew services start postgresql@16
確認方法
psql --version
psql (PostgreSQL) 16.0 ← このような表示が出ればOK
全部インストールできたか確認しよう
ターミナルで以下のコマンドをすべて実行してみましょう。
brew --version
git --version
node -v
python3 --version
psql --version
5つすべてでバージョン番号が表示されればSTEP1は完了です！
Homebrew 4.x.x
git version 2.44.0
v22.0.0
Python 3.12.0
psql (PostgreSQL) 16.0
まとめ
| ソフト | インストール方法 | 確認コマンド |
|---|---|---|
| Homebrew | 公式スクリプト | brew --version |
| Cursor | 公式サイトから .dmg |
起動確認 |
| Git | brew install git |
git --version |
| Node.js | brew install node |
node -v |
| Python | brew install python |
python3 --version |
| PostgreSQL | brew install postgresql@16 |
psql --version |
お疲れさまでした。これでMacの開発環境が整いました。
次のSTEP2では、いよいよコードを書いてブラウザに画面を表示させます。HTMLとCSSとJavaScriptを使って、自分だけのWebページを作ってみましょう！
