0
0

Delete article

Deleted articles cannot be recovered.

Draft of this article would be also deleted.

Are you sure you want to delete this article?

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

Last updated at Posted at 2025-09-17

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

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

前提

  • Windows 11
  • 管理者アカウント

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

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

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

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

1. CLIでの作業

なにはともあれ、まずはWindows PowerShellを使った作業です。
各種開発環境がうまく動作するように、PowerShellの実行ポリシーを変更しておきます。

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

  1. スタートキー(Windowsキー)+Xキーを同時押し
  2. メニューから ターミナル(管理者)(A) を選択

image.png

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

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キー」を押下します。

Scoopのインストール

続いてはScoopをインストールします。
Windows用のパッケージ管理ツールで、コマンドからソフトウェアをインストールすることができます。

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

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

image.png

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

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

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

PowerShellで実行って?
次の2通りうち、任意で選択してください。

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

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

# ------------------------------------------------------------------------------
# Git Client
# ------------------------------------------------------------------------------
scoop install git          # Git本体
scoop install gitui        # Shell内で「gitui」と打つと呼び出せるGit GUI

# ------------------------------------------------------------------------------
# Editors
# ------------------------------------------------------------------------------
scoop install vscode       # 開発向けエディタ
scoop install vim          # シェル内で動作するエディタ。CLIから離脱せずにパパっと編集したいとき向け。

# ------------------------------------------------------------------------------
# Othres
# ------------------------------------------------------------------------------
scoop install winmerge     # 差分確認、マージ作業用アプリです。VS Codeでも同じことができますが、個人的にWinMergeが好きです。
scoop install pwsh         # Windows PowerShellのクロスプラットフォームバージョン

pause;

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

scoop install gsudo        # Shell内でgsudoコマンドを打つと管理者権限に移行
scoop install powertoys    # Microsoft製のWindows用便利ツール群
scoop install openssh      # SSH接続のためのツール群
scoop install gpg4win      # 暗号化・署名のためのツール
scoop install sublime-text # サブエディタ。簡単な作業向け。

pause;

※Powertoysはファイル名をまとめて置換できたり、Explorerでファイルを選んでからCtrl + Spaceで内容をチラ見できる機能など、さまざまなツールが入っています。

PCの設定を変更する

続いて、ScoopでインストールしたPowerShellとWindows11の設定を行います。

# ------------------------------------------------------------------------------
# Windows PowerShell / PowerShell
# ------------------------------------------------------------------------------
# PowerShell 7 側のプロファイル
$pwshProfile   = $PROFILE.CurrentUserCurrentHost
# Windows PowerShell 側のプロファイル
$winPsProfile  = Join-Path $HOME "Documents\WindowsPowerShell\Microsoft.PowerShell_profile.ps1"

# ディレクトリが無ければ作成
$pwshDir  = Split-Path $pwshProfile -Parent
$winPsDir = Split-Path $winPsProfile -Parent
if (-not (Test-Path $pwshDir)) { New-Item -ItemType Directory -Path $pwshDir -Force | Out-Null }
if (-not (Test-Path $winPsDir)) { New-Item -ItemType Directory -Path $winPsDir -Force | Out-Null }

# Windows PowerShell のプロファイルが無ければ作成
if (-not (Test-Path $winPsProfile)) {
  Set-Content -Encoding UTF8 -Path $winPsProfile -Value "# Windows PowerShell profile"
}

# PowerShell 7 のプロファイルが無ければ作成
if (-not (Test-Path $pwshProfile)) {
  Set-Content -Encoding UTF8 -Path $pwshProfile -Value "# PowerShell 7 profile"
}

# PowerShell 7 から Windows PowerShell プロファイルをドットソースで読み込む
Add-Content -Path $pwshProfile -Value "# Windows PowerShell プロファイルを読み込む"
Add-Content -Path $pwshProfile -Value ". `"$winPsProfile`""


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

# 反映のため Explorer 再起動
taskkill /f /im explorer.exe
start explorer.exe

pause;

image.png

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の設定を行う

現在はmiseというツールを使っているのでご紹介します。
macOSとWindowsいずれも利用できます。

scoop install mise

$shimPath = "$env:USERPROFILE\AppData\Local\mise\shims"
$currentPath = [Environment]::GetEnvironmentVariable('Path', 'User')
$newPath = $currentPath + ";" + $shimPath
[Environment]::SetEnvironmentVariable('Path', $newPath, 'User')

mise settings add idiomatic_version_file_enable_tools node # nvmrc などを自動で読み込んで欲しい場合
mise install nodejs

idiomatic_version_file_enable_toolsについては miseの公式サイト を参照してください。

再起動

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

2. GUIで行う作業

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

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

その他

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

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

参考

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

0
0
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
0
0

Delete article

Deleted articles cannot be recovered.

Draft of this article would be also deleted.

Are you sure you want to delete this article?