diff --git a/docs/1-trial-session/01-get-started/index.mdx b/docs/1-trial-session/01-get-started/index.mdx index 29f33fb08..ceb053389 100644 --- a/docs/1-trial-session/01-get-started/index.mdx +++ b/docs/1-trial-session/01-get-started/index.mdx @@ -11,11 +11,13 @@ import createFolderOnMacVideo from "./create-folder-on-mac.mp4"; import openFolderOnWindowsVideo from "./open-folder-on-windows.mp4"; import openFolderOnMacVideo from "./open-folder-on-mac.mp4"; +Web開発を始めるには、いくつかのアプリケーションが必要です。学習を始めていく前に、これらのアプリケーションを準備しましょう。 + ## Google Chromeのインストール -**Google Chrome**は、Google社が開発するウェブブラウザです。現在多くの人に使われています。他のウェブブラウザを使うことも出来ますが、この教材ではGoogle Chromeの使用を前提として話を進めていきます。 +[[**Google Chrome**]]は、Google社が開発する[[ウェブブラウザ]]です。多くのユーザーに利用されています。他の[[ウェブブラウザ]]を使うこともできますが、この教材では[[Google Chrome]]の使用を前提として話を進めていきます。 -Google Chromeは、[公式サイト](https://www.google.com/intl/ja_jp/chrome/)からインストールできます。まだインストールが終わっていない場合はインストールしておきましょう。 +[[Google Chrome]]は、[公式サイト](https://www.google.com/intl/ja_jp/chrome/)からインストールできます。公式サイトの指示に従ってインストールを行ってください。 @@ -28,9 +30,9 @@ Google Chromeは、[公式サイト](https://www.google.com/intl/ja_jp/chrome/) ## Visual Studio Codeのインストール -**Visual Studio Code** (以下VS Code) は、Microsoft社が開発するテキストエディタです。多くの開発者に使用されています。 +[[**Visual Studio Code**]]（以下VS Code）は、Microsoft社が開発する[[コードエディタ]]です。多くの開発者に利用されています。 -Visual Studio Codeは、[公式サイト](https://code.visualstudio.com)からインストールできます。まだインストールが終わっていない場合はインストールしておきましょう。 +[[VS Code]]は、[公式サイト](https://code.visualstudio.com/)からインストールできます。公式サイトの指示に従ってインストールを行ってください。 @@ -43,28 +45,42 @@ Visual Studio Codeは、[公式サイト](https://code.visualstudio.com)から ## プロジェクトを格納するフォルダを作成する -これから皆さんはたくさんのプログラムを書いていくことになります。プログラムは他のファイルと扱い方がかなり異なるので、専用のフォルダを作っておきましょう。ユーザーフォルダ (Windows) /ホームフォルダ (macOS) の中に`projects`という名前のフォルダを作り、その中にプロジェクトごとのフォルダを作っていくと良いです。ユーザーフォルダ (Windows) /ホームフォルダ (macOS) の場所については次の動画をご確認ください。 - -次の例では、`hello-world`の名前でプロジェクト用のフォルダを作成しています。 - + + これから皆さんはたくさんのプログラムを書いていくことになります。プログラムは他のファイルと扱い方がかなり異なるので、専用のフォルダを作っておきましょう。ユーザーフォルダの中に、`projects`という名前のフォルダを作り、その中にプロジェクトごとのフォルダを作っていくと良いです。 + + 次の動画に従って、ユーザーフォルダの中に`projects`フォルダを作成し、その中に`hello-world`の名前でプロジェクトを格納するフォルダを作成してください。 + + + これから皆さんはたくさんのプログラムを書いていくことになります。プログラムは他のファイルと扱い方がかなり異なるので、専用のフォルダを作っておきましょう。ホームフォルダの中に、`projects`という名前のフォルダを作り、その中にプロジェクトごとのフォルダを作っていくと良いです。 + + 次の動画に従って、ホームフォルダの中に`projects`フォルダを作成し、その中に`hello-world`の名前でプロジェクトを格納するフォルダを作成してください。 + - -:::info + :::warning -これから作成するプログラムは、さきほど作成したユーザーフォルダ (Windows) /ホームフォルダ (macOS) の中の`projects`フォルダの中に保存するようにしてください。これは、ドキュメントフォルダなどのフォルダはクラウドストレージサービスによって自動的に同期されることがあり、Visual Studio Codeなどの開発ツールが期待通りに動作しなくなってしまうことがあるからです。 + これ以降作成するプロジェクトを格納するフォルダは、必ず先ほど作成した`projects`フォルダの中に作成するようにしてください。これは、ドキュメントフォルダなどのフォルダはiCloudなどのクラウドストレージサービスによって自動的に同期されることがあり、[[VS Code]]などの開発ツールが期待通りに動作しなくなってしまうからです。 -::: + ::: + + + -## Visual Studio Codeでプロジェクトフォルダを開く +## VS Codeでプロジェクトを格納するフォルダを開く -`File`メニューから`Open Folder...`をクリックして、先ほど作成したフォルダをVS Codeで開きます。 +先ほど作成した`hello-world`フォルダを[[VS Code]]で開くには、**File > Open Folder...** を選択します。 @@ -77,6 +93,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`を選択してください。 ::: diff --git a/docs/1-trial-session/01-get-started/install-vscode.mp4 b/docs/1-trial-session/01-get-started/install-vscode.mp4 deleted file mode 100644 index 0803dfc6a..000000000 Binary files a/docs/1-trial-session/01-get-started/install-vscode.mp4 and /dev/null differ diff --git a/src/components/Term/definitions.ts b/src/components/Term/definitions.ts index 21d2272bf..b1921e8fa 100644 --- a/src/components/Term/definitions.ts +++ b/src/components/Term/definitions.ts @@ -50,6 +50,48 @@ type Term = { }; export const terms: Term[] = [ + { + id: "web-browser", + name: "ウェブブラウザ", + aliases: [], + definition: + "パソコンやスマートフォンなどで、インターネット上のウェブページなどを利用するためのアプリケーション。Google ChromeやSafari、Microsoft Edge、Mozilla Firefoxなどがある。", + referencePage: "/docs/trial-session/get-started/", + // 参考 + // - MDN「Browser (ブラウザー)」 https://developer.mozilla.org/ja/docs/Glossary/Browser + // - Wikipedia「ウェブブラウザ」 https://ja.wikipedia.org/wiki/ウェブブラウザ + }, + { + id: "google-chrome", + name: "Google Chrome", + aliases: [], + definition: + "Google社が開発するウェブブラウザ。高速性と安全性を特徴としており、多くのユーザーに利用されている。", + 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", + aliases: ["VS 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 + }, { id: "file-extension", name: "拡張子",