laravel12.vscd
R e i - D r e a m
for Laravel
TOP > Laravel Ver.12 > 環境構築(VSCode)
Guest
login

最終投稿日:2026年06月07日

【検証環境】- Windows11
VSCodeをはじめよう
VSCodeとは
VSCodeとは、Microsoftが開発・提供している無料のソースコードエディタです。
Windowsのみならず、macOSやLinux など、様々なOSで動作します。
なんとGit操作までできちゃいます。
特徴
① 軽量かつ高速
② 多言語対応(Python、C/C++、Java等)
③ 拡張機能が豊富
④ Git連携
⑤ デバック機能(ステップ実行やブレークポイント等が可能)
インストール方法
公式サイト https://code.visualstudio.com/ を開いて「Download for Windows」を押下します。
 ※ 画面が切り替わり自動的にダウンロードが開始されます  ⇒ VSCodeUserSetup-x64-1.107.1.exe
ダウンロードしたファイルを叩いてインストールを開始します。
① 「使用許諾契約書の同意」のダイアログが表示されます。
  ⇒ 「同意する」にチェックをして「次へ」を押下します
② インストール先の指定
  ⇒ 拘りがなければそのまま「次へ」を押下します
③ スタートメニューフォルダの指定
  ⇒ 拘りがなければそのまま「次へ」を押下します
④ 追加タスクの選択
  ⇒ 基本的に追加を推奨ですが、以下は任意で良いかも..(選択後「次へ」押下)
   ・デスクトップ上にアイコンを作成する
   ・サポートされているファイルの種類のエディターとして登録する
⑤ インストール準備完了
  ⇒ 内容を確認し「インストール」を押下します
⑥ インストール完了
  ⇒ 「Visual Studio Codeを実行する」のチェックが付いている事を確認し「完了」を押下します
VSCodeの初期設定
○ 日本語化対応
左メニューから「拡張機能」をクリック(4マスの正方形で右上のマスが傾いてるアイコン)
左ウィンドウの検索窓へ「Japanese Languatge Pack」と入力する
一覧から「Japanese Language Pack for Visual Studio Code」を選択し、
「install」ボタンをクリックします。
画面全体右下に再起動を促すポップが出るので、
「hange Language and Restart」ボタンをクリックします。
○ テーマの変更
左下メニューから「歯車」をクリックし、[テーマ] > [配色テーマ]を選択します
VSCode上部の検索ボックスの候補に配色テーマのリストが表示されるので、
 お好みの配色テーマを選択してください
○ 各種設定
左下メニューから「歯車」をクリックし、[設定]を選択します
・フォントサイズ
・タブに相当するスペースの数
・[Ctrl] + [マウスホイール]での拡大設定の有無
 などなど..
GitHub連携
「Git for Windows」はインストール済みとした説明となります。
  ※まだの方は 【こちら】 を参照
左ウィンドウに以下のボタンが表示されます。
 ① フォルダーを開く
 ② リポジトリをクローンする
《①の場合》
・VSCodeより「フォルダーを開く」押下
 フォルダーエクスプローラがポップするので、既存のGit管理しているディレクトリを指定します。
  ※ ローカルリポジトリの中まで入らずに、管理しているディレクトリを指定して
   「フォルダーの選択」を押下します
《②の場合》
・ローカルのリポジトリにしたいディレクトリを作成
  ⇒ C:\Xxxx\git_test\my_project
・リモートのGitからクローン用アドレスを取得する
  ⇒ https://github.com/MyProject/test_main.git
・VSCodeより「リポジトリをクローンする」押下
  画面上段にクローンURLを貼り付ける枠がでるので貼り付けます。
  (変な箇所をクリックすると消えちゃいます)
  貼り付けると、すぐ下段にURLのリンクが出るのでクリックします
  フォルダーエクスプローラがポップするので、作成したローカルリポジトリを指定します。
   ※リポジトリを指定して「リポジトリに宛先として選択」を押下します。
  クローンが成功したらダイアログがポップするので「開く」を押下します
VSCodeから特定のリポジトリ管理を廃止(非表示)する方法

[Ctrl] + [Shift] + [P]を押下し、画面上段の枠へ以下を入力する
 ⇒ Remove Folder from Workspace
すると削除できるディレクトリの一覧が表示されるのでクリックすればOKです

