Web系開発者を目指す方向けPC&開発環境(2021年版)

この記事の目的

この記事では、Web 系開発者を目指す方に向けておすすめの PC と開発環境をご紹介します。

ただ PC を列挙するだけではなく、私がこれらを選ぶ理由や私のような Web 系開発者がどのようにそれを使っているかも説明したいと考えています。

PC と開発環境は Web 系開発を行う際、最初にそして最も長く触れる部分です。
これらについて理解を深めることは効率よくスキルを身に着ける上で有用です。

そして、ご自身が働く姿を想像し、ご自分の志向や適性にあった職場を見出す手助けともなります。

著者について

私は日本で 10 年以上 IT 開発者として過ごしてきました。

近年は主に Web システムの設計や開発に携わっており、以前には金融や製造などのエンタープライズシステムに携わったこともあります。

今回ご紹介する PC と開発環境の組み合わせはそんな私の経験に基づいています。

先に結論

仮に「0 から PC と開発環境を揃える」場合のおすすめ構成を書きます。

ただし、今あなたが持っている PC がこれらの通りではないからといって、今すぐ買い直す必要はありません。

この記事を読み、今お手持ちの PC を活用する方法や、次に PC を買う際の参考としてください。

1 台目の PC は Intel 製 CPU が載ったノート型 Mac をおすすめします。

モデルや画面サイズはお好みで、ただし 16GB 以上のメモリと予算が許す限りのストレージを載せてください。

もし 2 台目の PC を持つのであれば、BTO または自分で組み立てたデスクトップ型の Windows PC が良いでしょう。

これらはメモリやストレージを安価かつ柔軟に拡張できます。

またぜひ AWS, Azure, GCP 等のクラウドサービスを試してください。

これらのクラウドサービスはアカウントを持つだけなら費用は発生しませんし、わずかな金額で一時的な開発環境を作ることができます。

1 台目: ノート型 Mac

もしあなたが Web 開発のための PC をこれから購入する場合、まずは MacBook Air あるいは MacBook Pro といったノート型の Mac を 1 台持つことをおすすめします。

しかし安くはない買い物です、2 年〜5 年程度使うことを想定して予算を検討してください。

まず優先すべきは前述の通り 16GB 以上のメモリとできる限り多くのストレージです。
その他、CPU 性能、画面サイズ、USB-C ポートの数なども気になるポイントではあります。

しかし、CPU 性能はそもそもノート型である以上限られます。
もし本当に高性能な CPU が必要だとわかっている場合は後述のようなデスクトップを併用することをおすすめします。

次に画面サイズですが、本体のディスプレイだけではなく別途ディスプレイを接続してマルチディスプレイで使うこともできます。
したがって価格や持ち歩きやすさを考えて選ぶと良いでしょう。

私もそうですが、自宅やオフィスで外部ディスプレイを接続して使っている Web 開発者は大勢います。
もしマルチディスプレイでの使用を予定している場合は、購入前に接続可能なディスプレイの枚数を確認してください。

USB-C ポートは多いに越したことはありませんが、マウスやキーボードであれば USB ハブを使うこともできますし、Bluetooth での無線接続もできます。

なぜ Mac をおすすめするのか

私が、これから Web 開発を始める方にまず 1 台目として Mac をおすすめする理由を 3 つご説明します。

1. Web 開発のための情報が多い

Mac は Apple 社が単独でハードウェアと OS の両方を開発し販売しています。
そのため世界各国で様々なメーカーがハードウェアを開発している Windows PC と比べるとラインナップが限定的で世界中で同じモデルが流通しています。

これは多くの選択肢を自由自在に組み合わせてこだわりたい場合には物足りませんが、一方で多くのメリットももたらします。

その代表的なメリットは情報量です。

Mac には数少ないしかし世界共通の選択肢しかないため、Mac で Web 開発を始めるための多くの情報を得ることができます。

また、ある分野に初めて挑戦する時には多くのトラブルに遭遇します。
それらは慣れてしまえば切り分けも解決も容易かもしれませんが、まだ慣れていない場合は時間の面でも精神的にも大きな足かせとなります。

