🔰【Windows10】フロントエンドWeb開発者向けのPCキッティング

日本語版Windows10でWeb制作をするために使うPCのキッティング手順です。

※ 内容は自己責任でお願いします
※ 思い出したりしたときに徐々に追記していきます
※ [macOS使いニキネキはこちら](https://qiita.com/heppokofrontend/items/e92d62b2a94b722d8eb4)

## 前提

- Windows 10 Pro
- JIS配列フルサイズキーボード
- 管理者アカウント

:::note warn
**最初からキッティングをするのではなく、PC移行をするつもりの方はご注意ください**
Windows10をインストールするとき、オフラインアカウントから作成したほうがよいかもしれません。

たとえば、Google Driveなどにファイルを同期しているときはユーザフォルダ名が「Admin」で、  
各種アプリケーションの設定ファイルも環境変数を使わずにそのパスで参照しているようなケースだと、
Microsoft（オンライン）アカウントでWindowsアカウントを作ってしまうとユーザフォルダ名が意図しないもので設定されてしまいます。

シェル回りのプロファイルなどがおかしくなったりするかもしれないので、あらかじめパス指定には環境変数を使うか、ローカルアカウントを作ってからMicrosoftアカウントに変更しましょう。

詳しくはこちら：[ローカル アカウントから Microsoft アカウントに切り替える](https://support.microsoft.com/ja-jp/windows/%E3%83%AD%E3%83%BC%E3%82%AB%E3%83%AB-%E3%82%A2%E3%82%AB%E3%82%A6%E3%83%B3%E3%83%88%E3%81%8B%E3%82%89-microsoft-%E3%82%A2%E3%82%AB%E3%82%A6%E3%83%B3%E3%83%88%E3%81%AB%E5%88%87%E3%82%8A%E6%9B%BF%E3%81%88%E3%82%8B-395203bf-9f1b-eb24-b042-5b8dae6c1d20)
:::

## 1. CLIでの作業

なにはともあれ、まずはWindows PowerShellを使った作業です。

### Chocolateyのインストール

まずはChocolateyをインストールします。
各種開発環境がうまく動作するように、PowerShellの実行ポリシーを変更しておきます。

#### Windows PowerShellの実行ポリシー変更する

- スタートキー（Windowsキー）＋Xキーを同時押し
- メニューから **Windows PowerShell(管理者)(A)** を選択

![](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/142709/b210b08b-70cf-63c0-9463-591d36fa0db0.png)

```powershell
Set-ExecutionPolicy RemoteSigned
```

上記のコマンドを入力して実行します。

> 実行ポリシーの変更
実行ポリシーは、信頼されていないスクリプトからの保護に役立ちます。実行ポリシーを変更すると、about_Execution_Policies
のヘルプ トピック (https://go.microsoft.com/fwlink/?LinkID=135170)
で説明されているセキュリティ上の危険にさらされる可能性があります。実行ポリシーを変更しますか?
[Y] はい(Y)  [A] すべて続行(A)  [N] いいえ(N)  [L] すべて無視(L)  [S] 中断(S)  [?] ヘルプ (既定値は "N"):

上記のメッセージを理解した上で「Y」と入力したあとに「Enterキー」を押下します。

#### Chocolateyをインストールするためのコマンドを実行する

1. [下記のページ](https://chocolatey.org/install)にアクセスします
2. `Set-ExecutionPolicy Bypass...`で始まるコマンドをコピーします
3. **管理者権限の**Windows PowerShellに貼り付けて実行、インストールします

https://chocolatey.org/install

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/142709/27a76a76-4be1-d5fe-a543-de70a72ca8d0.png)

**これでインストール完了**です！

### さっそく`choco`で各種アプリをインストール

準備ができたら以下のコードを管理者権限のWindows PowerShellで実行してください。

:::note
**PowerShellで実行って？**
次の2通りのやり方をおすすめします。
- PowerShellにコピペしてEnterキーを押す
- メモ帳などに張り付けて`ps1`ファイルとして保存し、Windows PowerShellから呼び出します

```powershell:hoge.ps1として「ダウンロードフォルダ」に保存して実行する例
cd ~/Downloads
./hoge.ps1
```
:::

```powershell
choco install powertoys -y    # Microsoft製のWindows10用便利ツール群
choco install gsudo -y        # Shell内でsudoコマンドを打つと管理者権限に移行
choco install winmerge -y     # 差分確認、マージ作業用アプリです。VS Codeでも同じことができますが、個人的にWinMergeが好きです。
choco install pwsh -y         # Windows PowerShellのクロスプラットフォームバージョン

# ------------------------------------------------------------------------------
# Browsers
# ------------------------------------------------------------------------------
choco install googlechrome -y # Canaryなど必要に応じてインストール
choco install firefox -y      # Nightlyなど必要に応じてインストール

# ------------------------------------------------------------------------------
# Git Client
# ------------------------------------------------------------------------------
choco install git.install -y  # Git本体
choco install tortoisegit -y  # コンテキストメニューから呼び出せるGit GUI
choco install gitui -y        # Shell内で「gitui」と打つと呼び出せるGit GUI

# ------------------------------------------------------------------------------
# Node.js
# ------------------------------------------------------------------------------
choco install fnm -y          # fnmを利用する際node.jsそのものを直接インストールしてはならない
choco install yarn -y         # npmの仲間

# ------------------------------------------------------------------------------
# Editors
# ------------------------------------------------------------------------------
choco install vscode -y --params "/NoDesktopIcon" # 開発向けエディタ
choco install sublimetext4 -y # サブエディタ。簡単な作業向け。
choco install vim -y          # シェル内で動作するエディタ。CLIから離脱せずにパパっと編集したいとき向け。

pause;
```

個人的にはこういうのもインストールしたりします👀

```powershell
choco install nvda -y                     # スクリーンリーダ（インストール時に音声がなります）
choco install filezilla -y                # ポピュラーなFTPツール
choco install slack -y                    # コミュニケーションツール
choco install discord -y                  # コミュニケーションツール
choco install line -y                     # LINE
choco install google-drive-file-stream -y # Google Drive
choco install openssh -y                  # SSH接続のためのツール群
choco install gpg4win -y                  # 暗号化・署名のためのツール

pause;
```

### その他PCの設定を変更する

続いて、次のコードを実行します。
PCの設定や、今回`choco`でインストールしたファイルのための設定を行います。

```powershell
# ------------------------------------------------------------------------------
# Windows PowerShell / PowerShell
# ------------------------------------------------------------------------------
# Windows PowerShell, PowerShellそれぞれのパスを計算
$pwshPath = $profile -replace 'Power','WindowsPower';
$winPwshPath = $profile -replace 'Power','WindowsPower';
$pwshPath = $pwshPath -replace 'WindowsPower','Power';
$pwshPath = $pwshPath -replace 'WindowsPower','Power';
$winPwshPath = $winPwshPath -replace 'WindowsWindowsPower','WindowsPower';
$pwshPath = $pwshPath -replace 'WindowsPowerShell_','PowerShell_';
$winPwshPath = $winPwshPath -replace 'WindowsPowerShell_','PowerShell_';

# Windows PowerShellの設定ファイルが無ければ作成
if (!(Test-Path $winPwshPath)) {
  new-item -Path $winPwshPath -Force;
}

# PowerShellの設定ファイルが無ければ作成
if (!(Test-Path $pwshPath)) {
  new-item -Path $pwshPath -Force;
}

# Windows PowerShellの設定ファイルに処理を追記
# vimをviでも呼び出せるように調整
"set-alias vi vim" >> $winPwshPath

# PowerShellがWindows PowerShellの設定ファイルを読み込むように調整
"# Windows PowerShellの設定ファイルを読み込む" > $pwshPath;
"Import-Module " + $winPwshPath >> $pwshPath;

# PowerShell7のためのレジストリ操作
reg add "HKEY_CLASSES_ROOT\Directory\shell\PowerShell7x64" /v ExtendedSubCommandsKey /t "REG_SZ" /d "Directory\ContextMenus\PowerShell7x64" /f
reg add "HKEY_CLASSES_ROOT\Directory\shell\PowerShell7x64" /v Icon /t "REG_SZ" /d "C:\Program Files\PowerShell\7\pwsh.exe" /f
reg add "HKEY_CLASSES_ROOT\Directory\shell\PowerShell7x64" /v MUIVerb /t "REG_SZ" /d "&PowerShell 7" /f
reg add "HKEY_CLASSES_ROOT\Directory\Background\shell\PowerShell7x64" /v ExtendedSubCommandsKey /t "REG_SZ" /d "Directory\ContextMenus\PowerShell7x64" /f
reg add "HKEY_CLASSES_ROOT\Directory\Background\shell\PowerShell7x64" /v Icon /t "REG_SZ" /d "C:\Program Files\PowerShell\7\pwsh.exe" /f
reg add "HKEY_CLASSES_ROOT\Directory\Background\shell\PowerShell7x64" /v MUIVerb /t "REG_SZ" /d "&PowerShell 7" /f
reg add "HKEY_CLASSES_ROOT\Directory\ContextMenus\PowerShell7x64" /t "REG_SZ" /f

# コンテキストメニューにPowerShell7を追加
reg add "HKEY_LOCAL_MACHINE\SOFTWARE\Classes\Directory\ContextMenus\PowerShell7x64\shell\openpwsh" /v HasLUAShield /t "REG_SZ" /f
reg add "HKEY_LOCAL_MACHINE\SOFTWARE\Classes\Directory\ContextMenus\PowerShell7x64\shell\openpwsh" /v Icon /t "REG_SZ" /d "C:\Program Files\PowerShell\7\pwsh.exe" /f
reg add "HKEY_LOCAL_MACHINE\SOFTWARE\Classes\Directory\ContextMenus\PowerShell7x64\shell\openpwsh" /v MUIVerb /t "REG_SZ" /d "Open &here" /f
reg add "HKEY_LOCAL_MACHINE\SOFTWARE\Classes\Directory\ContextMenus\PowerShell7x64\shell\openpwsh\command" /t "REG_SZ" /d "C:\Program Files\PowerShell\7\pwsh.exe -NoExit -RemoveWorkingDirectoryTrailingCharacter" /f

# コンテキストメニューにPowerShell7（管理者権限）を追加
reg add "HKEY_LOCAL_MACHINE\SOFTWARE\Classes\Directory\ContextMenus\PowerShell7x64\shell\runas" /v HasLUAShield /t "REG_SZ" /f
reg add "HKEY_LOCAL_MACHINE\SOFTWARE\Classes\Directory\ContextMenus\PowerShell7x64\shell\runas" /v Icon /t "REG_SZ" /d "C:\Program Files\PowerShell\7\pwsh.exe" /f
reg add "HKEY_LOCAL_MACHINE\SOFTWARE\Classes\Directory\ContextMenus\PowerShell7x64\shell\runas" /v MUIVerb /t "REG_SZ" /d "Open here as &Adoministrator" /f
reg add "HKEY_LOCAL_MACHINE\SOFTWARE\Classes\Directory\ContextMenus\PowerShell7x64\shell\runas\command" /t "REG_SZ" /d "C:\Program Files\PowerShell\7\pwsh.exe -NoExit -RemoveWorkingDirectoryTrailingCharacter" /f



# ------------------------------------------------------------------------------
# その他PC設定のためのレジストリ操作
# ------------------------------------------------------------------------------
# 拡張子を表示する
reg add "HKEY_CURRENT_USER\Software\Microsoft\Windows\CurrentVersion\Explorer\Advanced" /v "HideFileExt" /t REG_DWORD /d "0" /f
# 隠しファイルを表示する
reg add "HKEY_CURRENT_USER\SOFTWARE\Microsoft\Windows\CurrentVersion\Explorer\Advanced" /v "Hidden" /t REG_DWORD /d "1" /f
# ダークモードに設定
reg add "HKEY_LOCAL_MACHINE\SOFTWARE\Microsoft\Windows\CurrentVersion\Themes\Personalize" /v "AppsUseLightTheme" /t REG_DWORD /d "0" /f
reg add "HKEY_CURRENT_USER\SOFTWARE\Microsoft\Windows\CurrentVersion\Themes\Personalize" /v "AppsUseLightTheme" /t REG_DWORD /d "0" /f
# 小さいタスクバーボタンを使う
reg add "HKEY_CURRENT_USER\Software\Microsoft\Windows\CurrentVersion\Explorer\Advanced" /v "TaskbarSmallIcons" /t "REG_DWORD" /d "1" /f
# クリップボード履歴の有効化
reg add "HKEY_CURRENT_USER\Software\Microsoft\Clipboard" /v EnableClipboardHistory /t "REG_DWORD" /d "1" /f


pause;
```

![](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/142709/107fd046-dbc3-f672-ce66-0b943b3697e3.png)


ここで、**1度Windows PowerShellを閉じます。**

```powershell
exit
```

### Gitの設定を行う

次はGitの設定を変更します。
ここで紹介しているもの以外にも[設定できることはたくさんある](https://git-scm.com/book/ja/v2/Git-%E3%81%AE%E3%82%AB%E3%82%B9%E3%82%BF%E3%83%9E%E3%82%A4%E3%82%BA-Git-%E3%81%AE%E8%A8%AD%E5%AE%9A)ので、必要に応じて設定します。

最初と同じ手順で、管理者権限のWindows PowerShellを開き、次のコードを実行します。

:::note warn
**次の文字列は書き換えてください[^1]**
- 「あなたのお名前」はGitHubのアカウント名
- 「あなたのメールアドレス」はGitHubに登録しているメールアドレス

[^1]: GitHub以外のサービスを利用する場合は、対象サービスに登録しているアカウント名とメールアドレスを設定してください
:::

```powershell
# ------------------------------------------------------------------------------
# アカウント情報
# ------------------------------------------------------------------------------
# e.g. git config --global --replace-all user.name "Taro Yamada"
git config --global --replace-all user.name "あなたのお名前"
# e.g. git config --global --replace-all user.name "example@example.com"
git config --global --replace-all user.email "あなたのメールアドレス"

# ------------------------------------------------------------------------------
# その他
# ------------------------------------------------------------------------------
git config --global core.autocrlf false                  # 改行コードを変換しない
git config --global core.safecrlf true                   # 改行コードが入り混じったファイルをコミットできなくする
git config --global core.ignorecase false                # 大文字小文字を区別する
git config --global core.quotepath false                 # 日本語の文字化けを防ぐ
git config --global core.pager "LESSCHARSET=utf-8 less"  # 日本語の文字化けを防ぐ
```

### Node.jsバージョン管理ツール`fnm`の設定を行う

https://qiita.com/heppokofrontend/items/fe1c3bc41a0ae943c2ca?a

### 再起動

ここで再起動しておきます。

## 2. GUIで行う作業

### タスクバーを右または左に設置

Web制作では左右よりも高さが広いほうが快適に作業ができる印象があるので、タスクバーを利き手側に設置することをおすすめします。

1. タスクバー（画面の下のバー）を右クリック
2. コンテキストメニューから「タスクバーの設定」をクリック
3. 「画面上のタスクバーの位置」から「右」か「左」を選択

### 上級者向け：`openssh`をインストールした方へ

https://qiita.com/heppokofrontend/items/25cedd62eb220c1bc20b

### 上級者向け：`gpg4win`をインストールした方へ

https://qiita.com/heppokofrontend/items/13f269f536fdaf9226c4

### その他

#### [QuickLook](https://www.microsoft.com/ja-jp/p/quicklook/9nv4bs3l1h4s)のインストール

エクスプローラーでスペースキーを押下でファイルをプレビューできます。

https://www.microsoft.com/ja-jp/p/quicklook/9nv4bs3l1h4s

#### 解凍・圧縮アプリのインストール

[Lhaplus](https://forest.watch.impress.co.jp/library/software/lhaplus/)か、macOSの開発者とやり取りすることがおおければ[CubeICE](https://www.cube-soft.jp/cubeice/)を導入しましょう。

#### PCの設定の微調整

- 「既定のアプリ」の調整
    - HTMLやJavaScriptなどのテキストファイルはすべてSublime Textを規定値にしておくのをおすすめします
- よく使うアプリを「タスクバーにピン留めする」
- ドライブの管理
    - 例1：Google DriveやOneDrive、iCloudなどをインストールして、成果物やキャッシュファイルなど、バックアップが必要なものがクラウドストレージに乗るようにする
    - 例2：Cドライブを分割してDドライブを作成し、Gitのローカルリポジトリなど成果物はDドライブで管理する

<!--
## 自分向け

- Google Driveインストール
- Adobe CCインストール、一時保存先をGoogleDriveに設定（Adobe Cloud契約してるけど念のため）
- mojimoインストール、ライセンス付け替え
- NZXTcamインストール
- RTXドライバインストール
- NVIDIA Broadcastインストール
- ロジクールアプリインストール
- Sublimeのライセンス認証

```
choco install obs-studio -y   # OBS
choco install steam-client -y # ゲームのSteam
```

-->

## 3. インストール済みのアプリの設定

### Google Chrome

https://qiita.com/heppokofrontend/items/5c9968b3290bc1417db0

### Sublime text 4

https://qiita.com/heppokofrontend/items/9baff2dc5e43abaa2481

### Visual Studio Code

https://qiita.com/heppokofrontend/items/8a795f3c516198e00165

### FileZilla

サイトマネージャーに登録しておくエントリーは、それぞれ次のような設定にしておきます。

- 「同期ブラウジングを使用する」にチェック
- 「ディレクトリの比較を有効にする」にチェック
- 「サーバー時間調整のオフセット」をマイナス9時間にする（接続先のサーバの設定によっては不要）

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/142709/4f69f393-920f-0171-482d-dd801fa216ce.png)

ディレクトリの比較を「ファイルサイズ」に指定しておきます。

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/142709/a567069a-12bd-289a-6884-dfd02bc69495.png)

## おまけ

FPSをやる方はマウス加速設定をOFFにするといいかも？

```
%LOCALAPPDATA%\EvoGame\Saved\Config\WindowsNoEditor\Input.ini
```

を開いて、以下を書き込んで保存。

```ini:Input.ini
[/Script/Engine.InputSettings]
bEnableMouseSmoothing=False
```

## TODO

- `reg add`コマンドでRegistry経由からの既定のアプリの設定がうまくできない

## 参考

- [PowerShellの実行ポリシー変更](https://qiita.com/earthdiver1/items/b3f529c81f5892972a72)
- [最低限しておくといいgitconfigの設定](https://qiita.com/hayamofu/items/d8103e789196bcd8b489)
- [Windows10のコンテキストメニューにPowerShellを追加する方法](https://itigic.com/ja/add-powershell-to-context-menu-in-windows-10/)
- [右クリックメニューで PowerShell 7 を開けるようにする](https://qiita.com/wdwd5454/items/cde25b81fbc7e0a2be2d)
- [Powershellでvimを使う](https://qiita.com/shuhoyo/items/d9966e12976275f20c24)
- [Win10でssh-addがError connecting to agent: No such file or directory](https://qiita.com/yuta0801/items/d65f1fc3115773861283)
- [マウス加速をオフにする](https://twitter.com/ow2_astar/status/1573795160411885568?ref_src=twsrc%5Etfw)