diff --git a/docs/1-trial-session/01-get-started/index.mdx b/docs/1-trial-session/01-get-started/index.mdx index 29f33fb08..229a64310 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 1da7822fe..7a5da5953 100644 --- a/src/components/Term/definitions.ts +++ b/src/components/Term/definitions.ts @@ -50,6 +50,72 @@ 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/ウェブブラウザ + // - StatCounter Global Stats「Browser MarketShare Worldwide」 https://gs.statcounter.com/browser-market-share + }, + { + 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/ソースコードエディタ + // - 2025 Stack Overflow Developer Survey「Technology: Dev IDEs」 https://survey.stackoverflow.co/2025/technology#1-dev-id-es + }, + { + 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", + name: "ファイル", + aliases: [], + definition: + "パソコンやスマートフォンなどで扱う、文書・画像・音声・動画・プログラムなどのデータのまとまり。", + referencePage: "/docs/trial-session/get-started/", + // 参考 + // - IT用語辞典 e-Words「ファイルとは」 https://e-words.jp/w/ファイル.html + // - Wikipedia「ファイル (コンピュータ)」 https://ja.wikipedia.org/wiki/ファイル_(コンピュータ) + }, + { + id: "folder", + name: "フォルダ", + aliases: [], + definition: + "パソコンやスマートフォンなどで、ファイルや他のフォルダを整理してまとめておくための「入れ物」。", + referencePage: "/docs/trial-session/get-started/", + // 参考 + // - IT用語辞典 e-Words「フォルダとは」 https://e-words.jp/w/フォルダ.html + // - Wikipedia「ディレクトリ」 https://ja.wikipedia.org/wiki/ディレクトリ + }, { id: "file-extension", name: "拡張子",