しかし、特に初期に遭遇する多くのトラブルは、すでに誰かが経験済みで解決方法もわかっていることが多くあります。

そのようなトラブルと解決は、同じ条件の人が多ければ多いほど事例も多くなります。
そのため Mac の特定のモデルにまつわるトラブルは、先駆者がすでに Blog や Q&A サイトなどでその解決方法を書いてくれていることが多くあります。

あなたも Mac 選ぶことで、そのようなたくさんの解決方法を活用できます。

2. Web 開発のエコシステムが揃っている

Mac には macOS という現代の Web 開発に向いた UNIX 系 OS が最初から搭載されています。

そして現在の Web システムはそのとても多くが Linux という OS 上で提供されています。

世界最初の Web サイトもそうでしたし、Facebook や Twitter も UNIX ライクな OS 上で提供されています。

The birth of the Web

あなたが今後開発する Web システムもそのほとんどを Linux 上で動かすことになるでしょう。

そのため、Linux 上で動作させる Web システムを開発するための環境として、同じ UNIX 系 OS である Mac と macOS は有力な選択肢です。

そして前述の通り、限られた環境を世界中の開発者が使っているため多くのツールや仕組みが提供されています。
例えば私や私の同僚は macOS 向けパッケージマネージャである Homebrew でインストールできる数々のツールチェインを使っています。

またこのように UNIX ライクなエコシステムが必要な一方で、次のようなアプリケーションが必要になることも多くあります。

  • Editor / IDE (Integrated Development Environment)
  • Graphics Editor
    • Adobe Photoshop, Figma, etc.
  • Office Suite
    • Microsoft Office

macOS であれば、これらのアプリケーションと UNIX ライクなツールチェインの両方を使うことができます。

3. 開発できるシステムが多い

Web 開発について学ぶうちに、もしかすると Web 以外の開発に興味を持ったり、あるいは仕事として関わる機会が出てくるかもしれません。

例えばあなたがとても良い条件で採用されかけたとして、担当者に「Web 開発だけではなくスマートフォン向けアプリケーションも勉強しながらで構わないから挑戦してほしい」と言われた場合どうでしょうか。

スマートフォン向けアプリケーションによほどの恨みでもない限りは挑戦したいと思うのではないでしょうか。

スマートフォン OS のうち、Android 向けアプリケーションは macOS と Windows どちらでも開発できます。
しかし iOS アプリケーションの開発には現実的には Mac と macOS が必要です。

また、仮に macOS と Windows、2 つの OS が必要になった場合、仮想化と呼ばれる技術を使って macOS 上で Windows を動かすことができます。
つまり Windows 向けにしか提供されていないソフトウェアや Windows 向けアプリケーションの開発も、Mac があれば一応はできます。

一方で、Windows 上で macOS を動かすことや、Windows 上に Mac と全く同じ iOS 開発環境を構築することは Apple 社の規約により許可されていません。

そのため、Web 開発を中心にスマートフォン向けアプリケーションの可能性も考えるのであれば Mac は良い選択肢と言えます。

一方で、VR アプリケーションや 3DCG を多用したゲームの開発などは Windows の方が向いているでしょう。

Apple Silicon はまだおすすめしません

Apple 社は長らく Intel 社製の CPU を使ってきましたが、2020 年になって「Apple Silicon」と呼ばれる自社製 CPU を使う方針を打ち出しました。

Apple announces Mac transition to Apple silicon

従来搭載されていた Intel 製 CPU が Windows PC と共通であったのに対し、この Apple Silicon は Arm 社の技術を基盤にした iPhone や iPad に搭載されているものに近い CPU です。

開発者観点では CPU の「命令セット」が変わるため、リリース当初には色々なツールが動かなくなるなどの混乱が予想されます。

また、当然ながら当初は利用者自体が少ないため、色々な手順やトラブル解決の情報量も限られます。

Apple Silicon が搭載された Mac は早ければ 2020 年末に発売されると噂されていますが、数ヶ月から 1 年ほどはエコシステムの成熟を待ち、従来の Intel 製 CPU が搭載された Mac を使うことをおすすめします。

