Skip to content

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

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Draft
chvmvd wants to merge 1 commit into
base: main
Choose a base branch
from
Draft

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

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
1 commit
Select commit
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
28 changes: 16 additions & 12 deletions docs/1-trial-session/01-get-started/index.mdx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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">
Expand All @@ -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">
Expand All @@ -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">
Expand All @@ -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&nbsp;<span aria-label="そして">></span> Open Folder**を選択します。

<Tabs groupId="os">
<TabItem value="win" label="Windows">
Expand All @@ -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`をクリックしてください。

:::
Binary file removed docs/1-trial-session/01-get-started/install-vscode.mp4
View file
Open in desktop
Binary file not shown.
16 changes: 16 additions & 0 deletions src/components/Term/definitions.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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:
Expand Down
3 changes: 3 additions & 0 deletions src/components/Term/type-map.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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
Expand Down