メインコンテンツまでスキップ

はじめてのWeb開発

Web開発を始めるには、いくつかのアプリケーションが必要です。学習を始めていく前に、これらのアプリケーションを準備しましょう。

Google Chromeをインストールする​

Google Chromeは、Google社が開発するウェブブラウザです。多くのユーザーに利用されています。他のウェブブラウザを使うことも出来ますが、この教材ではGoogle Chromeの使用を前提として話を進めていきます。

Google Chromeは、公式サイトからインストールできます。公式サイトの指示に従ってインストールを行ってください。

Visual Studio Codeをインストールする​

Visual Studio Code（以下VS Code）は、Microsoft社が開発するソースコードエディタです。多くの開発者に利用されています。

VS Codeは、公式サイトからインストールできます。公式サイトの指示に従ってインストールを行ってください。

プロジェクトを格納するフォルダを作成する​

これから皆さんはたくさんのプログラムを書いていくことになります。プログラムは他のファイルと扱い方がかなり異なるので、専用のフォルダを作っておきましょう。Windowsの場合はユーザーフォルダの中に、macOSの場合はホームフォルダの中に、projectsという名前のフォルダを作り、その中にプロジェクトごとのフォルダを作っていくと良いです。ユーザーフォルダあるいはホームフォルダの場所は次の動画で確認してください。

次の動画のように、projectsフォルダを作成し、その中にhello-worldの名前でプロジェクトを格納するフォルダを作成してください。

備考

これ以降作成するプロジェクトを格納するフォルダは、先ほど作成したprojectsフォルダの中に作成するようにしてください。これは、ドキュメントフォルダなどのフォルダはクラウドストレージサービスによって自動的に同期されることがあり、VS Codeなどの開発ツールが期待通りに動作しなくなってしまうからです。

VS Codeでプロジェクトフォルダを開く​

先ほど作成したhello-worldフォルダをVS Codeで開くには、File > Open Folderを選択します。

備考

最初にフォルダを開いたとき、Do you trust the authors of the files in this folder?と聞かれるのは、インターネットからダウンロードした悪意のあるフォルダをVS Codeで開いたとき、VS Codeによって勝手に実行されてしまうのを防ぐためです。自分で作成したフォルダの場合は問題ないので、Yes, I trust the authorsをクリックしてください。