LoginSignup
2
1

More than 1 year has passed since last update.

@heppokofrontend(河童 エクマ🥒)

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

Last updated at Posted at 2021-01-21

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

※ 内容は自己責任でお願いします
※ 思い出したりしたときに徐々に追記していきます
※ macOS使いニキネキはこちら

前提

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

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

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

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

詳しくはこちら：ローカル アカウントから Microsoft アカウントに切り替える

1. CLIでの作業

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

Chocolateyのインストール

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

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

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

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. 下記のページにアクセスします
  2. Set-ExecutionPolicy Bypass...で始まるコマンドをコピーします
  3. 管理者権限のWindows PowerShellに貼り付けて実行、インストールします

image.png

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

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

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

PowerShellで実行って？
次の2通りのやり方をおすすめします。

  • PowerShellにコピペしてEnterキーを押す
  • メモ帳などに張り付けてps1ファイルとして保存し、Windows PowerShellから呼び出します
hoge.ps1として「ダウンロードフォルダ」に保存して実行する例
cd ~/Downloads
./hoge.ps1

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;

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

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でインストールしたファイルのための設定を行います。

# ------------------------------------------------------------------------------
# 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;

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

exit

Gitの設定を行う

次はGitの設定を変更します。
ここで紹介しているもの以外にも設定できることはたくさんあるので、必要に応じて設定します。

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

次の文字列は書き換えてください1

  • 「あなたのお名前」はGitHubのアカウント名
  • 「あなたのメールアドレス」はGitHubに登録しているメールアドレス
# ------------------------------------------------------------------------------
# アカウント情報
# ------------------------------------------------------------------------------
# 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の設定を行う

再起動

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

2. GUIで行う作業

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

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

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

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

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

その他

QuickLookのインストール

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

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

Lhaplusか、macOSの開発者とやり取りすることがおおければCubeICEを導入しましょう。

PCの設定の微調整

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

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

Google Chrome

Sublime text 4

Visual Studio Code

FileZilla

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

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

image.png

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

image.png

おまけ

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

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

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

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

TODO

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

参考

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

2
1
0

Register as a new user and use Qiita more conveniently

  1. You get articles that match your needs
  2. You can efficiently read back useful information
  3. You can use dark theme
What you can do with signing up
Sign upLogin
2
1