windowsでウェブサイト開発入門 PHPでプログラミング3 Visual Studio Codeのインストール

シェアする

こんにちは。

プログラミングの第一歩として、windowsパソコン上にサーバー環境を構築して、簡単なプログラムを作って、ブラウザで表示するウェブプログラミング入門です。

プログラミング未経験の方でも、ウェブサイト開発の体験ができる内容になってます。

第3回目はエディタのインストールです。普段ほかのエディタを使っててそれを使うからいらないという場合、飛ばしても構いません。

でも、Visual Studio Codeは、ファイル一覧表示があり複数のファイルやフォルダからなる開発に便利ですし、何より、コーディング中、候補を表示したり、補完入力できたりと大変便利です。

同様のことができるAtomよりも動作が軽くおすすめです。下図がhtmlのタグの名前による補完の例です。

では、VS codeを導入していきましょう。

過去の講座は↓の通りです。

第1回:概要とウェブサイトの表示される仕組み
第2回:XAMPPのインストールとウェブサーバー起動
第3回:Visual Studio Code(エディタ、略してVS code)のインストール

windowsでウェブサイト開発入門 PHPでプログラミング3 ~ Visual Studio Codeのインストール ~

Visual Studio Codeの紹介

Visual Studio Code(ビジュアルスタジオコード、VS codeと略したりします)は、ソースコードエディタです。テキストファイルを表示・編集することができます。

Windows OSの販売元のマイクロソフトが開発してて、WindowsのほかにもLinux、mac OS用もあります。

デバッグ機能、Gitというバージョン管理ツールが使えます。また、色分け表示(シンタックスハイライト)、文法に沿った補完機能(インテリセンス)などあります。

Visual Studio Codeのインストーラーのダウンロード

まずインストーラをダウンロードしましょう。

マイクロソフトのVisual Studio Codeのウェブページに行きます。

ダウンロードページで、「System Installer」のOSのビット数にあったもの(メモリが8GB以上あれば、間違いなく64bit版です)をクリックします。

OSの処理ビット数がわからないときは記事「Windowsのバージョン、32bitか64bitかを調べる方法」を見てくださいね。

exeファイルを保存します。

インストーラの実行

それではインストールしましょう。

ダウンロードしたインストーラーVSCodeSetup-x64-x.xx.x.exe(xはバージョン番号)をダブルクリックして実行してください。

Visual Studio Codeセットアップウィンドウが開きます。「次へ」でインストールを開始します。

使用許諾契約書が表示されます。確認して「同意する」を選択して、「次へ」で進みます。

インストール先フォルダの指定です。特にこだわりがなければデフォルトのまま「次へ」で進みます。

スタートメニューのショートカットの場所設定。「次へ」で進みます。

追加設定です。エクスプローラーで右クリックして起動できるように、「コンテキストメニューにCodeで開くアクションを追加する」のチェックを入れておきます。また、デフォルトのエディターとして使うなら「サポートされているファイルの種類のエディターとして、Codeを登録する」にもチェックしておきましょう。プログラムソースと思われる拡張子のファイルのダブルクリックでVS codeで開くようになります。

インストールの設定が終わりました。「インストール」ボタンを押すと、インストールが始まります。

インストールが始まります。しばらく待ちましょう。

「Visual Studio Codeを実行する。」のチェックを外して「完了」で閉じます。

スタートメニューにピン留め

起動しやすくするため、スタートメニューにピン留めしましょう。

スタートメニューの「Visual Studio Code」フォルダ → 「Visual Studio Code」を右クリックして、「スタートにピン留めする」をクリックします。

スタートメニューにピン留めされました。

Visual Studio Code 起動確認

スタートメニューのアイコンをクリックして起動しましょう。

ウェルカムウィンドウを閉じます。

右下にマイクロソフトの情報収集方針についての情報ウィンドウが出てたら、×で閉じます。

とりあえず、Visual Studio Codeのインストールは終了です。

次回から、使っていきましょう。

まとめ

今回は、エディタのインストールまで行いました。次回、第4回の講座で、簡単なhtmlの文書を作って、XAMPPのウェブサーバー経由でブラウザに表示してみます。

講座内容:

第1回:概要とウェブサイトの表示される仕組み
第2回:XAMPPのインストールとウェブサーバー起動
第3回:Visual Studio Codeのインストール
第4回:XAMPPの動作確認とVS codeでのプログラムコードの入力

 

この記事が気に入ったら
いいね ! しよう