Apple unleashes M1

なぜデスクトップではなくノートをすすめるのか

「人に習う」ことは何かを学ぶ上でとても良い方法です。

1 台目の PC としてデスクトップではなくノートを選べば、もし何か問題に遭遇しても詳しい人に実際にあなたの PC を見てもらい的確なアドバイスをもらえるでしょう。

Apple Store には Genius Bar がありますし、Mac 以外の PC でも PC を丸ごと容易に購入したお店の窓口に持っていけることはサポートを受ける場合の大きな利点です。

何か周辺機器を購入したいときも、ノートであれば実際にお店に持っていき「この機器はこの PC に合いますか?」と質問することができます。

また、勉強会やハンズオンに持っていける点もノートのメリットです。

さらにもしあなたが何か Web やその他のアプリケーションを開発し、面接でデモをしたい場合、ノートであれば持ち込んで見せることもできます。

もちろん副次的要素として、カフェやあるいは自宅の違う部屋で気分転換をしながら使える点もメリットです。

このように「気軽に持ち運べること」には大きなメリットがあるので、1 台はノート型の PC を持っておくことをおすすめします。

また Web 開発観点では、昔ほどノートとデスクトップの性能差異は問題になりません。
実際、ノート 1 台だけで全てを賄っている Web 系開発者もおられます。

2 台目: BTO/自作 Windows PC

前述の通りノート PC1 台で全てを賄うことはできます。
しかし、もし 2 台目の PC を検討する場合、次のようなデスクトップ PC はおすすめです。

自作

新品の PC を入手する上で最も柔軟かつ安価になり得る方法です。
自作といっても PC を作る際に必要な工具はプラスドライバー程度です。

CPU, メモリ, マザーボード, SSD などを自分で選び購入して、端子をはめこみ、あるいはドライバーでネジ止めして組み立てます。 最近はお店を回ってパーツを買い集めなくても Amazon や他の EC サイトで揃えることができます。

しかしながら初めて PC を組み立てるときは難しく感じるかもしれません。

また組み立てる際に多少のトライ&エラーはつきものですし、場合によってはパーツを壊してしまうこともあり得ます。

そのような時間やリスクが見合わないと感じる場合は次の BTO がおすすめです。

また PC パーツを扱うお店では、あらかじめ PC1 台に必要なパーツ一式をセットとして販売している場合もあります。

パーツ選択に自信がない場合や時間をかけたくない場合には良い選択肢でしょう。

BTO

ショップブランドとも呼ばれます。

これは前述のような自作向け PC パーツを、お店が選び組み立てた状態で販売してくれる方式です。
そのため、パーツ代に組み立て工賃を加えた程度の費用で最新性能の PC を入手できます。

最近の事情に詳しくないのですが”BTO”で検索すると多くの EC サイトが出てきます。

多くは「コストパフォーマンス優先」「高性能」「ゲーム向け」などわかりやすくグレードをつけて販売されていますので好みに合うものを選ぶことができます。

なぜ自作/BTO をおすすめするのか

なぜ有名メーカー製の PC ではなく自作や BTO をおすすめするのでしょうか。

もちろんすでにメーカー製 PC を使っている場合、無理に買い替える必要はありません。
またメーカー製 PC をお得に入手できることもあるので、そういった機会を活用するのも良い方法です。

しかし特に自作や BTO の PC を 2 台目として持つことには次のような利点があります。

ノートの母艦として性能とデータをオフロードする

2020 年現在のノート PC の性能は十分に高く、ちょっとした Web 開発であれば困ることはありません。

しかしノート型 Mac はメモリやストレージの増設ができませんし、Windows PC であってもノートへの増設には限度があります。

そこで別にデスクトップがあれば古いデータをアーカイブしたり、重い処理をデスクトップ分散することができます。

特に自作や BTO の PC は拡張性が高く、パーツを追加することでストレージ容量を増やしたり、接続できるデバイスを増やすことができます。

もちろんノートとデスクトップの 2 台を併用するためには簡単なネットワークの設定が必要ですが、それ自体は多くの職場のサブセットであり、身につけて役立つ知識です。

