この記事では、**Apple Silicon（M1）搭載のMacBook（macOS Sequoia v15.3前提）**で、OpenStreetMap × Node.js × PostgreSQL(PostGIS) × Twitter API といったツールを後編で活用できるよう、まずは環境を構築する。
後編では実際にサンプルコードを動かし、React + Leaflet + Node.js + PostGIS + Twitter APIの連携を行います。
まずはさくっと、インストール＆セットアップを終わらせましょう。
ゴール
- Mac (Apple Silicon)上でNode.jsとPostgreSQL（PostGIS拡張含む）を導入する
- 必要なコマンドラインツールをインストールし、環境確認ができる
- Twitter Developerアカウントを作成し、API Key / Secret / Bearer Tokenを取得する
上記の準備が整えば、後編でWebアプリやサーバー開発をスムーズに進められます。
1. 基本的なセットアップ
1.1 Xcode Command Line Tools (Optoin)
macOSで開発する場合、ビルド関連のコンパイラやmakeなどが含まれるXcode Command Line Toolsが必要になります。ターミナルで以下を実行し、インストールまたはアップデートを行ってください。
xcode-select --install
ポップアップが出る場合は指示に従ってインストール。
すでに最新版の場合は「command line toolsはすでにインストールされています」のような表示になります。
1.2 Homebrewのインストール（推奨）
HomebrewはmacOS上でパッケージ管理を行うためのツールです。Apple Siliconでも対応しています。まだ入っていない場合は下記コマンドを実行してください。
/bin/bash -c "$(curl -fsSL https://raw.githubusercontent.com/Homebrew/install/HEAD/install.sh)"
インストール後、ターミナルの指示に従い、.zshrcや.bash_profileなどにパスを追加する必要があります。
完了したら以下でバージョン確認:
brew --version
2. Node.jsの導入
選択肢1：Homebrewでインストール
brew install node
インストール後:
node -v
npm -v
が正常に表示されればOK。
選択肢2：Node Version Manager (nvm)を使う
複数バージョンのNode.jsを切り替えたい場合、nvmの使用がおすすめです。Homebrewを使わずに、nvmをインストールする場合はこちら:
# nvmのレポジトリをクローン
curl -o- https://raw.githubusercontent.com/nvm-sh/nvm/v0.39.5/install.sh | bash
# シェルを再読込
source ~/.zshrc
# Node.js LTSをインストール＆使用設定
nvm install --lts
nvm use --lts
- すでに手元の環境はインストール済みなので動作未確認。
- M1 Macが普及しているのでRosetta2を介さずネイティブに動くバイナリが多いので問題なく使えるはずです。
3. PostgreSQL + PostGISのインストール
3.1 HomebrewでPostgreSQLを入れる
brew install postgresql
PostgreSQLのバージョンを確認:
postgres --version
# または
psql --version
3.2 PostGIS拡張
brew install postgis
これでPostgreSQLに地理空間データを扱う拡張（PostGIS）が追加されます。
3.3 初期設定 & 起動
# PostgreSQLサービス起動
brew services start postgresql
# DB作成
createdb my_database
psqlでログイン確認
psql -d my_database
# psqlコマンドラインが出ればOK
PostGISの有効化は、後ほどデータベースに対して行います。
例:
CREATE EXTENSION postgis;
(こちらは実際のDB作成時にやればOKです)
4. Python (オプション)
本プロジェクトでは必須ではないかもしれませんが、SNSのスクレイピングなどをPythonで行うケースもあるため、Python 3.× の導入を簡単に触れておきます。
HomebrewでPython
brew install python
python3 --version
pip3 --version
Apple Silicon向けに最適化されたPythonが導入されるはずです。
必要に応じてvenvで仮想環境を作ってもOK。
5. Twitter API Keyの取得
5.1 Twitter Developerアカウント登録
- Twitter Developer Portal (https://developer.twitter.com/) にアクセス
- 「Apply for a Developer Account」をクリックし、指示に従って申請
- 用途やアプリの目的を入力
注意: TwitterのAPIポリシーや有料化プランのアップデートなど変更が頻繁なので、最新情報をチェックしてください。
5.2 App作成＆Key発行
- Developer Portalの「Projects & Apps」から「Create App」を選択
- アプリ名や説明を入力し、API Key / API Secret / Bearer Token を取得
-
.envファイルなどに安全に保管し、公開しないように注意
例:
TWITTER_API_KEY=****************
TWITTER_API_SECRET=****************
TWITTER_BEARER_TOKEN=****************
後編でNode.jsからこれらの値を参照し、ツイート取得や検索を行います。
6. 補足：Apple Silicon特有のトラブルシューティング
- Rosetta2: Intelバイナリしかないツールを動かす際は自動的にRosetta2経由で動くことがあります。HomebrewでApple Silicon対応版をインストールすれば多くの場合ネイティブ動作します。
- 一部ライブラリのビルドエラー: Node.jsやPythonのネイティブ拡張がビルドできないケースがあるため、Command Line Toolsが最新か再チェックしてください。
- PostgreSQLプラグイン: 一部拡張が未対応の可能性がありますが、主流な拡張（PostGISなど）はM1対応済みのケースがほとんどです。
7. まとめ
これで、Node.js（またはPython） + PostgreSQL/PostGIS が動く基盤と、Twitter APIキーの取得まで完了しました。
後編ではいよいよこれらを組み合わせ、React + Leafletで地図を表示しながら、バックエンド（Express）とDBを連携してナラティブ投稿やSNSからのデータ取得を行うウェブアプリを実装していきます。
次回予告
- Expressサーバーの立ち上げ方とルーティング
- フロントエンド（React）でLeaflet地図を表示し、座標付きフォーム送信
- Twitter APIを叩いて位置情報付きツイートを取得 → DBに保存
- Docker Composeで一括起動する構成例（オプション）
準備おつかれさまでした。次回はいよいよアプリ開発「後編」へ進んでみましょう！
参考リンク
以上、「前編：Mac（M1）環境構築＆Twitter API準備編」でした。