Web開発をするにも開発環境が必要です。今回はWeb開発を学ぶための環境構築について解説します。
開発に利用可能なPCとネット環境があること
※PCはWindows,Mac,LinuxなどOSは問いませんが、今あげた3種のどれかを推奨します。例えばChromeOSなどでも開発は可能ですが、情報があまりないので推奨しません。
コードエディタをインストールする
コードエディタとはプログラミングを作成編集するためのソフトウェアです。高機能なメモアプリのようなものと思っていただいて大丈夫です。
コードエディタには様々な種類がありますが、現状、開発への利用で最も高いシェアを占めているVSCodeをおすすめしています。
WindowsでのVSCodeインストール方法
(1) VSCodeの公式サイトへアクセス
まず、以下の公式サイトにアクセスします。
(2) インストーラーのダウンロード
- 「Download for Windows」をクリック
- 「User Installer(ユーザーインストーラー)」または「System Installer(システムインストーラー)」を選択
- User Installer(推奨):個々のユーザーアカウントごとにインストールされる
- System Installer:PC全体に適用される(管理者権限が必要)
(3) インストール手順
- ダウンロードした
.exe
ファイルを開く - 利用規約に同意し、「次へ」をクリック
- インストール先フォルダを選択(デフォルトのままでOK)
- 追加タスクの選択(以下のオプションを推奨)
- 「デスクトップアイコンを作成する」
- 「エクスプローラーの右クリックメニューに追加」
- 「PATHに追加(コマンドラインで使用可能にする)」
- 「インストール」をクリックして完了
(4) VSCodeの起動
インストール完了後、スタートメニューまたはデスクトップアイコンから起動できます。
MacでのVSCodeインストール方法
(1) VSCodeの公式サイトへアクセス
(2) インストーラーのダウンロード
- 「Download for macOS」をクリック
-
.zip
ファイルがダウンロードされる
(3) インストール手順
- ダウンロードした
.zip
ファイルをダブルクリック - 「Visual Studio Code.app」が解凍される
- 「アプリケーション」フォルダへドラッグ&ドロップ
(4) コマンドラインで使えるようにする
ターミナルから code
コマンドを使えるようにするには、VSCodeを開いて以下を実行します。
- VSCodeを開く
-
Cmd + Shift + P
を押して「コマンドパレット」を開く - 「Shell Command: Install 'code' command in PATH」を選択
- ターミナルで
code
コマンドが使えるようになる
(5) VSCodeの起動
- アプリケーションフォルダから「Visual Studio Code」を開く
- または、ターミナルで
code
コマンドを入力して起動
LinuxでのVSCodeインストール方法
Linuxでは、パッケージマネージャを使用してインストールできます。ディストリビューションごとに方法が異なります。
(1) Ubuntu / Debian 系
ターミナルを開き、以下のコマンドを実行:
sudo apt update
sudo apt install wget gpg
wget -qO- https://packages.microsoft.com/keys/microsoft.asc | gpg --dearmor | sudo tee /usr/share/keyrings/packages.microsoft.gpg > /dev/null
echo "deb [arch=amd64 signed-by=/usr/share/keyrings/packages.microsoft.gpg] https://packages.microsoft.com/repos/code stable main" | sudo tee /etc/apt/sources.list.d/vscode.list
sudo apt update
sudo apt install code
(2) Fedora
sudo rpm --import https://packages.microsoft.com/keys/microsoft.asc
sudo sh -c 'echo -e "[code]\nname=Visual Studio Code\nbaseurl=https://packages.microsoft.com/yumrepos/vscode\nenabled=1\ngpgcheck=1\ngpgkey=https://packages.microsoft.com/keys/microsoft.asc" > /etc/yum.repos.d/vscode.repo'
sudo dnf check-update
sudo dnf install code
(3) Arch Linux
sudo pacman -S code
(4) Snapパッケージ(全ディストリ対応)
sudo snap install code --classic
Gitをインストールする
Gitはバージョン管理するためのツールです。こちらもWeb開発する上では必須ではないですがデファクトスタンダードになっているのでインストールし使えるようにしておきましょう。
各種OSでのインストール方法は以下の記事で解説しているので参照してください。
Dockerをインストールする
Dockerは、コンテナ技術を活用しアプリケーションの開発を効率化してくれるツールです。最初から概念的に理解する必要はありませんが、コンテナ技術も昨今のWeb開発において非常に需要の高い技術ですのでインストールを済ませておきましょう。
各種OSでのインストール方法は以下の記事で解説しているので参照してください。
まとめ
ひとくちに開発環境とはいっても企業やチーム、その人によって千差万別です。自分にとって快適な開発環境を整えることもWeb開発の楽しいところかと思うので楽しんで自分なりの開発環境を構築してみてください👍