Web 開発のための Windows PC の設定

Web 開発のための Windows PC の設定

Windows の PC は、製造しているメーカーも多く、Mac に比べると比較的安価でハードウエアを購入できるために予算などが限られている場合などには有利です。

この記事では、Windows の PC で Web 開発を行うのに最低限必要な設定について紹介します。

Web 開発に必要な性能は？

既に、紹介していますが、一般的な Web 開発を行うのに高性能で高価な PC は特に必要はありません。多少古い PC でも十分に対応できます。従って、現在手持ちの PC がある場合にはその活用をお勧めします。

私の場合、ノート型の PC は昨年末までは、古い PC を活用していました。４〜５年くらい前の PC でも多少遅く感じることはありますが、大きな問題なく利用できていました。

目安としては、他に利用するアプリにもよりますが、Web 開発のみならば、メモリ容量は標準的な８ GB で十分ですし、ディスクドライブ（HDD/SSD）の容量は１００ GB もあれば OS とアプリを入れても十分な作業エリアが確保できます。古い PC でディスクドライブが HDD の場合、SSD に取り替えるだけで、実用上の体感性能が上がります。ただし、この作業は、OS の再インストールかコピーが必要なので、自分で OS のインストールができない場合はちょっと難しくなります。

CPU は過去４〜５年以内のものであれば性能的にはとりあえず問題はありません。

実際に、手持ちの PC で開発してみて問題になった時に買い替えを検討すれば良いかと思います。新規に購入するならば、ノート型で 5 万円前後の物を選べはとりあえずは大きな問題はないかと思います。（８ GB メモリ、２５６ GB ストレージで、インテルの CPU の i3/i5 相当品でとりあえず十分です）

一番簡単に設定する方法

Windows でも設定には幾つか選択肢がありますが、この記事では簡単に設定する事を考えて、WSL（Windows subsystem for Linux）は使わない方法を紹介します。 インストールするアプリは全て Windows 版をインターネットからダウンロードして設定します。

インストールするアプリは以下のアプリがお勧めです。

＊　エディタ：マイクロソフトVSCODE

＊　パッケージ管理: Node.jsとパッケージ管理アプリ

＊　ソースコード管理:Git

＊　Web ブラウザ：ChromeもしくはFireFox

＊　リモートアクセスツール: Anydesk

をインストールしておけば、基本的な Web 開発ができます。

エディタは好みもありますが、マイクロソフトの VSCODE がお勧めです。プラグインも豊富でいろいろなプログラミング言語に対応しています。また、Windows 以外の OS もサポートしているので、将来的に他の OS に乗り換えた場合でも同じ環境で開発ができるので、移行がスムーズに行えます。

フロントエンドのフレームワークで、React や Vue を利用する場合、パッケージ管理アプリを使って開発すると、インターネットで公開されている基本機能のモジュールなどを自分の開発するプログラムに簡単に組み込む事ができます。

また、ソースコードの管理を行うのに Git を入れておくと便利です。GigHub と併用すれば、インターネット上で開発したソースコードを管理することができます。

開発した、Web アプリや Web サービスの動作の検証には、Windows に付属の Web ブラウザーより、Google Chrome や FireFox を利用した方が、開発ツールのプラグインなどが充実していて便利です。

最近の PC は殆どが６４ビット版の CPU を活用しているので、基本的には Windows の６４ビット版のアプリをダウンロードして、上に挙げたアプリはダウンロードしたファイルをダブルクリックすればインストールできます。

Anydesk はリモートから別の PC にアクセスするためのアプリです。アクセスする方とアクセスされる方の両方の PC にインストールする必要があります。このアプリを利用すると、外出先から自宅や会社の PC にアクセスすることができて非常に便利です。ファイルのやりとりもできるので外出や出張が多い方にはお勧めです。

アプリの拡張機能や便利なツールをインストール

基本的なアプリのインストールが済んだら、拡張機能（プラグイン）や便利なツールをインストールしておきます。 VSCODE の場合、以下のプラグインがお勧めです。

＊　Prettier - プログラムの書式を整えてくれます

＊　Simple React Snipperts - フロントエンドのフレームワークに React を使用する場合便利です

＊　Vetur - フロントエンドのフレームワークに Vue を利用する場合便利です

＊　Markdown All in One \ Markdown Preview Enhanced - Markdown を利用する場合便利です

VSCODE 上でプラグインのアイコンをクリックしてプラグイン名で検索すれば簡単に見つかります。 あとは、プラグインの説明画面の「インストール」をクリックすれば簡単にインストールできます。

npm のパッケージも幾つかインストールしておくと便利です

React を利用する場合: create-react-app - React のサンプルプロジェクトを作成してくれます

Vue を利用する場合: ＠vue/cli 　- Vue のプロジェクトの管理ツールです

Firebase を利用する場合: firebase-tools - firebase を利用するためのツール

$ npm install -g create-react-app

$ npm install -g ＠vue/cli

$ npm install -g firebase-tools

他にも便利なモジュールは沢山ありますが当面はこれくらいで良いかと思います。

最後の仕上げです！

前回触れていますが、PowerShell でスクリプトを実行するには、標準の設定からセキュリティの設定を変更する必要があります。

$ Set-ExecutionPolicy -ExecutionPolicy Bypass -Scope CurrentUser

この設定の変更を行なっていないと、PowerShell 上でスクリプトを実行するとエラーになります。 （コマンドプロンプト[cmd.exe]は使えます）

Web ブラウザにも拡張機能（Extension）を入れておくと便利です。

＊　Markdown Viewer

＊　React Developer Tools

＊　Redux DevTools

＊　Vue.js devtools

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

まとめ

Windows の PC を持っていれば、Web 開発は簡単に始められます。 現在では、開発に利用するアプリは無料のものでも高機能で効率的に開発できます。これらのアプリをインターネットからダウンロードして PC にインストールすれば Web 開発が可能になります。

まずは、手持ちの Windows の PC を Web 開発様に設定して、準備が整ったところでプログラミングの動画をインターネットで検索して学習を始めれば今日からでも Web 開発をスタートできます。