フロントエンドエンジニアはどんなPCを使えばいいのか。
WindowsがいいのかMacがいいのか。
デスクトップPCがいいのか、ノートPCがいいのか。
スペックはどれくらい必要なのか？
現役エンジニアの僕さえ、今新しいPCを買い替えるとなるとかなり悩む。
ただ新しいPCを買うのって非常にワクワクする楽しいイベントなので、悩んで悩んで自分に合ったPCを買っちゃいましょう！
これからフロントエンドを学習するのと同時にPCの購入をする人、すでに学習をしていて新しく買い換えようと思っている人はこの記事を是非参考にしてもらいたい。
格安PCや中古を買うのはNG！
大前提として、激安PCを買うのはやめよう。
大体ディスプレイがしょぼい、解像度が低すぎて見にくい使いにくい。
後で絶対後悔します。
そしてPCに詳しい人以外は中古もやめよう。
PCは表記上のスペックは同じでも、作られた時代によって性能が全然違うのだ。
同じcore i 5でも２年前のcore i5と今年作られたcore i5でも倍くらい性能が上がっているのだ。
なので最初のPC選びは現行品の新品を買うようにしよう。
ただし、メーカー公式サイトでラインナップされている1世代型落ちくらいなら全く問題なし！
予算と相談しながら決めていこう。
Windows or Mac
WindowsとMac、どちらがいいのかといういつになっても終わらない論争。
フロントエンドに限らずweb系（デザイナー含む）の業務であればどちらでも問題はない。
Windows、Macどちらかでしかできないようなものはない。
アプリケーション単位で見れば、Windows、Macどちらかにしか対応していないものもあるが、ほとんど代替えのアプリケーションが存在しているので問題ないです。
（ただしPCゲームをやるのであればWindows一択）
なので結論を言えば好きな方を選べばよい！
ただ、これを言ってしまうとつまらないので、僕目線で選び方をみていこう。
フロントエンドに限らずweb系技術の情報はMac前提の記事が多い
初学者だけでなく、プロのエンジニアも技術に関してwebで調べることは日常茶飯事。
基本的はHTMLやJS、CSSなど情報であればMacであろうと、Windowsであろうと全く同じなのでいいのだが、
必要なアプリケーションや、コマンド（ターミナル）を使って何かをインストールや設定をする場合、MacとWindowsで微妙に違ってくる。
その辺りの情報を調べるとやはりMacでの設定やインストールの情報が非常に多い。
ググるコツや、コマンドラインの使い方の基本を理解していれば、Macの情報をもとにWindowsで操作することも可能だが、右も左もわからない状態の時にはかなり厳しいはず。
Youtubeやドットインストール、Udemiyなどの動画口座みたいなものも講師がMacを使っていることが多い。親切な動画講座はMac、Windows両方でもセットアップを解説しているものあるが、そうでないものある。
現時点でWindowsへのこだわりがない場合は、Macを買ってしまった方が学習しやすいです。
Macのほうが選びやすい
特にPCスペックなどの知識があまりない場合、WindowsPCは非常に選ぶのが大変である。
WindowsPCは多数のPCメーカーが色々なシリーズ、スペックのものを出しているからである。
それに比べるとMacはAppleというメーカーからしか出ていない。なのでApple storeか公式オンラインストアのなかから選べば良いのだ。
そしてある程度のスペックと品質が保証されているので、ハズレを買ってしまうことが少ない。
Macの方がPC初心者に使いやすい
フロントエンドとは別の話になるが、PCとしての解りやすさはMacのほうが圧倒的だと思う。
世間一般的に見ればWindowsを使っている個人、会社が圧倒的に多い。
だがしかし！
使いこなしている人はごくわずかだと思う。
仕事で使う機能やだけを使っている人が多数で、PCの根本を理解している人は結構少ない。
どれだけの人がWindowsのフォルダアプリの正式名称「エクスプローラー」という名前を知っているだろうか。
デスクトップにショートカットアイコンがずさんに並んでいるのを見たことあるんじゃないでしょうか？
そして、ショートカットアイコンが何を意味しているの理解していないので、ファイルのディレクトリという概念を知らないパターン。
これはOSのUIが悪いがためにそのような状況になってしまっているはず。
プログラミングはファイルのディレクトリ構造が非常に重要なので、デスクトップにファイルがバラバラに置かれているような管理は大問題である。
そいういう意味ではMacはOSのUI（ユーザーインターフェイス）が非常に優れていて解りやすい。
僕はApple信者ではないが、MacOSのUIは非常に使いやすいと思う。
コンピューターに弱い人ほどMacを使うべきだと思っている。
そしてもちろん
初心者向に解りやすい=プロ向けではない
Mac=初心者用
なんてことはない。プロのエンジニアのMac率は高いです。エヴィデンスはない。
Windowsに慣れている、Windowsが好きであればWindowsでOK！
上ではMacを薦めるようなことを書いたが、Windowsでも全く問題ないです。
現場でWindowsを使っている人や会社単位でWindowsを採用している企業もあります。
Windowsのメリットは、Macの同スペックで比べた場合、圧倒的に安い。
ただ最近のMacはインテルCPUではなく、自社のMシリーズ（Apple silicon）を使っているので比較がしずらい。
「Macなんてチャラチャラしたものは好きじゃねーんだよ！」
って人はWindowsを使いましょう。
Macを買うべき人、Windowsを買うべき人
Macを買うべき人
- 現時点でPCについてあまり詳しくない人
- windowsへのこだわりがない人
- 比較的に楽に学習を進めたい人
- りんごマークが好きな人
Windowsを買うべき人
- Windowsが大好きな人
- Windowsに慣れている人
- なるべく安くPCを買いたい人
- りんごマークが嫌いな人
ノートPCかデスクトップPCか問題
僕自身はあえてデスクトップPCを使っているが、基本的にはノートPCをお勧めしたい。
学習中は気分転換にカフェや自分の部屋以外でやりたいときもあるでしょう。
また、学生であれば学校に持って行ったり、エンジニアの知人などいるようであれば直接コードを見てもらったりすることも可能だからだ。
本体とディスプレイ一体型デスクトップPC（iMacなど）のデカいディスプレイの方が作業がしやすいって人もいるが、ノートPCでも外部ディスプレイを繋げば大きいディスプレイに表示することも可能です。その分ちょっと予算が掛かってしまいますが、pc本体より長く使えるので初期投資としての価値は十分にあります。
もちろんデスクトップPCにもメリットがあるので、メリットデメリットを簡単に説明しておきます。
基本的には表裏一体だ。
ノートPCのメリット
- 好きな場所で学習、仕事ができる
- 持ち運びができるゆえにプログラミング以外にもいろいろな使い方ができる
ノートPCのデメリット
- 価格がデスクトップに比べると高い
- バッテリーがへたると交換しなければいけない
- デスクトップに比べると壊れやすいかも
- 拡張性が少ない
デスクトップPCのメリット
- 価格がノートPCに比べると安い
- 基本的にノートPCよりハイスペック
- ディスプレイ一体型のiMacはめちゃくちゃハイスペックなディスプレイを使っているので物凄くお得
- メモリの増設が可能（昨今のデスクトップPCはできないかも…）
デスクトップPCのデメリット
- 持ち運べない、自宅などの決まった場所でしか作業できない
正直デスクトップPCのデメリットは基本的に持ち出せない（気合がある人は持ち出してどうぞ）こと以外ににデメリットがないのだが、やはり持ち運べる、持ち運べないの差はかなりでかい。
僕はデスクトップPCを使っていると言ったが、サブPCとしてノートPCも持っている。
絶対外に持ち運ぶことがないと断言できる人以外はノートPCを選んだほうが幸せになれる。
ノートPCを買う場合はなるべく軽いモデルを選ぼう、そしてテンキーは不要！
ノートPCならなんでもいいかというとそうではない。せっかく持ち運ぶことのできるPCであれば機動力が重要だ。
デカくて重いノートPCはノートPCとしての持ち運べるメリットが一気に下がってしまう。
キーボードのテンキーは便利なのだが、テンキー付きのモデルはデカいのだ…
デカいとカバンに入れにくいし、重いし、持ち運ぶということをしなくなってします。
なのでなるべく軽く小さいモデルを選ぶべし。
余談だが、僕は以前MacBook 12inchという1kgを下回るものを持っていたが、最高だった。
スペックは低かったが、ちょっとした作業をする分には問題なく、とにかく持ち運ぶストレスが最小限に抑えられたのだ。
出先で使うかどうかわからないが、一応持って行こうかなって気にさせてくれたモデルだった。
今は壊れてしまったので押し入れ行き。
スペック（性能）の選び方 2023
これが結構難しい。
スペックが高いに越したことはないが、てんこ盛りのハイスペックPCは物凄く値段が高い。
いくらでもお金がある人はこれ以上ないくらいハイスペックPCを買っていただいて大丈夫。
ただ全ての人がそういうわけにもいかないと思うので、これからプログラミング、フロントエンドを勉強してお金を稼ごうという人に向けたちょうどいいスペックを見ていこう。
見ていくのはCPU、GPU、メモリ、ストレージ（SSD、 HDD）、インターフェースポートの数や種類（USBやSDカードスロットなど）
※下で書いてあるものは2023年4月時点でものです。
フロントエンド初学者向けPCスペック選び
CPU
CPUとはPCの頭脳。チップ、プロセッサなんて呼ぶ場合もある。これのスペックが高いと、重たいアプリを開いたり、画像ファイルの書き出しなどが速くなる。厳密に言えばPCが快適に動くかどうはCPUの性能だけではないが、非常に重要なパーツスペックなのでしっかり選ぼう。
windowsであれば、Intel core i 5〜のものを選べばひとまずは問題ない。
core i 3 < core i ５< core i 7 < core i 9
↑のように性能が上がっていくが、値段もガッツリ上がっていくので、とりあえずはcore i 5で問題ない。
世代よっても性能が変わってくるので新しい世代のIntel cpuを積んでいるものを選んでほしい。
Macであれば、
M1 < M2 < M2pro < M2max < M2ultra？
↑のように性能が上がっていく。M2pro以降はかなりお高いのでM2であればOK。
M1は一世代まえの型落ちになるので、M2を選んだ方が幸せ。
GPU
グラフィックボード、略してグラボと言われるやつ。グラフィック版CPUみたいなもの。動画編集をやるような人であればこだわりたい箇所だが、webエンジニア、プログラマーであれば気にしなくてOK。
強いうなら、ノートPCの場合外部ディスプレイへ表示できるかどうかを確認しておこう。外部ディスプレイに表示するのもGPUによるものだ。
メモリ
メモリはPCが裏側で一時保存する容量のこと。
あまりピンとこないと思うが、よく言われているのが、作業机みたいなものをイメージしていただきたい。
メモリ容量が大きい＝広い机
机が広いとたくさんものを置けるでしょ？たくさんのノートや教科書参考書、ハサミやペン、化粧道具や髭剃りを置いたり。
メモリ容量が小さい＝小いさい机
置けるものが限られる。ノート1冊と参考書しか置けないような感じ。
なのでメモリが大きいと、同時に沢山のアプリを開いたり、ファイルを開いたり、ブラウザのタブを開きまくったりしてもPCが固まることが減る。
逆にいうと、メモリが小さい場合、複数のアプリを開いたりした場合、PCが固まるのだ。
初学者であれば最低8GB、欲を言えば16GBあると良い。
windowsPCの場合、買った後に自分でメモリを増やせるマシンもあるので、その場合は最初は8GBを選んで、足りないと感じた時に16GBに増設しよう。
2023年時点のMacはMac pro以外、自分自身で増設するのは不可なので、買う時に気をつけよう。
ストレージ
これは単純にPCに保存できるファイル（データ）の容量。
気をつけなければいけないのが、SSDかHDDか。
必ずSSDのものを買ってくれ！
SSDとHDDではファイルの保存、保存したファイルを呼び出す（開く）ときの速度が全然違うのだ。
そしてSSDの方が圧倒的に速いのだ。
OSやアプリケーションなどPCを動かす全てのものは、SSD又はHDDに保存されていて、PCを立ち上げたり、アプリケーションを立ち上げたり、画像ファイルを開いたりするたびにSSDまたはHDDから関連するファイルを呼び出しているのだ。
PCのストレージがHDDだった場合、その都度遅いのだ…昔はHDDが主流だったため仕方なかったが、SSDが主流の現代においてHDDを選択する理由はないのだ。
基本的に今売られているPCのほとんどはSSDなので問題ない思うが、中古や激安PCの場合 HDDの可能性があるので気をつけてほしい。
それと必要な容量だが、256GBあれば問題ないかと思う。
動画を編集したり、photoshopを使ってガッツリデザインするなどの場合は話が変わってくるが、あくまでwebのフロントエンドを学習する上では256GBで事足りる。
インターフェイスポート
ノートPCの場合、充電をしながら外部ディスプレイ出力できるポート（USB type C, HDMI, Thunderboldのいずれか）があれば問題ない。
SDカードのスロットはカメラで写真をとってそれを取り込みたいという人は必要だが、スマホでしか写真を撮らないという人であればなくても問題ない。
どうしてもSDカードを読み込みたい場合は、外付けのSDカードリーダーを使えば事足りる。
なのでSDカードスロットはあってもなくてもなんとかなる。
初学者へ必要PCスペックをまとめ
CPU
WindowsはIntel core i 5
Macは M2
GPU
ノートPCの場合、外部ディスプレイに出力できればあとは気にしなくてOK
メモリ
8GB、欲を言えば16GB
ストレージ
SSD 256GB
インターフェイス
外部ディスプレイに出力でき、同時に充電できればOK
重量
ノートpcであれば〜1.3kgまでのもの。
もちろんお金を出せるのであればもっと高スペックなものを買ってもよいが、上で書いたスペックであれば学習しながらサンプルのwebページやアプリケーション、ポートフォリオは十分作れます。
実際にお勧めできるノートPC
とりあえずこの辺りを買ったら一通りのことはできるかなというおすすめのPCです。
Windows
| モデル名 | 価格 | CPU | GPU | メモリ | ストレージ | 重量 | 解像度 | インターフェース |
|---|---|---|---|---|---|---|---|---|
| lenovo ThinkPad X1 Nano Gen 1 | ￥154,880 | core i5 第11世代 | CPU内蔵 (インテル® Iris® Xe グラフィックス) | 16GB | 512GB | 約0.9kg~ | 13インチ2160 x 1350 | USB Type-C 3.1 Gen2 x 2 (Thunderbolt4 対応) ヘッドフォンジャック |
| Microsoft Surface Laptop 5 | ￥151,580 | core i5 第12世代 | CPU内蔵 (インテル® Iris® Xe グラフィックス) | 8GB | 256GB | 約1.3kg | 13.5インチ 2256 × 1504 | USB 4.0/Thunderbolt™ 4 対応 USB-C® x 1 USB-A 3.1 x 1 ヘッドフォン ジャック Surface Connect ポート x 1 |
| Dell XPS13 | ￥119,980 | core i5 第12世代 | CPU内蔵 (インテル® Iris® Xe グラフィックス) | 8GB | 256GB | 1.17kg | 13.4インチ 1920 x 1200 | Thunderbolt™ 4（USB Type-C™、DisplayPort、および電源供給に対応）x 2 イヤホンジャックなし |
Mac
| モデル名 | 価格 | CPU | GPU | メモリ | ストレージ | 重量 | 解像度 | インターフェース |
|---|---|---|---|---|---|---|---|---|
| MacBookAir | ¥164,800 | M2 8コア | M2 8コア | 8GB | 256GB | 1.24kg | 13.6インチ 2,560 x 1,664 | USB4 × 4つ |
現役フロントエンジニアの僕のPC
上記で初学者向けのPCを紹介したが、仕事でガッツリ使うとなるとちょっと変わってくる。
何が一番違うとかと言えば複数案件を同時に進行していることだ。
そして重いデザインデータを扱うこと。
複数案件を同時にこなしていると、とにかく沢山のプロジェクトファイルを開いている。そしてデザインデータもほぼ同じだけ開くことになる。
さらにブラウザのタブもめちゃくちゃ開く…
触ってないファイルは閉じればいいじゃんて言われそうだが、僕の場合A案件の作業している途中で、B案件の即時修正対応など頻繁に発生するためプロジェクトファイルを常に開いておきたいのだ。
そうなるとメモリがべらぼうに必要になる。
photoshopデータなども非常に重く、多数のパーツを書き出さなければいけないのでCPUのある程度ものが必要。
PCスペックは生産性に関わってくる上に、なにより精神衛生上ある程度ハイスペックなものを使いたいのだ。
実際に僕が使っているPCは
iMac 2019年モデル
CPU intel core i 9
GPU Radeon Pro 580x 8GB
メモリ 40GB
ストレージ 1TB SSD
なかなかモリモリスペックだ。
40万円弱くらいしたが、おかけで4年前のモデルだがストレスなく使えている。
僕がデスクトップを使っている理由は、結局は作業場いがいで仕事をするをことがほとんどないということと、同じスペックをノートPCに求めると50〜60万、さらに外部ディスプレイ代がかさみ物凄く高額なるからだ。
それと当時のiMacは自分自身でメモリの増設ができたことも選んだ理由だ。（現行のiMacはメモリ増設不可）
ただ次PCを買い替える時はノートPCにしようと思っている。
まとめ
フロントエンド（その他プログラミング）の学習時点であれば、そこまでハイスペックで高額なものを買う必要は全然ないが、激安PCはやめよう。
安いには安い理由がある。高いには高い理由がある。
おすすめは15万円前後のノートPCだが、安い買い物ではないので納得した良いものを買おう！