ノート PC 故障時の代替になる

昨今の物流の状況もあり、ノートの修理にはかなり時間がかかることがあります。
もし PC がもう 1 台あれば修理を待っている間にも作業ができます。

そしてその 2 台目は、自作や BTO であれば仮に壊れたとしてもパーツを買ってきて差し替えるだけで修理できます。

より快適な開発環境を作れる

開発に慣れると複数のディスプレイを使ったり音楽を聴きながらコードを書いたりしたくなるかもしれません。

そのような場合、デスクトップ PC のグラフィックカードを交換して何枚ものディスプレイが映るようにしたり、ストレージやメモリを増設することができます。

なぜ Windows PC をおすすめするのか

1 台目として Mac をおすすめしたにも関わらず、2 台目に Windows PC をおすすめするのはなぜでしょうか。

その理由はコストパフォーマンスと拡張性です。

ほとんどの Mac は購入後にストレージの交換ができません。
ストレージが基板に半田付けされているためです。

また購入時にストレージを最大まで増設した場合、PC1 台を買えるほどの価格が上乗せされます。

例外は Mac Pro で、これはストレージを交換できますが大型な上に一番安い構成でも 50 万円を超えます。
Web 開発用途としては適していないでしょう。

一方で、Windows PC であれば数万円から入手可能です。
また Mac と違ってパーツ単体で購入と交換が可能なので、必要に応じて少しずつパーツを交換して性能を上げていくことができます。

ただし Windows 自体に関して次の点を知っておく必要があります。

Windows ライセンスの種類

私は Visual Studio Subscriptions を使っており、この項目について詳しくありません。わかりやすい記事があれば教えてください。

Windows は有償の OS でそのライセンスにはいくつかの種類があります。
ライセンスによっては特定の PC やパーツとの組み合わせでしか使えないので注意が必要です。

Windows Home か Windows Pro か

Windows にはいくつかのエディションがあります。
通常はより安価な Home エディションで十分です。

しかしもし Pro エディションを使うと、開発観点では次の機能が便利かもしれません。

1 つは Hyper-V です。

これは Microsoft 製の仮想化の仕組みで、Windows 上で Linux などの他の OS を動かすことができます。

Home エディション上で仮想化機能を使う方法もあるようですが、Pro エディションなら設定や構築をがんばらなくてもすぐに仮想化機能が使えます。

もう 1 つは Remote Desktop です。

Pro エディションであれば Remote Desktop を用いて他の PC からログインできます。
例えばリビングに居ながらノート PC を使って書斎のデスクトップでちょっとした操作をする場合に便利です。

またデスクトップ PC からディスプレイやキーボードを取り外して、机の裏に隠したままサーバー代わりに使うこともできます。

クラウドサービスの利用

最後のおすすめはクラウドサービスを使ってみることです。
クラウドサービスは、少なくとも 1 台の PC があれば試せます。

昨今クラウドサービスが使われないことはかなり減っています。
こと Web システムに関していえば、官公庁や銀行に至るまでクラウドサービスが活用され始めています。

あなたが今後働く会社でもきっと何かしらのクラウドサービスが使われていることでしょう。

ガートナーによれば 2019 年のクラウドサービスは次の順でシェアを持っています。
Gartner Says Worldwide IaaS Public Cloud Services Market Grew 37.3% in 2019

  1. AWS: 45.0 %
  2. Azure: 17.9 %
  3. Alibaba Cloud: 9.1 %
  4. Google Cloud Platform: 5.3 %
  5. Tencent: 2.8 %

私は AWS, Azure, GCP を使ったことがありますが、これらは多くの企業でも使われており、また個人でもクレジットカード 1 枚で使い始めることができます。

クラウドサービス自体やその色々な使い方は機会があれば説明したいと思いますが、1 つの使い方としてクラウド上で仮想の Linux を起動し Web 開発環境としても使うことができます。

これはクラウドの一番基本的な使い方で、費用も 1 時間あたり数円から試すことができます。

ぜひ 2020 年代の Web システムに慣れる上でも体験することをおすすめします。

クラウドサービスを使う上での注意

