フロントエンドエンジニア – 2017年版 Windowsで環境構築

個人的にはWindowsの方が楽

俺はMacはセントリスから、Windowsは95からのユーザだ。でも今はPCゲームのためにハイスペックのWindowsマシンを愉快に使ってる状態なんだよ。

WindowsはデスクトップメインでMacはラップトップ、つまりMacbookだ。

そしてMacbookで仕事してるといつも思う。MacでWeb開発する理由はなんだろう?と。できればCore i7、VRAM6GB、メモリ16GB(本当は32GBほしい)、SSD512GBなWindowsマシンで作業したほうが効率良いんじゃないか?とかとかとか。

Macを使うことに関する個人的な統計というか、何年も多数のMac使いをウォッチしてきて分かっ事は、おそらくただ格好つけてるだけか、Windowsを知らずに勘違いしてるだけなんじゃないか、という結論に至った。

別の言い方をするなら、Apple製品を使っているという自己満足もあるだろうな。Macはスタイリッシュだもんな。

とは言え、別にMacでWeb開発するのは実際多くの人がやってるわけでして、それに文句があるわけじゃない。全く文句は無い。人は人それぞれ違うんだ。だから好きなものを使えば良い。

人それぞれだと同じ理由で、俺はMacを使ってWeb開発するのは抵抗があるわけ。もちろん個人的な理由だから、”MacでWeb開発するのはおかしい”なんて結論は出してない

俺がMacでやりたくないとか言ってるってだけの話。

主観と一般論をごっちゃにしてこういう多様性を理解できないド低脳がよく出現する。そんなのが勝手に脊髄反射してフガフガするシーンはよく見かけるが、俺がピカレスクに駆逐してやるから待っていろ。

個人的に俺は以下の理由でMacじゃなくてもいいじゃん、と思った。

  • MacはBSDベースなのでWindowsよりWebサーバに近い環境で開発できる に対して
    • 最初から本物のLinux使えよ
    • VM使うならWindowsでもMacでも関係ないじゃん
    • お前らの大好きなDockerとかWindows版もあるし
      • もちろん俺はWindows10 Proだ
  • Winodwsはドライブという概念があるのでパスの問題がある に対して
    • それは確かにある
    • 俺もドライブの概念はクソだと思ってる
    • でもまぁこれは慣れの問題ではないかな
  • Windowsはたいていデスクトップだから持ち運びできないしフットワークが悪い に対して
    • ラップトップの方が遥かに性能が低いしバッテリー問題もある
    • 持ち運びたい奴だけラップトップ使えばいい
      • ラップトップは首が痛くなる
      • 持ち運ぶことにより物理的な衝撃で故障する可能性も高い
    • 特にMacbookは見た目重視なのでキーが薄っぺらく隙間も狭いのでタイピングしにくい
      • 俺の手がでかすぎるという話もある(手首から指先まで20cm)
    • ラップトップだと電源、外部ディスプレイなどの接続のためケーブルが必要になる
      • 紐状のものはいらつくだけで、人類の敵である(断言)
      • だから可能な限りワイヤレスにしたい
      • デスクトップなら好きなようにカスタマイズできる
      • そもそもコンピュータというのはデスクトップがスタンダード
  • Apple信者がApple製品を命がけて愛してる に対して
    • 最近のApple信者はWindowsをDisらないから特にトラブルにならない
    • 古参のMacファンはゴキブリ以下の存在で、ISISとおなじ
  • Macに便利ソフトがなければコマンドでやればいいじゃん に対して
    • ターミナルメインならGUI自体やめろよ
    • UNIX使いにでもなったつもりか
    • コンピュータは人間の補佐をするものだから、時間のかかる方法をよしとするのは個人の趣向でしか無い
    • Windowsは兎に角便利アプリが山ほどある
      • 有象無象とも言う
    • Macで便利ソフトがあったとしても、Windows版より低機能のくせに有料だったりする
      • つまりMacだからって無駄に金欲しがる似非ブランド志向のクソ守銭奴開発者が多い
  • その他

Macbook持ってるし、普段はMacbookで仕事してるし、実際問題カフェやコワーキングスペースに持っていくのはMacbookだ。理由は、Windowsのラップトップは全部売り払ったし、ラップトップなんていうデスクトップ未満の未熟なデバイスなんか1つでいいからだ(俺はデスクトップ至上主義なので)。

もう気づいてると思うけど、MacやWindowsを批判した結果、MacをDisってるってわけじゃなく、ラップトップなんかデスクトップのサブセットでしか無いから、メインにするのはおかしいって話をしてるわけだな。そもそもコンピュータ、いわゆるパソコンってのはデスクトップが是であり、ラップトップは臨時に使うようなものだ。だから効率が悪いって話を個人的にしてるだけだ。

どうでもいいけど、批判、批評などを否定の意味で捉えてるクズが多い。多すぎる。批判というのは物事の善し悪しを決めることなんだよ。否定の意味で捉えて勝手に勘違いしてフガフガするようなド低脳は、肋骨全部折ってやるから、ぜひお前の金で一緒に飲もう!!

