同記事を書いてから１年経った。内容的にも不足している点や新しくなったこともあり、書き直す必要を感じ、同じタイトルながら書き改めることにした。内容的には大きく変わっていないが、どちらかというと加筆した部分が多い。さらにGitHubとの連携にもふれているが準備とし、別記事にすることにした。また、学習環境もLinux Mint（Ubuntu系）に限定した。他のディストリビューションやWindows、Macには合わないこともあるかもしれないがご了承願いたい。なお、前記事は削除したが、URLは変更していない。

さて、プログラミングを始めるには、学習環境を作ることから始まる。コードを書くためのエディタ、フログラミング言語のインストール、プログラムを実行する環境などが必要となる。今回は、コードを書くエディターとしてスタンダードといってよいVisual Studio Codeをインストールし、プログラミング学習に必要な拡張機能（エクステンション）をインストールする。

今回は、準備段階といってよい。内容としては、どんなものを揃えたらいいのかといったことになる。ここで揃えるのは最低限の環境である。あれば便利なものがあるが、それは慣れてからでいいだろう。また、Linux Mintで行っているが、MacやWindowsはインストーラーパッケージが用意されているので、それらを使ってPython、Nodeなどのプログラミング言語および必要なパッケージをインストールすることができる。Visual Studio Codeの拡張機能のインストールや設定などは、Linux mint、Mac、Windowsともに関係なく行えるということを申し上げておく。

本記事を含めた関連記事は、次のような方を対象にする。

• Linux mint（Ubuntu）ユーザー
• プログラミング学習を始めたい
• Progateなどで学習しているが、アウトプットする学習環境を作ってみたい
• どんな学習環境を作ったらよいのかわからない

OSとラップトップ環境

Linux Mintの使用を前提とするが、Ubuntu系のディストリビューションであればよい。Ubuntu系以外のディストリビューションでは、パッケージのインストールコマンドが異なるので読み替えていけばよい。記事は以下のラップトップで作成した。10年前の機種であり、かなりの低スペックであるが、10年間使用してきてプログラミング学習としても十分使用に耐えてきており、未だにメインPCとして使用中である。

• OS: Linux Mint 20.3 Cinnamon Edition
• CPU： Intel Celeron N3450 4コア 1.1GHz
• メモリ: 8GB
• ストレージ: 32GB+120GB

目的

プログラミングを学習するための環境を準備すること。

対象プログラミング言語

数多くのプログラミング言語があるが、以下のプログラミング言語を対象とした。HTML/CSSはプログラミング言語ではないが、ここでは学習する人が多いことを踏まえてプログラミング言語として含めた。

• HTML/CSS
• JavaScript / TypeScript
• PHP
• Python
• Java

Visual Studio Codeのダウンロードとインストール

使用するエディタはVisual Studio Codeとする。理由は次の２点である。

• 拡張性が高い
• 拡張機能をインストールするだけで、想定した学習環境に対応できる
• 汎用性が高い

本記事の学習においてはVisual Studio Codeをインストールしておく。もちろん、Visual Studio Code以外にも、EclipseやAtom、Sblime Textなどがある。また、PyCharmといっプログラミング言語専用のIDEもある。どれを使うかは好みの問題だ。もちろん、他のエディタを使用してもよい。

ダウンロード

Visual Studio Codeをダウンロードできるサイトは、２つあるがどちらでもよい。ダウンロードするパッケージは.debを選択する。ブラウザによってはダウンロード終了時に、警告が表示されることがあるが、「保存」を選択する。なお、Visual Studio Codeの公式サイトの方は、OSによって表示される拡張子が変わる。

Microsoft Azure

Visual Studio Code

インストール

インストールは簡単で、ダウンロードして保存した「code_X.XX.X-XXXXXXXXXX_amd64.deb」（Xの部分はバージョン番号が入る）をダブルクリックする。GDebiパッケージインストラーが起動するので、「パッケージをインストール」ボタンがクリックできるようになるまで少し待ってからクリックする。インストール終了したかどうかは、次のようになれば、パッケージインストーラを閉じても構わない。

Visual Studio Codeの日本語化

ダウンロードしてインストールしたVisual Studio Codeを日本語化するには、ユーザー自身がローカルパッケージを検索して、導入する必要があったが、現在は、最初に起動したとき、日本語パッケージをインストールするかどうか、ポップアップが表示されるので、「インストールして再起動」を選択すれば、インストール＆Visual Studio Codeの再起動までをやってくれる。

