Windows10 で Web 開発環境を整える！

Windows10 で Web 開発環境を整える！

Web 開発に限らず、ソフトウエア開発を行うには開発で必要なアプリなどを PC にインストールするなど、開発に必要なツールを準備する必要があります。この記事では、Windows10 を使って、使いやすい Web 開発環境の例を紹介します。

実際に利用するアプリなどは好みもあるので、全ての方にベストというわけには行きません。しかし、最近私自身が使ってみて良いと思った設定を紹介していこうと思っています。

Web 開発のツールはオープンソースの物が多い

この連載でも何回か書いていますが、私自身は昨年末に Mac を購入して最近の主力の開発の PC は Mac に変わっています。合わせて、Linux と Windows の PC も使っています。 Mac に変える前は、Windows のラップトップを主力で使っていましたが、現在は開発のサブ機として Linux(Ubuntu）をインストールして利用しています。

Web 開発で利用するツール（アプリ）は、オープンソースとして開発された物が多いため、Linux は開発する上では便利な OS です。しかし、開発以外で例えば Adobe の商用アプリを利用したい場合などは、Windows や Mac を使う必要があるため、複数の PC を利用できない場合は、少し不便な場合があります。デスクトップなどのように、メモリ容量などに余裕がある場合は、VMWare などを利用して仮想マシーン(VM/Virtual Machine)を利用するなどの方法もあります。一方で、ラップトップ PC の場合、メモリ容量が８ GB 以下の PC も多いのでその場合は、VMWare 上で仮想マシーンを動かすには少し無理があります。OS を動かすだけならば問題はありませんが、実際にアプリを動かして作業するとなると無理がある場合が多いという意味です。 ストレージに余裕があれば、両方の OS を入れて必要に応じて使い分けるのも一つの方法ですが、インストールも面倒ですし、OS を切り替えるのも余り効率的ではありません。 そう考えると、１台の PC で利用する場合はどうしても Mac か Windows を選ぶ場合が絶対的に多くなると考えられます。

実際に、Windows10 の PC の方が、一般的には同程度の性能ならば割安です。そこで、この記事では Windows10 の PC を使うことを前提にどのようなアプリを入れたら良いのかを Web 開発を行うことを前提に紹介します。

Windows10 で Linux を動かす

最新の Windows10 のリリースには、WSL(Windows Subsystem for Linux)という機能がサポートされている事は少し前の投稿で紹介した通りです。この機能を使うと、Windows の機能の一部として、Linux の仮想マシーンを動かすことができます。VMWare などに比べると、メモリなどのリソースは少なくても利用できます。実際に、メモリ容量８ GB のラップトップで使ってみましたが、多少メモリの使用量は増えますが実用上問題ありません。

この機能は標準では有効になっていませんので、利用するには以下の要領で設定を変更します。

最新版の Windows10(20H2)で以下のコマンドを Windows PowerShell を管理者モード（Administrator）で実行します。（2020 年にリリースされた Windows10 ならば「2004」でも使えますが、20H2 をお勧めします）

$ Enable-WindowsOptionalFeature -Online -FeatureName VirtualMachinePlatform -norestart

$ dism.exe /online /enable-feature /featurename:Microsoft-Windows-Subsystem-Linux /all

その後で、Microsoft ストアで、「Linux」を検索すると幾つかの Linux の配布パッケージが出てくるので希望の Linux を選択してインストールします。ここでは、「Ubuntu」を選択して試してみました。

以上で Linux（Ubuntu)を動かす準備は完了しました。Windwos の他のアプリと同じようにスタートメニュから起動できます。Windows PowerShell の様にターミナルのウインドウが開いて Linux のコマンドライン（シェル／Shell）が使えるようになります。

必要なパッケージをインストールする

開発で必要なパッケージを Linux にインストールします。

VSCODE

Web 開発でよく利用されているエディタは最近では、VSCODE や Atom が多いと思いますが、今回紹介する設定では VSCODE をお勧めします。理由は、Windows でインストールした VSCODE を上でインストールした Linux 側からも利用できるからです。

Linux のコマンドラインから編集したいプロジェクトのフォルダに移動して

$ code .

とタイプすると VSCODE が立ち上がります。VSCODE からターミナルを開くと Linux のターミナルを利用できます。Linux 上で VSCODE をインストールする必要はありません。

VSCODE で利用するプラグインは色々ありますが、Web 開発での利用の場合のお勧めは、

＊　Markdown All in One

＊　Markdown Preview Enhanced

＊　Prettier

＊　Simple React Snippets

＊　Vetur