別にMacをDisるつもりはまったくない。100%ない。ただ、Web開発でWindowsは無いっしょwwwという、脳みそに障害がありそうな発言をする原理主義者をDisってるだけ。

Windowsで環境を構築してみる

フロントエンドでの作業をメインに考えているけど、CakePHP2やLarabel4/5などのサーバサイドでのバックエンド作業も考慮しておく。両方できなければWeb開発とは言えないし。

両方と書いたけど、個人的には両方共同じ作業だと思ってる。開発と制作で分かれてる現場がほとんどだろうけど、元絵かきで創作家の血筋なので、当然デザインも良い悪いは別にして『俺にはできない』なんて思ったことはない。それに小学生の時から一人でゲーム作ってたんで、システム、グラフィック、シナリオ、作曲など、複数のジャンルを独りででも楽しめるわけだ。

前提としては、

  • 基本的に本格的にガッツリOSをWeb開発向けにカスタマイズするつもりはない
    • Docker使うし
    • Windows10 proにDockerいれるとVagrantは使えない
      • Hyper-Vメインになるから
    • そもそもPCゲームのために買ったマシンだからゲーム以外は最小限にしたい
  • Chocolateyはどうもすきになれないので使わない
    • でもChocolateyが便利なのは事実
    • PHP入れるなら楽なので使ったほうが良いかも

余談。WindowsはゲームOS。Macは自己啓発OS。LinuxはWeb開発では完璧な作業マシン、という認識をしているよ。
異論は有るだろうけど、そんな口からクソ吐くようなことしたって無駄でしかない。理由は簡単で、ただの俺の主観だから。
成人してるのに人の主観に文句言う人は人間やめた方がよい。人類の発展の邪魔をしてるだけ。人様の可能性をカジュアルに奪う行為は死に値する。つまり躊躇なく自害するのが世のためだ。

ではサクッと行ってみよう。

一般的なパッケージ

バージョン管理

  • Git for Windowsをインストールする
  • SourceTreeもインストールする
    • コマンドラインでしかGitを使わない人は無用

コンソール

  • 現状ではWindows最強コンソールとおもわれるCMDerをインストールする

Nodeマネージャ

  • 複数バージョンのNodeをインストール管理できるNodistをインストールする
    • node brewのWindows版的なモノ

Node

  • CMDerを起動
  • 利用可能なバージョンを確認する
    • nodist dist
  • 利用したいバージョンをインストールする
    • nodist + <バージョン>
    • 必要に応じて幾つか入れておくと良い
  • 指定のバージョンをアンインストールする
    • nodist - <バージョン>
  • インストールされたNodeを確認する
    • nodist
    • インストール済みのバージョンリストが表示される
  • バージョンを変更する
    • nodist <バージョン>
  • インストール確認
    • node -v

Python

  • 公式
    • 2.7を使用する
    • Nodeライブラリが2.7に依存している事が多いため
  • パスが通っているか確認する
    • python --version
  • パスが通ってない場合以下の手順でパスを通す
    • スタートメニュー右クリック → システム
    • システムの詳細設定をクリック
    • 環境変数ボタンをクリック
    • 下段のpathを選択し編集ボタン
    • 内容を確認し、なければ新規ボタンで追加する
    • 再起動する

PHP

  • PHP7
    • ビルトインサーバなどのライトな使用目的で入れておく
    • HTTPDと組み合わせるようなことはしない
    • 特に必要なければ入れない

WindowsでNodejsをエラーなく使用可能にする

  • Nodeパッケージによってはパスが長すぎてエラーになったりする。
  • MS公式のWindows開発環境構築の手順
    • Windows 10 Preview build 14352からはパス制限を解除するオプションが追加されたらしい
    • 個人的にWindowsのファルシステムの嫌いな部分がこれ
      • NTFSはクソでありEXT4とかに変えれば良いと思ってる

.NET Framework

  • Windows10には最初から入っているので問題なし
  • バージョンを確認する
    • regeditを起動
    • HKEY_LOCAL_MACHINE\SOFTWARE\Microsoft\NET Framework Setup\NDP\v4
    • ReleaseというDWORDがあれば4.5以上が入っている
  • 4.5.1がなければインストールする

Visual C++ Build Tool

  • 公式
    • 設定項目などすべてデフォルトでOK

その他のツール

  • 実作業で有用なソフトウェアをインストールしておく
  • 頻繁に使うものは実行ファイルのショートカットをC:\windows\system32に短い名前(3~4文字くらい)で置いておき、Win+Rで直接起動させている

テキストエディタ

  • お好みのテキストエディタをインストール
    • ATOM
      • マルチプラットフォーム
      • 基本英語でスタンダードな機能拡張型エディタ
      • Markdown Preview Enhancedプラグインが最強レベル
    • VisualStudio Code
      • マルチプラットフォーム
      • 日本語対応のTypeScriptに強いIDE
      • プロジェクト管理、ウィンドウ分割、設定などがしょぼい
    • 秀丸エディタ
      • 国内最強テキストエディタ
      • シェアウェアだが機能制限無しで使用可能
      • CSVを直接見たり、凝った置換をする時など超便利
      • 100万行でも読み込み可能なのでログ確認などにも便利

