トップページ > ソフトウェアの操作 > Visual Studio Code でファイルやフォルダを開いて編集する方法
Visual Studio Code でファイルやフォルダを開いて編集する方法
Visual Studio Code はプログラムを行う際に利用するテキストエディタだが、複数のファイルで構成されるアプリケーションやウェブサイトではフォルダでまとめられることが多いため、VSCode でファイルやフォルダを開いて編集する方法について紹介する。
このページの目次
1. プロジェクトごとにファイルをフォルダにまとめておくメリット
プロジェクトごとにファイルをフォルダにまとめておくメリットとしては、サーバへのアップロードのしやすさとプログラムファイル群の管理のしやすさが挙げられる。
プログラムやウェブサイト制作ではプロジェクトごとにファイルをフォルダにまとめることが多く、サーバへアップロードする際はフォルダごと転送すればよいので作業が楽になる。
また、フォルダを圧縮して 1 つのファイルにしてサーバに転送しても、サーバで解凍するとフォルダ構成を保ったままサーバに保存されるので 1 つずつアップロードするのに比べると作業時間が短縮できる。
加えて、最近ではプログラムを複数人で同時に操作したり、差分管理するために Subversion や Git を用いられることが多い。
その際もプロジェクト（システム）ごとにフォルダが分けられているとファイルをコミットしたり更新時にフォルダごとに操作できるの管理が楽になる。
2. Visual Studio Code とは
Visual Studio Code（略称：VSC）とは、Microsoft 社が無償で配布しているテキストエディタである。
同社ではプログラム開発向けに「Visual Studio」を製造・販売してきたが、VSC と Visual Studio は名前は似ているもののソフトウェアとは別の扱いとなっている。
VSC は統合開発環境（IDE）として名称を引き継いで提供されている。
VSC はテキストエディタであるため、拡張子 .txt を始め、PHP の .php や Python の .py などテキストファイルであれば開いて編集することが可能である。 さらに拡張機能（プラグイン）により開発したいプログラム言語をよりコーディングしやすくなるなど、開発する上で便利な機能を自由に用意することができる。
3. VSCode でファイルを開く方法
VSCode でファイルを開く方法としては、ファイルを VSC にドラッグ＆ドロップするか、メニューから開きたいファイルを選択する。
メニューからファイルを開く場合は、上部メニューの「ファイル -> ファイルを開く」をクリックするとパソコン内のファイルを選択するウィンドウが表示されるので、開きたいファイルがあるフォルダまで辿ってファイルを指定する。
4. VSCode でフォルダーを開く方法
VSCode でフォルダを開く方法としては、メニューから開きたいフォルダを選択する。
下図のように上部メニューの「ファイル -> フォルダーを開く」をクリックするとパソコン内のファイルを選択するウィンドウが表示されるので、開きたいフォルダを指定する。
開きたいフォルダーを指定すると下図のようにツリー状のエクスプローラーの形式でフォルダ階層と各フォルダにあるファイルが一覧で表示される。
フォルダーを開く場合には注意点がいくつかある。
1 つは、VSC でフォルダは複数同時に開くことができないため、異なるプロジェクトを並行して進めたり、異なるフォルダにあるファイルを比較しながらコーディングするのには難がある。
2 つ目は、編集中のファイルがある場合はフォルダーを開く際に破棄されるため、編集中のファイルを保存してからフォルダーを開く必要がある。
最後は、開いたフォルダは上位階層に移動できないため、より多くのフォルダを同時に開きたい場合は下位階層のフォルダーを開くのではなく、できるだけ上の階層のフォルダを開くことで、その下位にあるフォルダーもエクスプローラーに表示されるようになる。
5. VSCode でフォルダーを閉じる方法
VSCode で開いたフォルダーを閉じる方法は、上部メニューより「ファイル -> フォルダーを閉じる」を選択するとフォルダーが閉じられ、VSC が初期起動時の画面に戻すことができる。
6. VSCode でファイルやフォルダを開くまとめ
VSCode でファイルやフォルダを開くまとめとしては、ファイルはドラッグ＆ドロップまたはメニューでファイル指定して開くことができる。
フォルダーはメニューで指定して開く。
ただしフォルダーを操作する場合はいくつか注意点があり、同時に複数のフォルダーを開くことができなかったり、下位の階層のフォルダーを開くと上位階層への移動ができないことがある。
関連記事
ソフトウェア
無料でプログラム開発ができる Visual Studio Code は一般的なテキストエディタと同じようにソースコードを記入する欄の他に、フォルダ階層やプログラムの実行結果を同時に表示することができるため、主となる 6 つの作業エリアと役割について紹介する。
Photoshop, ソフトウェア
Photoshop でキャンパスに配置した図形や読み込んだ画像内の特定の色を削除したり、透明化する場合の手順を紹介する。色を削除すると切り抜かれた状態となるためキャンバスの背景色の色が表示されるようになり、もし背景色を透明にしている場合は背面に画像等を配置することで合成することができる。
Photoshop でスライスツールを使って画像を均等に分割する方法
Photoshop, ソフトウェア
Photoshop で画像や写真を分割する場合はスライスツールを利用することが多く、自由に位置を決めて分割できる他、横幅または縦幅の長さで数量を指定して均等に分割する方法について解説する。
Photoshop, ソフトウェア
Photoshop で写真に写っている対象全体の明るさや暗さを調整したり、明暗の階調のバランスを調整したい場合に利用するレベル補正の機能の概要と使い方について紹介する。
Photoshop のコピースタンプツールで不要なものを消す方法
Photoshop, ソフトウェア
Photoshop で写真に写っている対象物を消したり、特定の箇所を違う場所にコピーして設置したい場合にコピースタンプツールを用いて加工する方法について紹介する。
