2019/11/26

こんばんは。 今日もプライムリッチを飲んで元気いっぱいである。

では、始める。

今まで、Windowsでの開発はVirtualBoxに立てたLubuntuの仮想マシン上で行っていた。 しかし、うちのPCは結構古くて、いささか動作が重いため、モダンなエディタを開きつつ頻繁にUIの確認が必要となるようなフロントエンドの開発においては、仮想マシンを使うのはかなり無理がある。 そこで、今日はWindows 8.1上に直接開発環境を整えていくこととする。

Windowsであっても、開発中はやはりターミナルやシェルを触る必要が出て来る。 Windowsにもコマンドプロンプトというものがあるみたいだが、シェルコマンドと互換性があるわけではないし、見た目もダサいし、使っていると何故こんなものを使わなくてはいけないんだと悲しくなってしまう。 少なくともzshとtmuxくらいは使えなければ、まともに作業できないし、する気も起きない。

ということで、まずターミナルとシェルの環境を整えていくこととする。 でもまあ、とりあえずMSYS2入れとけばいいんだろ？感あるので、ささっと入れていく。

  1. 公式ページ(https://www.msys2.org/)からEXEファイルをダウンロードして実行
  2. 誘導されるがままに適当にボタンを押していく

完了！滅茶苦茶分かりやすくて好感が持てるゾ。

次にMinttyの見た目を設定していく。

f:id:tac2nd:20191126181449p:plain f:id:tac2nd:20191126181457p:plain

完了！

次にパッケージデータベースとコアのシステムパッケージを更新する。

pacman -Syu

なんかゴチャゴチャ言われる。

f:id:tac2nd:20191126182601p:plain

一度Minntyを閉じて、再度開き、以下のコマンドを入力。

pacman -Su

無事完了！

次に開発に必要な基本的なパッケージをインストールしていく。

pacman -S git emacs zsh tmux

完了！

次にzshをログインシェルに設定する。 MSYS2をインストールしたディレクトリ内の etc/nsswitch.conf を開いて db_shell の項目を以下のように変更する。

# db_shell: cygwin desc ⇒ db_shell: /usr/bin/zsh

次にLinuxやMacOS用に使ってきたdotfiles(https://github.com/tacigar/dotfiles)を適用していく。

git clone https://github.com/tacigar/dotfiles.git
cd dotfiles
./bootstrap

完了！

f:id:tac2nd:20191126185257p:plain

ここまででターミナルとシェルの環境の設定は完了した。 次はフロントエンド開発の環境を設定していく。

まずは公式サイト(https://code.visualstudio.com/)からVSCodeのインストール。

f:id:tac2nd:20191126223502p:plain

完了！

次にnpmをインストールしていく。 Nodeを使う場合にはnvmやnodebrewを使うべきだと思うが、npmだけあれば良いような場合、こうしたNode自体のバージョンマネージャが必要なのか否かいまいちよく分かっていないので、今回は直接Nodeの公式サイト(https://nodejs.org/en/)からNodeとnpmをインストールすることとする。

ということで、Node.jsとnpmをWindows用のインストーラからインストールしてみたが、この状態では当然Pathが通っていない。 Windowsで開発するときは本当にこういうところでイライラしてしまう。 仕方がないので .zshenv を編集して以下の行を追加した。

if [ "$(echo $(uname) | cut -c 1-7)" = 'MSYS_NT' ]; then
  export PATH="/c/Program Files/nodejs:$PATH"
fi

ここでGitHubにdotfilesの変更をコミットしようとしたのだが、dotfilesのbootstrapスクリプトで生成されたシンボリックリンクがシンボリックリンクとして扱われていないことに今気が付いた。 クソ面倒くさいのだが、MSYS2をインストールしたディレクトリ内の msys2_shell.cmd というファイルを以下のように変更する。

rem set MSYS=winsymlinks:nativestrict ⇒ set MSYS=winsymlinks:nativestrict

その後 msys2_shell.cmd を管理者権限で実行し、再度dotfilesのbootstrapスクリプトを実行することで、dotfiles内のファイルへのシンボリックリンクをホームディレクトリに作成した。

f:id:tac2nd:20191127005951p:plain

完了！ 無事にnpmにもPathが通った。

今日はここまでにする。

おやすみなさい。良い夜を。