diff --git a/docs/1-trial-session/01-get-started/index.mdx b/docs/1-trial-session/01-get-started/index.mdx index 1b40615c7..29f33fb08 100644 --- a/docs/1-trial-session/01-get-started/index.mdx +++ b/docs/1-trial-session/01-get-started/index.mdx @@ -2,14 +2,14 @@ title: はじめてのWeb開発 --- -import installChromeOnMacVideo from "./install-chrome-on-mac.mp4"; import installChromeOnWindowsVideo from "./install-chrome-on-windows.mp4"; -import installVscodeOnMacVideo from "./install-vscode-on-mac.mp4"; +import installChromeOnMacVideo from "./install-chrome-on-mac.mp4"; import installVscodeOnWindowsVideo from "./install-vscode-on-windows.mp4"; -import createFolderOnMacVideo from "./create-folder-on-mac.mp4"; +import installVscodeOnMacVideo from "./install-vscode-on-mac.mp4"; import createFolderOnWindowsVideo from "./create-folder-on-windows.mp4"; -import openFolderOnMacVideo from "./open-folder-on-mac.mp4"; +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のインストール @@ -18,12 +18,12 @@ import openFolderOnWindowsVideo from "./open-folder-on-windows.mp4"; Google Chromeは、[公式サイト](https://www.google.com/intl/ja_jp/chrome/)からインストールできます。まだインストールが終わっていない場合はインストールしておきましょう。 - - + + ## Visual Studio Codeのインストール @@ -33,32 +33,32 @@ Google Chromeは、[公式サイト](https://www.google.com/intl/ja_jp/chrome/) Visual Studio Codeは、[公式サイト](https://code.visualstudio.com)からインストールできます。まだインストールが終わっていない場合はインストールしておきましょう。 - - + + ## プロジェクトを格納するフォルダを作成する -これから皆さんはたくさんのプログラムを書いていくことになります。プログラムは他のファイルと扱い方がかなり異なるので、専用のフォルダを作っておきましょう。ホームフォルダ (macOS) /ユーザーフォルダ (Windows) の中に`projects`という名前のフォルダを作り、その中にプロジェクトごとのフォルダを作っていくと良いです。ホームフォルダ (macOS) /ユーザーフォルダ (Windows) の場所については次の動画をご確認ください。 +これから皆さんはたくさんのプログラムを書いていくことになります。プログラムは他のファイルと扱い方がかなり異なるので、専用のフォルダを作っておきましょう。ユーザーフォルダ (Windows) /ホームフォルダ (macOS) の中に`projects`という名前のフォルダを作り、その中にプロジェクトごとのフォルダを作っていくと良いです。ユーザーフォルダ (Windows) /ホームフォルダ (macOS) の場所については次の動画をご確認ください。 次の例では、`hello-world`の名前でプロジェクト用のフォルダを作成しています。 - - + + :::info -これから作成するプログラムは、さきほど作成したホームフォルダ (macOS) /ユーザーフォルダ (Windows) の中の`projects`フォルダの中に保存するようにしてください。これは、ドキュメントフォルダなどのフォルダはクラウドストレージサービスによって自動的に同期されることがあり、Visual Studio Codeなどの開発ツールが期待通りに動作しなくなってしまうことがあるからです。 +これから作成するプログラムは、さきほど作成したユーザーフォルダ (Windows) /ホームフォルダ (macOS) の中の`projects`フォルダの中に保存するようにしてください。これは、ドキュメントフォルダなどのフォルダはクラウドストレージサービスによって自動的に同期されることがあり、Visual Studio Codeなどの開発ツールが期待通りに動作しなくなってしまうことがあるからです。 ::: @@ -67,12 +67,12 @@ Visual Studio Codeは、[公式サイト](https://code.visualstudio.com)から `File`メニューから`Open Folder...`をクリックして、先ほど作成したフォルダをVS Codeで開きます。 - - + + :::info diff --git a/docs/1-trial-session/02-html/index.mdx b/docs/1-trial-session/02-html/index.mdx index de23bedd4..f7fa54d7c 100644 --- a/docs/1-trial-session/02-html/index.mdx +++ b/docs/1-trial-session/02-html/index.mdx @@ -13,7 +13,7 @@ Web開発に必ず用いられる言語があります。**HTML** ## HTMLを書き始める -VS Codeの画面左端には、ファイル一覧が表示されています。新しいファイルを作成して、`index.html`と名付けましょう。ファイルの中身を次のようにした後、保存します。保存にはショートカットキー (command + S (macOS) / Ctrl + S (Windows) ) を用いてください。 +VS Codeの画面左端には、ファイル一覧が表示されています。新しいファイルを作成して、`index.html`と名付けましょう。ファイルの中身を次のようにした後、保存します。保存にはショートカットキー (Ctrl + S (Windows) / command + S (macOS) ) を用いてください。 ```html title="index.html" @@ -75,13 +75,13 @@ VS Code上で作成したファイルは`index.html`でした。しかしなが ``` -繰り返しになりますが、HTMLを編集したら、command + S (macOS) / Ctrl + S (Windows) キーを押してファイルを保存します。ファイル名の横に表示されている丸い記号が消えたら保存が完了しています。 +繰り返しになりますが、HTMLを編集したら、Ctrl + S (Windows) / command + S (macOS) キーを押してファイルを保存します。ファイル名の横に表示されている丸い記号が消えたら保存が完了しています。 ![ファイルを保存する](./save-file.png) :::tip[ショートカットキー] -ショートカットキーがうまく押せませんか？command + S (macOS) / Ctrl + S (Windows) はよく、「command (macOS) またはCtrl (Windows) キーとSキーを同時に押す」と言われますが、実は同時に押すと半分くらいの確率で失敗します。command (macOS) / Ctrl (Windows) キーを押した後、キーから指を離す前にSキーを押しましょう。 +ショートカットキーがうまく押せませんか？Ctrl + S (Windows) / command + S (macOS) はよく、「Ctrl (Windows) またはcommand (macOS) キーとSキーを同時に押す」と言われますが、実は同時に押すと半分くらいの確率で失敗します。Ctrl (Windows) / command (macOS) キーを押した後、キーから指を離す前にSキーを押しましょう。 ショートカットキーを使いこなせるようになると、パソコンの操作速度が飛躍的に上昇します。慣れている人がパソコンを操作しているのを見たら、ぜひ後ろから覗き込んでみましょう。便利そうなショートカットキーを使っている人がいたら身に付けるようにすると良いです。 diff --git a/docs/2-browser-apps/01-inspector/index.mdx b/docs/2-browser-apps/01-inspector/index.mdx index faabd18fa..7796f7a91 100644 --- a/docs/2-browser-apps/01-inspector/index.mdx +++ b/docs/2-browser-apps/01-inspector/index.mdx @@ -20,7 +20,7 @@ Google Chrome以外のブラウザにも開発者ツールは搭載されてい ::: -開発者ツールは、command + option + I (macOS) / Ctrl + Shift + I (Windows) キーを押すことにより起動できます。 +開発者ツールは、Ctrl + Shift + I (Windows) / command + option + I (macOS) キーを押すことにより起動できます。 ![開発者ツールを起動した様子](open-inspector.png) diff --git a/docs/3-web-servers/02-linux-commands/index.mdx b/docs/3-web-servers/02-linux-commands/index.mdx index 5c439a2eb..6b7e9aa5b 100644 --- a/docs/3-web-servers/02-linux-commands/index.mdx +++ b/docs/3-web-servers/02-linux-commands/index.mdx @@ -6,7 +6,7 @@ import commandsAnswerVideo from "./commands-answer.mp4"; ## ターミナル -**ターミナル**は、文字を用いてコンピューターと会話するためのソフトウェアです。macOSだと標準搭載のターミナルアプリが、Windowsだと[Windows Terminalアプリ](https://apps.microsoft.com/store/detail/windows-terminal/9N0DX20HK701)が利用できますが、VS Code内蔵のターミナルもなかなか便利です。 +**ターミナル**は、文字を用いてコンピューターと会話するためのソフトウェアです。Windowsだと[Windows Terminalアプリ](https://apps.microsoft.com/store/detail/windows-terminal/9N0DX20HK701)が、macOSだと標準搭載のターミナルアプリが利用できますが、VS Code内蔵のターミナルもなかなか便利です。 VS Code内蔵のターミナルを起動させるには、メニューの`Terminal`から`New Terminal`をクリックします。 @@ -17,7 +17,7 @@ VS Code内蔵のターミナルを起動させるには、メニューの`Termin VS Codeの**コマンド パレット**は、現在VS Code上で使用できる全ての機能を一覧表示する機能です。 {/* prettier-ignore */} -command + shift + P (macOS) / Ctrl + Shift + P (Windows) キーを押すことにより起動できます。 +Ctrl + Shift + P (Windows) / command + shift + P (macOS) キーを押すことにより起動できます。 次の画像は、コマンド パレットを用いて新しいターミナルを作成する例です。コマンド パレットを使用することで、ショートカットキーを知らなくても、キーボードのみでVS Codeが操作できるようになります。 diff --git a/docs/3-web-servers/03-node-js/index.mdx b/docs/3-web-servers/03-node-js/index.mdx index 8d96416cb..ec3196f42 100644 --- a/docs/3-web-servers/03-node-js/index.mdx +++ b/docs/3-web-servers/03-node-js/index.mdx @@ -61,6 +61,12 @@ v22.15.0 ``` + + Windows上での作業は、WSLのターミナルを利用するようにしましょう。 + + macOSの場合、インストールコマンドを実行してターミナルを再起動しても、`nvm`が使用できない場合があります。その場合、次のコマンドを実行してみてください。 @@ -71,12 +77,6 @@ v22.15.0 - - Windows上での作業は、WSLのターミナルを利用するようにしましょう。 - - ## Node.jsでHello World diff --git a/docs/3-web-servers/05-server/index.mdx b/docs/3-web-servers/05-server/index.mdx index f1f5c4da2..969b22180 100644 --- a/docs/3-web-servers/05-server/index.mdx +++ b/docs/3-web-servers/05-server/index.mdx @@ -78,7 +78,7 @@ node main.mjs :::warning[Webサーバーの停止] -サーバーは、クライアントからのリクエストを待ち受けるため、管理者により指示されない限り終了しないソフトウェアとして動作します。Expressで構築したサーバーは、ターミナル上でcontrol + C (macOS) / Ctrl + C (Windows) を押すことで停止することができます。 +サーバーは、クライアントからのリクエストを待ち受けるため、管理者により指示されない限り終了しないソフトウェアとして動作します。Expressで構築したサーバーは、ターミナル上でCtrl + C (Windows) / control + C (macOS) を押すことで停止することができます。 ::: diff --git a/docs/3-web-servers/10-git-github-init/index.mdx b/docs/3-web-servers/10-git-github-init/index.mdx index 19b374bb9..79ab9f8de 100644 --- a/docs/3-web-servers/10-git-github-init/index.mdx +++ b/docs/3-web-servers/10-git-github-init/index.mdx @@ -29,7 +29,7 @@ VS Code標準の機能だけでも多くのことができますが、より便 ### [Git Graph](https://marketplace.visualstudio.com/items?itemName=mhutchie.git-graph) -コマンドパレット (command + shift + P (macOS) / Ctrl + Shift + P (Windows) ) に`Git Graph: View Git Graph (git log)`というメニューが出て見やすい +コマンドパレット (Ctrl + Shift + P (Windows) / command + shift + P (macOS) ) に`Git Graph: View Git Graph (git log)`というメニューが出て見やすい ![GitGragh](./gitGraph.png) diff --git a/docs/3-web-servers/11-git/index.mdx b/docs/3-web-servers/11-git/index.mdx index be86c1be5..8c3a21709 100644 --- a/docs/3-web-servers/11-git/index.mdx +++ b/docs/3-web-servers/11-git/index.mdx @@ -139,7 +139,7 @@ git commit -m "コミットメッセージ"