プログラムを書く～Visual Studio Code 編

ウルジマク

2024年6月6日 23:25

はじめに

前回記事で、

「2.プログラムを書くソフト」
と
「3.プログラムを実行する環境」

で、幅広く使われている、「Visual Studio Code」

通称「VSCode」のインストール手順を示していきます。

独学ではじめてみよう、

ちょっと自分のパソコンでもインストールしてみようかな、

と考えた方は以降の手順を参考にインストールしてみてください。

※ 以降の手順は、2024/6/2 時点の情報です。誤りや異なる箇所、古い箇所がある場合、ご連絡いただけると嬉しいです。

VSCodeをダウンロード

以下URLをクリックします。

https://code.visualstudio.com/download

VSCodeはMicrosoft公式のものですので、ご安心ください。
※ 今後も公式サイトからのダウンロードを心がけてください。
参考までに、以下Microsoftサイトを貼っておきます。

https://azure.microsoft.com/ja-jp/products/visual-studio-code

以下Webページが開きます。

Windows の方は、向かって左側の「Windows 10, 11」をクリックします。

Mac の方は、向かって右側の「macOS 10.15+」をクリックします。

ダウンロードが終わると向かって右上に、ダウンロードしたファイルが

表示されます。表示されない場合、右上の ↓ マークをクリックします。

Windowsの場合。「VSCodeUserSetup-x64-x.xx.x.exe」(x64以降のxはバージョン番号)

これでダウンロードは完了です。

VSCodeのインストール

Windows の場合

ダウロードした「VSCodeUserSetup-x64-x.xx.x.exe」をクリックまたは、
ダブルクリックで、インストーラーを開きます。

「同意する(A)」を選択し、「次へ(N) >」をクリックします。

「次へ(N) > 」をクリックします。

必要なものがあれば、チェックONにします。
「次へ(N) >」をクリックします。

スタートメニューフォルダーの指定。元々入っている状態を変更する必要は通常ありません。

「次へ(N) > 」をクリックします。

「インストール(I)」をクリックします。

インストールが開始され、インストールされます。完了するまで待ちます。

セットアップが完了します。
「完了(F)」をクリックします。

上記のようにVSCodeが起動すれば、インストールは成功しています。
表示されている「Release Notes:」は、「×」をクリックして
閉じておきましょう。

Macの場合

~~※ Macを持ち合わせていないため、画像はありません。いつかMacを手に入れたら更新します…~~
Mac Bookが我が家に来ましたので、画像をつけて更新します。

VSCode-darwin-universal.zip のファイルは、「ダウンロード」にあります。

VSCode-darwin-universal.zip をダブルクリックすると、Visual Studio Code.app が解凍されます。続けて、Visual Studio Code.app をクリックして選択状態にします。

ダウンロードした「VSCode-darwin-universal.zip」をFinderで開き、ダブルクリックします。

フォルダ内に「Visual Studio Code.app」ファイルが解凍されますので、
「アプリケーション」に入れます。

F4(または、fn + F4)キーを押します。または、「アプリケーション」に VS Codeが追加されていれば、インストール完了です。
「Visual Studio Code」をクリックして起動します。

上記のようにVSCodeが起動すれば、インストールは成功しています。
表示されている「Release Notes:」は、「×」をクリックして
閉じておきましょう。

VSCodeを日本語化

インストール時の既定値は英語です。英語では不便な方は、
拡張機能にて日本語化しておきましょう。

向かって左側の■４つのアイコン(拡張機能)をクリックします。
EXTENTIONS: MARKETPLACE 下のボックスに「japan」と入力します。
「Japanese Language Pack for Visual Studio Code」の
「Install」をクリックします。

日本語化パックの拡張機能が完了すると「Change Language and Restart」が表示。

向かって右下に表示される、
「Change Language and Restart」をクリックします。

VSCodeが一度閉じて、再度自動的に開きます。(これを再起動と言います)

メニューやようこそなどが日本語になっていることが確認できたら日本語化は完了です。

プログラムを書いて実行する準備