ワイヤーフレーム作成

  • Justinmind Prototyper
    • メールアドレスとパスワード登録してダウンロード
    • 英語のみだが操作は比較的簡単
    • ブラウザ上でちまちまするようなツールが嫌いな人に最適

画像編集

  • Paint.NET
    • DDSも対応した画像エディタ
    • ちょっとした編集などに最適
  • GIMP
    • Photoshop5くらいの性能がある画像編集ソフト
  • InkScape
    • SVG2対応のベクターデータ編集ソフト

動画編集

  • AVIUtil
    • 多機能動画編集ソフト
    • 機能拡張して使うのが前提
    • 習得するまで多少時間がかかる
  • Filmora
    • 超多機能で軽快な動画編集ソフト
    • 試用する場合、編集後の動画に透かしのロゴマークが入る
      • 1万円しないから買えば良い話

ファイル転送

  • Filezilla Clientをインストールしておく
    • CPUをかなり専有してしまうが、その分処理が早いのが特徴
    • pem、ppkファイルを使った接続も可能なのでAWS対応

ターミナル

  • 現状ではWindows最強ターミナルであるRLoginをインストールする
    • フォントサイズ設定方法
      • スクリーン → フォントサイズから一行あたりの文字数を決定
    • フォント変更
      • フォント → フォントセット → ASCII(ANSI X3.4)をダブルクリック
      • Font Face Nameからフォントを選択
    • カラーセット
      • カラー → Monokaiなど選択

データベースクライアント

  • HeidiSQL
    • MySQLやPostgresサーバに接続可能なクライアント
  • A5:SQL
    • こちらは国産のRDBMSクライアント
    • Oracle、MySQL、SQLServerなど
    • ER図が作れる

差分マージツール

SWF再生

  • swf view
    • シンプルで起動の早いflashプレイヤ

画像リサイズ

  • 縮小専用
    • よくあるサイズに瞬時に縮小してくれる
    • Lightboxなどでひらく際に適してる

ファイル一括リネーム

環境設定

IMEの挙動

  • Windowsは1つのキーでIMEのON/OFFを切り替える
  • Macは日本語、英語が別々のキーになっている
    • 日本語状態だろうが日本語打ちたいときは日本語のキーを押せば確実に日本語になる
    • 英語状態だろうが英語打ちたいときは英語のキーを押せば確実に英語になる
  • Windows流+Mac流のハイブリッドにする
  • Google日本語入力を使うのが前提
  1. タスクトレイのAもしくはを右クリック → プロパティ
  2. キー設定以下にあるキー設定の選択横の編集ボタンクリック
  3. 入力文字なし Muhenkan のコマンドをIMEを無効化に変更する

これで半角/全角キーはそのままの状態で、ひらがなキーで日本語、無変換キーで英語になる。

フォントのインストール

コンソールやターミナルで見やすい等幅フォンをインストールする

  • 源の角ゴシック(Source Han Code JP)
    • Adobe+Googleが開発したフォントから派生した日本語等幅OpenTypeフォント。
  • 源真ゴシック
    • 源の角ゴシックのTrueType版
  • 源柔ゴシック
    • 源真ゴシックの角を丸めたスタイル
  • その他にも沢山あるが、ダウンロードがわかりにくかったり、ライセンス回避作や古かったりするので使わない

エクスプローラ拡張

使いにくいWindows10のエクスプローラを伝統的なスタイルや研ぎ澄まされたものに置き換える

  • 秀丸ファイラー Classic
    • アイコンがダサすぎるが最強のファイラー
    • 有償(未登録でも機能制限なしで使える)
  • QTTabBar
    • エクスプローラーにタブ機能を追加する
    • シンプルにタブだけ使いたいならこれ
  • FreeCommander
    • 2画面+タブ機能など秀丸ファイラーと同じくらい高機能なファイラー

Chrome機能拡張

  • Awesome Screenshot Minus
    • スクロールしながらページをキャプチャ可能
  • Edit This Cookie
    • 表示中ページのクッキー閲覧、編集、削除ができる
    • サーバサイド系開発でも役に立つ
  • htmlエラーチェッカー
    • HTMLのタグ閉じ忘れなどを瞬時に判定してくれる
    • 納品前のチェックなどに最適
  • The QR Code Extension
    • 現在見ているページのURLをQAコード化してくれる
    • スマートフォンで見たいときにQRコードリーダーで素早く確認できる
  • perfectpixel
    • デザインデータ(JPEGなど)をページに重ねて表示させられる
    • ピクセルパーフェクトな現場では重宝
  • Postman
    • フォームに投稿するデータを一元管理できる
    • データセットをインポート/エクスポート可能
    • 高機能

おわり

これでちゃんと動くかな。特にNode関連だね、気になるのは。

次回は色々手を動かして何か作ってみようと思う。