はじめに
こんにちは、エンジニア2年目の嶋田です。
この記事を開いていただき、ありがとうございます！
今日は、Macを使った開発環境のセットアップについて、初心者の方々に向けて実践的なガイドを提供したいと思います。
Macの直感的なユーザーインターフェースと開発者にとっての利点を活かし、効率的な開発環境を構築する方法を一緒に見ていきましょう。
目次
基本的な開発ツールのインストール
開発を始める前に、いくつかの基本的なツールをセットアップする必要があります。ここでは、Terminalの使い方、Homebrewでのパッケージ管理、そしてGitの基本について説明します。
Terminalの使用方法と基本コマンド
MacのTerminalは強力なツールです。ここでは、ファイル操作、ディレクトリの移動、基本的なネットワークコマンドなど、開発に必要な基本コマンドを紹介します。
- ファイルやディレクトリの操作（
ls,cd,touch,mkdir,rm） - ファイル内容の表示（
cat,less,nano） - ターミナル画面をリセットする（
reset） - ファイルを開く（
open [file]）
Appleの公式ガイド: MacのTerminalの使い方
こちらに関して、チートシートを作成したのでよろしければぜひ使用してください！
Homebrewを使ったパッケージ管理
Homebrewは、Macでのソフトウェアインストールを簡単にするパッケージマネージャーです。Homebrewを使うと、コマンド一つで様々な開発ツールやアプリケーションをインストールできます。
- インストール: Terminalを開き、以下のコマンドを実行してHomebrewをインストールします。
/bin/bash -c "$(curl -fsSL https://raw.githubusercontent.com/Homebrew/install/HEAD/install.sh)"
- 使用例: Homebrewでパッケージを検索、インストール、アップデート、アンインストールする基本的なコマンドは以下の通りです。
brew search [パッケージ名] # パッケージを検索
brew install [パッケージ名] # パッケージをインストール
brew update # Homebrew自体とインストール済みパッケージのアップデート
brew uninstall [パッケージ名] # パッケージをアンインストール
Gitのセットアップと基本的な使用方法
バージョン管理システムであるGitは、開発には欠かせません。Gitのセットアップ方法と、基本的なコマンドを学びます。
- インストール: Homebrewを使用してGitをインストールするには、以下のコマンドを実行します。
brew install git
- 基本的なGitコマンド: 基本的なコマンドは以下の通りです。
git clone [リポジトリURL] # リポジトリをクローンする
git status # 変更されたファイルの状態を確認する
git add [ファイル名] # 変更をステージングエリアに追加する
git commit -m "[コミットメッセージ]" # ステージングされた変更をコミットする
git push # リモートリポジトリに変更をプッシュする
コーディング環境の構築
コーディングの効率を上げるために、適切なエディタをセットアップしましょう。Visual Studio Code（VS Code）は無料で強力なエディタです。そのインストール方法と、役立つ拡張機能、ショートカットについて説明します。
Visual Studio Codeのインストールと設定
Visual Studio Codeは、多くの開発者にとっての選択肢です。以下の手順でインストールできます。
- Visual Studio Codeの公式サイトにアクセスします。
- ダウンロードページからMac版のインストーラーをダウンロードします。
- ダウンロードしたファイルを開き、指示に従ってインストールします。
インストール後、基本的な設定を行い、個人の開発スタイルに合わせてカスタマイズすることができます。
必要な拡張機能の紹介とインストール方法
VS Codeの機能を拡張するために、以下の拡張機能をインストールすることをお勧めします。
- Live Server: ローカル開発サーバーを立ち上げ、リアルタイムでコードの変更をブラウザに反映させます。
- Prettier: コードを整形し、統一されたスタイルを保ちます。
- ESLint: JavaScriptのコードを静的解析し、問題点を指摘します。
- GitLens: Gitの履歴を詳細に追跡し、コード内で直接変更点を確認できます。
これらの拡張機能は、VS Codeの拡張機能タブから検索し、インストールボタンをクリックするだけで簡単に追加できます。
以下も個人的におすすめの拡張機能です。
お手隙の際にチェックしてみてください！
VS Codeの便利なショートカットとコーディングのヒント
以下は、VS Codeを使用する際に役立つショートカットとヒントです。
-
Cmd + P: ファイルを素早く開く -
Cmd + /: コメントの切り替え -
Cmd + B: サイドバーの表示・非表示 -
Cmd + Shift + E: エクスプローラーの表示 -
Cmd + Shift + V: マークダウンファイルのプレビュー
これらのショートカットを使いこなすことで、コーディングの効率を少し向上させることができます。
Web開発のための環境セットアップ
Web開発を始めるためには、ローカルサーバーのセットアップが必要です。また、ブラウザの開発者ツールの使い方や、データベース操作の基本についても触れます。
ローカルサーバーのセットアップ
ローカル開発環境を構築するために、MAMPやXAMPPなどのツールを使用することができます。これらはApacheサーバー、MySQL、PHPが一つになったパッケージで、簡単にインストールして使用することができます。
- MAMPのダウンロードページにアクセスし、Mac版をダウンロードします。
- ダウンロードしたファイルを開き、画面の指示に従ってインストールします。
- MAMPを起動し、
Start ServersをクリックしてApacheサーバーとMySQLを起動します。
これで、http://localhost:8888 にアクセスすることで、ローカルサーバーをブラウザで確認できます。
ブラウザの開発者ツールの活用方法
ChromeやFirefoxには、開発者ツールが標準装備されており、Webページのデバッグに非常に役立ちます。
- ChromeやFirefoxでWebページを開き、
Cmd + Option + IもしくはF12を押すと開発者ツールが開きます。- ElementsタブではHTMLやCSSをリアルタイムで編集できます。
- ConsoleタブではJavaScriptのエラーを確認したり、コードをテストしたりできます。
- NetworkタブではWebページのリソースの読み込み状況を確認できます。
これらのツールを使いこなすことで、Web開発のデバッグが格段に楽になります。
基本的なデータベース操作
Web開発ではデータベースの操作が不可欠です。以下はMySQLを例にした基本的な操作です。
- Terminalを開き、
mysql -u root -pを実行してMySQLにログインします。 - データベースを作成するには、
CREATE DATABASE database_name;を実行します。 - データベースにテーブルを作成するには、
CREATE TABLE table_name (column1 datatype, column2 datatype, ...);を実行します。 - データを挿入するには、
INSERT INTO table_name (column1, column2, ...) VALUES (value1, value2, ...);を実行します。
これらのコマンドを使いこなすことで、データベースの基本的な操作が可能です。
最後に
最後までお付き合いいただきありがとうございました。
少しでもお役に立てていたら幸いです。
私自身、まだまだ勉強中なので何か間違いがありましたらぜひコメントでご指摘よろしくお願いいたします🙇♂️