| title | はじめてのWeb開発 |
|---|
import installChromeOnWindowsVideo from "./install-chrome-on-windows.mp4"; import installChromeOnMacVideo from "./install-chrome-on-mac.mp4"; import installVscodeOnWindowsVideo from "./install-vscode-on-windows.mp4"; import installVscodeOnMacVideo from "./install-vscode-on-mac.mp4"; import createFolderOnWindowsVideo from "./create-folder-on-windows.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";
Web開発を始めるには、いくつかのアプリケーションが必要です。学習を始めていく前に、これらのアプリケーションを準備しましょう。
[[Google Chrome]]は、Google社が開発する[[ウェブブラウザ]]です。多くのユーザーに利用されています。他の[[ウェブブラウザ]]を使うこともできますが、この教材では[[Google Chrome]]の使用を前提として話を進めていきます。
[[Google Chrome]]は、公式サイトからインストールできます。公式サイトの指示に従ってインストールを行ってください。
[[Visual Studio Code]]（以下VS Code）は、Microsoft社が開発する[[コードエディタ]]です。多くの開発者に利用されています。
[[VS Code]]は、公式サイトからインストールできます。公式サイトの指示に従ってインストールを行ってください。
これから皆さんはたくさんのプログラムを書いていくことになります。プログラムは他のファイルと扱い方がかなり異なるので、専用のフォルダを作っておきましょう。ユーザーフォルダの中に、`projects`という名前のフォルダを作り、その中にプロジェクトごとのフォルダを作っていくと良いです。
次の動画に従って、ユーザーフォルダの中に`projects`フォルダを作成し、その中に`hello-world`の名前でプロジェクトを格納するフォルダを作成してください。
<video src={createFolderOnWindowsVideo} controls />
:::warning
これ以降作成するプロジェクトを格納するフォルダは、必ず先ほど作成した`projects`フォルダの中に作成するようにしてください。これは、ドキュメントフォルダなどのフォルダはOneDriveなどのクラウドストレージサービスによって自動的に同期されることがあり、[[VS Code]]などの開発ツールが期待通りに動作しなくなってしまうからです。
:::
これから皆さんはたくさんのプログラムを書いていくことになります。プログラムは他のファイルと扱い方がかなり異なるので、専用のフォルダを作っておきましょう。ホームフォルダの中に、`projects`という名前のフォルダを作り、その中にプロジェクトごとのフォルダを作っていくと良いです。
次の動画に従って、ホームフォルダの中に`projects`フォルダを作成し、その中に`hello-world`の名前でプロジェクトを格納するフォルダを作成してください。
<video src={createFolderOnMacVideo} controls />
:::warning
これ以降作成するプロジェクトを格納するフォルダは、必ず先ほど作成した`projects`フォルダの中に作成するようにしてください。これは、ドキュメントフォルダなどのフォルダはiCloudなどのクラウドストレージサービスによって自動的に同期されることがあり、[[VS Code]]などの開発ツールが期待通りに動作しなくなってしまうからです。
:::
先ほど作成したhello-worldフォルダを[[VS Code]]で開くには、File > Open Folder... を選択します。
:::info
最初にフォルダを開いたとき、Do you trust the authors of the files in this folder?と聞かれるのは、インターネットからダウンロードした悪意のあるフォルダを[[VS Code]]で開いたとき、[[VS Code]]によって勝手に実行されてしまうのを防ぐためです。自分で作成したフォルダの場合は問題ないので、Yes, I trust the authorsを選択してください。
:::