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

Windows10
この記事は約5分で読めます。
スポンサーリンク
スポンサーリンク

こんにちは。ウェブプログラミング入門です。

プログラミングの第一歩として簡単なプログラムを作り、Windowsパソコン上にサーバー環境を構築して、ブラウザで表示できるようになる方法を説明していきます。

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

第3回目はエディタのインストールです。Visual Studio Code (VS code) を使っていきます。

Visual Studio Codeはファイル一覧表示があり複数のファイルやフォルダからなるエディタです。コーディング中に候補を表示したり、補完入力できたりと開発に役立つ機能が満載のプログラマーにとっては大変ありがたいツールです。

「既にほかのエディタを使っているので、新しいものはインストールしたくない。」という場合には、もちろんインストールして頂かなくても構いません。ただ「Visual Studio Codeについて聞いたことがない」という場合には、とても便利なツールなので、一度試してみることをおすすめします。ご利用のエディタとの比較もできますよ。

たとえば、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のインストールはここまでで終了です。

次回から、実際にこのツールを使っていきましょう!

まとめ

今回は、Windowsでウェブサイト開発入門 PHPでプログラミング3として、Visual Studio Codeのインストールまで行いました。

前回に引き続き必要なツールの準備をしてきましたが、次回の第4回の講座では、いよいよ簡単なhtmlの文書を作って、XAMPPのウェブサーバー経由でブラウザに表示してみます。

それでは次回もお楽しみに!

 

講座内容:

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

 

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

コメント