VSCodeからGit操作
○ ブランチの変更
ソース管理アイコンを選択し、三点メニューから「チェックアウト先」をクリック
[ブランチ]内から移動したいローカルブランチを指定すれば変更が可能です。
また、新たにリモートのブランチをローカルにコピーして移動したい場合は[リモートブランチ]内のブランチを指定すればOKです。
○ コミット
ファイルに変更を加えると、左メニューアイコン「ソース管理」に変更されたファイル数のマークが付与されます。
ソース管理アイコンを選択すると以下の内容が表示されます。
・コミットメッセージ枠
・コミットボタン
・変更ファイル一覧
以下の手順でコミットします。
① コミットしたいファイルをステージに上げる必要があるため、ファイル右側にある「+」をクリックします
  ※ 全てのファイルを一気にステージに上げる事も可能です
② コミットメッセージを記述します
③ コミットボタンを押下します
○ プッシュ
コミットをすると「変更の同期」ボタンが表示され、押下する事でプッシュできます。
GitHub + Copilot
○ 概要
VSCode に「GitHub + Copilot」機能を連携させることで、エディタ内に AI を常駐させることができます。
VSCode はもともと GitHub と相性が良い開発環境ですが、Copilot を追加することで、
いま話題の AI コーディング支援をそのまま使えるようになります。
使える機能は主に以下の2つです。
  ・コード予測機能(自動生成)
  ・チャットによる質問・解説
特にコード予測機能が秀逸で、例えばコメントに「// DB検索してユーザーを特定する」と記述すると、
フワッと続きを提案してくれます。
ユーザーは《承認》《拒否》を選ぶだけでコードが完成していきます。
これ単純な雛形程度のものが表示されるんでしょ。って思うじゃないですか?
いやいやメチャメチャ凄くて、VSCodeで開いてもいないプロジェクト内の既存コードを参照して、
ほぼそのまま使えるコードを提案してくれたりします。
これ地味にグループ開発の場合、コードの揺れの防止にも繋がるし思わずニヤニヤしちゃいますよ。
○ 少し心配?
現在(2026.06.07)はまさに【AI過渡期】となり、情報漏洩のリスク管理の仕方もテンプレートも模索している状態です。
そんな中で、いきなりGitHubのアカウントと連携しろっ!!
なんて言われると『世界中にプロジェクトの内容が漏洩するのでは?』などと思っちゃいますよね。
しかも何故MicroSoftの商品であるCopilotをGitHubと紐付けるの??
人間1つ納得いかないと、どんどん疑心暗鬼になりがちです。
でも安心して下さい。実は【GitHubはMicroSoftの傘下の企業】です。
建付けとしては、MicroSoftが開発したCopilotをGitHubがサブスクリプション商品[GitHub Copilot]として提供している感じです。
なのでサービスを受けたければ、当然GitHubのアカウントが必要となるわけです。
○ 導入手順(無償版)
1 .VS Codeを開く
2 .左下メニューで、人型のアイコンをクリック
3 .サインインしてGitHub Copilotを使用する(Sign in to GitHub)を選択する
4 .画面がポップするので「GitHubで続行する」を選択
5 .ブラウザがアクティブになるので[GitHub]にログインする
    ※ 色々聞かれるのでポチポチボタンを押下する
6 .上記途中の「Verify via email」ボタンを押下する
    ⇒ メールを開いてコードを確認。GitHub の画面にコードを入力。「Verify」を押下する
7 .左メニューから「拡張機能」のアイコンをクリック
8 .検索欄に「Copilot」を入力
9 .「GitHub Copilot」を見つける
10.ここで【Install】ボタンが非表示の場合は、既にアプリは入っています
    ※ 入ってない場合は当然「Install」します
11.左下メニューで、人型のアイコンをクリック
    ⇒ ここで「{アカウント名}(GitHub)」となっていれば正常に【VS Code + Copilot】が適用されています
注意

時間差で再度メールが来て、文面に「get started with copilot」ボタンがあるが無視して良い(広告です)

導入出来たら、兎に角遊んでみようっ!!
○ 軽く説明
[GitHub Copilot]を導入できても、どの機能が何処にあるの状態かと思います。
以下の表にまとめてみましたので、参考にしてみて下さい。
コード予測機能設定 画面右下のカエルアイコン
チャット機能 画面上の吹き出しアイコン
きっぷる
ログインしてコメントを残そう!!


レンズモード 【新規購入限定用】
きっぷる