などが便利です。HTML も直接書く様でしたら、HTML Preview あたりも便利です。 Markdown はドキュメントを書いたりするときに利用すると便利で、特に GitHub のドキュメントは基本的に Mackdown なので Markdown を書きながら、ドキュメントを見たりするのに便利です。 あとは、コードの整形に Prettier、React と Vue を利用する時に便利な Simple React Snippets や Vetur を利用しています。

コマンドラインのアプリ

Linux のコマンドラインから利用できる、アプリもインストールします。

＊　Node.js (npm も含めて)

＊　Git

あたりが入っていると便利です。

Node.js は、Ubuntu のアプリ管理のプログラム「apt」でもインストールできますが、安定板（LTS)は v14.x なのでこれをインストールしています。

v14.x をインストールするには、「curl」が必要ですが、単に Ubuntu をインストールした状態ではインストールされていないのでまず、「curl」をインストールした後で Node.js のインストールを行います。 (実行は Ubuntu のコマンドラインです。Windows の PowerShell やコマンドラインではありません)

sudo apt update

sudo apt install curl

curl -fsSL ｈｔｔｐｓ://deb.nodesource.com/setup_14.x | sudo -E bash -

sudo apt-get install -y nodejs

Git は「apt」を使ってインストールします

sudo apt install git

これで、Web 開発で利用する基本アプリの最低限の物は使うことができます。

あとは、必要に応じて「make」、「g++(C++コンパイラ)」、「Java」、「Python」などをインストールできます。

npm のパッケージ

よく利用する npm のパッケージも「グローバル」でインストールしておくと便利です。

＊　typescript

＊　create-react-app

＊　create-next-app

＊　create-nuxt-app

＊　vue cli (＠vue/cli)

＊　firebase-tools

＊　electron

＊　electron-builder

などを入れておくと一々プロジェクト事にパッケージを入れる必要がないので便利です。

$ sudo npm install -g typescript

$ sudo npm install -g create-react-app

$ sudo npm install -g create-next-app

$ sudo npm install -g create-nuxt-app

$ sudo npm install -g ＠vue/cli

$ sudo npm install -g firebase-tools

$ sudo npm install -g electron

$ sudo npm install -g electron-builder

まとめて実行できますが、上の例では分けて書いてあります。必要なパッケージを選んでインストールしてください。 Linux(Ubuntu)から利用する場合は、Ubuntu のシエル上で実行します。Windows の PowerShell やコマンドプロンプトから利用する場合には、Windows の PowerShell(コマンドプロンプト)上で実行します。

LAMP

開発用の Web サーバーと SQL データベース、PHP が必要な場合もあるかと思います。その場合は、LAMP（Linux Apache MySQL PHP)をインストールしておくと、バックエンドに MySQL・PHP を使った Web アプリ／サービスの開発も可能です。

$ sudo apt-get update

$ sudo apt-get install lamp-server^

を Ubuntu のターミナル上で行えば、「localhost」で Web サーバーが利用できるようになります。

MySQL のデータベースを Web ブラウザから管理したい場合は、「phpmyadmin」をインストールすると Web ブラウザからデータベースを管理できるようになります。

$ sudo apt install phpmyadmin php-mbstring php-zip php-gd php-json php-curl

フォルダの共有

Windows10 と Linux はそれぞれ独立にフォルダを持っています。 Linux 側から、Windows のファイルは

/mnt/c

で全て参照できます。

Windows10 側からは

\\wsl＄

で参照できます。 開発用のファイルは、全て Linux 側に置いて利用できます。（Windows 側におく必要はありません）

ダウンロードなどは、Windows10 の Web ブラウザを使ってダウンロードしたファイルを Linux 側にコピーすれば問題ありません。

まとめ

WSL(Windows Subsystem for Linux)を利用すると、少ないリソースで Windows10 上で Linux の仮想マシーンを動かす事ができます。

これで、ほとんどのコマンドラインの開発ツールを Linux のシェルから利用できる様になります。（Windows10 だけでも同じことはできます）

普段、Linux や Unix 系の OS を利用していない方の場合余り大きな違いは感じないかもしれませんが、Linux のシェルを使った方が、ファイルの処理や利用できるコマンドも多くなれると Windows より便利です。

Linux のシェルを Windows に導入することで、Windows の PC でも Mac に近い感覚で Web 開発をすることが可能になります。Web 開発に関しては、この設定で行うと結構便利になります。

Windows10 の PC を主力で開発に利用していた時は知りませんでしたが、最近使い始めて重宝しています。好みの問題もありますが、試してみる価値はあると思いますので是非やってみてください。