その後は、それぞれの学習環境に対応したエクステンション(拡張機能)をインストールしていく。基本的に、日本語化さえすればHTML/CSS学習やプログラミングなどの学習に使えるが、それだと少し不便なので、便利な拡張機能をインストールすれば、より効率的に学習を行える。

エクステンションのインストール

Visual Studio Codeの画面の左側にある拡張機能アイコンをクリックして、検索欄にエクステンション名を入力してインストールする。各エクステンションの使い方や機能説明はすべて英語表記だが、Visual Studio | Marketplaceで、エクステンションの名前を検索、ブラウザの右クリックで表示されるポップアップメニューの「日本語に翻訳」で日本語化すればよい。ただし、FireFoxはアドオンをインストールする必要がある。

ここからそれぞれの学習において必要なエクステンションをインストールしていく。

HTML/CSS

Live ServerおよびDartJS Sass Compiler and Sass Watcher、CSS Peekについては、使い方を次回で紹介する。

Python

Pythonのプログラム本体は、Linux Mintではデフォルトでインストールされているので、あえてインストールする必要がない。なお、Google ColaboratoryやAnacondaといった統合環境を使う場合は、この項目は無視してよい。

LinuxのディストリビューションにデフォルトでインストールされているPythonには、pipがインストールされていないことがある。その場合はインストールしておく。

sudo apt install python3-pip

pipをインストールしたら、pep8、Autopep8、Flake8といった、コーディング規約に沿ってコードをチェックしてくれるパッケージもインストールしておく。

pip install pep8 autopep8 flake8

インストールが終わると、指定した場所へパスを通せという警告メッセージが表示されるので、ターミナルからnanoというエディタを起動してパスを指定する。

nano ~/.bashrc

エディタが起動したら.bashrcファイルの一番最後に以下のように追加する。<>の部分はユーザー名を指定する。Linux Mintインストール時に作成したユーザー名である。「あなたの名前」ではない。

export PATH=$PATH:/home/<>/.local/bin

PHP

PHPの学習にはHTML/CSSと併せてブラウザを使用して学習する方法とVisual Studio Codeのターミナルで.phpファイル実行する２つの方法がある。ここでは、前者の方法をとる。ブラウザを使用する場合やPHPはLAMPのインストールが必要となる。また、環境のセッティングも必要となる。LAMPのインストールと環境のセッティングについては、記事「LAMPとゆかいな仲間たち-WordPress編」を参照していただきたい。なお、HTML/CSSに必要なエクステンションは省いてある。

Java

OpenJDKを使用する。2022年6月時点ではバージョン１8が最新版だが、Linux Mint 20.3でインストールできるのはバージョン17までである。ソフトウェアの管理からインストールできるが、JAVA_HOMEの設定が必要なこともあり、ターミナルからインストールすることにする。

sudo apt install openjdk-17-jdk

インストールしたらJAVA_HOMEを設定する。パスはインストールした時点で通っている。

nano ~/.bashrc

エディタを起動して.bashrcファイルを開いたら、一番最後の行に追加する。

export JAVA_HOME=/usr/lib/jvm/java-1.17.0-openjdk-amd64

JavaScript / TypeScript

JavaScriptの実行は必要なことは、Node.jsとnpmをインストールしておくだけである。Linux Mintでは、下記のコマンドでインストールする。

sudo apt install nodejs npm

インストールしてバージョンを確認すると古い。

node -v
v10.19.0

npm -v
6.14.4

そこで、ｎをインストールして、バージョンを新しくする。

sudo npm install -g n

stable（安定版）を指定してインストール。

sudo n stable

  installing : node-v16.15.1
       mkdir : /usr/local/n/versions/node/16.15.1
       fetch : https://nodejs.org/dist/v16.15.1/node-v16.15.1-linux-x64.tar.xz
   installed : v16.15.1 (with npm 8.11.1)

Note: the node command changed location and the old location may be remembered in your current shell.
         old : /usr/bin/node
         new : /usr/local/bin/node
To reset the command location hash either start a new shell, or execute PATH="$PATH"

インストール場所が変わったので、PATHを追加するか、新しくシェルを実行してねと言われる。そこで、古いバージョンのnode.jsとnpmを削除する。

sudo apt purge nodejs npm --autoremove

削除したら、以下のコマンドを実行するか、再ログインする。

exec $SHELL -l

次はTypeScriptをインストールする。

sudo npm install -g typescript

-gオプションについて警告が出るが問題はない。もし、npmの新しいバージョンがリリースされていると、一緒に表示される。

HTML/CSSと一緒に使われることが多いので、HTML/CSSのエクステンションも一緒にインストールする。

以上、プログラミング学習環境の準備は終わりである。次回からは、プログラミング言語別のエクステンションの使い