Web 開発用に Mac をセットアップする方法

テキスト エディターとブラウザーだけで基本的な Web サイトを構築できますが、React や Vue などの JavaScript フレームワークや Git などの便利なツールをワークフローに追加して、ゲームを強化することもできます。

ちょっと待って！ Mac の準備ができていません。飛び込む前に、後で混乱するエラーを防ぐために、いくつかのアイテムをインストールする必要があります. ?

この記事では、Mac で JavaScript ベースの Web 開発を開始して実行するために必要な最小限のセットアップについて説明します。

行きましょう！

Mac をアップデート

新しいソフトウェアをインストールする前に、Apple の次の手順に従って、macOS と現在のソフトウェアを最新バージョンにアップグレードしてください。

端末アプリの選択

この記事ではコマンド ラインを使用して Mac を操作するため、ターミナル アプリが必要です。

次のいずれかが適切なオプションです:

• ハイパー
• iTerm2
• Visual Studio Code の統合ターミナル
• ターミナル (Mac に付属の既定のアプリ)

どちらを選択すればよいかわからない場合は、Hyper を選択してください。

コマンドライン開発者ツール

コマンド ラインから最初にインストールする必要があるのは、Mac のコマンド ライン開発者ツールです。 .これらを今すぐインストールすると、後で奇妙なエラーを防ぐことができます。

ツールが既にインストールされているかどうかを確認するには、端末アプリに次のコマンドを入力して Return キーを押します。

xcode-select --version

結果がバージョン番号でない場合は、次のコマンドでツールをインストールしてください:

xcode-select --install

ツールをインストールするかどうかを尋ねるダイアログが表示されます。 [インストール] をクリックします パッケージがダウンロードされ、自動的にインストールされます。

インストールが完了したら、最初のコマンドを再実行して、ツールがインストールされたことを確認します:

xcode-select --version

結果はバージョン番号になります。

自作

各ツールの Web サイトにアクセスし、ダウンロード ページを見つけ、ダウンロード リンクをクリックし、ファイルを解凍し、インストーラーを手動で実行して、次のいくつかのツールをインストールする代わりに、Homebrew を使用します。

自家製 は、コマンド ラインから Mac にソフトウェアをインストール、更新、およびアンインストールできるツールです。これは、手動のアプローチよりも高速かつ安全であり、一般的に開発作業が楽になります。

まず、Homebrew が既にインストールされているかどうかを確認します:

brew --version

バージョン番号が表示されない場合は、次のコマンドで Homebrew をインストールしてください:

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

これが、この記事で目にする最も奇妙なコマンドであることをお約束します! ? Homebrew のおかげで、あとはシンプルです。

次に進む前に、Homebrew がインストールされていることを確認してください:

brew --version

ノードと npm

Node.js は、Mac が Web ブラウザーの外部で JavaScript コードを実行できるようにするツールです。 Mac で React や Vue などの JavaScript フレームワークを実行する場合は、Node をインストールする必要があります。

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

最初に、ノードが既にインストールされているかどうかを確認します:

node --version

そうでない場合は、Homebrew でインストールしてください:

brew install node

最後に、Node と npm がインストールされていることを確認します:

node --version

npm --version

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 の管理者パスワードを使用してください。)

コマンドラインは以上です!

コード エディター

コードはどのテキスト エディターでも記述できますが、コードを強調表示して検証するエディターを使用すると、作業がずっと楽になります。

次のいずれかが適切なオプションです:

• Visual Studio コード
• アトム
• 崇高なテキスト

始めたばかりの場合は、Visual Studio Code を選択してください。

ブラウザ

コードを作成するときに、作成中のアプリや Web サイトをブラウザーで表示して、動作を確認すると役立ちます。これには任意のブラウザーを使用できますが、一部のブラウザーには、コードの詳細とその改善方法を表示する追加の開発者ツールが含まれています。

次のいずれかが適切なオプションです:

• クローム
• Firefox

始めたばかりの場合は、Chrome を選択してください。

ファインダー

ここでの簡単なヒント:Mac がデフォルトで隠しているファイルを表示することをお勧めします。 (たとえば、git ファイルは自動的に非表示になりますが、編集したい場合があります。)

Mac の隠しファイルを表示する最も簡単な方法は、キーボード ショートカット ⌘⇧ を使用することです。 (コマンド + シフト + ピリオド)。これにより、これらのファイルの表示と非表示が交互に繰り返されるため、必要なときにアクセスできます。

結論

これで準備完了です。 ?

これだけで、Mac で JavaScript ベースのフロントエンド開発を開始して実行することができます。

混乱を避けるために、厳密に必要でない項目は省略しました。ウェブ開発用に Mac をさらにカスタマイズするオプションの方法について詳しく知りたい場合は、以下のリンクをチェックしてください。

参考資料

• Tania Rascia による開発用の真新しい Mac のセットアップ
• Ben Honeywill によるフロントエンド開発用の MacBook のセットアップ
• ホームステッドを離れて:WebDevStudios による最高のオールラウンドなローカル開発環境の検索 (PHP のセットアップも必要な場合)

ツイッターで議論

最初は michaeluloth.com で公開されています。