Spring Boot Ajax/JavaScript/API連携

JavaScriptのファイルをVSCodeで編集してみた

JavaScriptのファイルを編集する際、VSCode(Visual Studio Code)というエディタを利用すると、コードを見やすくしたり、コードの自動補完を行ってくれたりして、大変便利である。

今回は、以下の記事で紹介しているJavaScriptのソースコード(demo.js)を開いたり編集したりしてみたので、その内容を共有する。

Spring BootでJavaScriptによるチェック処理を実装してみたこれまでは、Spring Bootによるチェック処理を利用してきたが、今回はJavaScriptによって同等のチェック処理を実装してみた...

前提条件

下記記事の手順に従って、VSCodeのインストールとVSCodeの日本語化が完了していること。

PlantUMLをVSCode上で利用してみたPlantUMLは、VSCode(Visual Studio Code)上で編集するようにすると、ソースコードを色つきで分かりやすく表示...



やってみたこと

  1. VSCode上でのファイルオープン
  2. VSCode上でのファイル編集

VSCode上でのファイルオープン

VSCodeを起動し、JavaScriptのソースコード(demo.js)を開く手順は、以下の通り。

1) スタートメニューから「Visual Studio Code」メニューを選択する。
JavaScriptファイルを開く_1

2) 以下のように、VSCodeの画面が起動する。
JavaScriptファイルを開く_2

3) 「ファイル」メニューから「フォルダーを開く」を選択する。
JavaScriptファイルを開く_3

4) 開く予定のJavaScriptのソースコード(demo.js)が存在するフォルダを指定し、「フォルダーの選択」ボタンを押下する。
JavaScriptファイルを開く_4

5) 以下のように、指定したフォルダに存在するファイル(demo.css、demo.js)が表示されることが確認できる。
JavaScriptファイルを開く_5

6) 「demo.js」をダブルクリックすると、以下のように、右側にJavaScriptのソースコード(demo.js)が色付きで表示される。
JavaScriptファイルを開く_6_1

なお、IntelliJ IDEA上でJavaScriptのソースコード(demo.js)を開いた場合は、以下のような表示になる。
JavaScriptファイルを開く_6_2



VSCode上でのファイル編集

VSCode上でファイルを編集する操作は、以下の通り。

1) 開いたJavaScriptのソースコード(demo.js)を編集中の画面内容は以下の通りで、コードの自動補完を行ってくれることが確認できる。
JavaScriptファイルの編集_1

2) 「ファイルを開く」ボタンを押下すると、ファイル名の入力欄が表示される。
JavaScriptファイルの編集_2_1

JavaScriptファイルの編集_2_2

3) ファイル名を入力し、カーソルを外すと、以下のように、指定した新しいファイルが作成される。
JavaScriptファイルの編集_3_1

JavaScriptファイルの編集_3_2

4) ファイルを編集後、「ファイル」メニューから「保存」を選択すると、編集したファイルが保存される。
JavaScriptファイルの編集_4_1

JavaScriptファイルの編集_4_2 JavaScriptファイルの編集_4_3

要点まとめ

  • JavaScriptのファイルを編集する際、VSCode(Visual Studio Code)というエディタを利用すると、コードを見やすくしたり、コードの自動補完を行ってくれたりして、大変便利である。