「はじめてのWeb開発」の節を改訂

Author: chvmvd

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

@@ -11,11 +11,14 @@ import createFolderOnMacVideo from "./create-folder-on-mac.mp4";
 import openFolderOnWindowsVideo from "./open-folder-on-windows.mp4";
 import openFolderOnMacVideo from "./open-folder-on-mac.mp4";
 
-## Google Chromeのインストール
+Web開発を始めるには、いくつかのアプリケーションが必要です。学習を始めていく前に、これらのアプリケーションを準備しましょう。
 
-**Google Chrome**は、Google社が開発するウェブブラウザです。現在多くの人に使われています。他のウェブブラウザを使うことも出来ますが、この教材ではGoogle Chromeの使用を前提として話を進めていきます。
+## Google Chromeをインストールする
 
-Google Chromeは、[公式サイト](https://www.google.com/intl/ja_jp/chrome/)からインストールできます。まだインストールが終わっていない場合はインストールしておきましょう。
+{/* prettier-ignore */}
+<Term>**Google Chrome**</Term>は、Google社が開発するウェブブラウザです。多くのユーザーに利用されています。他のウェブブラウザを使うことも出来ますが、この教材ではGoogle Chromeの使用を前提として話を進めていきます。
+
+Google Chromeは、[公式サイト](https://www.google.com/intl/ja_jp/chrome/)からインストールできます。公式サイトの指示に従ってインストールを行ってください。
 
 <Tabs groupId="os">
   <TabItem value="win" label="Windows">
@@ -26,11 +29,12 @@ Google Chromeは、[公式サイト](https://www.google.com/intl/ja_jp/chrome/)
   </TabItem>
 </Tabs>
 
-## Visual Studio Codeのインストール
+## Visual Studio Codeをインストールする
 
-**Visual Studio Code** (以下VS Code) は、Microsoft社が開発するテキストエディタです。多くの開発者に使用されています。
+{/* prettier-ignore */}
+<Term>**Visual Studio Code**</Term>（以下VS Code）は、Microsoft社が開発するソースコードエディタです。多くの開発者に利用されています。
 
-Visual Studio Codeは、[公式サイト](https://code.visualstudio.com)からインストールできます。まだインストールが終わっていない場合はインストールしておきましょう。
+VS Codeは、[公式サイト](https://code.visualstudio.com/)からインストールできます。公式サイトの指示に従ってインストールを行ってください。
 
 <Tabs groupId="os">
   <TabItem value="win" label="Windows">
@@ -43,9 +47,9 @@ Visual Studio Codeは、[公式サイト](https://code.visualstudio.com)から
 
 ## プロジェクトを格納するフォルダを作成する
 
-これから皆さんはたくさんのプログラムを書いていくことになります。プログラムは他のファイルと扱い方がかなり異なるので、専用のフォルダを作っておきましょう。ユーザーフォルダ (Windows) /ホームフォルダ (macOS) の中に`projects`という名前のフォルダを作り、その中にプロジェクトごとのフォルダを作っていくと良いです。ユーザーフォルダ (Windows) /ホームフォルダ (macOS) の場所については次の動画をご確認ください。
+これから皆さんはたくさんのプログラムを書いていくことになります。プログラムは他のファイルと扱い方がかなり異なるので、専用のフォルダを作っておきましょう。Windowsの場合はユーザーフォルダの中に、macOSの場合はホームフォルダの中に、`projects`という名前のフォルダを作り、その中にプロジェクトごとのフォルダを作っていくと良いです。ユーザーフォルダあるいはホームフォルダの場所は次の動画で確認してください。
 
-次の例では、`hello-world`の名前でプロジェクト用のフォルダを作成しています。
+次の動画のように、`projects`フォルダを作成し、その中に`hello-world`の名前でプロジェクトを格納するフォルダを作成してください。
 
 <Tabs groupId="os">
   <TabItem value="win" label="Windows">
@@ -58,13 +62,13 @@ Visual Studio Codeは、[公式サイト](https://code.visualstudio.com)から
 
 :::info
 
-これから作成するプログラムは、さきほど作成したユーザーフォルダ (Windows) /ホームフォルダ (macOS) の中の`projects`フォルダの中に保存するようにしてください。これは、ドキュメントフォルダなどのフォルダはクラウドストレージサービスによって自動的に同期されることがあり、Visual Studio Codeなどの開発ツールが期待通りに動作しなくなってしまうことがあるからです。
+これ以降作成するプロジェクトを格納するフォルダは、先ほど作成した`projects`フォルダの中に作成するようにしてください。これは、ドキュメントフォルダなどのフォルダはクラウドストレージサービスによって自動的に同期されることがあり、VS Codeなどの開発ツールが期待通りに動作しなくなってしまうからです。
 
 :::
 
-## Visual Studio Codeでプロジェクトフォルダを開く
+## VS Codeでプロジェクトフォルダを開く
 
-`File`メニューから`Open Folder...`をクリックして、先ほど作成したフォルダをVS Codeで開きます。
+先ほど作成した`hello-world`フォルダをVS Codeで開くには、**File > Open Folder**を選択します。
 
 <Tabs groupId="os">
   <TabItem value="win" label="Windows">
@@ -77,6 +81,6 @@ Visual Studio Codeは、[公式サイト](https://code.visualstudio.com)から
 
 :::info
 
-最初にフォルダを開いたとき、`Do you trust the authors of the files in this folder?`と聞かれるのは、インターネットからダウンロードした悪意のあるフォルダをVS Codeで開いたとき、VS Codeによって勝手に実行されてしまうのを防ぐためです。自分で作成したフォルダの場合は問題ありません。
+最初にフォルダを開いたとき、`Do you trust the authors of the files in this folder?`と聞かれるのは、インターネットからダウンロードした悪意のあるフォルダをVS Codeで開いたとき、VS Codeによって勝手に実行されてしまうのを防ぐためです。自分で作成したフォルダの場合は問題ないので、`Yes, I trust the authors`をクリックしてください。
 
 :::

docs/1-trial-session/01-get-started/install-vscode.mp4

@@ -36,6 +36,22 @@ export default {
     "/docs/advanced/react/": "React",
   },
   terms: {
+    googleChrome: {
+      name: "Google Chrome",
+      definition:
+        "Google社が開発するウェブブラウザ。高速性と安全性を特徴としており、多くのユーザーに利用されている。",
+      referencePage: "/docs/trial-session/get-started/",
+      // 参考：Google公式「Chrome」 https://www.google.com/intl/ja_jp/chrome/
+    },
+    vsCode: {
+      name: "Visual Studio Code",
+      definition:
+        "Microsoft社が開発するソースコードエディタ。豊富な機能を特徴としており、多くの開発者に利用されている。",
+      referencePage: "/docs/trial-session/get-started/",
+      // 参考
+      // - Visual Studio Code公式 https://code.visualstudio.com/
+      // - Wikipedia「Visual Studio Code」 https://ja.wikipedia.org/wiki/Visual_Studio_Code
+    },
     fileExtension: {
       name: "拡張子",
       definition:

src/components/Term/definitions.js

@@ -22,6 +22,9 @@
  */
 
 const typeMap = new Map([
+  ["Google Chrome", "googleChrome"],
+  ["Visual Studio Code", "vsCode"],
+  ["VS Code", "vsCode"],
   ["拡張子", "fileExtension"],
   ["フォーク", "fork"], // not found
   ["Git", "git"], // not found