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