まっさらな Windows でフロントエンド開発環境を構築する 色々インストール編

はじめに

まっさらな Windows でフロントエンド開発環境をインストールする手順メモです。 何を開発するかはさておき、まあこれは普通やるよね、みたいなのを書いています。 書いているのはインストールまでですので、VSCode の設定までは扱ってません。

インストールするソフトウェア

• git for windows
  • git のついでに bash も入るので入れておきたい。
• Visual Studio Code
  • もはやデファクトになりつつあるエディタ。
• Node.js
  • 主に npm を使うことになりますね。
• Ricty Diminished
  • 見やすいプログラミングフォントは入れておきたい。

git for windows

適当にインストールすればおｋ。

git-scm.com

Visual Studio Code

VSCode ってやつ。これも適当にインストールすればおｋ。

azure.microsoft.com

Node.js

当該記事では nodist の利用を勧めていましたが、その後下記のような記事を書きました。当該記事も nodist の利用を推奨しないよう修正しました。 multimineral-tech.com (追記 : 2021/02/12)

nodist で入れました。

multimineral-tech.com

nodist とか nvm for windows とか、 Windows では Node.js 自体のバージョンを管理できるツールってこれといったものが分からないのだけれど、とりあえず nodist にしています。2016年以降更新がなく廃れるのかと思いきや、2019年に気まぐれでアップデートもありましたし、まだ忘れられていないのでしょう。

(削除 : 2021/02/12)

正直、あまり気にせずに、Node.js の公式サイトから LTS をダウンロードしてインストールするだけでもいいと思います。

公式サイトでは LTS (Long Term Support) を「推奨版」と書いています。特に理由がなければ「最新版」ではなく「推奨版」をダウンロードしてインストールしましょう。インストーラーの設定は「デフォルトのままで次へを選択する」でOKでしょう。

nodejs.org

(追記 : 2021/02/12)

Ricty Diminished

フォントです。ゼロには斜線が入っていて欲しいんです。O（オー）と見分けがつかないなんて嫌なんです。 でも、フォント沼にハマるほどではないので、有名所で Rictiy Diminished を入れておきます。

基本はダウンロードしてぶち込むだけ。

github.com

設定（スタートメニューのギアアイコン）で「フォント」で検索すると以下のような画面になります。画像にありますが、ドラッグ・アンド・ドロップでインストールできます。ダウンロートしたうちの README.md 以外のすべてのファイルを入れればおｋ。

参考までに、フォントを各アプリに設定する方法が役に立ちそうなので掲載します。

qiita.com

インストールしたものだけでも連携させておく

設定については細かく書くつもりはないんですが、せめてインストールしたものの連携だけ書いておきます。

gitbash と VSCode の連携

VSCode を立ち上げて、 File > Preferences > Settings （または Ctrl + , ）で設定画面を開きます。

User と Workspace というタブがあります。 User はこのPC全体の設定。 Workspace は特定のフォルダにだけ反映する設定。ここでは User のタブで設定を進めます。

それから terminal で検索します。Terminal › Integrated › Automation Shell: Windows と書かれたところにある Edit in setting.json をクリックして json ファイルを編集します。 以下は設定例です。（ git-bash.exe は別にウィンドウが開くので、 bin/bash.exe を指定するのだそうですよ。）

{
    "terminal.integrated.shell.windows": "C:\\Program Files\\Git\\bin\\bash.exe"
}

これで、 Ctrl + @ でターミナルを開いた時に bash が使えるようになります。

VSCode にフォント設定をする

設定画面を開きます。（File > Preferences > Settings または Ctrl + , 。）（User タブで設定を進めます。）それから、 font で検索します。色々でてきますが、以下の2つくらいに 'Ricty Diminished', を先頭に入れておけば良いでしょう。

• Text Editor
  • Font
• Featured
  • Terminal

これで、エディタと gitbash のフォントが変わります。

変更履歴

2021/02/12

「Node.js」の項には nodist の利用を削除し、公式サイトのインストーラがあるページのリンクを追記しました。