説明を修正

Author: chvmvd

docs/1-trial-session/01-get-started/index.mdx

@@ -30,7 +30,7 @@ Web開発を始めるには、いくつかのアプリケーションが必要
 
 ## Visual Studio Codeのインストール
 
-[[**Visual Studio Code**]]（以下VS Code）は、Microsoft社が開発するコードエディタです。多くの開発者に利用されています。
+[[**Visual Studio Code**]]（以下VS Code）は、Microsoft社が開発する[[コードエディタ]]です。多くの開発者に利用されています。
 
 [[VS Code]]は、[公式サイト](https://code.visualstudio.com/)からインストールできます。公式サイトの指示に従ってインストールを行ってください。
 
@@ -45,28 +45,42 @@ Web開発を始めるには、いくつかのアプリケーションが必要
 
 ## プロジェクトを格納するフォルダを作成する
 
-これから皆さんはたくさんのプログラムを書いていくことになります。プログラムは他のファイルと扱い方がかなり異なるので、専用のフォルダを作っておきましょう。Windowsの場合はユーザーフォルダの中に、macOSの場合はホームフォルダの中に、`projects`という名前のフォルダを作り、その中にプロジェクトごとのフォルダを作っていくと良いです。ユーザーフォルダあるいはホームフォルダの場所は次の動画で確認してください。
-
-次の動画のように、`projects`フォルダを作成し、その中に`hello-world`の名前でプロジェクトを格納するフォルダを作成してください。
-
 <Tabs groupId="os">
   <TabItem value="win" label="Windows">
+
+    これから皆さんはたくさんのプログラムを書いていくことになります。プログラムは他のファイルと扱い方がかなり異なるので、専用のフォルダを作っておきましょう。ユーザーフォルダの中に、`projects`という名前のフォルダを作り、その中にプロジェクトごとのフォルダを作っていくと良いです。
+
+    次の動画に従って、ユーザーフォルダの中に`projects`フォルダを作成し、その中に`hello-world`の名前でプロジェクトを格納するフォルダを作成してください。
+
     <video src={createFolderOnWindowsVideo} controls />
+
+    :::warning
+
+    これ以降作成するプロジェクトを格納するフォルダは、必ず先ほど作成した`projects`フォルダの中に作成するようにしてください。これは、ドキュメントフォルダなどのフォルダはOneDriveなどのクラウドストレージサービスによって自動的に同期されることがあり、[[VS Code]]などの開発ツールが期待通りに動作しなくなってしまうからです。
+
+    :::
+
   </TabItem>
   <TabItem value="mac" label="macOS">
+
+    これから皆さんはたくさんのプログラムを書いていくことになります。プログラムは他のファイルと扱い方がかなり異なるので、専用のフォルダを作っておきましょう。ホームフォルダの中に、`projects`という名前のフォルダを作り、その中にプロジェクトごとのフォルダを作っていくと良いです。
+
+    次の動画に従って、ホームフォルダの中に`projects`フォルダを作成し、その中に`hello-world`の名前でプロジェクトを格納するフォルダを作成してください。
+
     <video src={createFolderOnMacVideo} controls />
-  </TabItem>
-</Tabs>
 
-:::info
+    :::warning
 
-これ以降作成するプロジェクトを格納するフォルダは、必ず先ほど作成した`projects`フォルダの中に作成するようにしてください。これは、ドキュメントフォルダなどのフォルダはクラウドストレージサービスによって自動的に同期されることがあり、[[VS Code]]などの開発ツールが期待通りに動作しなくなってしまうからです。
+    これ以降作成するプロジェクトを格納するフォルダは、必ず先ほど作成した`projects`フォルダの中に作成するようにしてください。これは、ドキュメントフォルダなどのフォルダはiCloudなどのクラウドストレージサービスによって自動的に同期されることがあり、[[VS Code]]などの開発ツールが期待通りに動作しなくなってしまうからです。
 
-:::
+    :::
+
+  </TabItem>
+</Tabs>
 
-## VS Codeでプロジェクトフォルダを開く
+## VS Codeでプロジェクトを格納するフォルダを開く
 
-先ほど作成した`hello-world`フォルダを[[VS Code]]で開くには、**File&nbsp;<span aria-label="そして">></span> Open Folder**を選択します。
+先ほど作成した`hello-world`フォルダを[[VS Code]]で開くには、**File > Open Folder...** を選択します。
 
 <Tabs groupId="os">
   <TabItem value="win" label="Windows">
@@ -79,6 +93,6 @@ Web開発を始めるには、いくつかのアプリケーションが必要
 
 :::info
 
-最初にフォルダを開いたとき、`Do you trust the authors of the files in this folder?`と聞かれるのは、インターネットからダウンロードした悪意のあるフォルダをVS Codeで開いたとき、VS Codeによって勝手に実行されてしまうのを防ぐためです。自分で作成したフォルダの場合は問題ないので、`Yes, I trust the authors`をクリックしてください。
+最初にフォルダを開いたとき、`Do you trust the authors of the files in this folder?`と聞かれるのは、インターネットからダウンロードした悪意のあるフォルダを[[VS Code]]で開いたとき、[[VS Code]]によって勝手に実行されてしまうのを防ぐためです。自分で作成したフォルダの場合は問題ないので、`Yes, I trust the authors`を選択してください。
 
 :::

src/components/Term/definitions.ts

@@ -58,8 +58,8 @@ export const terms: Term[] = [
       "パソコンやスマートフォンなどで、インターネット上のウェブページを表示して利用するためのアプリケーション。Google ChromeやSafari、Microsoft Edge、Mozilla Firefoxなどがある。",
     referencePage: "/docs/trial-session/get-started/",
     // 参考
-    // - Wikipedia「ウェブブラウザ」 https://ja.wikipedia.org/wiki/ウェブブラウザ
     // - MDN「Browser (ブラウザー)」 https://developer.mozilla.org/ja/docs/Glossary/Browser
+    // - Wikipedia「ウェブブラウザ」 https://ja.wikipedia.org/wiki/ウェブブラウザ
   },
   {
     id: "google-chrome",
@@ -70,6 +70,17 @@ export const terms: Term[] = [
     referencePage: "/docs/trial-session/get-started/",
     // 参考：Google公式「Chrome」 https://www.google.com/intl/ja_jp/chrome/
   },
+  {
+    id: "code-editor",
+    name: "コードエディタ",
+    aliases: [],
+    definition:
+      "プログラムを記述・編集するためのアプリケーション。Visual Studio Codeなどがある。",
+    referencePage: "/docs/trial-session/get-started/",
+    // 参考
+    // - MDN「コードエディター」 https://developer.mozilla.org/ja/docs/Learn_web_development/Getting_started/Environment_setup/Code_editors
+    // - Wikipedia「ソースコードエディタ」 https://ja.wikipedia.org/wiki/ソースコードエディタ
+  },
   {
     id: "visual-studio-code",
     name: "Visual Studio Code",