現状でもプログラムを書くことは出来ますが、実際に実行することが出来ません。
日本語化する際に利用した、VSCodeの拡張機能を更に追加することで、手軽にプログラムを実行する環境を準備できます。

拡張機能 Live Preview をインストール

Microsoft純正の拡張機能「Live Preview」をインストールしておくことで、HTML/CSS、JavaScript の実行環境を準備することが出来ます。

向かって左側の■４つのアイコン(拡張機能)をクリックします。
拡張機能: マーケットプレース下のボックスに
「Live Preview」と入力します。
「Microsoft」社製であることを確認します。
「Live Preview」の「インストール」をクリックします。

「インストール」のボタンが消え「無効にする」「アンインストール」のボタンが表示。

「インストール」ボタンが消え「無効にする」「アンインストール」ボタンが表示されたら、「Live Preview」拡張機能のインストールは完了しています。

「拡張機能: Live Preview」タブの右端の「×」をクリックして、閉じます。
向かって左上のファイルが2枚のアイコン(エクスプローラー)をクリックします。

ファイル(F) > 新しいテキストファイルをクリックします。

「言語の選択」をクリックします。
テキストボックスに「html」と入力します。
「HTML (html)」をクリックします。

上記のように、新規作成したファイルにHTMLを入力します。
内容は以下にコードを用意していますので、入力が苦手な方はコピー＆ペーストして利用してください。

<html>
    <head>
        <title>テスト</title>
    </head>
    <body>
        <h1>こんにちは、世界！</h1>
    </body>
</html>

ファイル(F) > 名前をつけて保存… をクリックします。

任意のフォルダを選択して、
「helloworld.html」 > 保存(S) をクリックします。

「helloworld.html」ファイルが保存されることを確認します。
向かって右上の「プレビューの表示」アイコンをクリックします。

向かって右側に、「こんにちは、世界！」と表示されれば、
Live Preview は正常にインストールされています。

PHP言語の実行環境を準備する

最も手軽にプログラミング言語の環境を整えることができるのは、PHP言語です。

ここではまずPHP言語でプログラミング実行環境の導入方法をご紹介します。

※ 他のプログラミング言語の導入方法は別記事で紹介していきます。

PHP実行環境準備 - Windows の場合

PHP公式サイトにアクセスします。

「Windows downloads」をクリックします。

「VS16 x64 Thread Safe」のZipをクリックして、Zipファイルをダウンロードします。

ブラウザの右上にzipファイルのダウンロードの進捗状況が表示されます。完了したら、zipファイルを解凍します。
解凍は、zip解凍ソフトを使用するか、zipファイルの中に入って、中のフォルダーをコピーし、一つ上の階層に戻って、フォルダごと貼り付けをします。

zipファイルから取り出したフォルダをコピーします。

コピーしたフォルダを、C: ドライブ直下に貼り付けます。貼り付けたフォルダの名前を「php」に変更します。

VSCodeで、向かって左側の■４つのアイコン(拡張機能)をクリックします。
拡張機能: マーケットプレース下のボックスに
「PHP Server」と入力します。
発行者が「brapifra」氏であることを確認します。
「PHP Server」の「インストール」をクリックします。

「インストール」ボタンが消え「無効にする」「アンインストール」ボタンが表示されたら、「PHP Server」拡張機能のインストールは完了しています。

歯車 > 「拡張機能の設定」をクリックします。

「Phpserver: PHP Config Path」に「C:\php\php.exe」を入力します。

「ファイル(F)」 > 「新しいファイル…」をクリックします。

ファイル名を「hello.php」と入力します。

「hello.php」ファイルの保存場所を決めます。画像では、「C:\pgwork\menta\htmlsample」というフォルダ配下に配置しています。

何も記述されていない、「hello.php」ファイルが開きます。

以下、コードを貼り付けます。

<html>
<head>
	<title>Hello PHP</title>
	</head>
<body>
	<h1>Hello World!</h1>
	<p>
		<?php
			// PHP言語で文字を表示
			echo "Hello, PHP. ";
			// PHP言語で現在日付を表示
			echo date("Y/m/d");
		?>
	</p>
