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

はじめてのWeb開発

Google Chromeのインストール​

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

Google Chromeは、公式サイトからインストールできます。まだインストールが終わっていない場合はインストールしておきましょう。

Visual Studio Codeのインストール​

Visual Studio Code (以下VS Code) は、Microsoft社が開発するテキストエディタです。多くの開発者に使用されています。

Visual Studio Codeは、公式サイトからインストールできます。まだインストールが終わっていない場合はインストールしておきましょう。

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

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

次の例では、hello-worldの名前でプロジェクト用のフォルダを作成しています。

備考

これから作成するプログラムは、さきほど作成したホームフォルダ (macOS) /ユーザーフォルダ (Windows) の中のprojectsフォルダの中に保存するようにしてください。これは、ドキュメントフォルダなどのフォルダはクラウドストレージサービスによって自動的に同期されることがあり、Visual Studio Codeなどの開発ツールが期待通りに動作しなくなってしまうことがあるからです。

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

FileメニューからOpen Folder...をクリックして、先ほど作成したフォルダをVS Codeで開きます。

備考

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