- フロントエンドエンジニアを目指すために開発環境を整えたい
- どんなパソコンを買ったら良いかわからない
- 手持ちのパソコンで開発ができるか不安
フロントエンドエンジニアになるためには『パソコン』が必要です。でもたくさんの種類があり、スペックも価格も千差万別なので、どれを選んだら良いかわからないですよね。
この記事では 『フロントエンドエンジニア』向けにオススメなパソコンや、選び方を『状況別』にご紹介します。
会社の『パソコン購入担当』の私の基準です
社内のハイスペックパソコンは、全て私が選んだと言っても過言ではないほど、たくさんのパソコン導入に関わってきました。その経験を元にお話させていただきますので、ご安心ください。
【一番オススメ】フロントエンドエンジニア向けパソコン: 2021 Apple MacBook Pro 14インチモデル
まず、予算に制限をつけず、 何でもできるハイスペックパソコンが欲しい場合 は『2021 Apple MacBook Pro 14インチモデル』がオススメです。
多くのエンジニアが絶大な信頼を寄せている『MacBook』のProシリーズの最新版であり、 フロントエンドの開発はもちろん、超ヘビーな動画編集までサクサク行うことが出来ます。
フロントエンドエンジニアが欲しい条件が全て揃っているスペックにもかかわらず、小型で軽量・バッテリー駆動時間が長いため、 これ一つでどこでも開発ができる ようになります。よくカフェでMacを見かけるのは、見た目だけではないと言うことですね。
私自身、自前の開発環境で使っているPCは『MacBookPro』であり、今年で 5年目ですが不調なく使えているほど、コスパが良い です。
日割り計算すると、最高の開発環境が1日あたり150円で手に入る計算です。
【選び方も解説】フロントエンドエンジニアにオススメなパソコン4選
- フロントエンドエンジニアのパソコンの選び方
- 動画編集や画像編集まで行う、フロントエンドエンジニア向け
- ストレスなく開発したい、フロントエンドエンジニア向け
- お手軽な金額でそこそこ快適に開発したい、フロントエンドエンジニア向け
まずはフロントエンドエンジニアがパソコンを選ぶ際のポイントを解説した後、オススメなパソコンをご紹介させていただきたいと思います。
【一番オススメ】フロントエンドエンジニア向けパソコン: 2021 Apple MacBook Pro 14インチモデル【選び方も解説】フロントエンドエンジニアにオススメなパソコン4選フロントエンドエンジニアはノートパソコンを選びましょうフロントエンドエンジニアのパソコンの選び方『スペック』【CPU(プロセッサー)】最新の intel Core i5以上intelAMD【GPU(グラフィック)】 2GB以上【RAM(メモリ)】8GB以上【ROM(ストレージ)】SSD 256GB以上(個人差あり)動画編集や画像編集まで行う、フロントエンドエンジニア向けDAIV 4N [ Windows 11 ]ストレスなく開発したい、フロントエンドエンジニア向けDAIV 4P [ Windows 11 ]お手軽な金額でそこそこ快適に開発したい、フロントエンドエンジニア向けG-Tune P5まとめフロントエンドエンジニアに一番オススメ
フロントエンドエンジニアはノートパソコンを選びましょう
前提として、 持ち運びができるサイズのノートパソコンがオススメ です。理由は、 自由な働き方ができるフロントエンドエンジニアのメリットを活かすことができる からです。
ノートパソコンであれば、自宅だけではなくカフェやコワーキングスペースで開発を進めることもできたり、勉強会やセミナーに参加することもできるようになります。
自宅では 『外部モニター』として大画面出力や2画面出力(デュアルディスプレイ) の環境を用意すれば、更に快適です。
↓ 近年は27インチの大画面モニターも20,000円を切るレベルになってきました。
↓ モニターアームがあれば、簡単に快適な開発環境を構築できます。
フロントエンドエンジニアのパソコンの選び方『スペック』
- CPU(プロセッサー) ... パソコンの頭脳
- GPU(グラフィック) ... グラフィック専用のCPU
- RAM(メモリ)... パソコンの『作業』領域
- ROM(ストレージ)... パソコンの『保存』領域
上記の4項目を注意してみておくと失敗しません。基本的には数字が大きい方が、性能が高いです。性能が高いものを選んでおくほうが、より長く使うことができるため、コスパが良いです。
それぞれ詳しく解説していきます。
【CPU(プロセッサー)】最新の intel Core i5以上
CPUはパソコンの頭脳にあたるパーツです。 性能が高ければ処理速度が早かったり、複数の処理を安定して行うことができます。
有名なブランドとして『intel』と『AMD』がありますが、基本的に 『最新バージョンのintel Core i5』以上 を選んでおけば間違いありません。
それぞれ詳しく解説していきます。
intel
intelはCPUの8割のシェアを占めているトップブランドです。CPUの種類も豊富なため迷ってしまいますが『Core』シリーズのパソコンを選べば間違いありません。
Coreシリーズにはグレードがあり、i3 ➔ i5 ➔ i7 ➔ i9 と高くなっていきます。 フロントエンドエンジニアの開発はCPUに負担をかける作業なので、i5以降であることが望ましいです。
またCPUの品番を見ることで、以下のような情報を得ることができます。
グレード以外に注意すべきなのは『世代』で、同じグレードでも世代ごとにおおよそ20%の性能差があります。
ちなみに『最新のCore i5』と『一世代前のCore i7』を比較した場合、ほとんどのケースで『一世代前のCore i7』のほうが性能が良い場合が多いです。
また、型番以降のアルファベットはサフィックスと言われ、そのCPUの特性を表しています。
ノートパソコンでよく見る『U』のサフィックスを持つCPUは、超低消費電力と引き換えに性能が落とされているモデルですので、重たい処理は得意ではありません。
intel サフィックス | 特性 |
---|---|
表記なし | 通常モデル |
F | GPU非搭載(グラボの後付け必須) |
K | 倍率ロックフリー |
X | 通常よりコア数が多い |
H | ノートPC向けハイパフォーマンスモデル |
U | ノートPC向け超低消費電力モデル |
AMD
AMDは近年シェアを伸ばしているCPUメーカーで『Ryzen』と呼ばれるブランドが有名です。同価格帯であれば、intel製のCPU性能を上回るため『intelに比べ、低価格でコスパが良い』モデルが多いです。
intelのCPUと比べるとマルチタスクが得意で、たくさんのアプリケーションを並行でこなす作業に向いています。
AMDも品番を見ることで世代等を確認することが出来ますが、Ryzen4000シリーズには第三世代のCPUが搭載されています。したがってRyzen5000シリーズは、第四世代のCPUであることに注意が必要です。
また、intel同様、型番の後ろにサフィックスがついていますが、 『G』を持たない品番にはGPUが非搭載ですので、別途グラフィクスボードが必要です。 ※ intelのCoreシリーズには『内蔵グラフィックス』という、最低限のグラフィック領域が確保されています。AMD Ryzen シリーズの『G』を持たない品番には、これすらありませんので、別途『グラフィックス』の記載があるか必ず確認しましょう。
intel サフィックス | 特性 |
---|---|
表記なし | 通常モデル |
G | GPU搭載モデル |
X | 通常モデルよりもベースクロックが早い |
XT | Xよりも早い |
H , HS | ノートPC向けハイパフォーマンスモデル |
U | ノートPC向け低消費電力モデル |
E | ノートPC向け超低消費電力モデル |
【GPU(グラフィック)】 2GB以上
GPUとは動画や画像など 『グラフィック専用のCPU』 で、主にPCゲームや動画編集・画像加工の際に必要になります。
フロントエンドエンジニアに関しては、CPUや後述のRAM(メモリ)と比べると優先順位は落ちますが、 最低でも2GB以上は欲しい ところです。
理由は、フロントエンドエンジニアとして扱う可能性がある、PhotoshopやIllustratorなどのAdobe系ツールの最小要件が『DirectX12をサポートしているGPU、1.5GBのGPUメモリ』であるからですが、あくまで『最小要件』ですので、ギリギリ動く程度です。
仮にWebデザインも並行して行っていく場合や、そのパソコンを長く使い続けるつもりなら、 GPUは4GB以上をオススメ いたします。
【RAM(メモリ)】8GB以上
RAMはRandom Access Memoryの略でメモリーとも呼ばれます。データやプログラムを一時的に保存する役割を持ち、デバイスの電源を切るとRAM内に一次保存されたデータは消えてしまうことが特徴です。
容量が大きいほどパソコンの動作が快適になったり、複数の処理を同時に行うことができるようになります。
よく『作業用の机』で例えられますが、最近だと以下のようなイメージです。
4GB ... みかん箱(スマホ程度)
8BG ... 学習机(単一の作業なら、不便なく使える程度)
16GB ... 会議用の机(現状は不満なく使える)
※ 32GB ... 現状は動画編集や写真の現像を行う場合など、特殊な場合のみ
メモリが不足するとパソコンの動作が重くなったり、フリーズしてしまうこともあります。
パソコンによっては、メモリを追加したり交換できる機種もありますが、パソコンに慣れていない方が扱うのは大変危険です。自分の環境に合せて快適なメモリ容量を選びましょう。
【ROM(ストレージ)】SSD 256GB以上(個人差あり)
ROMはRead Only Memoryの略で、記録された情報の読み出し飲みが可能な記憶装置です。情報の記憶に電源を必要としないため、常にデータを保存し続けることができます。
パソコンの保存容量にあたるため、もちろん数字が大きい方が良いですが、 外付けドライブやクラウドサービスを利用することで、代用できるケースもあります。
これからパソコンを購入する場合はメインのストレージ(Cドライブ、WindowsのOSが入っているストレージ)が『HDD』ではなく 『SSD』を選びましょう。
HDDは保存容量が多い代わりに、読み込み速度が遅いため、あらゆる動作が遅くなってしまします。快適な作業環境を求めるなら、必ず『SSD』のものを選んで下さい。(※近年発売されているパソコンの多くは、SDDがメインストレージになっています。)
動画編集や画像編集まで行う、フロントエンドエンジニア向け
DAIV 4N [ Windows 11 ]
価格 | ¥199,800 |
---|---|
OS | Windows 11 Home 64ビット |
CPU | インテル® Core™ i7-1260P プロセッサー |
GPU | GeForce® GTX 1650(4 GB) |
RAM メモリ標準容量 | 16GB (8GB×2 / デュアルチャネル) |
ROM ストレージ | M.2 SSD 512GB (NVMe) |
パネル | 14型 液晶パネル (ノングレア / Dolby Vision対応) |
端子 | USB3.0 x 2 USB3.1 x 1 Thunderbolt4 × 1 HDMI x 1 カードリーダー |
無線 | インテル® Wi-Fi 6 AX201 (最大2.4Gbps/ IEEE802.11ax/ac/a/b/g/n) + Bluetooth 5モジュール内蔵 |
WEBカメラ | 前面:100万画素 (Windows Hello対応) |
動作時間(標準バッテリー使用時最大) | 約10時間 |
本体重量 | 約1.44kg |
GPUが4GBと高いため、動画編集や画像編集を余裕をもって行うことができるスペックです。グラボが搭載されているにも関わらず、薄型で軽量なため、外に持ち出しやすい点もポイントです。
ストレスなく開発したい、フロントエンドエンジニア向け
DAIV 4P [ Windows 11 ]
価格 | ¥199,800 |
---|---|
OS | Windows 11 Home 64ビット |
CPU | インテル® Core™ i7-1260P プロセッサー |
GPU | インテル® Iris® Xe グラフィックス(内蔵グラフィックス) |
RAM メモリ標準容量 | 16GB (8GB×2 / デュアルチャネル) |
ROM ストレージ | M.2 SSD 512 (NVMe) |
パネル | 14型 液晶パネル (ノングレア / Dolby Vision対応) |
端子 | USB3.0 x 2 USB3.1 x 1 Thunderbolt4 × 1 HDMI x 1 カードリーダー |
無線 | インテル® Wi-Fi 6 AX201 (最大2.4Gbps/ IEEE802.11ax/ac/a/b/g/n) + Bluetooth 5モジュール内蔵 |
LTE | BTOにて選択可能 / SIMカードサイズ : nano SIMカード |
WEBカメラ | 前面:200万画素 (Windows Hello対応) |
動作時間(標準バッテリー使用時最大) | 約10時間 |
本体重量 | 約997g |
グラフィックは抑えめですが、その他のスペックがかなり高く、かなりコスパが良いです。1kgを切る軽さのため、持ち運びがしやすく、LTE(モバイル回線)をオプションで追加する事により、WiFi環境下にこだわらずとも活躍ができる点がポイントです。
お手軽な金額でそこそこ快適に開発したい、フロントエンドエンジニア向け
G-Tune P5
価格 | ¥149,800 |
---|---|
OS | Windows 11 Home 64ビット |
CPU | インテル® Core™ i5-11400H プロセッサー |
GPU | GeForce® GTX 1650(4 GB) |
RAM メモリ標準容量 | 16GB (8GB×2 / デュアルチャネル) |
ROM ストレージ | M.2 SSD 512 (NVMe) |
パネル | 15.6型 液晶パネル (ノングレア / Dolby Vision対応) |
端子 | USB2.0 x 1 USB3.0 x 2 USB3.1 x 1 HDMI x 1 カードリーダー |
無線 | インテル® Wi-Fi 6 AX201 (最大2.4Gbps/ IEEE802.11ax/ac/a/b/g/n) + Bluetooth 5モジュール内蔵 |
WEBカメラ | 前面:100万画素 |
動作時間(標準バッテリー使用時最大) | 約 6.5時間 |
本体重量 | 約2.02kg |
ゲーミングパソコンのカテゴリは、実はフロントエンドエンジニアやクリエイターにもオススメできます。モニターが15.6インチと少し大きく、重量が2kgを超えるため、上位機種より持ち運びには向きませんが、この値段でこのスペックはかなり魅力的です。