</body>
</html>

「ファイル(F)」>「保存」をクリックするか、Ctrl + S でファイルを保存します。ファイルを保存すると、タブに表示されていた、「hello.php ●」が「hello.php」に表示が変わりますので、●が取れたことによって保存出来ていることが確認できます。

「ファイル(F)」>「フォルダーを開く…」でフォルダーを開き直します。

「hello.php」を保存したフォルダーを選択して、「フォルダーの選択」をクリックします。

「親フォルダー 'XXXXX' 内のすべてのファイルの作成者を信頼します」にチェックを入れます。

「はい、作成者を信頼します」をクリックします。

「hello.php」ファイルをクリックします。

向かって右上の青色のアイコン「PHP Server: Serve project」をクリックします。

ブラウザが自動起動し、「Hello World!」と「Hello, PHP. 現在日付」が表示されます。

PHP実行環境準備 - Mac の場合

PHPをインストールする前に、パッケージマネージャHomebrewをインストールします。
Homebrewは、プログラミングを今後する上では必要になるツールですので、インストールしておいて損はありません。

Homebrewの公式サイト。
インストールコマンドをコピーアイコンをクリックしてコピーしておきます。

Homebrewの公式サイトにアクセスします。

次に、ターミナルを開きます。
Finder > アプリケーション > ユーティリティ > ターミナルをクリックします。

Homebrew のサイトでコピーしたコマンドをターミナルに貼り付けて、Enterキーを押し、コマンドを実行します。

実行が止まり、管理者パスワードの入力を求められます。ロック解除時のパスワードを入力し、Enterキーを押します。パスワード入力時、打った文字は何も表示されませんが、パスワードは入力されます。打ち間違いに注意しましょう。

RETURN/ENTER キーを押して続けるか、そのほかのキーを押して中止するか、と聞かれます。続行するため、Enterキーを押します。

上記表示がされればインストール成功です。画像の選択部分を選択します。
※ ulujimac は私のユーザー名ですので、各々表記が違います。

(echo; echo 'eval … 以降の記述部分を選択し、コピーします。

コピーしたものを貼り付け、Enterキーを押します。
実行に成功すると何も表示されずに、入力待ちに戻ります。

コピーしたものを貼り付け、Enterキーを押します。無事実行されれば、何も表示されず入力待ちに戻ります。
エラーが出た場合、選択し損ねている可能性が高いです。もう一度選択し直して、貼り付けて実行し直してみてください。

brew --version を実行後、Homebrew のバージョンが表示されれば、
Homebrewのインストールは成功しています。

brew --version と打った後、Enterキーを押すと、Homebrew 4.x.xx のようにバージョンが表示されれば、正しくインストールされています。

brew install php

上記コマンドを打ち、Enterキーを押します。画像のように、文字がたくさん表示されます。しばらくPHPのインストール実行中ですので、終わるまで待ちましょう。

画像のように入力待ち状態になったら、インストールは完了です。

php -v

上記コマンドを打ち、画像のような表示がされれば、PHPが実行可能な状態になりました。

VSCodeで、向かって左側の■４つのアイコン(拡張機能)をクリックします。拡張機能: マーケットプレース下のボックスに「PHP Server」と入力します。発行者が「brapifra」氏であることを確認します。「PHP Server」の「インストール」をクリックします。

「ファイル」 > 「新しいファイル…」をクリックします。

「ファイルの種類を選択するか、ファイル名を入力してください…」に「hello.php」と入力します。その後、Enterキーを押します。

画像は、「work」というフォルダを作成して、hello.php の保存場所を指定しています。

hello.php の保存場所を指定します。「ファイルの作成」をクリックします。

何も記述されていない、「hello.php」ファイルが開きます。

以下、コードを貼り付けます。

<html>
<head>
	<title>Hello PHP</title>
	</head>
<body>
	<h1>Hello World!</h1>
	<p>
		<?php
			// PHP言語で文字を表示
			echo "Hello, PHP. ";
			// PHP言語で現在日付を表示
			echo date("Y/m/d");
		?>
	</p>
</body>
</html>