【初めてのプログラミング講座！】Webエンジニア入門　２．VScodeの設定とhello world!

どうもこんにちはジョリビーです。前回に続きプログラミング講座をやっていきます。いよいよ、「hello world!」をブラウザ上に表示していきたいと思います。

前回の記事はこちら

テキストエディタのインストール

前回まででPHPのプログラミングが可能な状態になっているわけですが、そのプログラミングのコードを入力（コーディングと言います）するソフトウェア（テキストエディタと言います）も用意しておきたいところです。
最悪メモ帳でもコーディングは出来ますが、プログラミングはメモ帳よりもコーディングするのに便利な機能や高度な設定が可能なテキストエディタをインストールして使います。

テキストエディタには無料で使えるものから有料のものまで様々なソフトがありますが、ここでは、Visual Studio Code（略してVScode）を使っていきたいと思います。

VScodeはMicrosoftが開発した無料のテキストエディタで、直感的で扱いやすくプラグインも多く出ており、初心者からプロまで多く愛されている人気のテキストエディタです。

こちらから今すぐダウンロードをクリックすると、ダウンロードページが表示されます。

ご自分の環境にあったビット数のインストーラをダウンロードしてください。

ダウロードしたexeファイルをクリックするとインストーラが立ち上がります。指示に従って次へをクリックしてください。

インストールを開始します。

終わったら完了をクリックしてください。

完了するとVScodeが立ち上がります。

VScodeに拡張機能を入れる

VScodeに幾つか便利な拡張機能を入れていきます。

Japanese Language Pack for Visual Studio Code

言語が英語のままだと扱いにくいと思いますので、まずは日本語化をしてみます。

左側の四角いブロックのマークを押しmarketplaceを表示させます。その後、入力欄にjapanese打つと日本語化のプラグインが一番上に出てきますのでインストールします。

次に、上部のView ＞ Command Paletteの順にクリックします。

続いて、Configure Display Languageを選択します。

続いて、jaをクリックすると、再起動するように聞かれるので再起動すると日本語化されます。

PHP Intelephense

こちらもPHPを書くときに必要なので、入れてください。ソースコードを書くときに補助してくれたり色々と役立ってくれます。

他にも入れるべき拡張機能はあるにはありますが、いったんこれだけで進みます。

hello world!と出してみよう

これで、最低限の準備は整いました。ここまで来たら、自由にプログラミングが可能です。ブラウザ上に「hello world!」と出してみたいと思います。
まずは、作業用のフォルダをCドライブに作ります。分かりやすいようにフォルダ名をjollibeeにします。

続いてVScodeのフォルダーを開くをクリックして先ほど作ったjollibeeフォルダを開きます。

次に新しいファイルを「hello_world.php」というファイル名で作成します。

作成したら、実際にコードを書いていきます。

と入力してみましょう。できれば入力はコピーペースではなく。直接入力してみてください。

最初ですので丁寧に説明すると、1行目がここより先のソースコードがphp言語で記述されていることを示す文になります。今後、phpを記述する際には必ず使います。また、毎回1行目に書くわけではないのでご注意ください。

2行目のechoが何かを画面に出力せよとコンピュータに指示を出す命令文です。 またechoで出力する「何か」は文字（文字列という）として扱われます。
また、コンピュータに何らかの文字列であると認識させせるために、文字列をダブルコーテーションで囲います。ここでは「hallo world!」をダブルコーテーションで囲っています。
最後に、このecho文の文末にセミコロンを付けます。このセミコロンですが、初心者はよく忘れがちなので注意が必要です。

入力したら、下の画像のように赤い矢印のところに注目してみてください。

これらは、hello_world.phpファイルが編集中であることを示しています。Ctrl+Sのショートカットキーで保存できるので、保存するとマークが消えるのを確認できると思います。

次に、上のメニューからターミナル＞新しいターミナルを選択し、ターミナルを開きます。

すると、VSvodeの下部にコマンドプロンプトのようなコマンドを入力できる枠が出てきます。

そして、下記のコマンドを入力してください。

こちらはビルドインウェブサーバーと言い、要するにWebサーバが立ち上がるコマンドになっています。

ここに出てきたhttp://localhost:8000をChromeでもなんでも構いませんのでブラウザで表示してみてください。こんな画面になっていれば正常にwebサーバが立ち上がっています。ちなみに表示されているのは「表示するモノが無いよ」っていうエラー画面です。

そこで、作成したファイル名「hello_world.php」をURLに/（スラッシュ）を付けて追加してみてください。　

これで無事に「hallo world!」がでましたね。おめでとうございます。

ちなみに、http://localhost:8000はあくまであなたのPC上のC:ドライブのjollibeeフォルダをWebサーバに見立てて表示しています。スマホからアクセスして見てみようと試みても表示されません。

まとめ

いかがでしたでしょうか。思ったよりも簡単だったんじゃないでしょうか。次回からはもっとPHPプログラミングの基礎的な部分を学習できるような記事を書いていこうと思います。ではまた！