クラウドサービスはとても便利ですが、2 つ注意点を挙げます。
どちらも費用に関することです。

1 つは、使い終わったリソースを止めることです。

クラウドサービスの契約は基本的に、Linux 仮想マシンなどのリソースに対しての時間課金です。
1 時間ほんの数円の Linux 仮想マシンでも、1 ヶ月ずっと起動したままにしておくと数千円の費用が発生します。

使い終わったリソースは停止や削除を行い、費用が表示される画面を操作の当日だけではなく定期的に確認しましょう。

発生した費用をメールで通知する設定も有用です。

もう 1 つは、認証情報を漏洩させないことです。

クラウドは世界中どこからでも使えます。
それがあなたの自宅や職場の PC と違って便利な点でもあり危険な点でもあります。

あなたが発行した認証情報があれば、誰でもがあなたになりすましてクラウド上でリソースを作ることができます。

例えば誰かがあなたが契約したクラウドサービスで好き勝手に暗号通貨を採掘し、その費用は全額あなたに請求される危険性があります。

私自身は幸いにも経験がありませんが、認証情報を書いたままサンプルコードを公開してしまう例は毎年のように耳にします。

世の中には認証情報を狙っている人や組織があり、彼らは瞬時に漏れた認証情報を入手します。

認証情報を漏らさないよう細心の注意をはらうべきです。

その他の方法

その他、ややマニアックかもしれませんが安価な選択肢に見える方法を紹介します。

Linux プリインストール PC

いくつかの PC メーカーがあらかじめ Linux がインストールされた PC を販売しています。

私は購入したことがないのですが、Web システムが Linux 上で動いていることを考えると、開発環境としては理想的に見えます。

しかしながら Web 開発に関連して必要になるかもしれない、いくつかのアプリケーション、例えば Adobe Photoshop や Microsoft Office などが使えない点は大きな足かせとなり得ます。

またその出荷台数の少なさから世の中に極めて情報が少ない点も不安要素です。

多くの Linux OS は無償で入手できますので、お手持ちのデスクトップ PC に Linux をインストールすることはいつでもできます。

また Virtual Box, Hyper-V などの仮想化ソフトウェアを用いて Linux を試すこともできます。

いずれも Linux がインストールされた PC を購入するよりは安全な方法でしょう。

Chromebook

Chromebook は安価かつ軽量なノート PC です。

主に Chrome ブラウザを使うためのノートで、Chrome OS と呼ばれる Linux がインストールされています。

ただ Chrome OS は Linux としてみると変わった OS で、Web システムの開発や動作に使う LInux とはやや異なると考えた方が良さそうです。

また前述の Linux プリインストール PC 同様、Photoshop や Microsoft Office のようなアプリケーションが使えない点も課題です。

Raspberry Pi

Raspberry Pi は、元々教育用に設計された安価なコンピュータです。

高性能なモデルでも 1 万円程度で入手でき、ディスプレイやキーボードを接続して PC のように使うこともできます。

しかし Raspberry Pi には Arm 社の技術を基盤とした CPU が搭載されており、PC やこれまでの Mac とは命令セットが異なります。

そのため PC や Mac で使える多くのアプリケーションが動かないことはもちろん、Web 開発で使われるツールチェインやライブラリが対応していないことも多いでしょう。

最後に

この記事では、私の経験と試行錯誤を元に現在最もおすすめできる Web 開発向け PC と開発環境をご紹介しました。
もし機会があればそれぞれの項目についてより詳細で具体的な説明を書きたいと思っています。

繰り返しますが、これらはあくまでおすすめであり、全てをこの通りにしなければ効果が見込めないものではありません。

すでにお持ちの PC やお手元の開発環境に合わせてアレンジしていただき、より効率よくスキルを身につけるために役立てば幸いです。

また、記事で書いたような環境を整えることで、あなたが求める働き方や開発スタイルがより明確になっていくはずです。

あなた自身が Web 系開発者として目指す姿が明確になればなるほど、自分に適した職場をより精度高く探すことができます。

この記事で紹介した内容が、そのようなあなた自身の志望を明確にするお役に立つことを願っています。