アルアカ - Arcadia Academia

Arcadia Academiaは「エンジニアリングを楽しむ」を合言葉に日本のデジタル競争力を高めることをミッションとするテックコミュニティです。

Web開発を学ぶための環境構築

Featured image of the post

Web開発をするにも開発環境が必要です。今回はWeb開発を学ぶための環境構築について解説します。

💡
前提条件

開発に利用可能なPCとネット環境があること

※PCはWindows,Mac,LinuxなどOSは問いませんが、今あげた3種のどれかを推奨します。例えばChromeOSなどでも開発は可能ですが、情報があまりないので推奨しません。


[目次を開く]

コードエディタをインストールする

コードエディタとはプログラミングを作成編集するためのソフトウェアです。高機能なメモアプリのようなものと思っていただいて大丈夫です。

コードエディタには様々な種類がありますが、現状、開発への利用で最も高いシェアを占めているVSCodeをおすすめしています。

WindowsでのVSCodeインストール方法
(1) VSCodeの公式サイトへアクセス

まず、以下の公式サイトにアクセスします。

Visual Studio Code公式サイト

(2) インストーラーのダウンロード
  • 「Download for Windows」をクリック
  • 「User Installer(ユーザーインストーラー)」または「System Installer(システムインストーラー)」を選択
    • User Installer(推奨):個々のユーザーアカウントごとにインストールされる
    • System Installer:PC全体に適用される(管理者権限が必要)
(3) インストール手順
  1. ダウンロードした .exe ファイルを開く
  2. 利用規約に同意し、「次へ」をクリック
  3. インストール先フォルダを選択(デフォルトのままでOK)
  4. 追加タスクの選択(以下のオプションを推奨)
    • 「デスクトップアイコンを作成する」
    • 「エクスプローラーの右クリックメニューに追加」
    • 「PATHに追加(コマンドラインで使用可能にする)」
  5. 「インストール」をクリックして完了
(4) VSCodeの起動

インストール完了後、スタートメニューまたはデスクトップアイコンから起動できます。

MacでのVSCodeインストール方法
(1) VSCodeの公式サイトへアクセス

Visual Studio Code公式サイト

(2) インストーラーのダウンロード
  • 「Download for macOS」をクリック
  • .zip ファイルがダウンロードされる
(3) インストール手順
  1. ダウンロードした .zip ファイルをダブルクリック
  2. 「Visual Studio Code.app」が解凍される
  3. 「アプリケーション」フォルダへドラッグ&ドロップ
(4) コマンドラインで使えるようにする

ターミナルから code コマンドを使えるようにするには、VSCodeを開いて以下を実行します。

  1. VSCodeを開く
  2. Cmd + Shift + P を押して「コマンドパレット」を開く
  3. 「Shell Command: Install 'code' command in PATH」を選択
  4. ターミナルで 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でのインストール方法は以下の記事で解説しているので参照してください。

📄Arrow icon of a page linkGitをインストールしよう!

Dockerをインストールする

Dockerは、コンテナ技術を活用しアプリケーションの開発を効率化してくれるツールです。最初から概念的に理解する必要はありませんが、コンテナ技術も昨今のWeb開発において非常に需要の高い技術ですのでインストールを済ませておきましょう。

各種OSでのインストール方法は以下の記事で解説しているので参照してください。

📄Arrow icon of a page linkDockerインストール方法:OS別ガイド

まとめ

ひとくちに開発環境とはいっても企業やチーム、その人によって千差万別です。自分にとって快適な開発環境を整えることもWeb開発の楽しいところかと思うので楽しんで自分なりの開発環境を構築してみてください👍

あなたを爆速で成長させるメンタリングプログラムはこちらから↓↓

RUNTEQ(ランテック) - 実践型Webエンジニア養成プログラミングスクールの入会