Skip to content

Commit 88f1247

Browse files
chvmvdchvmvd
committed
「はじめてのWeb開発」の節を改訂
1 parent c92e7dd commit 88f1247

File tree

4 files changed

+48
-28
lines changed

4 files changed

+48
-28
lines changed

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

Lines changed: 30 additions & 28 deletions
Original file line numberDiff line numberDiff line change
@@ -2,81 +2,83 @@
22
title: はじめてのWeb開発
33
---
44

5-
import installChromeOnMacVideo from "./install-chrome-on-mac.mp4";
65
import installChromeOnWindowsVideo from "./install-chrome-on-windows.mp4";
7-
import installVscodeOnMacVideo from "./install-vscode-on-mac.mp4";
6+
import installChromeOnMacVideo from "./install-chrome-on-mac.mp4";
87
import installVscodeOnWindowsVideo from "./install-vscode-on-windows.mp4";
9-
import createFolderOnMacVideo from "./create-folder-on-mac.mp4";
8+
import installVscodeOnMacVideo from "./install-vscode-on-mac.mp4";
109
import createFolderOnWindowsVideo from "./create-folder-on-windows.mp4";
11-
import openFolderOnMacVideo from "./open-folder-on-mac.mp4";
10+
import createFolderOnMacVideo from "./create-folder-on-mac.mp4";
1211
import openFolderOnWindowsVideo from "./open-folder-on-windows.mp4";
12+
import openFolderOnMacVideo from "./open-folder-on-mac.mp4";
13+
14+
Webプログラミングを始めるには、いくつかのアプリケーションが必要です。学習を始めていく前に、これらのアプリケーションを準備しましょう。
1315

14-
## Google Chromeのインストール
16+
## Google Chromeをインストールする
1517

16-
**Google Chrome**は、Google社が開発するウェブブラウザです。現在多くの人に使われています。他のウェブブラウザを使うことも出来ますが、この教材ではGoogle Chromeの使用を前提として話を進めていきます。
18+
**Google Chrome**は、Google社が開発するウェブブラウザです。多くのユーザーに利用されています。他のウェブブラウザを使うことも出来ますが、この教材ではGoogle Chromeの使用を前提として話を進めていきます。
1719

