よるみる

Web開発にはWindowsよりMacをお勧めするたった一つの理由

Windowsで3ヶ月Web開発をしてやっぱりMacがいいなと思った。

3ヶ月間のWeb開発環境について

在宅勤務が増え、時間に余裕ができたのでWeb開発の仕事を3本受けたのですが、そのとき全てWindowsのみで開発しようと思い開発を行ったのですが、最終的にはMacの方がいいよなと思ってしまったのでその理由を綴ろうと思います。

この三ヶ月で受けたのは主にWordpressのテーマ開発で書く言語としてはPHP、Javascript、HTML/CSSといった感じです。Webアプリを含め、久しぶりのWeb開発を行いました。内容としてはデザイナー会社さんと発注者の間に挟まれての開発だったので、デザイナーさんからはデザイン関連の調整、発注者さんからは、Wordpressの管理画面や全体の構成についての指示を受けて開発をするということで、わりとWordpressのテーマとしては割と多めノブ類に入るPHPやJavascriptを書かないといけない感じでした。

環境としては、上述の通りWindowsで、IDEとして専らJetBrainsのPHPStormにIdeaVimをいれてコーディングを行っています。タスクランナーとしてgulpを使いscssのコンパイルやローカルサーバーにファイルを転送するといったことをしていました。ローカルの開発環境としてはLocal by Flywheelでさくっと環境を作る形で行いました。(wordmoveが使えないのでwordmove環境を用意できる場合はそちらの方がいいなと思っています。)

そもそも、Windowsで開発をしようと思ったきっかけは、HHKBやトラックパッドを研究室に置きっぱなしにしてしまい、MacBook Proをデスクトップ化する環境がないということでした。新型なんちゃらウィルスの影響と進学が重なり、学生証もなく、学校も閉鎖され、キーボードを取りに行くタイミングがありませんでした。

そんなこんなで、Windowsで開発をすることを決めて3ヶ月間3つのサイトをリリースしました。

WindowsよりMacをお勧めしたいたった一つの理由

さて、本題ですが、下の写真を見てください。Macで同じコードを左からSafari、Firefox、Chromeで表示したものになります。

web開発ブラウザの比較

最近のレスポンシブサイトではよく見かけるハンバーガーメニューの実装の簡易的なものなります。見ていただければすぐにわかるかとおもおいますが、Safariだけ表示されなければいけないメニューが表示されていないのがわかるかと思います。

Web開発、主にCSSコーディングをしたことがある人はわかるかと思いますがブラウザによって、対応していないstyle要素があったり、親子関係の縛りが違ったりします。特にSafariはChromeやFirefoxなどと比べると親子関係がシビアで、ポジションや要素の幅や高さでずれることが多々あります。しっかりと親子関係を理解してコーディングをしていれば問題は置きづらいかと思うのですが、簡単なことで人はミスをするので現実出来ではなくTry&Errorで訂正していくのがいいかと思っています。

さて、ここまでるの読んでいただければ大体予想ができるかと思いますが、ずばり、MacをWeb開発でお勧めする理由はSafariが使えるということがあるからです。近年のweb開発ではスマートフォンやタブレットも意識したレスポンシブデザインを作成する必要がありますし、何より、iPhoneのシェア率も高いため、Safariを使っている人が多いということが挙げられます。また、MacOSのデフォルトのブラウザもSafariであるため、MacのSafariで上の写真のように表示されない要素が出てしまっては大変な問題になります。

実際に、開発をしている最中にデザイナーさんに数回、Safariで表示されません!や、サイズがおかしくなっています!といった指摘を受け、いそいでMacでSafariを開いて確認しているのを覚えています。iPhoneのSafariでおかしな挙動をした時も、Mac上のSafariの開発者モードで表示し、ディベロッパーツールでHTML/CSSの要素を直接編集できるので比較的簡単にエラーを発見することができるのも魅力です。

以上のただ一つ、Safariが使えるか使えないかという理由で私はWeb開発者、特に初心者やフロントエンドをいじる仕事をしている方はMacをお勧めしたいです。Macであれば、ChromeもFirefoxもEdgeも使うことができますし!

最後に

3ヶ月間久しぶりにWeb開発の仕事を受け、手元のデスクトップ環境の関係でWindowsで開発を行いましたがSafari関連の修正でそれなりに時間を使ってしまいました。この教訓よりやはりWeb開発にはMacを積極的に使った方がいいなと感じました。また、タスクランナーのgulpのパスの設定もWindwsだと最初うまくいかなずに苦労してしまいました。Macだと文字の感じも全体のUIも綺麗なので特にデザイン系の部分を扱うときはモチベーションが上がりやすい気がします。

仕事としては、デザイナーさんとのやりとりをするのも久しぶりで新鮮でした。特に今回は、自分の所属する組織のWebサイトの立ち上げの仕事も行ったので、直接デザイナーさんとコミュニケーションをとりながらやれたのも良い経験でした。

このサイトも、そろそろ大きくアップデートしようかな。。。ではまた。