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

はじめての 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 によって勝手に実行されてしまうのを防ぐためです。自分で作成したフォルダの場合は問題ありません。