MacでWeb開発環境を構築する方法|JavaScript開発に必要な最小セットアップ

テキストエディタとブラウザだけでも基本的なWebサイトは作れますが、ReactやVueといったJavaScriptフレームワークや、Gitなどの便利なツールを開発フローに取り入れることで、より本格的な開発が可能になります。

しかし、購入したばかりのMacのままでは準備が整っていません。後で原因不明のエラーに悩まされないよう、開発を始める前にいくつかのツールをインストールしておきましょう。

この記事では、Mac上でJavaScriptベースのWeb開発をスムーズにスタートするために必要な最低限のセットアップ手順を解説します。

1. macOSを最新の状態にアップデート

新しいソフトウェアをインストールする前に、まずAppleの公式手順に従って、macOSと既存のソフトウェアを最新バージョンへアップデートしておきましょう。

2. ターミナルアプリを選ぶ

この記事ではコマンドラインを使ってMacを操作していくため、ターミナルアプリが必要です。以下のいずれもおすすめの選択肢です。

• Hyper
• iTerm2
• Visual Studio Codeの統合ターミナル
• ターミナル(Macに標準搭載されているアプリ)

どれを選べばよいか迷ったら、まずは「Hyper」を選んでおくとよいでしょう。

3. コマンドライン・デベロッパーツールのインストール

最初にインストールすべきなのは、Macのコマンドライン・デベロッパーツール(Command Line Developer Tools)です。先にインストールしておくことで、後々奇妙なエラーに悩まされるのを防げます。

すでにインストール済みかどうかは、ターミナルで以下のコマンドを実行して確認できます。

xcode-select --version

バージョン番号が表示されない場合は、次のコマンドでインストールします。

xcode-select --install

インストールを確認するダイアログが表示されるので、「インストール」をクリックすると、パッケージが自動的にダウンロード・インストールされます。

インストールが完了したら、再度最初のコマンドを実行して、正しく導入されたことを確認しましょう。今度はバージョン番号が表示されるはずです。

4. Homebrewのインストール

以降のツールを、それぞれの公式サイトからダウンロードページを探し、リンクをクリックし、ファイルを解凍し、インストーラーを手動で実行……という手順で入れるのは非常に面倒です。そこで活躍するのがHomebrewです。

Homebrewは、コマンドラインからMac上のソフトウェアをインストール・更新・アンインストールできるパッケージ管理ツールです。手作業よりも速く安全で、開発ライフ全体を快適にしてくれます。

まず、Homebrewがすでにインストールされているか確認します。

brew --version

バージョン番号が表示されない場合は、以下のコマンドでインストールします。

/usr/bin/ruby -e "$(curl -fsSL https://raw.githubusercontent.com/Homebrew/install/master/install)"

この記事で紹介する中では一番複雑なコマンドですがご安心ください。Homebrewのおかげで、残りはすべてシンプルなコマンドで済みます。

次に進む前に、もう一度brew --versionを実行して、インストールが完了したことを確認しておきましょう。

5. Node.jsとnpmのインストール

Node.jsは、ブラウザの外でJavaScriptのコードを実行できるようにするツールです。ReactやVueなどのJavaScriptフレームワークをMacで動かしたいなら、Nodeのインストールが必須となります。

また、Nodeにはnpm(Node Package Manager)も含まれており、プロジェクトで自由にダウンロードして利用できる膨大な無料コードのライブラリにアクセスできるようになります。

まずはNodeがインストール済みかどうかを確認します。

node --version

表示されない場合は、Homebrewでインストールします。

brew install node

最後に、Nodeとnpmが正しく導入されたかを確認しましょう。

node --version

npm --version

6. Gitによるバージョン管理

Gitは、コードの変更履歴を追跡し、他の開発者と共同でプロジェクトを進めるためのバージョン管理ツールです。

すべてのプロジェクトでGitを使う習慣をつけておくと、将来Gitが必須となるプロジェクトにもスムーズに対応できます。さらに、GatsbyJSなど一部のツールはMacにGitがインストールされていることを前提としているため、自分のワークフローに組み込む予定がなくても入れておく必要があります。

ここでもまず、Gitがすでにインストールされているか確認します。

git --version

なければインストールします。

brew install git

そして、インストールが成功したことを確認します。

git --version

また、定期的に以下のコマンドを実行すると、Homebrewでインストールしたツール類がまとめて更新されます。

brew update && brew upgrade && brew cleanup && brew doctor

この1つのコマンドだけで、システムを常に最新の状態に保てます。

筆者は新しいプロジェクトを始めるタイミングで実行することが多いですが、好きなときに実行して問題ありません。(実行時にHomebrewから追加のコマンドを提案されたら、その指示に従って実行してください。sudoで始まるコマンドでパスワードを求められた場合は、Macの管理者パスワードを入力します。)

以上でコマンドライン側の準備は完了です!

7. コードエディタを選ぶ

コードはどんなテキストエディタでも書けますが、シンタックスハイライトやコード検証機能を備えたエディタを使うと、開発効率が格段に向上します。

以下のいずれも人気の選択肢です。

• Visual Studio Code
• Atom
• Sublime Text

これから開発を始める方には、Visual Studio Codeをおすすめします。

8. ブラウザを選ぶ

コーディング中は、作成中のアプリやサイトをブラウザで表示して動作を確認することになります。どのブラウザでも構いませんが、開発者向けツールを備えたブラウザなら、コードの詳細や改善ポイントを確認できて便利です。

おすすめは以下の2つです。

• Chrome
• Firefox

初心者の方には、Chromeを選んでおくのが無難でしょう。

9. Finderで隠しファイルを表示する

ちょっとしたコツをご紹介します。Macがデフォルトで隠しているファイルを表示できるようにしておきましょう(例えばGitの設定ファイルは自動的に非表示になりますが、編集したくなる場面もあります)。

隠しファイルの表示/非表示を切り替える最も簡単な方法は、キーボードショートカット⌘ + Shift + .(ピリオド)です。このショートカットで表示と非表示を切り替えられるので、必要なときにすぐアクセスできます。

まとめ

これで準備万端です!

以上が、MacでJavaScriptベースのフロントエンド開発を始めるために必要なものすべてです。

混乱を避けるため、この記事では厳密に必須となる項目だけを紹介しました。さらにMacをWeb開発向けにカスタマイズしたい方は、以下の参考記事もチェックしてみてください。

参考記事

• Tania Rascia「Setting up a Brand New Mac for Development」
• Ben Honeywill「Setting up a MacBook for Front-End Development」
• WebDevStudios「Leaving Homestead: Finding the Best All-Around Local Development Environment」(PHP環境も必要な場合におすすめ)

元記事:michaeluloth.com(英語)