18-
Google Chromeは、[公式サイト](https://www.google.com/intl/ja_jp/chrome/)からインストールできます。まだインストールが終わっていない場合はインストールしておきましょう。
20+
Google Chromeは、[公式サイト](https://www.google.com/intl/ja_jp/chrome/)からインストールできます。公式サイトの指示に従ってインストールを行ってください。
1921

2022
<Tabs groupId="os">
21-
<TabItem value="mac" label="macOS">
22-
<video src={installChromeOnMacVideo} controls />
23-
</TabItem>
2423
<TabItem value="win" label="Windows">
2524
<video src={installChromeOnWindowsVideo} controls />
2625
</TabItem>
26+
<TabItem value="mac" label="macOS">
27+
<video src={installChromeOnMacVideo} controls />
28+
</TabItem>
2729
</Tabs>
2830

29-
## Visual Studio Codeのインストール
31+
## Visual Studio Codeをインストールする
3032

31-
**Visual Studio Code** (以下VS Code) は、Microsoft社が開発するテキストエディタです。多くの開発者に使用されています。
33+
**Visual Studio Code**（以下VS Code）は、Microsoft社が開発するソースコードエディタです。多くの開発者に利用されています。
3234

33-
Visual Studio Codeは、[公式サイト](https://code.visualstudio.com)からインストールできます。まだインストールが終わっていない場合はインストールしておきましょう。
35+
Visual Studio Codeは、[公式サイト](https://code.visualstudio.com/)からインストールできます。公式サイトの指示に従ってインストールを行ってください。
3436

3537
<Tabs groupId="os">
36-
<TabItem value="mac" label="macOS">
37-
<video src={installVscodeOnMacVideo} controls />
38-
</TabItem>
3938
<TabItem value="win" label="Windows">
4039
<video src={installVscodeOnWindowsVideo} controls />
4140
</TabItem>
41+
<TabItem value="mac" label="macOS">
42+
<video src={installVscodeOnMacVideo} controls />
43+
</TabItem>
4244
</Tabs>
4345

4446
## プロジェクトを格納するフォルダを作成する
4547

46-
これから皆さんはたくさんのプログラムを書いていくことになります。プログラムは他のファイルと扱い方がかなり異なるので、専用のフォルダを作っておきましょう。ホームフォルダ (macOS) /ユーザーフォルダ (Windows) の中に`projects`という名前のフォルダを作り、その中にプロジェクトごとのフォルダを作っていくと良いです。ホームフォルダ (macOS) /ユーザーフォルダ (Windows) の場所については次の動画をご確認ください。
48+
これから皆さんはたくさんのプログラムを書いていくことになります。プログラムは他のファイルと扱い方がかなり異なるので、専用のフォルダを作っておきましょう。Windowsの場合はユーザーフォルダの中に、macOSの場合はホームフォルダの中に、`projects`という名前のフォルダを作り、その中にプロジェクトごとのフォルダを作っていくと良いです。ユーザーフォルダあるいはホームフォルダの場所は次の動画で確認してください。
4749

48-
次の例では、`hello-world`の名前でプロジェクト用のフォルダを作成しています。
50+
次の動画のように、`projects`フォルダを作成し、その中に`hello-world`の名前でプロジェクト用のフォルダを作成してください。
4951

5052
<Tabs groupId="os">
51-
<TabItem value="mac" label="macOS">
52-
<video src={createFolderOnMacVideo} controls />
53-
</TabItem>
5453
<TabItem value="win" label="Windows">
5554
<video src={createFolderOnWindowsVideo} controls />
5655
</TabItem>
56+
<TabItem value="mac" label="macOS">
57+
<video src={createFolderOnMacVideo} controls />
58+
</TabItem>
5759
</Tabs>
5860

5961
:::info
6062

61-
これから作成するプログラムは、さきほど作成したホームフォルダ (macOS) /ユーザーフォルダ (Windows) の中の`projects`フォルダの中に保存するようにしてください。これは、ドキュメントフォルダなどのフォルダはクラウドストレージサービスによって自動的に同期されることがあり、Visual Studio Codeなどの開発ツールが期待通りに動作しなくなってしまうことがあるからです。
63+
これ以降作成するプロジェクト用のフォルダは、先ほど作成した`projects`フォルダの中に作成するようにしてください。これは、ドキュメントフォルダなどのフォルダはクラウドストレージサービスによって自動的に同期されることがあり、VS Codeなどの開発ツールが期待通りに動作しなくなってしまうからです。
6264

6365
:::
6466

65-
## Visual Studio Codeでプロジェクトフォルダを開く
67+
## VS Codeでプロジェクトフォルダを開く
6668

67-
`File`メニューから`Open Folder...`をクリックして、先ほど作成したフォルダをVS Codeで開きます。
69+
先ほど作成した`hello-world`フォルダをVS Codeで開くには、**File > Open Folder**を選択します。
6870

6971
<Tabs groupId="os">
70-
<TabItem value="mac" label="macOS">
71-
<video src={openFolderOnMacVideo} controls />
72-
</TabItem>
7372
<TabItem value="win" label="Windows">
7473
<video src={openFolderOnWindowsVideo} controls />
7574
</TabItem>
75+
<TabItem value="mac" label="macOS">
76+
<video src={openFolderOnMacVideo} controls />
77+
</TabItem>
7678
</Tabs>
7779

7880
:::info
7981

80-
最初にフォルダを開いたとき、`Do you trust the authors of the files in this folder?`と聞かれるのは、インターネットからダウンロードした悪意のあるフォルダをVS Codeで開いたとき、VS Codeによって勝手に実行されてしまうのを防ぐためです。自分で作成したフォルダの場合は問題ありません。
82+
最初にフォルダを開いたとき、`Do you trust the authors of the files in this folder?`と聞かれるのは、インターネットからダウンロードした悪意のあるフォルダをVS Codeで開いたとき、VS Codeによって勝手に実行されてしまうのを防ぐためです。自分で作成したフォルダの場合は問題ないので、`Yes, I trust the authors`をクリックしてください。
8183

8284
:::

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

-4.99 MB
Binary file not shown.

‎src/components/Term/definitions.js‎

Lines changed: 16 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -36,6 +36,22 @@ export default {
3636
"/docs/advanced/react/": "React",
3737
},
3838
terms: {
39+
googleChrome: {
40+
name: "Google Chrome",
41+
definition:
42+
"Google社が開発するウェブブラウザ。高速性と安全性を特徴としており、多くのユーザーに利用されている。",
43+
referencePage: "/docs/trial-session/get-started/",
44+
// 参考：Google公式「Chrome」 https://www.google.com/intl/ja_jp/chrome/
45+
},
46+
vsCode: {
47+
name: "Visual Studio Code",
48+
definition:
49+
"Microsoft社が開発するソースコードエディタ。豊富な機能を特徴としており、多くの開発者に利用されている。",
50+
referencePage: "/docs/trial-session/get-started/",
51+
// 参考
52+
// - Visual Studio Code公式 https://code.visualstudio.com/
53+
// - Wikipedia「Visual Studio Code」 https://ja.wikipedia.org/wiki/Visual_Studio_Code
54+
},
3955
fileExtension: {
4056
name: "拡張子",
4157
definition:

‎src/components/Term/type-map.js‎

Lines changed: 2 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -22,6 +22,8 @@
2222
*/
2323

2424
const typeMap = new Map([
25+
["Google Chrome", "googleChrome"],
26+
["VS Code", "vsCode"],
2527
["拡張子", "fileExtension"],
2628
["フォーク", "fork"], // not found
2729
["Git", "git"], // not found

0 commit comments

Comments
 (0)